RWD Main Ingredients

This example summarizes the main ingredients of RWD (Responsive Web Design).

You don't need to look at the source code. All the info shows up in the Web page below.

You can find working examples for some of the concepts below in that W3Schools Responsive Quick Overview Page. But they don't summarize the RWD basic ingredients as thoroughly as below.

Viewport Meta Tag
- Responsive Pages: Use the responsive viewport meta (width=device-width, initial-scale=1.0) so that pages load with no zoom at the default device CSS viewport width, which is fairly small (375 CSS pixels for standard iPhone).
- Pages with Fixed Width Content: It's usually best to use the viewport meta, but with width=1200 or whatever the content width is. Otherwise mobile browsers will choose a viewport width usually in the 980 CSS pixel range, which means blocks might not align properly since 100% width content will render at 980px wide, which is different from fixed width blocks.
Font sizes can be set with vw (viewport width) units which change proportionally to a device's viewport width. 1vw is 1% of the device's viewport.
Page layout blocks (stripes or sections of the page) are set to 100% width (rather than fixed widths) to be responsive to the device's viewport width.
CSS media queries are used to create breakpoints so that different CSS is applied depending upon the device's viewport width.
- Multiple columns on large devices are often changed to fewer columns on medium-sized devices. On small mobile devices, columns usually change to stacked 100% width blocks (no columns).
- Certain content might be entirely removed from the page on small devices (display:none; in the CSS)
- On small devices, fully visible nav menus are often removed from the page and replaced with a small icon that triggers a dropdown menu that contains the menu's items.
- Different image might inserted into the page based on device width. For example, a large image ideal for a desktop screen or tablet, might be changed to a different, smaller image ideal for a phone.
  - If the image is inserted through CSS (background image), then CSS media queries are used change to a different source file.
  - If the image is inserted through HTML, then the new HTML <picture> element (has functionality like media queries built in) is used to change to a different source file.
Columns are implemented as percentages (for example 50% / 50%) rather than as fixed pixel widths.
- When such columns are placed in a responsive 100% wrapper that adapts to various viewport widths, the columns themselves become responsive to the different viewport widths.
- A responsive CSS framework is usually used to implement responsive columns. Such frameworks come with pre-defined column CSS classes (usually based on a 12-column grid) that allow you to specify exact column configurations on various sized devices based on pre-defined media query breakpoints.
Images should be set to 100% width of their parent container. When the parent containers are responsive (for example, responsive columns), the images are responsive to different screen sizes since they conform to the responsive parent containers.