Gone are the days of a static-layout web. We'll introduce you to the building blocks of responsive design capable of fantastic visuals across various devices. Go deep into grid systems, queries, responsive text, images and video to build websites and apps that respond to user input.

Jump Start Responsive Web Design, 2nd Edition

Preface

It used to be so simple: you’d design a website or application for a 15-inch monitor, and—incompatibilities between browsers aside—you were done.

The Meaning and Purpose of Responsive Web Design

There are two main building blocks at the heart of responsive web design: media queries and viewports.

The Building Blocks of Responsive Design

So far, we’ve looked at the underlying principles of responsive design and the power of media queries to build page structures optimized for different devices. In this chapter, we’ll see how grid systems can supplement and even replace some of the techniques we’ve covered so far, providing more flexibility for how pages display across different devices.

Better Responsive Structures with Grid Systems

If web pages are to be truly responsive, then the content of pages should also flow and change to suit the dimensions of the device a user is viewing it on. While web pages are becoming more image and media heavy, text is still a crucial component, and there are numerous techniques to help make it as readable as possible, no matter the current device.

Responsive Text

The exchange of text-based content brought the web into existence, but images and other rich media have kept it evolving and made it what we all know/love/dislike.

Responsive Images and Video

Our example page is now responsive, and will work well on a wide variety of devices—scaling layout, images, media and text to suit.

Unlock This Title

Community Questions