It’s Toggle Time

Union Street Media has launched a number of websites that incorporate a responsive web design this year. All new sites we develop have the option to be designed and produced with a responsive design.  Some sites we produced a while ago that aren’t quite ready for a full custom redesign are being rebuilt with slight design enhancements that include a responsive design.  The web design world offers a fun debate (almost presidential) regarding how to address the mobile web and whether you should create a separate mobile website or create a responsive website.  Don’t forget the Mobile First Party.  The question isn’t should you create an optimized mobile experience, the question is should you have a website with a responsive design or separate mobile website?

What is the difference between a separate mobile website and a responsive website?

Mobile sites target devices, whereas responsive designs target screen sizes.  Responsive sites retain as much of the interface design “look and feel” as possible regardless of screen size and adapt as screen sizes change.  Content elements are prioritized, shifted and delivered in an optimized fashion just for you and the device that controls the screen size in your hands, on your desk, or on your lap.

Here are three examples of mobile sites we’ve built:

discoverjazz.com

http://www.onsmd.com[/caption%5D

[caption id="attachment_6263" align="aligncenter" width="180"] uvmbored.com

Below are three screen shots of a responsive site we built for Gordon’s Window Decor.  When viewing these sites you can drag the size of your browser to see how the site changes or view the site on your computer, iPad and iPhone at the same time to compare. Better yet, rotate, drag, flip, switch, experience.  Some other responsive design examples in our business website portfolio include The Optical Center on Church Street in Burlington, Vermont and The Waybury Inn near Middlebury, Vermont.

Business Websites
Desktop View

Tablet View

Mobile View

If you would like to know more, this article discusses the mobile strategies utilized by the two US presidential candidates and how they have chosen different mobile strategies for their official websites.  Republican candidate Mitt Romney has opted for a mobile website while Barack Obama has a responsive website. For fun, let’s reflect upon what Paul Ryan said about comparing his playlist to Mitt’s playlist. Ryan stated that his playlist starts in A with AC/DC and ends in Z with Led Zeppelin. (I didn’t realize Led Zeppelin began with Z) Whereas, according to Ryan, Romney’s playlist can be heard on the elevator. Using this analogy, one might suggest that a mobile site is as lame as elevator music and responsive design is the hip, modern, smart way to go.

On the other hand, a mobile site can be perfect for event driven sites (such as for a Jazz Fest), specialty data driven sites (such as searching health conditions/ providers) or listing sites (such as Real Estate).

If the main goal is to deliver a user experience for iPhones and Android phones, a mobile site is a better way to go because the site is specifically geared around those devices. A mobile site may be a better option depending on your content and target audience. Mobile sites use touch-sized buttons and maintain some graphical consistency with iOS and Android. On the other hand, Responsive Design is a better way to go if the goal is to reach every device, like tablets (the Kindle Fire, Nook Color, iPad), netbooks, phones, old computers with very low resolutions.

Contact us if you would like learn more about getting a mobile site or a responsive designed website.  More posts about Responsive Design focused on design, development and analytics will be available in near future.  Don’t expect elevator music.