I regularly get questions about suggestions for best ways or best plugins to use to make a blog design mobile friendly. Couple of years ago I used a plugin to make my design fit mobile screens, but have since changed to something that I think works much better.
Why do I need a mobile friendly design?
In the blogging trends for 2013 I mentioned that smartphone sales have overtaken computer sales – tablet sales are growing as well and are soon expected to overtake computer sales as well. Mobile devices account for 13% of global internet traffic now and the percentage is growing. In India, mobile traffic has already surpassed computer traffic and more countries will soon follow. People even shop on mobiles: mobiles and tablets have resulted in 24% of total online Black Friday shopping in 2012.
All these facts show you why it is important to think about how your present your content to visitors browsing with devices other than traditional desktop and laptops. A growing percentage of my blog visitors use tablets and mobiles devices to access my content as well. The mobile traffic stands at just over 23% of my total traffic for the last few weeks and the trend is growing.
What is responsive design?
As we cannot predict much about technological progress and we don’t know what the next hot app is or what the next widely used screen resolution is, it makes sense to only have one digital platform for a blog no matter what device visitors use to access it. Smart design adapts itself to the machine a visitors is browsing on, unlike a lot of plugins and other solutions that completely change your blog design when visited from a mobile. This smart blog design solution that adapts itself to the different devices is called responsive design.
Responsive design means that when a user visits my site, the site itself formats specifically so it fits the device the visitor is using. It works on everything from large desktop computer monitors to mobile devices. Responsive blog design provides optimal viewing experience for visitors, as the design elements are consistent from the standard design while there is no more need to zoom out, or zoom in or scroll too much around finding what you need.
Try it now if you are reading this article on a desktop browser – shrink the browser size and see how the content resizes itself to fit your browser size. The images will shrink, header image will shrink, the content column will shrink, the sidebar will be moved underneath the content as the blog layout switches from two columns to one column. The layout switches depending on the screen size you are viewing my blog on and it works equally well on any device. Isn’t it cool?
Responsive design is taking over the blogsphere, and some of the biggest blogs like Mashable, The Next Web and ReadWrite have recently made their sites responsive. I just love how Mashable is always one of the leaders in this by the way.
Google recommends responsive design as the best way to configure your site design because it is easier for the user and there is no need for redirections like on other mobile solutions.
Top 20 most downloaded WordPress responsive themes
So how do you make your own blog responsive and mobile friendly? As always with WordPress, it is pretty simple to do some changes with your own blog. The open-source community behind WordPress has created a large number of themes that are responsive out of the box. If you don’t have a design budget there is no need to hire a designer to create a design for you, just use one of the existing free or premium responsive themes instead.
I personally use premium theme Thesis with some custom code that makes it responsive, while some of the other premium themes from Studiopress are responsive straight out of the box. This is the list of most downloaded free responsive themes you can use on your WordPress blog. Have a look around, give some of them a try and see which one fits you best.
- Suffusion - 918,104
- iFeature - 451,653
- Responsive - 414,209
- Evolve - 331,541
- Pagelines - 299,572
- Mantra - 273,348
- Business Lite - 219,01
- Colorway - 200,225
- Hatch - 190,670
- Portfolio Press - 185,365
- Yoko - 179,510
- Simplex - 168,069
- Eclipse - 156,343
- Catch Box - 124,012
- Oxygen - 109,194
- Weaver II - 102,948
- Response - 99,527
- Twenty Twelve - 98,010
- Neuro - 93,130
- Codium Extend - 91,621