Responsive Web Designing

 Understanding Responsive Web Design (RWD)

Responsive Web Design is an approach to web design which is aimed at :

  • Crafting sites to provide an optimal viewing and interaction experience
  • Easy reading and navigation with a minimum resizing, panning and scrolling
We may see the below snapshot which shows the same web site in different devices (like desktop, tab and mobile phone):
History 
The journey of Responsive Web Design is seen from the old days. This is traced in phase as : 
  • Fixed-Width Design 
  • Mobile Revolution
  • Responsive Web.
                    In case of Fixed-Width Design the websites were specially designed to fit well on most of the desktop screens. Usually the monitors were 800 x 1024 pixels wide. Gradually the monitors with other sizes also started appearing. This was now a problem and the designers had to work for all the different types of screen sizes.Gradually people started hearing about Fluid Design or Liquid Design.
                    Mobile phones gained ability to access internet in 90s. Mid 2000s, smart phones started gaining popularity. They started claiming that they could display the real webpages. They could display the exact pages as they could be seen on the desktops.
                    In the year 2004 - Cameron Adams demonstrated the first site layout that could adapt to browser view port width. By 2008 - many terminologies started appearing like Flexible, Liquid, Fluid & Elastic. Late 2008 / early 2009 - CSS3 media queries were almost ready. May 2010 - Ethan Marrcotte - The Godfather of   RWD coined the term RWD and defined it to mean fluid grid/flexible images/ media queries. Marchable - A leading media company called the year 2013 as the year of responsive web designing.

Responsive Vs. Adaptive Web Design
The Adaptive Web Design is different from Responsive Web Design in the below ways :
  • The Adaptive Web Design has several distinct layouts for multiple screens whereas Responsive Web Design has one layout with different style schemes 
  • RWD relies on flexible and fluid grids whereas AWD relies on predefined screen sizes
  • RWD is harder to make as compared to AWD
  • AWD is less flexible 
  • RWD sites load faster
  • Examples of AWD sites : http://www.screamingfrog.co.uk/  and RWD : http://www.icicibank.com/ 
Which one will you choose out of Responsive and Adaptive Web Design ?
This completely depends on the situation- one can decide and do trade off between the two. RWD is almost always  a safer option to go.It always functions well regardless of screen size. However in some cases adaptive would be the better option. This always will give the feel of a newer site in different devices. So if your site meets the right condition , Adaptive is a better option. Otherwise , Responsive is a better investment for making sure that you don't miss out all the potential mobile customers search for you online.

What leads us to go for Responsive Web Design?
There are many reasons which lead us to go for RWD or not. Some one can either opt the RWD or can look for other options. Below are some of the factors and respective justifications.

  • Ignore Them [Hoping that they go away just ignore them]
  • Build a separate mobile web site [.mobi or m.site for all the small screens and mobile devices. Double the work (one for desktops and other for mobile devices)]
  • Build an App for the Apple Store, Android marketplace, Amazon Kindle Store, Windows phone store , Try to get the customers to download and use, Maintain and update all  the versions

                                                                     OR
You can build a responsive Web Site 
(Which will solve all the problems )

CSS Media Queries
  • Media query is a CSS 3 module which allows content rendering to adapt to conditions such as screen resolutions (e.g. smartphones vs. high definition screens
  • It became W3C recommended standard in June 2012.
  • Considered to be the best technology for Responsive Web Design
  • Media queries look at the capability of the device and can be used to check many things such as : (Width and height of browser window, Width and height of the devices, Orientation, Resolution and much more.
  • Media queries are written using @media rule.
  • A typical media query rule looks like 
   
  • Some common media types are :


Understanding the Devices
Building understanding on the different devices allows and helps us to target CSS statements at a segment of design from start(0) to end (infinity).
Below snap shot shows the various devices ( for example : Mobile, Tablets & Desktop etc.) and their ranges:

Some of the media features - used with @media 

You may get the complete list of media features at :  http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Common Devices & Media Queries 
Phones and Handhelds :

Tablets






Steps to design a Responsive Web Page
  1. Design a page ( i.e index.html ) with at least four sections : Header, nav, contents and footer
  2. Create CSS file with reset CSS code and apply on the page
  3. Create CSS i.e. mobile-default.css in order to go for mobile first design
  4. Then two more CSS files i.e. tablet.css, desktop.css
  5. sometimes the site doesn't work fine for phone devices as it pretends to be large screen even if it is opened in a mobile device. In order to resolve this we write the DO NOT LIE css code : [<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />]
  6. Prevent resizing of fonts in landscape and portrait [Html{-webkit-text-size-adjust:none;}]
  7. Solution to the media queries are not working for IE < 9 [<!--[if lt IE 9]><script src='http://html5shim.googlecode.com/svn/trunk/html5.js'></script> <script src='http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js'></script><![endif]-->]
  8. Get the latest jQuery version from google :[https://developers.google.com/speed/libraries/devguide#jquery

Four Mandatory Steps

Four Sections Of Your Page

Let's have a look on the developed pages in different devices (Desktops/laptops, Tablets & Mobiles).





Some Of The Commonly Used Frameworks For Designing Responsive Web Pages/Sites:

  • Foundation 3 (http://foundation.zurb.com/ )
  • Skeleton (http://www.getskeleton.com/ )
  • YAML 4 (http://www.yaml.de/ )
  • Tuktuk (http://tuktuk.tapquo.com/ )
  • Gumby (http://gumbyframework.com/ )
  • Kube (http://imperavi.com/kube/ )
  • GroundWork (http://groundwork.sidereel.com/ )
  • ResponsiveAeon (http://www.newaeonweb.com.br/responsiveaeon/ )
  • BootStrap
Based on the requirement and comfort/competency of the team & other factors , some one can select any of the above available frameworks to develop Responsive Web Sites.

More About Bootstrap 
  • Originally known as "Twitter Blueprint"
  • Developed by Mark Otto & Jacob Thronton at Twitter ( as a framework to encourage consistency across internal tools)
  • Few months later many developers at Twitter began to contribute to the project as a part of hackathon
  • Then it was renamed to Bootstrap and released as an Open Source project on 19th August 2011
  • January 31st 2012 - Bootstrap 2
  • August 19th 2013 - Bootstrap 3
  • April 23rd 2015 was announced that bootstrap 4 is in development
  • This can be downloaded from : http://getbootstrap.com/
Happy Designing Responsive Web Sites !!!
Thanks for reading. 

Comments

Post a Comment