HTML and CSS Reference
In-Depth Information
Figure 17-1.
The Media Queries gallery showcases designs that adapt to different screen widths
The examples in Figure
17-1
preserve the same branding at each width, but the layout changes. Notice how
the thumbnail images in the first example are below the main content at the two narrower widths, but move
alongside when more screen estate is available. The navigation menu in the second example uses large, easily
tappable buttons at the narrowest width.
Desktop or Mobile First?
Planning a responsive web design involves careful thought about the order of elements in the underlying HTML.
Although you can use media queries to adapt a desktop design to display differently on smaller screens, it's
considered best practice to design for mobile first wherever possible. Doing so forces you to concentrate on
essential content rather than design flourishes. One of the main considerations for mobile design is to keep the
overall size of the page to a minimum.
This chapter can't cover every aspect of responsive web design. It concentrates on the role of CSS and media
queries, but points out other issues that you should be aware of, such as image size and resolution.
