Best viewed on laptop/desktop.

Responsive Web Design
Presentation Notes

Build for Every Device

Aniket A. Suryavanshi
Front-end Developer at Idyllic Software

Audience

This document will explain you the basics of RWD which will help you create responsive pages, or use frameworks like Bootstrap more effectively.

Intro

Responsive Web Design (RWD) helps Web developers build apps which are cross device and cross platform compatible. Gone are the days of fixed 960 pixel width layouts. Long back. Today, Web Apps get accessed from a huge variety of devices. They differ in display resolution. One thing common to all of them is the Web browser. Responsive Web Design (RWD) is the answer to target all these users with a single app which can be accessed through the browser.

RWD apps work on PC + Mac + Linux + Android + iOS + Windows Phone + everything else with a Web browser.

RWD offers an enormous benefit to lean startups by enabling them to target a large number of users, as compared to developing native apps whose reach is limited to the selected platform.

What are media queries?

Media queries are CSS statements that facilitate applying CSS conditionally to elements. Device properties like viewport width, orientation, number of colours the device can display and type of device can be accessed through these queries and used to apply CSS rules conditionally.

A simple media query

@media (min-width: 700px) {
  p { color: red; }
}

This media query will make the p element's colour red when the viewport is 700px or wider than that.

This statement can be used in external CSS files, style tags in HTML files and in the link tag used for including external stylesheets in HTML files.

A complex media query

@media (min-width: 700px), handheld and (orientation: landscape) {
  /* CSS rules here will be applied when either or
     both these conditions are true:
     1. The viewport is 700px or wider.
     2. The device is a handheld and it's orientation
        is in landscape mode. */
}

mediaqueri.es

A great resource to stay abreast with the latest work done in RWD, and for some inspiration for your project.

Handling images

picture element's syntax

<picture width="500"  height="500">
  <source  media="(min-width: 1000px)" src="large.jpg">
  <source  media="(min-width: 600px)" src="med.jpg">
  <source  src="small.jpg">
  <img  src="small.jpg" alt="">
  <p>Accessible  text</p>
</picture>
This is a work in progress and not currently supported in all browsers.

The srcset attribute

<h1><img alt="The Breakfast Combo"
  src="banner.jpeg"
  srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"></h1>
Only WebKit has implemented this attribute at the time of this writing. Polyfills such as this can be used for compatibility accross major browsers.

Word of caution

RWD is not a replacement for native mobile apps currently. Facebook and Linkedin regretted preferring RWD over native mobile apps. Browser based apps are not as high performant as native apps, and do not get access to device's native APIs. But if your app doesn't need them, well, who cares! Marginal performance is the tradeoff to target large user base with RWD.

Example

A simple responsive grid.
Thank you!

Use a spacebar or arrow keys to navigate