In its core, putting together a WordPress theme is a rather simple task. WordPress delivers a really friendly environment and makes it clear which PHP functions to use for what purpose along the way.
However. Even though it’s simple, it’s far from easy, and especially if you want your theme to be mobile-optimized.
There’s a range of unique issues that you ought to overcome if you want to end up with a quality product that loads fast, operates in a predictable way, and (what’s the most important thing) is user-friendly and accessible to people using different devices and screen sizes.
This two-part guide will walk you through the process in 10 steps, listing the most important things to take care of when building a mobile first, performance orientated WordPress theme.
For part 2, see here: How to Put Together a Mobile First, Performance Orientated WordPress Theme [Part 2]
1. Content comes first
There’s really not much room on mobile to showcase much design detail or to use nice looking elements just for the sake of it.
Even though modern devices are capable of displaying graphics up to 1136×640 pixel (iPhone 5s), let’s not forget that the screen is still only four inches across. This is not a lot of real estate to work with.
Things worth doing:
- get rid of all extra design elements that are not essential for content presentation,
- make sure that the main content block is as high on the design canvas as possible (due to different screen sizes of mobile devices we can’t predict where the “fold” will come exactly),
- focus on typography and making the content readable (increase the font size, but be careful not to make a single line of text too short and thus unreadable),
- introduce good contrast – text vs. background (this is crucial for mobile devices, especially if someone attempts to read the page while standing in a sunny area).
2. Optimize the images
Image optimization is even more important for mobile than for any other scenario. The thing is that when someone tries to access a site via mobile, they are probably on a slow 3G connection. Therefore, you need to make sure that the theme makes it possible for the images to load relatively quickly regardless of this fact.
Specific things you can do:
- Consider integrating lazy load functionality. In itself, lazy loading is great (loading images only when the visitor scrolls to them). But the problem is that the end users might end up installing some lazy load plugins on the final site themselves. This could interfere with whatever you’ve already integrated in the theme. If you want to take the risk, however, it would be best to make the functionality possible through a solution like jQuery and its Lazy Load Plugin. WordPress plugins tend to use this library as well, so you’re minimizing the likelihood of things going wrong when there are two different scripts both trying to achieve the same result. Also, make it possible to deactivate lazy load in your theme’s settings.
- Optimize the images for size and quality. Images usually account for the majority of bandwidth consumption for the average site, so as the theme creator, you need to make sure your images are as optimized as possible. You can do two things to make this happen: (1) make sure that the images are not bigger in dimension than they need to be (see #3) – an extra pixel here and there can add up pretty quickly, (2) optimize all images via a tool like Optimole or TinyPNG prior to releasing the theme to the public.
- Use icon fonts whenever possible. The old school of including icons in any design was to just build them in Photoshop, convert everything to PNG or GIF and roll it out. Nowadays though, it is not the most optimized of solutions. With tools such as Font Awesome, we can enrich our designs with hundreds of beautifully designed fonts, while at the same time keeping the performance very decent.
3. Make the design Retina-ready (optimized for high-DPI screens)
Almost all new devices come with high-DPI displays these days. Those screens make everything look very sharp, but only if the thing in question has been optimized for high-DPI viewing. Otherwise, the user will see a lot of pixelation and this will make the experience overall unattractive.
There are two main shortcuts you can take to high-DPI optimization:
- Use image fonts – mentioned above; image fonts scale automatically and look great on every device.
- Create alternative versions of all the other images – at two times the size – and swap them with CSS whenever a high-DPI device is being used to view the content. Here’s a guide on how you can do this.
Finally, you should also take care of the favicons in your theme (and probably allow the user to change them too, but that’s another thing).
Back in the day, you only needed one 16×16 PNG image, which you would then convert to ICO, and you were all set. Right now it’s much more complicated. For instance, the new Apple devices will try searching for larger icons and then attempt to use them as bookmarks.
Some of the favicon sizes iOS expects to find are: 76×76, 120×120, 152×152. Here’s a complete list on Apple.com.
You can either create those icons by hand or use a tool like Real Favicon Generator. It just needs one starter image, which will be used as the base to generate all the other versions. On top of this, you also get the correct HTML code for embedding the icons in the theme.
4. Optimize for tapping
We have to remember that most of the mobile devices out there support touch interfaces or are touch-screen-based entirely. What this means is that we need to make every tappable element big enough so the user can access it with ease.
For instance, text links are not very touch-optimized because they require a lot of concentration on the user’s part to tap them accurately. It’s a better design choice to go with buttons for the theme’s interface. Buttons that are relatively big themselves and also have a large touch area.
Another thing to keep in mind is that users do most of their tapping with thumbs, so it’s a good idea to place the main “call to action” buttons on the easily accessible thumb zones. For instance, here’s how it plays out on the iPhone.
5. Making the theme responsive is not all that matters
Let’s end the first part of this guide with the most common mistake people make when designing themes for mobile. The mistake is treating responsive designs as the ultimate end game.
Granted, making your theme responsive is a huge advantage, especially when it comes to dealing with non-standard devices and screen sizes, but it’s far from a magic-bullet solution. Just because a design is responsive doesn’t mean that it’s going to perform well on mobile. For example, it won’t solve any image optimization issues, or the fact that buttons are difficult to tap accurately, and so on.
So yes, do whatever you can to make your theme responsive, but at the same time, take care of the other elements that we’re going through in this guide for maximum mobile-friendly design.
I invite you to tune in for the second part to get the rest of the list (we’re going to get into things like UX design, navigation, using JS to optimize load times, taking advantage of some of the less known WordPress functions, and more). And in the meantime, what’s your biggest challenge when designing for mobile?
