Page Layout with CSS Learning Web Design: Chapter 16

Lesson Overview The three types of page layouts will be presented: fixed, liquid and elastic Two and three column layouts templates with floats will be discussed Two and three column layouts using absolute positioning will be covered Finally, we will present a technique for centering a fixed-width page

Page Layout Strategies While these things are uncertain… The precise size of the user’s window The size of text set by the user There are three general approaches to page layouts that are used : Fixed Liquid Elastic Fixed LiquidElastic

Liquid Page Design Liquid layouts are the default behavior of the normal flow If you do nothing else, the page will adjust to the size of the user’s window The page area or columns within a page get wider and narrower to fill space in browser window Width of content is not controlled Do not use to force new lines

Creating a Liquid Design To specify a liquid layout, widths of columns or page are given in percentages There is 100% of the window available You can also specify no width and the default will be auto so the element will be the total width possible

Liquid Layout Pros and Cons Pros: You don’t have to design for the monitor resolution Can avoid empty space because text fills the window Liquid pages keep with the spirit of the Internet Cons: On large monitors, line lengths can become difficult to read Liquid layouts are less predictable Elements may be too spread out or too cramped at extreme browser dimensions

Optimal Line Length??? The line length is measured in the number of words or characters in a line of text The “rule of thumb” is that the optimal line length is 10 to 12 words or between 60 and 75 characters When a line grows too long, it becomes difficult to read Line length is at the heart of most debate over which layout type is the best

Example Liquid Layout Each of the three columns is given a percentage of the window’s width Left column width=“20%” Center column width=“50%” Right column width=“25% Remaining % given to margins

2 Column Hybrid Liquid Layout The left column is a fixed width The right column width is set to auto As the window resizes, the right column adjusts to fill the remaining space

3 Column Hybrid Liquid Layout Both the left and right columns are a fixed width The center column width is set to auto As the window resizes, the center column adjusts to fill the remaining space

Fixed-Width Layouts Fixed-width layouts keep a specified pixel width as given by the designer The width will stay fixed no matter what size the containing element or window takes Graphic designers used to creating content for print media prefer fixed-width layouts because they can exactly control the look of the finished page

Creating a Fixed-Width Design Need to pick a page width based on a common monitor resolution More sites are using the pixel width for 1024 screens The entire page content is placed in a wrapper usually named container or wrapper This container is given a pixel width corresponding to the fixed-width of the page Margins and padding are also given in pixels

Fixed-Width Pros and Cons Pros Line width is controlled for a more readable content area Fixed width layouts are sometimes easier to style depending on the effect you are after Some visual designs can only be achieved in a reasonable manner with a fixed width layout. Cons People with low resolution monitors may end up with a horizontal scroll bar A small width site can look too narrow on large screen displays The narrow width can limit the number of columns Line lengths may appear too short at very large text sizes

Example Fixed Width Layout This fixed-width site is left justified (default) A container is used to provide the fixed-width in pixels The container wraps both the left and right columns

Elastic Layout With an elastic layout, the main wrapper and other elements are measured using em as the unit of measure Ems are relative proportionally to the text or font size As the text size is increased, the sections measured in ems will increase in size as well Elastic designs can make a site more usable and accessible

Creating an Elastic Layout The key to an elastic layout is the em unit of measure which is based on the text size. Using em allows text to be resized with the zoom feature in all modern browsers Widths of other elements on the page including columns also given in em measurement will also resize as well

How Wide is an Em??? It may be difficult to understand the width of an em This site provides an em measurement tool so you can increase or decrease the em percentage and see how the ems adjust page width and element widths Click to increase % Click to decrease %

Elastic Layout Pros and Cons Pros This is a very stable layout method because everything resizes proportionately The end result is all page textual content including columns size is proportional to the text Accessibility can be increased using relative sized fonts Cons Images don’t lend themselves to rescaling Unless limited, this layout method can be a usability disaster as it’ll get wider and wider and wider — without benefit

Example Elastic Layout All text and elements with width properties use the em unit of measure As the text grows so does the content area Line breaks remain the same beast.com/portfolio/zen/css/zen.css

Zoom Layouts for Low-Vision Zoom layouts provide an accessible alternative to low-vision users Use a single column Extremely large type using ems for scalability High-contrast text and background Simplified navigation at the top of page

Hand Held Layout Advice Retain a single-column layout Don’t specify font, size, or color Consider hiding or at least moving all your navigation to the bottom of the page Don’t do anything special to images They are a known issue in browser software and you should let these user agents handle images themselves

Zoom vs. Handheld Needs ConventionalZoomHandheld No single audience is assumed Low-vision audience (no personal choice) Handheld owner (personal choice) Single - or multicolumn layout Single – column layout Single – column layout layout No limits on navigationSimple navigation preferred Navigation eliminated, rewritten by proxy server, or deferred to page end Any type colorLight-on-dark preferred Browser defaults (usually dark-on-light) preferred Any type sizeLarge neededBrowser defaults preferred

Which Layout is Best? As you have seen, each layout has its advantages and drawbacks Most developers rely on their most used favorites The “best” choice to lay out a page should consider: the target audience needs the organization needs and the nature of the content

Page Layout Templates The most popular layouts are two and three column layouts Our textbook provides templates for the following layouts: Multicolumn layouts using floats Multicolumn layouts using absolute positioning A centered, floated fixed-width layout ( we will use this in Project 7 & Project 8)

Tips for Using Textbook Code The markup has been omitted to save space Should include tag for style sheet Header and footer included in examples but either could be omitted Background colors and borders can be used during design time to help verify where boxes are located While templates are provide a framework, they can be modified as needed

Creating Layouts in CSS Use an external CSS file, all formatting for the page layout should be placed in the.css file This way, the Web page would just contain the content of the page, and no layout formatting or styling The external style sheet is linked to the Web page. This allows the designer to separate presentation from content

Centering Fixed-Width Layouts Many designers choose to center a fixed- width layout on the page The following style rules should be added to the container/wrapper id style rule position: relative; default if floating columns width: 950px; give the fixed-width margin-left: auto; auto adjust left margin margin-right: auto; auto adjust right margin

Two-Column Background Problem When using two-columns in a layout, often one column is longer because it may have more content If each column has its own background color, the user will see two columns with different heights How can you make both a left and right column have the same height of background?

Solution: Provide a background image for a container that includes both columns The image is a horizontal slice that has two different colored areas or patterns The image will be tiled in the Y direction according to the longest column The total width of the background image should be equal to the container fixed-width Repeat in Y direction

Tiled Two-Column Background Notice both left and right column backgrounds have the same height Repeat in Y direction

CSS Layout Summary The three types of page layouts types were presented: fixed, liquid and elastic Which ever you choose, you should use an external style sheet to set layout style rules Two –column, fixed-width layout with floats will be the layout we will use for Project 7 and Project 8 While a fixed-width container defaults to left justification, it can be centered if wanted