Articles & Columns » Words on WordPress

Below are two of my Words on WordPress articles. My archives are here and you can subscribe to my RSS feed with your feed reader or by by email.

Words on WordPress: Mobile Compatibility

April 1st, 2016

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 in the "Responsive View" window in Firefox

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)

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)

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)

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.

StudioPress Theme of the Month

Words on WordPress: Basic Utility Plugins

March 21st, 2014

I wrote an earlier article on good basic plugins that I always use in WordPress sites at Words on WordPress: Basic Plugins for your WordPress Site. Those plugins add security, help with SEO, add a contact form and more. But there is another group of plugins that I use much of the time, and they are utility plugins and work in a utilitarian sense, meaning they help analyze, configure, or maintain WordPress and some functions of your hosting account.

These plugins are a more geeky than the others I mentioned in my previous articles, but they can be very handy if you’re willing to learn how they work and how to use them. These are a few that I use regularly in my own sites and WordPress sites for other people.

(As always, it’s easy to search for and install plugins from the plugin directory at WordPress › WordPress Plugins, or from your dashboard. But if you install a plugin from elsewhere the web, be very careful; there are stories of malicious plugins being distributed from sites other than the official WordPress plugin site.)

Reveal IDs is a very simple plugin does just that: it shows you page, post and media ID numbers in the listings so you can get the ID. The IDs were once included in older versions of WordPress, but were removed to make the interface cleaner. But sometimes you still need to find the page or post ID in order to work with templates and widgets and queries, among other things. So if you need to see and know IDs for posts, pages, comments, try Reveal IDs.

plugin-code

One of my most-used utility plugins is for managing MySQL databases called Adminer. The author of the WordPress plugin took a non-WordPress php utility called Adminer from adminer.org and turned it into a plugin called Adminer. What does Adminer do? WordPress uses MySQL to store the content and settings for your website, and Adminer gives you an easy way to look at the database. With Adminer, you can make changes and manage your MySQL database, such as make manual backups and other functions. It’s a good idea not to make changes to your database with Adminer unless you have experience, because you can very easily damage your database and take your site down. Adminer or a similar MySQL management utility is probably available in your hosting Cpanel, but many times I will use Adminer rather than get into Cpanel for a quick look at the database. Adminer is great for making a quick database dump or backup, too, before making changes to the database.

Do you need to run complex searches of the post, page and comment content of your site? A great plugin is Search Regex. You don’t have to use grep when using Search Regex, but you can. I use this plugin many times when I move a site from one domain to another and need to change URLs of images and other links. Or simply scan for words you nee to replace. Or, worst case, if you’v been hacked, search all content for spam links. Be careful with this plugin, and use Adminer above to make database backups before making major changes to your content.

Redirection is a plugin that manages 301 redirections, but it does much more than that. The plugin also logs 404’s Redirection. I use this plugin on new sites to log 404’s and look for bad links and missing images. I often leave this plugin in place on a site so I can check back in later. Be sure and check all the options for the plugin; one default option I don’t like is URL Monitoring that monitors post and page permalinks for changes. I don’t like that automatic feature and always disable it. And be sure to set the log expiration to just a few days; default is no expiration, and you can end up with huge database tables from logs.

There are a few very small plugins I made for myself. One keeps me logged in for a year into a WordPress site so I don’t have to keep logging in. This is really only good for single user sites and sites I develop on my own servers. And another plugin gives me a system overview of server stats, like uptime, memory usage, php version, and more. For shared hosts, I like to be able to see how long the server has been up without having been restarted, see how much memory WordPress is using, and more.

Below are links to the source code for each plugin. When you click the link, the code will be in a pop-up window. Cut and paste the code into a plain text file and save it with the link title as the file name, i.e. system-overview.php or keep-me-logged-in.php. Drop the php file into your plugins folder (there is no need to put the file into a folder) with FTP and then go into your site and activate it. If you for some reason get a white screen, delete the file via FTP, and be sure you created the file in a plain text editor with a unicode character set.

System Overview: system-overview.php

Keep Me Logged In For a Year: keep-me-logged-in.php

StudioPress Theme of the Month

Read more Words on WordPress articles, or go to my Archives