WordPress — Ease of Use Guidelines

In this article we will look at the often-overlooked subject of making sure your WordPress site is easy to use. Now this may be a slightly subjective topic but there are some general guidelines that can be followed in order to enhance how users approach, navigate, and use your WordPress website. The “ease-of-use” subject can also be leveraged into how you as a site administrator maintain your site over time.

The term “ease-of-use” can mean many things to many users. A lot of it can be influenced by the browser and operating system that your site visitors use to access your content; so some aspects of this topic may be outside your control. Screen readers for the visually impaired, for example, are generally something that a web developer never thinks about, and that is a fair statement. However, in this article we will try to keep our “ease-of-use” advice within the realm of what we can easily control and manage.

First topic to look at here is that of responsiveness. Basically, it means that your website can easily adjust its content and layout depending on the device (iphone, tablet, Android device, laptop, desktop, etc.) being used to access it. Most modern WordPress themes will have this responsive capability built-in, but just in case you have an older theme or happened to select one that is not responsive-enabled you should be aware of this modern feature requirement.

Having said this, I have yet to find a WordPress theme that is 100% responsive on all devices. So finding one that is 75% responsive — an arbitrary number — should be a minimum threshold. However, gauging this percentage level is another challenge in itself. The best way to do this is to install a theme you’re interested in on a test environment and try it out on a few browsers with their different display options. If you like what you see in your tests you can continue to use the theme and fine-tune it with CSS if needed. Figure 1 and figure 2 show sample sites in Firefox being displayed in iPhone 6 layout and iPad horizontal layout of respectively.

Responsiveness in mobile devices is going to be, if not already, one of the top requirements for web development in the coming years. As new devices change their display dimensions on a regular basis you want to ensure your website can keep in step with these changes as much as possible. As mentioned above, you can fine-tune your site with CSS (Cascading Style Sheets) directives as well. If your theme cannot handle a certain aspect of the display in a responsive manner then you want to be sure to look into the “@media” CSS directive as a way to control it. The basic sample code below turns off a class called “normal_home” when the media display has a maximum width of 667 pixels; which is basically the width of an iPhone display. But since the directive is based on the width of the display and not the specific device this will have an effect on any device that is not wider than 667 pixels. This then will allow your site to be responsive regardless of the physical device being used. This would even have an effect on a desktop browser if it was reduced in width to less than 668 pixels.

/* iPhone adjustments — mobile */
@media only screen and (max-width:667px) {
    .normal_home {
       display: none;
    }
}

You can find more information on the @media syntax here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

If you need to add in your own CSS directives then this fact is another consideration you should investigate when selecting a theme. If you have a theme that does not have the option for adding in your own custom CSS then that should be a major warning sign to you. If you do find the theme that you really want to use and it does not allow for CSS insertion you can get around this limitation with a plugin like “Simple Custom CSS” or an equivalent. The best themes in this CSS insertion regard allow for a custom CSS to be added on a global level usually in the theme settings or customization area and even better it would allow for CSS inclusion on a single page level basis. The latter feature will allow you to make CSS insertions exactly where you need them on a single page.

For example, if you want to make a CSS change on your contact page and nowhere else, this would be the best way to do it. From an efficiency point of view this approach will not have your CSS on pages where it is not needed making all the other content on your site load faster — in this respect at least.

Well following this discussion on responsiveness and CSS we have already covered the next topic of efficiencies and ease-of-use in WordPress; that of selecting a theme that is open to easy and practical CSS alterations. So be sure to really look into this feature as it relates to responsiveness as it will make your WordPress management that much more streamlined in the future.

The next topic to consider in this vein of ease-of-use is how to manage a site that is to deliver content in multiple languages. When it is a requirement to have a site in many languages then this also becomes an issue of efficiency on a few levels. Trying to keep your content up-to-date across a number of languages is one concern. The other is the approach in how to host the pages in their respective languages; should each language have its own subdomain? It can become a logistical nightmare to have both of these concerns in play and it gets even more compounded with each language you want to support. Thankfully there are a number of plugins that you can use to help with both of these top-level challenges. Be sure to use your favorite search engine to look for “ WordPress multilingual plugins” and add “free” in there somewhere if cost is a concern. Be sure to test any of these plugins well before making them live.

The next tip for ease-of-use would fall into the subcategory of SEO (Search Engine Optimization) ease. Having your site easily located via search engines makes it better for you to reach your audience. “Yoast SEO” is a great plugin for this. Of course, you still have to do the content for the SEO but Yost helps with formatting your content properly and even lets you add SEO content on a page by page or post by post level. This plugin also helps to generate how your site will lay out on the Google results page, the search appearance. Also, another feature of this plugin is that it creates a sitemap for you. There are many other features in this plugin that help get your site closer to the top of the search results and therefore seen. Yoast also has a premium version that has many additional SEO related features so be sure to check that out if it seems worth it to you financially.

Getting back to the actual “look and feel” aspect of the WordPress ease-of-use topic; be sure to spend some time on your site’s menu system. Some thought is usually needed in this arena when ease-of-use is considered. Ask yourself questions like:

1. Do you have clear menu fonts?
2. Do you have clear concise menu titles beyond “home”, “contact”, and “about”?
3. Will you have many submenus and therefore should you consider a mega menu approach?
4. What will your menu look like on mobile devices?
5. Will you have a duplicate of all the menu links on your page footer?

The list of questions goes on but the overall point is to consider ease of menu understanding and navigation. If you have the luxury of having access to site testers (humans), be sure to ask them to test the menu system and test it well. Give them specific questions about readability, conceptual understanding, and navigation processes. Ask them to find certain pages that may be deeper in your menu system and to report on how easy or hard it was to locate them. This kind of feedback is very valuable so be sure to take full advantage if you have access to human testers.

As alluded to in the previous section, fonts are very important when you are considering how readable your website will be. Consider your audience too, even though most browsers have a zoom in and out feature, will your expected visitors be able to read your text? If your site will be targeted at a senior audience for example, it would not be good to have a small script-style font. Google has many fonts available here: https://fonts.google.com, so be sure that your selected theme can use these fonts and be sure to test them out for general use on your site. This would be another aspect that you can run past your human testers if they are available. Questions like:

1. Can you read this font without any adjustments?
2. Do you like the look of this font?
3. Is the size, color, and spacing of the font good for you?

Another aspect to the look and feel side of the equation is the use of images. Do you have enough or too many images? Are the images of decent quality? Do they help convey the context and content of your site? If you are looking for a visual content for your site be sure to go to pixels.com or unsplash.com where you can download and use the images there royalty free. Be sure to use the appropriate size of the image when you download it as well since the size of the image has a large impact on the load time of web pages.

The next few pointers are all geared toward making sure your WordPress sites operate well and therefore it will be higher on the ease-of-use scale. The first one is to make sure you have a good hosting company. Wordpress.org has a few on their hosting page that they recommend. Yet, there are many others out there that are equally as good. The main feature to look for in recent months is a feature of a CDN (Content Delivery Network) that is part of the hosting plan you are looking for. This is almost essential these days as the speed of loading site content is expected to be done, at least “above the fold” within three to four seconds. A CDN helps in this regard as your site content is basically replicated on servers strategically placed all over the world to allow for site loading of content to be geographically as close as possible to the web client. This also helps with traffic demand as the requests for site access are more evenly distributed regionally and globally.

The next practical point to overall site health would be to have good backups and a high level of site security protection. This is a logical extension for ease-of-use that takes the form of ease of recovery. If your site is ever hacked or faces other forms of down time trouble you will want to be able to get back up and running quickly and easily. The former, good backups, can be done with a plugin like “All-In-One WP Migration”. Although the name implies a site migration tool it can also be used to schedule complete backups on a daily, weekly, or monthly basis at any time of the day. You can even buy an add-on that allows for these backup files to be transferred to remote cloud storage services like Google Drive, Dropbox, or Amazon 3 if desired. Another popular backup plugin is called “Backup Buddy”. So be sure to use a backup plugin and off-site transfer location that you like, trust, and are comfortable with.

One step removed from needing a good backup process in place is that of the need for good site protection. There are at least two aspects of site protection to be considered. One is achieved with the Akismet plugin that usually accompanies the basic WordPress installation. This plugin helps to control any spam that is injected into public comments on your blog posts or pages if your site allows for this. If your site does not allow for public commenting then be sure to manage these settings on the admin area under the settings-> discussion menu page. If you do allow comments then be sure to set Akismet for auto updates as well to keep this plugin as current as possible. The other form of site protection is guarding against hacking or unauthorized access attempts from the outside world. This is manageable with a plugin called Wordfence and it is one of the best security plugins that is available for WordPress today. In addition to protecting your site it also monitors all of your other plugins and lets you know by email when any of your plugins are in need of updates. Having both of these aspects of site security in place and active to your desired levels will indeed make your site that much easier to maintain as it will be generally free of malicious outside influences.

The last aspect to look at here in the ease-of-use vein is making sure your site is optimized and running as smoothly as possible. There are a few items to be considered here. One is site caching which allows for the less dynamic portions of your site to be served faster since there is no need to hit the database or outside sources for data as content. As well, there is the loading and caching of CSS and JavaScript content that is optimized on a site-wide basis for your website. This can be done with cashing plugins like “W3 Total Cache” or “Autoptimize”. These plugins are recommended by wordpress.org and can greatly reduce page load times. As a side note, you should make use of speed testing sites like GTmetrix or Pingdom Website Speed Test. These sites can do a deep dive into your pages and make speed optimization recommendations based on what they find. You should do these tests on a regular basis to make sure your site is always taking advantage of the latest speed recommendations as these are subject to change over time.

The last item to consider in our ease-of-use discussions is how to optimize your site’s images. So many sites use large high-resolution images when they are not needed. Many times a Hi-Rez picture will be programmatically reduced to fit a space requirement. This comes into play even more so when mobile devices are introduced. Having your images the right size and the right resolution (without extra meta-data embedded in them like location information of where the image was taken, the date and time of the image creation, etc.) will highly impact the load time of your pages since the web browser won’t have to be bothered with manipulating image dimensions on the Fly. These image management issues can be partially controlled from within the caching plugins previously mentioned (look into lazy-loading) but they can also be well-managed with an additional plug in that specializes in image management. One I like is called “Ewww Image Optimizer” and another one that is also good is called “Smush”. Try these two out or look for one that you like, test them well, and then Implement one of them on your live website to help with serving your images.

I hope these ideas, pointers, and concepts have helped you to consider all the many aspects of keeping your WordPress websites fully optimized, protected, and running smoothly. All this information has been provided here to help you with making your website generally easy to use from a number of perspectives. I also hope that you recognize that ease of use is not only linked to the site visitors point of view but also to you as a site administrator. Take good care of your sites with these pointers and make sure they are always ready to welcome visitors from all over the world in an efficient and well maintained fashion. Happy WordPress-ing!

Peter MacIntyre has a book covering more aspects of WordPress development, be sure to check out “WordPress Development in Depth”.

Lastly, I’ve built a plugin with the RingCentral APIs which you can utilize to easily let people subscribe to receive sms notifications or to request an automated call back. Go here to get it: https://www.ringcentral.com/apps/rccp-free-wordpress-plugin

To learn even more about other features you can use with RingCentral make sure to visit the developer site and if you’re ever stuck make sure to go to the developer forum.

Want to stay up to date and in the know about new APIs and features? Join the Game Changer Program and earn great rewards for building your skills and learning more about RingCentral!