RWD

Responsive Web Design – Approach analysis


What is RWD (Responsive Web Design)?

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)

– from Wikipedia

RWD work on principal of “Single URL – Single codebase

Different approaches to make site responsive:

  • Traditional Responsive Web Design (RWD) approach: RWD is a combination of fluid grids and images with media queries to change layout based on the size of a device viewport. It uses feature detection (mostly on the client) to determine available device capabilities and adapt accordingly with help of Javascript & Media Query
  • Responsive Mobile First Approach: Start with simplest, mobile friendly linearised version of the design and progressively enhance it with Javascript & AJAX & Media Queries.
  • Responsive Web Design with Server Side (RESS): Combining responsive Web design with server side component (not full page) optimization is a way to extend client-side only solutions. With this technique, a single set of templates define an entire Web site for all devices but key components within that site have device-class specific implementations that are rendered server side.

Each approach has its pros and cons. Though one approach covers cons of other approach. For detail comparison of these approaches please see:

Also, this document will give a summarized picture of problem with different approaches.

Which approach to use?

There are many contributing factors to decide an approach eg. Set of devices to be supported, support for future devices, variation in design of Desktop & Mobile … . Looking at different approaches and their pros & cons, a hybrid approach of RESS & Mobile First will always give the best result, though a detailed analysis of requirement is required to decide.

Responsive Design decision and implementation is a wide topic and i would appreciate your thoughts, comments, feedback and search here. Please post your views and make this discussion more informative.

Advertisements

One thought on “Responsive Web Design – Approach analysis

  1. It’s difficult to find experienced people for this subject, however, you seem like you know what you’re talking about!
    Thanks
    Kim

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s