SCKLS Logo

Issue #5

2/9/2024

The View from a Mobile

Hello, librarians! 


While we librarians usually view and edit the library’s website on a desktop computer or laptop screen, chances are that a significant (and ever-growing) number of people access their library’s website on their phones.


Here are a few tips on how to see what your users see - without using your own phone - and decide whether you need to make a few changes.


  • Sharon Barnes, SCKLS Technology Consultant

By the Numbers

Statistics from January 2024 indicate that people using mobile devices account for about 59% of all internet traffic.


Closer to home, a quick and very unscientific sampling of devices used to access eight SCKLS-hosted library websites shows an average of page views on...



  • computers - 56.2%
  • mobile devices - 38.3%
  • unknown devices - 4.2%
  • tablets - 1.4%  

However, in three of those eight cases, mobile access beat out computer screen access!

Website Responsiveness

Fortunately, all modern WordPress themes are designed to be responsive – that is, to automatically scale down on smaller screens.  So the hard work is already done for you, but that doesn’t guarantee that it will look the same.

What changes as a website is resized for smaller screens?


Two main things to consider:


1) Menus are compressed behind "hamburger" (three horizontal lines) or "kabob/meatball" (three vertical dots) icons. Mobile users will be familiar with the need to tap those icons to expand the menu, but this means that your carefully curated navigation menu is no longer front and center.


2) Sections of the website are not only sized down, but often rearranged, so the visual site structure is changed. You may want to review and possibly rethink what is displayed, especially on the front page. One major change in mobile view is that sidebars are moved below the main content of the page.

Three Ways to See Your Site

In a Browser


Here’s a quick trick to see what your site looks like to mobile users, without looking it up on your phone… just resize your browser window!

While viewing your website's home page, click on the Restore Down icon. Then drag one side of the window so it narrows more and more.

You will see changes at 'breakpoints' - standard pixel widths for monitors, tablets and phones.


Scroll up and down to see what it looks like, and to make sure that the elements still display well and are easy to find.

Check While Editing


If you're using the block editor, there's a built-in way to see how any page or post will look before you publish it! (If you're still using the classic editor, watch for more information in a future newsletter.)

At the upper right of the screen, near the blue Publish/Update button, find the computer screen icon.


Just choose the Mobile option to view your work in that layout. You can even scroll up and down to see the whole page or post.

In the Customizer


You can dig a bit deeper and view your whole site in the Customizer. The main purpose of the Customizer is to make theme and appearance changes, but it's an easy window into different views of your site.

Go to Appearance > Customize, and you'll see three device icons at the bottom of the left column.


Choose the desktop, tablet or mobile views to see your fully-functional site in those sizes. Here, you can scroll up and down, click to expand the menu, and move from page to page.

So What?


The priority for your site is to make it easy for people to find the information they need!


When seeing your site as many of your users see it, you may find that a few changes will be useful.


  • If you have a slider or boxes at the top of your home page that are tedious to scroll past and don't contain critical information, you may be able to hide them in the mobile view.


  • If your home page displays several recent posts, you may choose to show only one or two.


  • You may need to move around various elements or widgets in sidebars so the first things people see are the most important ones.


  • Consider putting a full or partial menu in a sidebar or footer, so users don't have to expand a hamburger menu icon.

As always, if you have any questions or concerns about your website,

please reach out to me at sharon@sckls.info.


If you have missed any previous issues, you can now read them online.

Sharon Barnes, SCKLS Technology Consultant

sharon@sckls.info

1-800-234-0529 x135