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.

  • Upfront

    upfront

    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.

    Upfront isn’t mobile-first in the traditional sense as it uses JavaScript to resize elements according to the size of the browser window instead of CSS media queries. But it does work in a mobile-first way.

    Interested in Upfront?

  • Twenty Sixteen

    twenty sixteen

    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.

    Interested in Twenty Sixteen?

  • Me

    me

    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.

    Interested in Me?

  • Sydney

    sydney

    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.

    Interested in Sydney?

  • evolve

    evolve

    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.

    Interested in evolve?

  • Responsive

    responsive

    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.

    Interested in Responsive?

  • Silk Lite

    silk-lite

    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!

    Interested in Silk Lite?

  • Responsive Mobile

    responsive-mobile

    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.

    Interested in Responsive Mobile?

  • Veggie Lite

    veggie-lite

    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.

    Interested in Veggie Lite?

  • Binge

    binge

    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.

    Interested in Binge?

  • Flower

    flower

    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.

    Interested in Flower?

  • Daniela

    daniela

    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.

    Interested in Daniela?

  • Graphy

    graphy

    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.

    Interested in Graphy?

  • Altitude Lite

    altitude

    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.

    Interested in Altitude Lite?

  • Components

    components-modern-blog

    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.

    Interested in Components?

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!

Do you use any of the themes on this list? Or do you have any favorites we've left out? Let us know in the comments below. VIEW 12 comments