15 Great Mobile First WordPress Themes to Boost Your Site Performance
Mobile first theming isn’t just about making your site work well on mobile devices: it will also make your site faster and so enhance SEO.
A mobile first theme includes far fewer style declarations for layout than a traditional responsive theme that works desktop-first, mainly because it eliminates the need to declare 100% width for elements on small screens.
Making your site fast and mobile friendly are two of the most important things you can do to boost your search engine rankings and it will make your site visitors happy, too.
Here are some facts and figures which should convince you to start looking for a mobile first theme:
- Mobile first design means a smaller stylesheet, with fewer declarations. You can see this in action in a tutorial I wrote on converting a theme to make it mobile first.
- Mobile first design enhances performance when it comes to downloading images. By designing mobile first, you ensure that devices won’t download an image larger than they need. If you use a responsive design which is desktop first, the larger image may download first, slowing things down.
- A mobile first theme, because it has less code, will have less places where it can go wrong and be faster to load.
- A mobile first theme will ensure your site loads faster on mobile devices, where bandwidth is more likely to be an issue than on desktop sites.
- A mobile first theme will boost your SEO. Since April 2015, Google’s algorithm has favoured sites that are fast on mobile.
- Designing mobile first isn’t just about how your site looks. Don’t just install a mobile-first theme: think mobile first too, considering what’s essential on your site and cutting out what’s not needed. Website visitors are more interested in content than pretty design elements these days.
However there is a caveat to some of the above: many mobile first themes use the bootstrap framework for their layout. If you don’t need a sophisticated grid system for your site, you might prefer to use a theme with its own media queries, meaningless code. I’ve identified which themes in the list below use bootstrap.
There are hundreds of responsive themes out there: pretty much every new theme is responsive these days, but there aren’t so many that are truly mobile first. And disappointingly, there are themes on the WordPress theme directory advertising themselves as mobile first which actually aren’t. So finding a true mobile first theme can be tricky.
In this post I’ve found 15 of the best mobile first themes you can use on your WordPress site. They vary from simple themes with minimal styling or customization options, to full featured themes and theme templating systems.
Our own Upfront theme system is more than just a mobile-first theme. It’s a site builder system that lets you drag and drop elements onto your page and gives you a multitude of customization options. You don’t install the Upfront theme itself on your site, as that’s a base for child themes; instead install a theme like Panino, shown in the image above.
The default theme that comes preinstalled and activated when you first install WordPress is itself mobile first. It’s one of my favourites of the default themes, with a clean black and white design and open layout. But it’s a bit ubiquitous, so you might want to switch to something else to avoid your site looking like everyone else’s.
Me is a nice blogging theme that I’ve seen a lot of developers using for their blogs. It has a clean layout, attractive typefaces and you can use it to show everyone what you look like! Ideal for a personal blog.
It isn’t responsive in the strictest sense as the widths are in pixels and not percentages, but it does use mobile first media queries and its leanness means it’s fast.
Like many mobile first themes, Sydney uses the bootstrap grid system. It includes some nice customization options including colors and fonts (using Google fonts) as well as a full width header image and grid-based front page.
The evolve theme uses its own mobile first grid system for layout. It includes customization options for front page elements, fonts, colors and much more, as well as a bootstrap and parallax slider plus a post slider.
This is one to use if you want a flexible grid system and are prepared to spend some time tweaking it so it looks exactly as you want.
The Responsive theme includes lots of customization options and uses its own mobile-first grid system. It provides no less than 11 widget areas in the home page and elsewhere on the site which you can use to add custom content; great if you’re using WordPress as a CMS rather than a simple blogging platform.
Responsive isn’t very pretty out of the box in my view, but once you’ve spent some time customizing it you can make it look more modern and sleek.
The Silk Lite theme’s design is less masculine than some of the other grid-based themes out there, with attractive fonts and a layout that shifts from three columns on larger screens down to two and then one as the screen size gets smaller, using mobile first media queries.
The only downside is that the site title isn’t very legible, although that will depend on your site title!
If ever there was a theme using its name to advertise the fact that it’s mobile first, this is it! It’s based on the Responsive theme (see above), with a clean design that would work well on business sites.
Like Responsive, it uses a mobile first grid system and includes plenty of customization options which means you could use it for client sites if you’re not comfortable coding a bespoke theme or using a framework or theming system.
This theme’s name did make me worry that it might be some relic of the 1990s with a vegetable-themed backdrop or similar. But no, it’s a clean, modern theme with plenty of white space and some nice fonts. It’s a free version of a premium theme called Veggie, which was designed to power food-based blogs (hence the name).
It’s such a simple design, however, that you could easily use it to power a blog on any topic, and the mobile first styling and simplicity will enhance your site’s performance.
With a name like Binge, you’d be forgiven for thinking this might be another food-related theme. In fact it’s a grid-based theme which relies heavily on featured images (these are displayed on your home page instead of post titles or excerpts).
It uses the bootstrap grid system to achieve a mobile first layout and if you’re creating a blog with lots of strong imagery, then it could be a good one to use.
Flower is another theme using the bootstrap grid system. Again there’s plenty of white space and a neat looking grid system which adapts to the screen width.
It includes multiple widget areas and makes use of font awesome for icons. You can’t change the colour of the navigation bar without adding custom CSS though, so it may not be for you if you’ don’t like pink.
Daniela’s theme page boasts that it has ‘a touch of elegance’ and I have to agree. It’s got a clean, professional looking design with lots of white space and it handles images well. It would be good for a blog or small business site where you want to convey an image of trustworthiness.
It uses its own mobile first layout styling and also integrates with Jetpack.
Graphy is another theme with a clean layout and plenty of white space, with the option to add a header image. It has a single column design but if you use the sidebar widget area you can create a two column layout.
The focus of this theme is on typography and its clean design lets the fonts take centre stage without any distractions.
Altitude Lite is from the developers of Responsive and Responsive Mobile. It’s a full width design with the option to add a striking parallax header image and it also includes widget areas and customization options if you want to vary the layout.
Components is a new project from the Automattic theme design team. It’s based on the underscores starter theme and is designed to provide you with one of a range of themes you can work with, including classic and modern blog, portfolio and magazine themes.
What you get is still very much a starter theme (with not much difference between the different styles of theme), so it would only be useful if you were comfortable adding your own styling. But it gives you a mobile first framework to build on which could save some work coding your own: an option if you want something to start you off but don’t need all of bootstrap’s features.
Do You Use a Mobile First Theme?
The number of mobile first themes will continue to grow, especially as more and more theme developers use the bootstrap grid system to underpin their themes.
Hopefully, the list above should include something suitable for your site: I suggest trying them out, seeing which works for you with the customization it lets you make, and going for it!