Responsive, Mobile Friendly Web Design

In America today (as of January 2013), smartphones account for half of all mobile phones and are poised to take over feature phones this year. And don’t forget, many feature phones also have simple web browsers. Not to mention tablets such as ipads, kindles, or one of the other many small devices floating around offices and homes these days. In fact, as of 2011, the number of U.S. wireless devices outnumbers the U.S. population!

Quick tip: If you want to find out how many mobile devices are accessing your website, just view your Google Analytics web statistics and go to Standard Reports > Audience > Mobile > Overview to compare mobile/tablet devices vs. non-mobile access. Then go to Devices under Mobile to see the breakdown of those mobile devices.

So just to be clear, almost all sites can be “viewed” on a mobile/tablet device, it is just how user-friendly of an experience it is or not. By default, static websites will shrink to fit the smaller devices causing the user to zoom in and out (pinch-to-zoom) or scroll left and right — making it more difficult to find what they are looking for. These static sites can inhibit the experience even further by using rollover pulldown navigation which may not work on the smaller devices that only respond to finger-touch (not mouse hovers/rollovers). This means your subpages may not be accessible.

Client website displaying responsive design on multiple devicesSo what are you mobile-friendly options you say? Well, a website that would convert to all different screen sizes and orientations (horizontal and vertical views) of any device and allow for normal vertical scrolling that is native to normal desktop users – the way it was meant to be. See example (right) of what should happen when a website converts content from a 3-column layout to 1-column layout allowing for larger more readable text and imagery.

Mobile Friendly Option 1: Responsive Design

The best option we find at this point in time is using CSS coding techniques to convert a normal static site to a responsive design which will allow a website to automatically “respond” to the new screen sizes and orientations without the need for a completely different site, plugin, or app. Some graphics or extra features can even be removed to streamline the user’s experience and eliminate the need for lots of scrolling.

Check out this interactive demo at Template Monster to get the full user-experience of responsive design (click on the different screen sizes in upper right hand corner to see different layouts of one design/website). The demo also shows you a mobile-friendly navigation bar that is easier to finger-tap and select pulldowns than the problematic static site navigation mentioned in previous section. Also, below is a conversion of a website that we, at Evolv, worked on so you can see the before and after of a static site converted to a responsive site. However, this design does not use the more advanced navigation bar because it does not need pulldowns but instead just simple text links aligned vertically rather than horizontally. Visit the Japanese Literature in English responsive website.

Website screenshot comparing static website to responsive website

To see if your own website is responsive or not (since some of the most recent WordPress themes may use responsive design without you knowing it), try dragging the bottom right handle of browser window to the left to make narrower like a mobile device and you’ll see whether the site “responds” to a one-column vertical layout or stays static and gets cutoff. You can even try this with this article page in your browser window to see the responsiveness of our own blog.

With this in mind, the easiest and cheapest option, if you don’t have to keep with your current design/brand, would be to install a completely new WordPress theme or HTML site template that is responsive rather than pay to convert an existing static site. Also, keep in mind that the default 2011, 2012, and later WordPress themes are already responsive and many more responsive themes are popping up everyday. Just check out our article on for WordPress Themes for Artists & Business and go to the Responsive section at bottom.

Mobile Friendly Option 2: WordPress Plugins

WPTouch preview of screen that looks nothing like website

For WordPress users, there are more options of installing plugins. First, there is a WordPress Responsive Plugin that has been “coming soon” for months now that you could signup for notification when it comes out. It claims to convert your WordPress theme to a responsive one without redoing your site’s code but I guess we’ll see how good it accomplishes this very hard task when it comes out.

Other WordPress plugins will create a completely separate mobile site for you — like WPtouch (for mobile phones) and Onswipe (for tablets) — but they will not allow you to customize the site as easily to look like your normal desktop branded site. In other words, it is a completely different site and experience for the user. See preview (left):

So what do I do?

If you are getting a new website built, we highly recommend you get a responsive website to start out on the right foot. If you have an existing website, we can convert your “static” website to a “responsive” one. Just request a quote from us.

We believe a responsive website will prove to be your greatest asset in the coming years. Your readers and customers will appreciate the extra thought and care that goes into making their mobile experience easier to find what they are looking for, because websites really are ALL about usability and effectiveness. Eventually, there will be no more talk of mobile-friendly websites: there will just be websites, and it will be expected to adapt to all screen sizes. Don’t get left behind!

Read more about Responsive, Mobile Friendly Email / eNewsletters »

back to top