Lecture – Responsive Web Design I

 
Responsive Web Design (RWD)
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior
and environment based on screen size, platform and orientation using the combination of flexible grids, flexible images and
media queries.

I. Overview
A site designed with RWD adapts the layout to the viewing environment by
using fluid, proportion-based grids, flexible images and CSS3 media queries,
an extension of the @media rule, in the following ways:

 The fluid grid concept calls for page element sizing to be in relative
units like percentages, rather than absolute units like pixels or
points.
 Flexible images are also sized in relative units, so as to prevent them
from displaying outside their containing element.
 Media queries allow the page to use different CSS style rules based on characteristics of the device the site is
being displayed on, most commonly the width of the browser.

Why Responsive Design?

 Getting the right design on every device

Creating a website that not only will look good and work correctly on the devices that are on the market now, but is
likely to look good and work correctly on any new devices that will be available in the future.
 Less Work / Less Cost
Only have to create one website, one design, one set of code, and one set of content.
 SEO Optimized
A separate mobile site, with a separate set of URLs, can create issues with your site’s placement in search results.

Pros
 Only have to maintain a single website
 Don't need to deal with mobile-specific URLs
 Addresses a wide multitude of devices: phones, tablets, desktops, etc.
Cons
 More difficult to optimize properly for specific devices (for example, phones might get desktop-sized images)

II. Main Components

The three(3) main components that made up a RWD:

A. Media Queries
Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a
certain condition is true. It enables to switch stylesheets based on width and height of viewport to have the same content,
new view depending on device.
Use a specific styles on different devices
@media screen and (max‐devicewidth: 480px) { 

1 
 
 Lecture – Responsive Web Design I
 
   … mobile styles here…  
}

Use a specific CSS on different devices

<link rel="stylesheet" type="text/css” media="screen and (maxdevice‐width:480px) and 
(resolution: 163dpi)” href=" shetland.css" /> 
 
Define the Breakpoints
 3 major breaks: 480 / 768 / 1024
 3 major media query rules: < 480, < 768, > 768

B. Fluid Grid
A fluid is a substance that continually deforms (flows) under an applied shear stress.

Importance of Fluid Grids

In adaptive grids, we define pixel-based dimensions. Hence we will have to adjust the widths and heights manually in
certain device viewports. Since fluid grids flow naturally within the dimensions of its parent container, limited adjustments
will be needed for various screen sizes and devices.

How Fluid Grids Work

We used to design inside fixed grids with the 960px system. Then the layout became adaptive by using different pixel sizes
at different screen sizes.

In fluid grids there is a defined maximum layout size for the design. The grid is divided into a specific number of columns
to keep the layout clean and easy to handle. So whenever the device or screen size is changed, elements will adjust their
widths and heights by the specified proportions to its parent container.

C. Flexible Images & Media

Instead of fixed width, objects is set to some percentage which will depend automatically to the device’s screen size.

Using the width Property

If the width property is set to 100%, the image will be responsive and scale up and down. To prevent the image to be
scaled up to be larger than its original size, use the max-width property
img { 
   max‐width: 100%; 
      height: auto; 
} 
Example, set different background images for different devices.
/* For width smaller than 400px: */ 
body { 
    background‐image: url('img_smallflower.jpg');  
} 
/* For width 400px and larger: */ 
@media only screen and (min‐width: 400px) { 
    body {  
        background‐image: url('img_flowers.jpg');  
    } 
} 

2