Responsive Web Design (RWD) – "A new paradigm for rich user experience(UX)"

Overview of Traditional web design

Web designing is a core part of user interface development. It is a way by which end user interacts with the system in an interactive way. Traditional user interfaces is built using old web design approaches where user experience or usability was not a big concern. End user was comfortable with UI navigation flow as long as user is able to execute business workflows. JSP, JSF, ASP.net, PHP, HTML’s were the top languages and specifications for UI development. 

What was missing in Traditional web design?

If we look at the current information technology world and available latest user interface specifications below are some missing parameters in traditional web design.

1. Usability
2. Field Research
3. Information Architecture
4. Interface Layout
5. Interaction Design (IxD)
6. Digital Media artifacts
7. Brainstorm Coordination
8. Prototyping 

Introduction to Responsive Web Design (RWD)

Responsive web design is an approach to web design which focuses on rich user experience and provides optimal usability to users for viewing websites. User navigates responsive websites with easy reading, minimum scrolling and less resizing.

Responsive web design is best suited for

• Desktop Computers
• Tablets (small and large tabs)
• Smart Mobile Phones

Responsive web design based sites could be best visible on all resolutions starting from 240px to 1680px.Responsive web sites adapts the screen layout as per viewing environment i.e. as per device types. Devices like desktop shows multiple tabs on screens but same multiple tabs could become a burger menu when see on smart phone. In another use case multiple images on desktop device could become carousel component to display all images on smaller resolution devices like tablet or iPhones.

Why do we need Responsive Web Design (RWD)

"The Future of the web is Mobile" world is rapidly changing with heavy usage of smart devices. Smart phones and tablets are common devices across the world. As per a survey 51% people in US are using smart phones. Same trend has been observed by other countries. Everyone would like to access their applications on smart phones and hand held devices.

Industry is rapidly moving towards application transformation. Legacy or traditional websites along with customer facing UI applications are moving to smart devices. Android apps, iOS apps, windows apps are now part of any information technology transformation. Banking, Finance, Insurance, Retails, Energy, pharmaceuticals and other verticals have started moving towards responsive sites. User experience along with usability becomes an important aspect for industries to run their business successfully. We cannot ignore its importance. So we are also addressing RWD over here.

More than 4.3 billion people in the world will use a mobile phone this year. Even more impressively, by 2017, eMarketer predicts the number of mobile phone users to surpass 5 billion worldwide.

Source: http://www.statista.com/chart/1517/worldwide-mobile-phone-users/

Responsive web design principals

Responsive web design follow the below core principles:

1. Mobile First approach

                      -To create a basic web site and enhance it for smart phones and PCs.

2. Progressive Enhancement based on browser, device or feature detection

                       -Using Modernizr JS framework.

3. Breakpoints identification

                        -Xs, Xm, Ld etc. based on device sizes.

4. Device Type Content rendering

                       -Render the same or different content for multiple devices.

Formula of Responsive web design

How to implement Responsive web design?

Responsive web design (RWD) implementation is based on some key features. Below are the features which need to be addressed to make a design responsive.

Fluid, Proportion-based grids

The fluid grid concept means sizing the grid columns in proportion based on page element sizing. It should be in relative units like percentages, rather than absolute units like pixels or points. Proportion-based grids are also known as flexible layouts. These relative lengths or units are used to declare common grid property values such as its width, margin and padding etc. 

Flexible images

Define image dimensions in relative units so that we can make sure it always displays within the size available. We can prevent images displaying outside their containing screen element area. We can set a max-width of 100% on all images on website. 

code 

img {
       max-width: 100%; ( /* max image widget based on device/browser size */)
     }

Using above styles it will not just render at its native width and overflowing its containing box, rather the required image would render at its native dimensions as long as its width didn’t exceed the width of its parent container. We can also use RWD framework provided specific styles for making responsive images. e.g. class .img-responsive is available in twitter bootstrap for flexible images.

For most of the embedded videos we can use below styles:

img 
{
     object {   /* object type is a media over here */
     max-width: 100%; ( /* max widget based on device/browser size */)
}

CSS3 Media Queries & Screen Resolutions

CSS3 provides rich media query support. Media queries allow the websites pages to use different CSS styles sheet based on media rule associated with it. Media rules could be defined based on device type and screen size. It will also take width of browser in consideration. The width of the viewport or device orientation (landscape/portrait) is some of the key parameters are used while applying media queries.

Syntax: "@media rule": it defines different style media rules for different media types/devices.

• In previous version (CSS2) we call it: “media types”
• In latest version (CSS3) we call it:  “media queries”

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 960px)" href="custom.css" />
<!-- CSS media query within a stylesheet -->
<style>
  @media (max-width: 640px) {
  .facet_sidebar {
      display: none;
  }
}
</style>

@media only screen and (max-width: 580px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    } }

Note:  When a media query is true, the corresponding style sheet or style rules are applied.

Code samples for Responsive web design

Basic Code Structure

Step: 1

We can easily get started on creating responsive design by adding some basic rules to the CSS stylesheet for your HTML website. First of all we need to add “viewport meta tag” to the <head> section of our HTML page. It tells browsers to display the page at full size instead of scaling it:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

With above tag we are assuring that smaller devices not to scale the content.

Step: 2

Our next step is to add the CSS code that controls the display in these small-screen situations using CSS3 media queries.

Use @media only screen code in your CSS stylesheet. Here is an example:

/* -----------Smartphone View----------- */ 

@media only screen and (max-width : 480px)   {

   /* All your smartphone rules go inside here */

}

/* -----------Tablet View----------- */ 

@media only screen and (max-width : 768px)   {

   /* All your tablet rules go inside here */

}

/* -----------Desktop View----------- */ 

@media only screen and (max-width : 1280px)   {

   /* All your desktop rules go inside here */

}

How to create a responsive image in twitter bootstrap 3? below are the sample code

<div class="col-md-4 col-sm-4 col-xs-12 ">

        <div class="customer">              

                <div class="customer-img ">

                   <img class="img-responsive" src="img/show-customer.jpg" alt="" />

                </div>

           </div>

</div>

Devices and Standard Viewports 

Below is the standard list for devices and viewports. It is just for viewport refererence

How to test Responsive web design? 

We can use the actual hand-held devices like smart phones, Tablets for testing the responsive design but we devices are not availavle we can even use RWD Test Simulators for testing. Simulators allow us to test on multiple resolutions across devices. Below simulators could be used. 

1. http://www.isresponsive.com/
2. https://www.responsinator.com/
3. http://ami.responsivedesign.is/
4. http://mattkersley.com/responsive/
5. http://www.browserstack.com/responsive
6. Google Chrome browser inbuilt simulator 

Industry views about Responsive web design? 

Gartner view on Responsive web design

"As per Gartner Report “Despite Its Limitations, Responsive Web Design Enables Many Organizations to Move to a Unified Web Channel."

Source: https://www.gartner.com/doc/2571622/despite-limitations-responsive-web-design

Forrester view on Responsive web design

"As per Forrester Report “The philosophy of responsive design represents the future path of multi-touch point Web design, according to a new report from Forrester. “Understanding Responsive Design” advises that while the road to responsive design contains its share of bumps, the destination is worth the effort.”

Source: http://www.cmswire.com/cms/customer-experience/forrester-responsive-design-represents-future-of-multitouchpoint-web-design-016786.php#null

What Does Google Think?

"Google says it’s easier and more efficient for their programs to index your content if your site is programmed using Responsive Design.  We say it’s easier all around, because content on a single URL can be accessed and shared more easily on any kind of device.  It doesn’t require different URLs or HTML applications.  That’s why we’ve been applying Responsive Design on our clients’ websites since 2011.*  They are all easily viewable in full content and color on small screen smart phones, big screen desk tops and any laptop or tablet in between. "

Source: http://www.wsiwebspecialist.com/the-webspecialist-blog/google-officially-endorses-responsive-design

Forbes Ecommerce Marketing Checklist for 2013

“Having a mobile friendly website is no longer just important, it’s critical.”

Source: http://www.forbes.com/sites/brentgleeson/2013/03/14/ecommerce-marketing-checklist-for-2013/

Guardian News & Media

“Guardian News & Media has today rolled out a brand new responsive mobile website, designed to optimize visually across all smartphones and small tablet devices.” As the use of mobiles and tablets continues to grow rapidly, so does the range of devices and screen sizes on which people are reading us. Our own mobile traffic has grown an incredible 63% year on year".

Source: http://www.theguardian.com/gnm-press-office/guardian-rolls-out-new-responsive-mobile-site-following-beta-trial

Advantages of Responsive web design

Frameworks available for Responsive web design

There are lots of frameworks available for responsive design implementation. Below are some top RWD frameworks which we can use to build responsive websites.

Challanges with Responsive web design

There are lot of challanges with Responsive web design implementation. Some time it becomes more cumbersome and complex with lot of devices, browsers and resolutions. Handling responsive stuff on devices from 220px to 1600px is a big deal becuase we have more than 100 devices available in market from android, ios,blackberry and windows OS. Below are some major challanges which we need to deal

Top Responsive websites 

https://www.barackobama.com/

http://magazine.rolexawards.com/

http://picasa.google.com/

http://www.google.com/about/

http://www.starbucks.com/

http://www.salesforce.com/

http://disney.com/

http://time.com/

http://www.eurosport.fr/

Summary

Based on above details we can go ahead and implement responsive web design (RWD). We can use available RWD frameworks to reduce development time and effort alternatively we can also use CSS3 media queries along with jQuery and java script support. Framework gives us more flexibility and reusability along with multiple readymade UI widgets and components. We should also address mobile first or desktop first approach based on business requirement. Targeted devices, browser support are also key attributes during responsive web designing. Breakpoints selection should always be optimum based on defined business scope.

References

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://www.slideshare.net/TirtheshGanatra/responsive-web-design-headstart-techtalks

http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

http://en.wikipedia.org/wiki/Responsive_web_design

http://webshopmanager.com/n-9447-5-benefits-of-responsive-web-design.html

http://www.thebyte9.com/news/responsive-web-design-what-can-it-do-for-your-business

http://www.statista.com/chart/1517/worldwide-mobile-phone-users/