5. Linear Design

“It’s pretty simple. On a phone, full-size websites suck.”

PAUL CAMPBELL

On most small viewports—such as those on phones—we can only view the content of a web page in a linear fashion. It’s possible to place things side-by-side on many devices, but not all of them. It depends on both the size of the device and the level of CSS support. In this chapter, we’ll look at determining breakpoints for our design and content based on device classes and what the content and design do at certain screen widths.

Note

When I speak of linear design, I mean the design of linear content. Color, type, and images may be used, but the design has no layout other than that the content is stacked vertically.

First, though, we need to accept the ...

Get Responsive Design Workflow now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.