Digital Marketing

Using Responsive Design to Tackle the Mobile Web

By Dave Hess

Browsing the web using a mobile device is expected to outpace desktop browsing within the next three to five years. This explosive level of growth is going to lead many to consider whether “mobile-friendly” is required to supplement their existing website. However, taking such a fragmented approach to the mobile movement could be prohibitively expensive. A mature, content management system-driven website represents a considerable investment. In addition to recreating content, be it blog posts, images or video, site managers now must face the prospective of managing all this content all over again in another instance of the website. Now content contributors have to post to the blog twice? Every content change has to be made in duplicate? This is an unwieldy approach to say the least.

What if the existing website could also be the “mobile-friendly” website? What if it could “respond” to each user and render appropriately based on browser type and screen size? This kind of website could serve all purposes. Using some of the techniques illustrated in Ethan Marcotte’s book, “Responsive Web Design,” such an end can be achieved.

Modern mobile browsers, such as Apple’s Webkit browser, can be found on most modern devices, including iPhone and Android devices. The Webkit browser supports CSS3 and HTML5, and can run modern JavaScript, which are all ingredients necessary to implement a responsive design approach. Using tools such as CSS media queries and grid layouts, a design can be created that can adapt to browsers on all number of devices and render images and typography that is scaled appropriately, and offer alternative page layouts based on screen size.

Check out some of these examples of websites using a responsive design. To see them in action, try resizing your browser window and watch how the website layout changes (be sure to try them on your phone too!):

Bookmark and Share
About Dave Hess:

2 Comments on “Using Responsive Design to Tackle the Mobile Web

  1. Pingback: 5 Reasons to Have a Mobile Friendly Website – The Buzz Bin

  2. Pingback: 5 Digital Marketing Trends for 2013 – The Buzz Bin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>