Responsive Web Design

Posted on August 28, 2013 by admin in Articles

In short, Responsive Web Design allows a website to dynamically adjust its content and layout to render optimally regardless of screen size (e.g. desktop or tablet or mobile phones).

Here’s a little demo: http://screencast.com/t/DPlFadWQU

banner-si

One content, many devices

Here’s another : http://screencast.com/t/ATXRK2g6oAX

Till now, traditional websites typically do not show well on smaller devices.   The device would either show the entire page on its small screen, in which case much of the content would be too small to read or the device would show a portion of the page, and require user to scroll left/right/up/down to see the rest.   Either methods renders the traditional website quite unusable on smaller devices.    Wholly separate mobile sites were needed to display the content on small devices.   This is not completely undesirable, but it often does require additional effort.

Responsive Web Design changes this.   Heavily using CSS,  Responsive Web allows the content and layout of a site to dynamically, and fluidly adjust with the screen size.   e.g. Nav bars becomes Nav drop downs.   Images change size,  multi columns becomes single columns, … etc.    The result is a single site/content, that renders nicely across multiple devices.

Mashable called 2013 the Year of Responsive Web Design.  http://mashable.com/2012/12/11/responsive-web-design/

Many tools and frameworks exist to help provide Responsive Web Design.  Among our favorite is: Twitter’s bootstrap  : http://getbootstrap.com/

So now, we have various options for  ”going mobile”.

1) Responsive Web Design

2) Mobile Web Site

3) Native Mobile App

Responsive Web is not necessarily a replacement for 2 and 3.   Responsive Web is generally good for content,  media rendering,  it’s likely good for most informational sites.    Wordpress and other CMS are now offering responsive theme/templates,  allowing Responsive Web to be more the rule than the exception in web design.  Here’s an example of a Responsive Web site : http://www.teamimpact.com

Mobile Web Site are web sites dedicated for use on mobile devices with their smaller screens.   They can range from being simple to very elaborate, utilizing mobile UI best practices, and HTML5 to provide a functionally rich experience.   They are typically best for the more functionally intensive sites, such as e-commerce. Some of these mobile sites can even be wrapped with a small piece of native code, enabling them to be deployed as mobile apps.    Here’s an example of a Mobile Web site : http://m.teamimpact.com

Native Mobile Apps are applications coded with/for specific platforms  eg: IOS, Android, Windows, …etc.   They are necessary if the features/functions of applications are more dependent on native device hardware, or to maximize the application fluidity with the device/OS.     As both IOS and Google’s app store are mature and have a robust eco system of app developers,  there is an abundance of tools and building blocks available for development.      For example, this is the reason LinkedIn has evolved from mobile web to native mobile apps.  In 2011,  their mobile offerings were based on a mobile web site:
http://venturebeat.com/2011/08/16/linkedin-node/   In 2013, they had redeployed using native mobile apps: http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/.

There are also combinations of the above.  For example, a responsive web site can be used to render to computers and tablet, while a mobile site is used to render to phones.   Another example is a mobile web site (which is already customized to small screens),  can also be responsive, allowing the site to be further optimized for the varying screen sizes of different phones.  E.g. As of this writing,  Travelocity has done exactly that with the “hotel” section of their mobile site: iphone.travelocity.com.

Of course, which method/combination of methods to use still falls into the “It depends” cliché, but going mobile now has never been more easy and fun.

Share meFacebookLinkedInTwitterGoogle+Email

Comments are closed.