Image source:
Responsive workflow, but note that the order might not be this linear in reality.
| Responsive typography and units |
- Responsive typography
- Text design: produce a page that contains all the major HTML elements and a basic CSS style, so that everything will be covered.
- Have three distinct heading styles, rather than ten with subtle variation.
- Start with the <body> element
body {
font: 100%/1.5 serif; /* equates to 16px in most browsers */
padding: 1em 20%; /* stop content from bumping up against the edges of the browser */
}
- The measurements, em & %, are relative to computed font size of its parent.
Use ems to size typography and vertical measurements,
and percentages for layout and horizontal measurements.
- target / context = result
h1 {
font-size: 1.75em; /* 28 / 16 = 1.75 */
line-height:1.1428; /* 32 / 28 = 1.1428 */
/* Don’t need to declare a unit for the line-height property. */
}
|
| Responsive images and video |
|
| Media queries |
- Design various breakpoints: think first in terms of device classes, not specific devices. I prefer to let the actual content and images in the browser at the same time as making adjustments in response to the screen size.
- Add <meta name="viewport" content="initial-scale=1.0, width=device-width"/> between <head> tag. This tells browsers that a website shouldn’t be squashed down to fit on a small screen, and that the width of the browser window should be treated the same as the overall device width.
- Adopt em-based media queries. Not only will our website adapt based on the size of the viewport, but the size of the font too.
- To make media queries work for ie, here are the solutions:
|
Finally,
Test multiple devices, network speeds and in the wild.
(Resources: Build a responsive site in a week:
Part 1,
Part 2 (typography and grids),
Part 3 (images and video),
Part 4 (media queries),
Part 5,
Responsive workflow)
