This chapter covers
- The basic layout fundamentals of creating a website’s structure
- How to create and use grids to create consistency and familiarity
- How to apply visual design principles when laying out sections and place components to create hierarchy and rhythm
- Different user reading patterns that can affect a page’s layout
Until the mid 2010s, the web technology available to developers to easily create unique and interesting layouts using only HTML and CSS was limited. If you did any sort of web development that involved building the structure of a website in the early 2000s, you probably had your CSS utility classes for specific layout fixes like clearing floats and vertically aligning items. CSS was fine for building website layouts until our devices became portable; as we started viewing the web on phones, screens got smaller, and sizing became more irregular.
With the introduction of responsive web design and the advent of smartphones, creating fluid layouts that smoothly collapsed from a desktop screen to a phone screen became a vital part of a website’s strategy. You wanted your users to have a cohesive experience across both mediums. This phase of the web brought the beginnings of code libraries such as Bootstrap that made the responsive web much easier to build for, especially as rapid iteration and deployment became a part of project lifecycles.