RWD

Responsive Web Design V/S Mobile First approach


Responsive Web Design
RWD

Responsive Mobile First Approach

What it is ?
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. Start with simplest, mobile friendly linearised version of the design and progressively enhance it with Javascript & AJAX & Media Queries.
When to use ?
– If you want layout adjustments across devices.
– You can live without complete optimization for specific devices.
– You don’t have access to server-side solutions.
– You really don’t trust device detection.
– If you want layout adjustments across devices
– And optimization at the component level to increase performance or tune user experience.
– You don’t have access to server-side solutions.
– You really don’t trust device detection.
Web Page Size
– Responsive design is often implemented using only client-side adjustments to web pages, meaning that both desktop computers and mobile devices always download an entire web page – Much optimized as page loading work form low -> high (Mobile -> Desktop)
Load time
Slow
– Client side responsive design involves sending more data to the device than it might need – using unnecessary bandwidth and making the customer wait longer for their page
Fast
– As low version site is loaded fist which will garuntee that small devices will not get unwanted components/Media
– For Desktop version, this approach will take a while to enhance mobile version page to desktop version
Target Audience
– Devices having support of CSS3 and/or Javascript – Devices having support of CSS3 and/or Javascript
Adoption New Devices
-CSS/JS changes require to make site compactable for new devices – Change in CSS/JS & Serverside components
Time & Effort
Require 25-30% more development (compare to RESS) time to develop and maintain Responsive sites Its an hybrid approach and use best of RWD & RESS, so require more effort
Code Management
Same set of code is used for Desktop & Mobile. Though its possible to write some specific components for mobile/Desktop and call them via AJAX Same set of code is used for Desktop & Mobile. Though its possible to write some specific components for mobile/Desktop and call them via AJAX
Approach & Framework
Use javascript and/or media query to find device Use javascript and/or media query to find device
Caching
Same page version will be cached for all devices Same page version will be cached for all devices
Non-JS support
Use Media Query to support Non-JS responsive Device Not Supported, As additional components may be required to load via AJAX

Next Read:
Responsive Web Design V/S Responsive Server Side Design

References:

Advertisements

One thought on “Responsive Web Design V/S Mobile First approach

  1. I’m in complete agreement with a lot of the information in the following paragraphs.You certainly are a special article writer have real profit put your own views directly into apparent phrases. Anyone will be able to understand why.

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