MainelyDesign.com Blog

Lessons Learned: Going to Mobile Website Development

Posted on 07/08/2013 at 12:39 pm by Kevin Wentworth
Viewed 18,026 times | 0 comments

I've recently taken the plunge and learned about CSS Media Queries and Responsive Web Design.  We launched a new ordering site and made the whole website, including the checkout process, mobile-friendly.  It's really opened up my eyes to the possibilities of mobile web design.  I started out wondering why responsive web design was all the rage, now I prefer to order and checkout using the new Site Avenger mobile shopping templates.  It's pretty easy to retrofit with an existing Site Avenger website and all new E-Commerce websites have the option of being mobile-friendly from the start.

Responsive Web Design vs. Adaptive Website

Mobile website design and development is a moving target.  Responsive web design has only gained popularity and de facto status as a "standard practice" in the past year or two.  Before that it was all about device identification and redirection.  I want to share with readers my revelation after reading tons of information about mobile development:  If your website template changes based on the user-agent, you have an adaptive website.  If your website presentation changes based on the size of the screen, you have a responsive website.  If your website does both, it kicks butt! (keep reading)

Google whole-heartedly (as of July 2013) endorses responsive web design as it's preferred mobile development approach.  Google's top reason for advocating a responsive design relates to their website crawlers.  Google doesn't want to have to visit your site twice: once with Googlebot and then again Googlebot Mobile.  I totally get this.  They actually insinuate that a responsive-only design may lead to a larger portion of your website being crawled. 

Progressive Enhancement for Mobile Web Design

I prefer a hybrid mobile design approach as outlined by Smashing Magazine.  I like to think of my approach to mobile web development in terms of the JavaScript philosophy of progressive enhancement.  In my project flow, we design the desktop site first (and 960px wide includes tablets too!).  I know this is counter-cultural but for very good reason: I love using the web on a desktop/tablet and think that it's best medium for the web.   This allows us to focus on the big-picture and branding of the site, and then focus on the site's user interactions with the mobile site in mind.  A moible site needs to be simple, so only the essence of any page will be shown in a responsive design.

Moving on... in our specific development approach, we have a desktop site as the starting point, then we "progressively enhance" it to be responsive AND adaptive.  Responsive design is good (and recommended by Google) because there is no false-positives when it comes to device idenitifcation.  Furthermore, if media queries aren't supported by a device the fall-back option isn't that bad:  a website with no media queries is the desktop site.  To progressively enhance our mobile site, we add CSS media queries. 

The next enhancement focuses on the size of the html file that gets downloaded.  Transit time is longer on the mobile web so the more you can do to reduce file size the better.  To that end, instead of merely hiding the sidebar with CSS media queries, we add some mobile device detection and serve up a mobile-only template.  The mobile template doesn't even include the code for the sidebar.  How's that for decreasing file size?  If a mobile device is in use (and we identify it as a mobile device, based on its user-agent) we'll use a modified mobile-device template that should filter out unneccessary html.  And yes, this also decreases the size of the DOM, supposedly decreasing JavaScript execution time (which is a known slower-downer™ for mobile devices).

Finally, the user needs a rip cord to bail out of the mobile version.  Sometimes I just want to see the full site... let me!  A link to choose which site template is used gives site visitors the ability to choose whether or not to view the website as a mobile site or the full, desktop version.

Adaptive Websites Should Use the Vary Header

As an FYI, if you are showing different content to different user-agents, Google wants to know, and requests you use the Vary header.  This alerts Google to crawl you website again with their mobile Googlebot. 

A mobile front-end framework?

Another note for my own reference is a site I came across in my travels.  Foundation looks interesting.  Something to strive for...

Cheers,
- Kevin Wentworth