Responsive Web Design

• Designing webpages in a way that webpage adapts to the visible area (Width and Height) of the screen. 
• Page layout should expand or shrink smoothly and alter itself to optimize and enhance the user experience.
• Term "Responsive design" is generally used in the context of mobile devices but responsive design also covers wide screen devices like Smart TV and Gaming Consoles.
• There is possibility of size related issued in wide screen devices, so that should also be considered.
• Earlier web pages were mostly being viewed in desktops but the same is not true today. Today we don't know the size of the device where our webpage will be viewed. Thus the need for webpages to be designed for various screen sizes and browsers.
• Adaptability is the buzz word for Responsive Design.

Focus on more than just Phablets

• Different UI Device sizes - 
• Smartphones
• Tablets
• Desktops
• Wide Screen Smart TVs and Gaming Console

Mobile First Design Approach

• Its a good practice to design first for the mobile in a linear manner and then organize the widgets for wider screens.
• Designing for the mobile environment comes with a natural set of constraints.
• These constraint provides the much needed focus and are good for the overall User Experience.

Importance of Unlearning

We need to forego outdated information and learn new age knowledge.

• Earlier TV used to be called Radio with pictures. Radio programs are supplemented with running commentary because expressions, movement of actors was not visible. Older TV programs also used to be supplemented with running commentory though not needed.
• Traditionally designing was always done for a constraint canvas whether it is - 
• Cave Painting (where cave wall was our canvas)
• Stone sculpture (where stone was the canvas)
• Painting 
• Newpaper Design
• Business Card Design
• Wedding Card Design (list is endless).
• Even most of the webpages were designed with desktops in mind.

A Not that Good Solution Approach

• Device Experience
• Having different website for mobile and desktops:
• It doesn't address the problem of adaptability.
• We are still applying constraints on our design.
• URLS cannot be shared between devices.
• Doesn't address the landscape and portrait layouts on the mobile devices.

Related Points to remember

• Mobile Users Deserve the Same Quality of Browsing Experience. 
• A simple HTML file in a web browser automatically adapts to fit the width of that browser. We have been breaking the responsiveness of the web over the years by designing to constraints.
• Mobile browsers have the ability to take the full-size webpage and scale it to fit on the browser's screen. This gives users the ability to pinch and zoom in order to read it.
• The idea for responsive design is that user should not be doing pinch and zoom to read it, content should get rearranged for the optimal user experience.
• Hover can't be used on Smartphones and many other devices, thus special care is needed while designing websites relying on Hovers.
• Most touch devices activate the hover state on tap.
• There is a need to ensure sufficient spaces between the two actions (navigations/buttons etc), this is needed to ensure that user could easily tap with the fingers.
• Font Selection, Menus, Links should also consider different devices.
• If the requirement is not to expand or shrink the image with the window size but just reducing the width of the image by hiding the overflow the image, then consider using background image.

Steps to Responsive Design

• Responsive design uses feature detection (mostly on the client) to determine available device capabilities and adapt accordingly.
• Responsive design is achieved with a combination of following to change layout based of the size of the viewport:
1. Flexible Grids,
• As much as possible use proportions for measurement and never design for a fixed layout.
• Width, Font size also should be relative (width in percentage and Font Size in ems).
• Margins, Padding should also be relative.

2. Flexible Images and Media,
• Width of images should always be entered and needs to be relative.
• Max-Width should be set to 100%.
• Wide images overflow out of the containing window if the size is reduced. "Max-Width" prevents the value of width property from becoming larger than max-width.
• With max-width property set, img element will render at whatever size it wants, as long as it’s narrower than its containing element. 
• It gives us floating image.
     img,
     embed,
     object, 
    video { 
  
  max-width: 100%;
  height:auto;
  // To ensure the image is not getting distorted. 
     }

• If we wish to hide the excess image data, we can also use "overflow:hidden".

3. Media Queries
• Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen).
• It is cornerstone of Responsive Web Design.
• It is an improvement on CSS2 Media Types, which allowed us to provide different CSS properties for different media types, thus allowed us to control the document presentation on different devices.
• Refer to W3C specification for more details.
• Different Media Types - all, braille, embossed, handheld, print, projection, screen, speech, tty, and tv.
• Example -
• <link rel="stylesheet" href="main.css" media="screen" />
• @media screen {
      .container {
          width: 90%;
      }
  }
• @media handheld {
      body {
          font-size: 110%;
      }
  }
• Media types were first towards in the direction of Responsive Design but not sufficient for Responsive Design thus came Media Queries.
• Media Queries are used to customize CSS for specific types of media, inspecting the physical characteristics of the devices and browsers.
• Following are the two components of Media Queries:
• Media Type
• Condition comparing a feature to a value in parenthesis. 
• We can have more than one condition linked with And/Or etc.
• Popularly used to compare width but other features like height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, resolution, scan etc.
• Examples:
• <link rel="stylesheet" href="style_screen_wide.css" media="screen and (min-width: 960px)" />
• @import url("style_screen_wide.css") screen and (min-width: 960px);
• @media screen and (min-width: 960px) {
      .container{
         width : 90%;
      }
  }
• @media screen and (min-device-width: 480px) and (orientation: landscape)

4. Viewport Meta Tag

• Term 'Viewport' refers to window of the browser.
• Used along with Media Queries to control the responsive design.
• Mobile browsers have the ability to take the full-size webpage and scale it to fit on the browser's screen. The default window size of the page is taken as 980px and then browser scales it to the mobile's width.
• This is because before responsive design became popular, the expectation was to get fix-width desktop experience on mobile device.
• To overcome this Apple introduced the viewport meta tag, most others adopted this but its still not a standard from w3c.
• Viewport metatag is placed inside the head and is used to control the scale of the page.
• Viewport tag allows us to control the size of that canvas, and override that default behavior.
• Examples -
• <meta name="viewport" content="width=320" />    //  Bad Idea because of hardcoding width to 320px.
• <meta name="viewport" content="initial-scale=1.0, width=device-width" />     //  setting the width to 100% of the width of device.
• Initial scale means default view is without zoom, we could also set the max-scale if we wish to disable (value = 1) or restrict the feature of pinch and zoom to 200% or any other value.

5. Breakpoints
• On altering the screensize(growing or shrinking), we'll reach a point where the layout design will get altered to suite this new size like rearranging of fields, shift from 3-column layout to  2-column or stack, Font sizes will reduce etc.
• How many breakpoints and where to set them depends on the website, but there are few tools which can help in this. Ex. web developer extension from chrispederick.
• Examples -
• <480px  - Smaller smartphone screen sizes
• <768px  - Larger smartphones and smaller tablets
• >768px  - Large tablet screens and desktops screens.
• <320px  - Low resolution phones and other devices like barcode reader
• >1024px - Wide screens devices

Cross Browser Testing Tools

•  There are many services for performing cross-browser testing, following are few examples:
• browserstack.com
• crossbrowsertesting.com

Support for Older Browsers

•  Following are helpful when it comes to support HTML5 and CSS 3 features in older browsers:
• caniuse.com
• modernizr
• html5shiv
• There are many JS based solutions available for HTML5 and CSS3 features not available in older browsers.

Some Words of Caution

• Most responsive websites take more time to load.
• A responsive website deliver large amounts of code (which is even more when a RWD framework is used) irrespective of the device.
• Processing power/Rendering capabilities of a smartphone are much lower than the desktop, the amount content/data/code greatly impacts the rendering time.
• Compress page resources (using GZIP etc) for easier transmission across networks is a good practice.
• Modular/Multiple css files are very convenient for development but not ideal scenario for deployment. Using CSS Preprocessor like SASS, LESS etc help in easy management of CSS during development as well as production.
• Reducing the image sizes using tools like tinypng can reduce data transmission. 
• Using service like adaptive-images.com, which detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embeded HTML images.
• A Content Delivery Network (Network of various servers to serve content at various locations to reduce network time) for Static Content can improve performance.
• Using a Content Management System can also help in improving performance. 

Few Popular examples of Responsive Websites:

1. Time.com
2. living.is
3. Expedia.com

 

 

Key Terms

• Adaptive Design
• Another term for RESS.

• Breakpoint
• On altering the screensize(growing or shrinking), we'll reach a point where the layout design will get altered to suite this new size like rearranging of fields, shift from 3-column layout to  2-column or stack, Font sizes will reduce etc.

• Device Experience
• Design strategy with different websites for each device. It is used for maximum optimization for each type of device.

• Display Area
• Browser's viewport.

• Media Type
• First Attempt at the responsive design, part of CSS2 specification. 
• HTML 4 and CSS2 currently support media-dependent style sheets tailored for different media types.
• Created by W3C for classifing each browser or device under a broad, media-specific category. 
• The recognized media types are: all, braille, embossed, handheld, print, projection, screen, speech, tty, and tv.

• Media Query
• Media queries extend the functionality of media types by allowing more precise labeling of style sheets
• A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are 'width', 'height', and 'color'. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

• Multi-Channel / Omni Channel
• In simple terms - Multi-Device
• Refers to multiple channels to content delivery - Smart Phones, Tablets, Desktop, Wide Screen Devices etc.

• Rendering Surface
• Entire display of the device.

• RWD
• Responsive Web Design

• Viewport
• Window of the browser.
• It has nothing to do with the device.

What Next ? - RESS

• Responsive Design with Server Side components.
• Also referred to as "Adaptive Design".
• This is second generation of RWD which takes performance into account. [Refer to related section - Some Words of Caution]
• RESS can deliver the best of "Responsive Design" and "Device Experience" without the challenges that can hamper each. 
• Server will deliver code and content based on the client device allowing responsive website to load much faster on different devices.
• Server-side techniques include user agent detection, server-side breakpoints, and robust server-side feature detection.
• Feature Detection vs Device Detection
• Feature detection framework runs a test in the browser to get a boolean answer as output: "Is X Supported?" and the answer is mostly "true" or "false".  It works on all browsers (current and future). Ex Modernizr.
• Device Detection framework analyses the HTTP header of the device, to get information about the device, then gets capabilities for that device from a database maintained for this purpose.
• Cookie can be used to share the information between client and Server.