Last year – or even years before, depending on the web traffic stats you read – total web traffic from mobile devices, such as smart phones, tablets, and others tipped over the 50% mark. That means more people are using their mobile devices rather than full size Macs/PCs for web access. And that trend will continue; there is no going back. That 50% mark may not mean much at first glance, but it could mean a whole lot when it comes to your web presence.
If your site is not mobile compatible, users may just leave when they see that your home page displays too wide on their tiny screens, or with the content jumbled because the website doesn’t know how to react to a mobile device.
The site mt.gov as seen at 768 pxiels wide in the “Responsive View” window in Firefox (click to see fullsize).
Website compatibility for mobile devices is called “responsiveness.” That is, the website responds to the format of the device being used. Back in the bad old days of the web, websites were static in that respect; you got what was there, in one format. These days, site elements and content blocks and images should “shuffle” down into a smaller width (for tablets) or long list (for narrow screen phones), but still be readable and useable. Perfect mobile responsiveness is difficult to get working correctly on the myriad of mobile devices out there, and they change constantly, but it’s important to get as far as you can.
With WordPress, your site’s mobile compatibility depends on not the backend where you edit pages and posts, but with the “theme” – the front end design – which users see. Most modern themes are responsive out of the box. In fact, it can be difficult to find a theme that is not responsive. Check the docs or the support site where you got your theme, either the site where you bought it, or the theme listing for free themes from WordPress.org: https://wordpress.org/themes/
How can you check on your site’s responsiveness? The best thing to do is the easiest – take a look at your site with your smart phone or table. Check all the pages for a readable layout.
But you should also use built-in responsive testing tools in a web browser if you don’t have a big collection of mobile devices (like most of) to check with. All modern web browsers – Firefox, Chrome or Safari, Internet Explorer and Opera – have built in tools for testing websites, and these include tools for testing mobile responsiveness. So you can test the responsiveness – how it “responds” to the changes in devices – of your site right in your web browser. (These tools of course, work with any site, no matter how the site is built, whether WordPress, another Content Management System, static HTML, or PHP.)
The “Explore Montana” image issue at 360px wide (click to view fullsize)
For this example, I’ll use Firefox. It’s a popular browser, easily installed alongside any other browser you use. If you want to stay with the browser you’re using, check out how to use the developer tools in your browser at the links above.
In Firefox, go to the site you want to test. I’m using the Montana State government site as an example. And then be sure you can see the Developer Toolbox menu by selecting “Toggle Tools” from the Web Developer menu (under “Tools” on OS X or “Firefox” on Windows).
And then go to Tools > Web Developer > Responsive Design View. This will black out part of the Firefox window, except for a box inside that shows you the responsive view. You can now adjust the size of the viewport with a dropdown menu for different device widths. This allows you to emulate lots of different device widths to test how your site (or any site) “responds” to the changes in devices.
As you can see from the display, 1280×600 and above is considered full size. But switch to 800 pixels wide and you begin to view the site as a tablet user would see it. Switch again to 768 pixels wide for a slightly smaller tablet view, and you can see the content in the main box rearranges itself, and the top menu switches to an “hamburger” menu that is more easily used for navigation on smaller screens.
Image gallery issues #1 (click to view fullsize)
Switch again to 360 pixels wide, and the content again rearranges itself. And at this point, we see that mt.gov has some issues with mobile display: the main background image is no longer proportional and does not shrink vertically when it does shrink horizontally, so the image is squished. Some other images flow outside their containers.
Realize that a perfect responsive view for your site can be difficult to get, as there are many different mobile devices and screen sizes and different web browsers can display sites differently because of small code differences; but you can detect and fix the most obvious issues with responsiveness with these browser tools.
At this point, you can also look at the source of the page by right-clicking in the view window and selecting “Inspect Element.” This opens up the rest of the developer tools for you, and you can see the actual website code that is producing the webpage. This part of the different web browser developer tools has long been in use, even before website responsiveness was a big deal. (You can select “Inspect Element” at any point, really, even outside of the Responsive Design View, to examine any webpage.)
If we look at the code, we can see that the ‘Explore Montana” image has a fixed width that is wider than the device width, and that’s why the image flows outside the screen to the right. Other images in the site have image widths set as percentages or as max-width values, and that allows the images to respond and resize to device widths.
Image gallery issues #2 (click to view fullsize)
Farther down, we can see that the Photo Gallery also flows outside the device viewport. (Image gallery issues #1) But if you use the editing feature of developer tools and change that width percentage from 50% to 40%, you can see that the images size correctly. (Image gallery issues #1).
So, in other words, you can test your site for responsiveness, and also test changes on the fly to each site element that you find is not responsive. (You can use the developer tools in the same way for other browsers.) Now, those code changes do not change the actual code in your website; they only change the display of the site in the browser in front of you. Once you test the changes, you can make the actual changes in your website to reflect the changes you want.
And those changes to a sites’ responsiveness and CSS have to be made with what are called media queries. Those are specific calls made to the website code by each devices’s browser for the screen width. If your site is mostly responsive now, your CSS will already have media queries. If you’re starting from scratch with a site that is not responsive and need to make it responsive, you will have to add the most basic media queries to your CSS and work from there. For an outline of media queries, see Using media queries – mozilla.org.
So give it a try, and realize that perfect responsiveness is difficult, but at very least, you can be sure your site is mostly viewable on mobile devices, since mobile Internet is not going away.