Section 1
Preview this deck
px
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
0
All-time users
0
Favorites
0
Last updated
7 years ago
Date created
Mar 1, 2020
Cards (54)
Section 1
(50 cards)
px
Pixel, it varies with display resolution
Prevent content from overlapping other content, make it easier to keep footer content at the bottom of the page
Advantages of using Float
Absolute Units
Measurements that have predefined meanings or real-world equivalent
Wrap the content in a div to which we can set a specific pixel width, specify pixel values for the floated elements
Strategy for two-columns fixed width layout
Fixed Layouts
Layouts that stay put at a specific pixel width regardless of the size of the browser window or text size
Line Lengths
Measure of the number of words or characters in a line of text
Dependent on the order in which the elements appear in the source
Disadvantage of using Float
Relative, Absolute
Two Categories of Measurements
Fixed Layouts
Created at a specific pixel width as determined by the designer
10-12 words
Optimal line length (in words)
Set the left and right margins on the #wrapper container to auto which will keep the whole page centered
Strategy for two-columns fixed width centered layout
Set widths on all three-column elements and float them to the left, clear the footer to keep it at the bottom of the page
Strategy for three-columns fluid layout
Elastic Layouts
Layouts that resize proportionally based on the size of the text
Hybrid Layouts
Use a combination of pixel, percentage, and em measurements
Line lengths can get very long and uncomfortable to read on large monitors, less predictable, more difficult to achieve whitespace, more math involved in calculating measurements
Disadvantages of fluid layouts
Percentage values, omit the width values
Two ways of creating fluid layouts
Liquid Layouts
Other term for fluid layouts
Fluid Layouts
They follow the default behavior of the normal flow
rem
Root em, equal to the em size of the root element
Fixed, Fluid, Elastic, Hybrid
4 Page Layout Strategies
The need to pick a width, decision about the position of the fixed-width layout in the window
Points to consider when designing Fixed Layouts
Fluid Layouts
Layouts that resize proportionally when the browser window resizes
Fixed Layouts
Allow the designer to control the relationship of page elements, alignment and line lengths
Provides consistent layout experience while allowing flexibility in text size, tighter control over line lengths than liquid and fixed layouts
Advantages of Elastic Layouts
ch
Zero width, equal to the width of zero in the current font and size
Elastic Layouts
If the user makes the text larger, the box that contains it expands proportionally. Likewise, if the user likes her text size very small, the containing box shrinks to fit
pc
Picas (1 pica = 12 points)
60-75
Optimal line length (in characters)
Keep with the spirit and nature of the medium, avoid potentially awkward empty space, users can control the width of the window and content on desktop browsers, no horizontal scrollbars
Advantages of Fluid Layouts
vw
Viewport width unit, equal to 1/100 of the current viewport width
pt
Points (1/72 of an inch in CSS 2.1)
Elastic Layouts
Expand or contract with the size of the text
Simplified Markup and Styles, Color Coding, Headers and Footers, Make it Yours
4 Page Layout Techniques
pixel
Measurement equal to 1/96 of an inch in CSS3
cm
Centimeters
ex
x height, the height of lowercase "x" in font
Elastic Layouts
The result is that line lengths stay the same regardless of the text size
Relative Units
Measurements based on the size of something else
vh
Viewport height unit, equal to 1/100 of the current viewport height
Predictable layout, easier to design and produce, behaves the way the majority of web pages behave
Advantages of fixed layouts
em
Equal to the current font size
vm
Viewport minimum unit, equal to the value of vw or vh, whichever is smaller
Content on the right edge will be hidden if the browser window is smaller than the page, awkward amount of left over space on large screens, line lengths may grow awkwardly short at very large text sizes, takes control away from the user
Disadvantages of fixed layouts
mm
Milimiters
960
Width of most sites in pixels
Images and videos don't lend themselves to automatic rescaling along with the text and the rest of the layout, the width of the layout might exceed the width of the browser window at largest text sizes, not as useful for addressing device and browser size variety, more complicated to create than fixed-width layouts
Disadvantages of Elastic Layouts
Hybrid Layouts
Layouts that combine fixed and scalable areas
Fluid Layouts
The page area and columns within the page get wider or narrower to fill the available space in the browser window
in
Inches
Set widths on both column elements and float them to the left, clear the footer to keep it at the bottom of the page
Strategy for two-columns fluid layout
Section 2
(4 cards)