Subject: Advanced Internet Technology

Topic: Responsive web design with HTML5 and CSS3

Difficulty: Low

Responsive web design (RWD)

Responsive web design (RWD) is an approach to web design which makes web pages render well on a variety of devices and window or screen sizes. Content, design and performance are necessary across all devices to ensure usability and satisfaction.

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.[9]
• 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.