The Chronicles Of Responsive Web Design

HeadStart TechTalks Mumbai November 02, 2012

“Stop Thinking in Pages. Start Thinking in Systems.” - Jeremy Keith

Demands Customers today access your website from heterogeneous

devices. Web as a platform is forced to become device

agnostic.

Option 1 Dynamically serving different HTML on the same URL

Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on

whether the user agent is a desktop or a mobile device. GET /page-1 HTTP/1.1

Host: www.example.com

(...rest of HTTP request headers...)

HTTP/1.1 200 OK

Content-Type: text/html

Vary: User-Agent

Content-Length: 5710

(... rest of HTTP response headers...)

Option 2 Separate mobile URLs

A common practice followed by many i.e., pages on www.example.com serving desktop users having corresponding

m.example.com pages serving mobile users.

Annotations on the desktop page

<link rel="alternate" media="only screen and (max-width: 640px)"

href="http://m.example.com/page-1" >

Annotations on the mobile page

<link rel="canonical" href="http://www.example.com/page-1" >

Option 3 Responsive Web Design aka RWD

And this is what we gonna talk about...

What is RWD? ONE URL

+ SINGLE CONTENT

+ ONE CODE

+ CSS3 MEDIA QUERIES

= MULTIPLE DEVICES

Responsive Web Design is the approach that suggests

that design and development should respond to the

user’s behavior and environment based in screen size,

platform and orientation.

Key Features of RWD?

Feature 1 Flexible Grid

Feature 2 Flexible Images

Code img {

max-width: 100%;

}

Instead of just rendering at its native width and overflowing its containing box, the image

would render at its native dimensions as long as its width didn’t exceed the width of its container.

Feature 3 CSS3 Media Queries & Screen Resolutions

/* Visibility Classes ---------------------- */

/* Standard visibility targeting */

.show-for-small, .show-for-medium, .hide-for-large, .show-for-xlarge { display: none !important; }

.hide-for-xlarge, .show-for-large, .hide-for-small, .hide-for-medium { display: block !important; }

/* Very large display targeting */

@media only screen and (min-width: 1441px) { .hide-for-small, .hide-for-medium, .hide-for-large, .show-for-xlarge { display: block !important; }

.show-for-small, .show-for-medium, .show-for-large, .hide-for-xlarge { display: none !important; } }

/* Medium display targeting */

@media only screen and (max-width: 1279px) and (min-width: 768px) { .hide-for-small, .show-for-medium, .hide-for-large, .hide-for-xlarge { display: block !important; }

.show-for-small, .hide-for-medium, .show-for-large, .show-for-xlarge { display: none !important; } }

/* Small display targeting */

@media only screen and (max-width: 767px) { .show-for-small, .hide-for-medium, .hide-for-large, .hide-for-xlarge { display: block !important; }

.hide-for-small, .show-for-medium, .show-for-large, .show-for-xlarge { display: none !important; } }

/* Orientation targeting */

.show-for-landscape, .hide-for-portrait { display: block !important; }

.hide-for-landscape, .show-for-portrait { display: none !important; }

@media screen and (orientation: landscape) { .show-for-landscape, .hide-for-portrait { display: block !important; }

.hide-for-landscape, .show-for-portrait { display: none !important; } }

@media screen and (orientation: portrait) { .show-for-portrait, .hide-for-landscape { display: block !important; }

.hide-for-portrait, .show-for-landscape { display: none !important; } }

What is the need for mobile

version anyways? • Allows websites to reach more people (80% of the world’s population

has a mobile device, appx 90% of phones sold in 2012 equipped with

browser) – (I am sure you want this)

• On mobile devices you can take advantage of new

technologies (geolocation, touch events and more)

Advantages Of Responsive Web Design

Better

PERFORMANCE

Saves TIME SEO BENIFITS Saves MONEY

Wider Browser

Support

Google Loves It Too

“Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the

same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google's

recommended configuration”

Via: https://developers.google.com/webmasters/smartphone-sites/details

Few Responsive Sites By Google • http://picasa.google.com/ • http://www.google.com/intl/en/chrome/devices/ • http://www.google.com/events/sciencefair/ • http://www.google.com/culturalinstitute/#!home • http://www.google.com/goodtoknow/ • http://www.google.com/about/

PriceBaba On Large Screens / Desktops

#1

#2

PriceBaba with Responsive Web Design

on mobile / small screen devices

#1 #2

In Perfect World We Would End Here.

But Sorry We Don’t Live in Perfect World.

Few More Things To Come!

Wait For It!

CONS?

• Takes Time To Load

• SEO Ranking On mobile will be different than

ranking on desktop (via smashinghub.com)

o Google-Mobile Bot v/s Google Bot – different keywords to target for

mobile users

• Takes time to understand responsive design and

build it. o You have to (re)DESIGN your website from scratch

• Wireframes and mock-ups are needed before

building up for mobile and desktop o layout changes might take an extra effort

Few More Things… Below are the few fancy stuff you can use while

playing with Responsive Web Design: o RESS – Responsive Design + Server side components

o FITTEXT

o Modernizr.js / enquire.js

o jQuery UI – Touch Punch

o Style Tiles

o Fit Vids

Frameworks for RWD • Foundation

o PriceBaba; SwitchMe; ProjectHeena; InstaMojo uses Foundation

• Twitter Bootstrap o SmartMumbaikar uses Bootstrap

• inuit.css

• Fluid Baseline Grid

• Less Framework 4

• SimpleGrid

References • seomoz.org

• Bizdharma.com

• smashinghub.com

• labnol.org

• And…. Google

One More Thing

Responsive Web Design Is Not The Solution To World

Peace

It is evolving, might not be fit for all kinds of website,

look before you leap.

Thank You!

Tirthesh J Ganatra | TG@PriceBaba.com | @GanatraT