201 Class 8 Reading
Layouts
Screen Sizes
Something that should be taken into account when coding a website is that visitors are all going to be using devices with different sized screens. be it a phone, tablet, laptop, desktop, or even watch, refridgerator, mirror, part of a shower wall, virtual reality headset, a google glass type device, car, cat, dog, wife, or whatever else on earth might have a screen attached to it in the future.
Keeping this in mind it is important to design a site that can be navigated well on as many devices as possible. To do this one must consider layouts of their pages. The two main forms of layout are.
- Fixed Width Layouts- from HTML and CSS by Jon duckett on page 381,
Fixed width layout designs do not change size as the user increases or decreases the size of their browser window. Measurements tend to be given in pixels.
- Liquid Layouts- same book page 382.
Liquid layout designs stretch and contract as the user increases or decreases the size of their browser window. They tend to use percentages.
With fixed width layouts the designer has better control over the layout of the page. The sizes and location of elements are exactly how and where the designer wants. On the negative side, the site can be difficult to read or look very different on a screen that has a different size or resolution to that of the designer.
Liquid layouts can expand to fill the entire window or contract to fit on a much smaller window. The user can also manipulate text size and it will all still fit on the screen as the site changes to fit. The cons for liquid layouts include very long lines of hard to read text if the window is too wide. or words being squeezed on small windows so only a few words end up on each line. Also if their is a fixed item on the page it can overflow into other liquid objects.