Course Hero Logo

Fixed width layouts are the most common

Course Hero uses AI to attempt to automatically extract content from documents to surface to you and others so you can study better, e.g., in search results, to enrich docs, and more. This preview shows page 22 - 25 out of 116 pages.

Fixed-width layouts are the most common implementation on the Web. A fixed-widthlayout gives you the illusion of having a lot of control. Knowing exactly the width at whichyour site will display lets you create graphically intense designs that will look fairlyconsistent across different screens.The biggest problem with fixed-width layouts is that you must operate under a lot ofassumptions. When you determine how wide your site will be, you’re making a guess as towhat dimensions will best serve the largest percentage of visitors. This is a lot trickier thanit seems. Even before the introduction of devices such as smartphones and tablets, therewas a great deal of variability in the screen sizes used by visitors. That was just the start ofit. Some people have browsers that are not maximized to the full width of their screens.
Many others have plug-ins installed that display a sidebar in the browser, greatly reducingthe actual real estate available for the site.The “consistency” that a fixed-width design provides is also a bit misleading. If your site is960px wide and a visitor has a smaller screen (let’s say 800px wide), then she’ll see only aportion of your site and an ugly horizontal scrollbar (Figure 2.1).
Figure 2.1. When the screen is narrower than the width of a fixed-width site, thevisitor is greeted by the dreaded horizontal scrollbar.Larger screens are not immune to issues either. If someone with a large monitor views your960px-wide site, she’ll be met with a large amount of unplanned white space. White spaceis good, as part of a design. An unanticipated overabundance of white space is beneficial tono one.The rigidity of fixed-width layouts is even more of an issue in today’s widely diverseecosystem of devices. Many of the newest and most capable phones and tablets displaysites zoomed out so they fit on the screen. These devices provide a pinch-to-zoom feature todrill down from there. While this experience is better than not being able to zoom in oraccess the site at all, it is still cumbersome and far from enjoyable.Fluid layoutsIn fluid layouts, dimensions are determined by percentages, not pixel measurements. As aresult, they’re much more malleable. So you may have a primary column that’s sized at 60%of the width of the container, a right sidebar column sized at 30%, and a gutter of 10% inbetween. Using a layout defined in that manner means that it doesn’t matter if the user isusing a desktop computer with a browser width of 1024px, or a tablet sized at 768px wide:the widths of the elements in the page will adjust accordingly.NoteWhile Gillenwater used the term liquid in her categorization; in this book, these areconsidered fluid layouts.A design built on a fluid layout avoids many of the problems that a fixed-width layoutpresents. Horizontalscrollbars can be prevented, for the most part. Since the site can adapt itswidth based on the width of the browser window, the design can adjust to better accommodate the

Upload your study docs or become a

Course Hero member to access this document

Upload your study docs or become a

Course Hero member to access this document

End of preview. Want to read all 116 pages?

Upload your study docs or become a

Course Hero member to access this document

Term
Summer
Professor
NoProfessor

Newly uploaded documents

Show More

Newly uploaded documents

Show More

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture