What Is Responsive Web Design?
Responsive web design refers to progressively enhancing a web page for different viewing contexts (including smartphones and tablets) through the use of coding techniques including fluid layouts, flexible images, and media queries.1 This is accomplished with the following techniques:
- Flexible Measurements
- Flexible Images
- Media Queries
- Redesign for Screen Sizes
- Use of Meta Viewport Tag
Flexible Measurements
Web designers use measurements that adjust to the screen size available such as % for container widths and ems for font sizes or padding rather than a fixed measurement such as a pixel (px). An em is a relative unit of measurement based on the default font size of the web browser. 1em would be the same size as the default size. Decimals such as .5em can be used to declare half the size of the default font.
Flexible Images
Images become flexible when their height and width attributes are removed so that they no longer have fixed size constraints. A max-width of 100% rule is added in CSS which allows the image to flex as the page is scaled smaller.
Media Queries
Media queries set breakpoints for different screen sizes based on typical measurements such as a full screen for monitors, tablet sizes and then mobile size screens. Typical widths used for those breakpoints are at 64em for tablets and 37.5em for smartphones.
Redesign for Screen Sizes
Because the screen real-estate is so dramatically different, a benefit of using media queries is the ability to move content and other elements around to optimize the user experience based on what size viewport they are using. Full size screens tend to have content spread out more horizontally where smaller devices such as smartphones tend to be narrow, so designers will modify the scheme vertically.
Meta Viewport Tag
The meta viewport tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> is placed in the Head section of an HTML file and tells the browser to scale the page to the size of the viewport. This ensures that no matter what size screen is being used, the page will look as it was intended.
