I don’t use infographics much, but this one stuck out to me as helps explain why your website needs to be responsive – that is, look good on mobile devices. Mine does, as it runs Headway, but does yours? If you’re selling something via your website (and you should) then take a look at the stats below.
Image courtesy of Nowsourcing and Moovweb.
A “responsive” WordPress theme is one that resizes and looks good on different devices. So on your desktop computer, a tablet or smartphone.
While the awesome Headway theme that I use has had a responsive option for a while now, due to the customizations I had made it didn’t work great out of the box. So I spent some time making my site look good on different devices. The screenshots below show how the site changes for different sizes, but if you want to see it in action, simply resize your browser and it will change for you.
[frame type=”raised”]http://blogtechguy.com/wp-content/uploads/2013/01/btg-full-300×208.jpg[/frame]
[frame type=”raised”]http://blogtechguy.com/wp-content/uploads/2013/01/btg-tablet-300×246.jpg[/frame]
[frame type=”raised”]http://blogtechguy.com/wp-content/uploads/2013/01/btg-mobile-300×568.jpg[/frame]
There are quite a few things happening here and that the screenshots don’t tell. Blocks are removed, and in the mobile version the logo is significantly decreased in size and the navigation menu is replaced with a dropdown navigation. There is a great free plugin for this called Responsive Select Menu.
This means I no longer need a mobile plugin like Wptouch and means I have complete control over the way it all looks.
I haven’t worked on many mobile versions of sites but the amount of time (and cost) it takes in some themes isn’t worth it and a plugin is your best bet. For themes like Headway, by default you can get a great responsive looking site. After customization it can take a few hours to perfect and look good, but it was definitely worth it.
Let me know if you have any questions or need help making your site mobile friendly.
