class08.md

CSS

Layout

Screen Sizes have become an important factor to consider more and more as desktop monitors continue to grow; conversely, increasing numbers of users browse on smaller screens like tablets and phones. Resolution is also an consideration: higher resolution results in smaller text.

Because there is so much variation of screen size and display resolution, there is a general target among designers of 960-1000 pixels wide. It's a good average size. This could always changed, though, if user tendencies do. There is a design convention that users should be able to tell what the page is about in the top 570-600 pixels. If they're interested, they'll scroll down.

Fixed and liquid layous are attempts at solving the problem of different window sizes. Fixed layouts give accurate size and positioning, and give the designer a lot of control of the browsing experience. But they can end up with gaps around edges, and on a higher resolution, the content can look small and hard to read. Best for similar display characteristics to desktop computers. Often takes up more vertical space than liquid layout of same content.

The liquid layout expands to fill browser window. It can also contract to look correct on small windows. Gives the user more flexibility due to its adjustability. But if width parameters are not controlled, the user can see something very different than intended. Lines of text can be too long in wide windows, and very squished in small windows.

Most designers will use grids to help lay out pages. The create continuity between different pages, help users predict where to find info, make it easy to add content, and help people collaborate on design.

CSS frameworks, such as the 960.gs can make work easier by supplying code for forms, printing, and laying out grids. They make it so you don't need to write code for the same tasks every time you need one of these elements.