O'Reilly logo

Responsive Design Workflow by Stephen Hay

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required