Responsive Web Design

Agenda

• What is RWD ?• Main Components (How it does work ?)• Related Concepts

Responsive Web Design

RWD is the concept of developing a website in a way that allows the layout to adjust according to the user’s screen resolution (view port) using media queries.

Our picture of a “web visitor” is rapidly evolving

Increasingly web visitors aren’t using PC’s

•1.8 billion internet connections in the world

today.

•6.8 billion people in the world today.

•3.4 billion people with mobile devices today.

( roughly ½ the population of the planet)

Why it is relevant ?

So mobile is important(big surprise)

49%

29%

14%

8%

Smaller displays

Tablets and notebooks

Monitors with larger displays

Smartphones

And today’s web statistics show plenty of fragmentation

Each new device requires a dedicated site

Site

Home

About

Contact

Mobile

Home

About

Contact

Tablets

Home

About

Contact

And this quickly gets out of control…

Site

Home About Contact

Mobile

TabletsHome

About

Contact

Widescreen displays

Home

About

And new Internet Devices are on the

way

Retina Display

Google Glass

Cars

We can’t create a new website for each new

device

What is the ideal solution?

Create once and adapt for everywhere

Main Components

• Media Queries• Fluid Grids• Scalable images

Media Queries

• W3C created media queries as part of the CSS3 specification.– Enhanced media types. – Allows targeting of specific physical characteristics of the

device.

Media Queries

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href=“min.css" />

a media type (screen), and the actual query enclosed within parentheses, containing a

particular media feature (max-device-width) to inspect, followed by the target value (480px).

Media Queries

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />

Asking device if its horizontal resolution (max-device-width) is equal to or less than 480px.

Media Queries

Can include MQ in CSS as part of a @media rule:

@media screen and (max-device-width: 480px) { .column { float: none; }

}

Fluid Grids

target ÷ context = result

Title – target width= 700px

Target column width = 329px 329px ÷ 988px = 33.29%

700px ÷ 988px = 0.7085 *100 =70.85%

Context Width= 988px

Title – target width= 700px

Calls for pages element sizing to be in relative units like percentages, rather than absolute units like pixels or points

Scalable images

Scale to size of containing elementul#image-icons li img {

max-width:100%}

Scalable images

Scale to size of containing elementul#image-icons li img {max-width:100%}

ul#image-icons li img {max-width:50%}

Related Concepts

• Mobile First Approach• Progressive Enhancement• Graceful Degradation

Mobile First Approach

• Mobile experience should be the first one created.• Three reasons why:

– Mobile is exploding– Mobile forces you to focus– Mobile can extend your capabilities

Graceful Degradation

• Focuses on building the website for the most advanced/capable browsers.

• Older browsers are expected to have a poor, but passable experience.

• Small fixes may be made to accommodate a particular browser ( they are not the focus )

Progressive Enhancement

Progressive Enhancement consists of the following core principles:

•Basic content and functionality should be accessible to all web browsers.

• Enhanced layout external CSS.

• Enhanced behavior external JavaScript.

• End-user web browser preferences are respected.

Presented by: