10. “Make pages which are adaptable. Make pages
which are accessible, regardless of the browser,
platform or screen that your reader chooses or
must use to access your pages.”
- John Allsopp, A List Apart, 2000
12. “There’s an different approach to web page
layout which is gradually getting some traction.
The idea is that the layout is changed to best
accommodate the window size.”
- Richard Rutter, own blog, 2006
13. www.jrvelasco.com Example: when the screen was wide enough, a third column was shown
14. This was done with javascript, measuring the viewport width.
16. “... increasing a page’s flexibility and taking
necessary steps to ensure that it’s readable in as
many circumstances as possible...”
- Dan Cederholm, Bulletproof Web Design, 2006
This time focusing on readability instead of layout.
53. 16px 18px 21px 24px 36px 48px
The typographic scale
Looking better on smaller screens (tablets, iPad,...)
54.
55.
56. 16px 18px 21px 24px 36px 48px
The typographic scale
Even smaller for mobile and small screens.
57.
58.
59. Better font size
Larger screens need a larger font size,
smaller screens need a smaller font size.
60. body {
font-size: 100%;
}
p{
font-size: 1em; //16px
}
Great way of working. If you ever need to scale, you just need to change the root size.
61. body {
font-size: 100%;
}
ul {
font-size: 1em; //16px
}
footer ul {
font-size: 0.75em; //12px
}
footer ul p {
font-size: 1.33em; //?
}
But it can get complicated when nesting elements.
62. body {
font-size: 100%;
}
ul {
font-size: 1rem; //16px
}
footer ul {
font-size: 0.75rem; //12px
}
footer ul p {
font-size: 1rem; //16px
}
rem (root em) relates back to the root, not to the parent element.
65. “Anything from 45 to 75 characters is
widely regarded as a satisfactory length of
line for a single-column page...”
- The Elements of Typographic Style Applied to the Web
66. A handy way of showing character 45 and 75 within a text. Hat tip to Trent Walton
67. Readable text
font size
line length: columns
line spacing
68.
69. @media only screen and (min-width: 35em) {
#container {
-webkit-column-count: 2;
-webkit-column-gap: 20px;
}
}
One way of dealing with long lines of text is to create columns.
70.
71. The drawback is that people might need to scroll down the first column, up the second...
72. @media only screen and (min-width: 35em)
and (min-height: 40em) {
#container {
-webkit-column-count: 2;
-webkit-column-gap: 20px;
}
}
That’s why you can combine columns with a minimum height.
86. p{
line-height: 1.5;
}
Generally a good line height for larger screen sizes.
87.
88. @media only screen and (max-width: 45em) {
p{
line-height: 1.45;
}
}
Adjusted for smaller screens...
89.
90.
91. @media only screen and (max-width: 22em) {
p{
line-height: 1.4;
}
}
... and even more for mobile and very small screens.
92.
93.
94. “What we need is a fluid way to set line height.
...
Molten leading would maintain a specific font-
size while adjusting line-height based on width.
...
What I’m talking about is augmenting CSS with
range rules (effectively, min/max line-height) that
don’t yet exist, but should for the sake of
fluidity.”
- Tim Brown, Molten Leading, 2012
It would be nice if we had a min-line-height, like we have a min-width.