Responsive web design – HTML 5

What is responsive web design ?

Responsive web design (often abbreviated to RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)

Elements of responsive web design :

It used css3 media query. 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

Now learn how to create responsive web design :

portrait-landscape responsive web design

This shows the the most significant screen sizes, from the smallest to the largest.

Fashion phones:
128×220 Samsung F210
240×400 LG favorite. Prada and Viewty.
Handheld touchscreens of the iPhone variety:
240×440 Various Palm and HP
240×480 LG KF700
Typical Palm/Blackberry form factor. US enterprise with portrait or square displays:
240×240 Samsung F210
240×260 Blackberry Pearl 8100
320×240 Various
320×320 Palm and Samsung
Clamshell:
640×480 HTC X7500, Qtek 9000, etc.
800×352 Nokia E90 Communicator
800×400 Sony Ericsson Xperia X1

Example of responsive menu :

responsive-code

/* small screens */

@media screen and (max-width: 44em) {

body {

margin:1.5em 0;

}

nav[role=”full-horizontal”] {

ul {

padding:0 .5em;

}

ul > li {

width:100%;

padding:.45em .25em;

margin:0 0 .55em 0;

&:after {

box-shadow:none;

}

}

}

}

Output :

menu-responsive