HTML5, JavaScript, and jQuery 24-Hour Trainer

Lesson 37

Responsive Web Design

Web users now expect every website they access to be available not only on a desktop or ­laptop, but also on tablets and mobile phones. Although the browsers on mobile phones and tablets support most of the features examined in this book, it is not always easy to write HTML and CSS that provide an optimal experience on all devices because of their obvious differences in screen resolution.

This lesson will investigate a series of techniques and technologies that can be leveraged in order to create truly cross-device web pages. These techniques and technologies are often grouped under the umbrella term responsive web design, or RWD for short.

Responsive web design encourages designers to create a single set of resources for all devices, rather than creating specialized websites for different devices. This is becoming increasingly important as screen sizes diverge even within the same class of devices.

Responsive web design addresses the screen resolution problem from three angles:

• The techniques that can be used to construct HTML that automatically adjusts to ­different screen resolutions and creates the best possible user experience regardless of the screen resolution. These techniques present all the same information regardless of the screen resolution, but the manner in which content is sized and placed on screen will differ depending on resolution.
• The use of flexibly sized images and video that takes into account the overall width and height ...