If you’ve scrolled down to see what’s in store here, you may be wondering whatever happened to points 1-5.
Ah, right, to find what the answer is, you should take a look at the first part of this mini-series.
In short, what we’re after here is giving you a guide on how to build a high performing mobile theme for WordPress. It may not seem like it at first, but the challenge is actually bigger than most people think.
After all, the general belief is that you only have to make the theme responsive and, voilà, it’s mobile-optimized, right? Well, not quite. So without further ado, let’s get right back on topic.
For part 1, see here: How to Put Together a Mobile First, Performance Orientated WordPress Theme [Part 1]
6. Design for all mobile browsers
It’s really surprising how differently a piece of HTML code can behave based on the web browser it’s being run on. And this goes for both, mobile and desktop computers. Probably more so for mobile, though, since we have hundreds of different devices and screen specs to deal with.
Therefore, when working on your theme, make sure to remember about the following:
- test your work on all major browsers as you go along – doing this early on will make troubleshooting much easier, as opposed to starting your browser tests when you already have the whole theme done,
- get your hands on as many devices as you can and see how the theme behaves on them (try different screen sizes, resolutions, and ratios if possible).
7. UX matters
On mobile, people interact with websites very differently than they do on desktop.
This sounds basic, but let me just give you a simple example. When someone is looking for a pizza place on their desktop, they are probably interested in a number of details about the restaurant they’re checking out. For example, things like the menu, the gallery, contact details, and so on.
However, if they visit the same website on mobile, they probably care only about one thing – how to get to the place and what number to call to make a reservation.
What it all boils down to is that when you’re building a theme for mobile, the design should enable the site owner to put additional focus on specific elements that can be crucial for mobile visitors.
The easiest way to do it is via well-designed widget areas that appear on the homepage and remain in the top part of the visible area of the screen (aka keeping them above the fold).
While on mobile, people have very little time to look for the information they need. This is why a good mobile design should be effective in making this information accessible.
8. Less is more
The less is more concept can be easily applied to most scenarios in theme development, and when it comes to mobile themes, it means the difference between a great theme and a so-so theme.
Here’s what you can do to achieve more with less:
- Leave less space for branding elements. Some space for the site’s logo is important, that’s obvious. However, it still isn’t as important as the actual content, so make sure not to let the logo occupy the majority of the space above the fold.
- Introduce accessible menus. Menus have always been a problem on mobile. On one hand, websites need menus. But on the other, even a short menu (having just four items or so) can easily use up two lines of text on most mobile devices, which pushes the content further down the page. Here’s what you can do to solve this: (1) display the menu normally if it fits within a single line of text, (2) make it a drop-down if it doesn’t.
- Get rid of unimportant menus. I’d risk saying that most of the time, the footer menu brings no value to the mobile visitor. On desktop, it serves as a kind of a catch-all menu where visitors can find links to all the other pages, but on mobile, there’s hardly a reason why anyone would use it. Consider getting rid of it completely when your theme is being viewed on mobile.
- Be careful with extra website features. There are countless possibilities when it comes to introducing custom features in a new WordPress theme. You can implement things like image sliders, social media integration, create custom galleries, and many others. But should you? Although those feature ideas are all great, they can cause some problems for mobile users. If you want to make sure that your theme works properly on most platforms, utilize the native wp_is_mobile() function. It will allow you to differentiate between mobile and desktop visitors, so you can simplify the interface for the former to avoid any problems.
9. Load only the necessary files
These days, people can access the web from a big range of mobile devices, so inevitably, some of these devices will be very outdated and won’t be able to support modern web features. Because of this, you should always check which library or module is needed to execute a given functionality.
One of the best ways of doing so is through a solution like Modernizr. In short, it’s a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. It allows you to write conditional code based on whether a given feature is included in the browser by default or not. Then, if there’s a need for it, required libraries can be imported.
But Modernizr won’t be the solution for everything. Here are some other guidelines worth keeping in mind:
- As a general rule, remember not to import libraries if they are not absolutely essential for the theme’s functionality. The more libraries and external scripts there are, the more time it will take the final site to load (especially on mobile).
- Always try to load JavaScript files at the end of the HTML structure rather than at the beginning.
- Try to minimize the number of DOM elements your HTML structure uses.
- Load CSS files and JavaScript for every page individually. For example, if you have a CSS file that is required only on one specific page, use the is_page() function inside a conditional statement and enqueue the style only on that page.
10. Perform speed tests on a test server
Having a local test server will be good enough at the beginning stages of development, but you will quickly need to introduce a more advanced testing setup.
The fact is that you will never know for sure how optimized your theme is until you install it on a handful of test environments and see how it performs in real life.
While still keeping the costs low, you can do this by installing your theme on a couple of cheap shared hosting accounts (since most of the end users will probably use those anyway). Then, you can run various tests using the following tools:
- PageSpeed Insights. A tool built by Google. It will give you good data about both, your mobile and desktop performance, along with some tips on how to make things better.
- Pingdom Website Speed Test. This tool will give you a complete breakdown on how long it takes to load each individual script/file that your site requires.
- Ghostlab. Very handy tool for synchronized browser testing for web and mobile simultaneously.
- Mobile performance testing by Mobitest. Allows you to test your site on actual mobile devices and not just on a general, emulated mobile environment.
- BrowserStack. Gives you instant access to every version of every popular mobile and desktop browser. With this tool, you don’t have to wonder what your theme is going to look like on an outdated browser, you can generate a screenshot with just a couple of clicks.
This sums up our 10 step guide to building a mobile first, performance orientated WordPress theme. I hope you’ll get some cool ideas out of it and that it’ll help you turn your next theme into a true performance monster!
