Three Ingredients: Sugar, Spice, And Ethan Marcotte
Kickoff · Lesson 5 ·
In this lesson, we dive into the three key ingredients of responsive web design - flexible grids, imagery, and media queries - are. And don't worry, we do it with more puppies and some freestyle rhyming.
You don't want to get stuck having to build a custom experience for every new device or browser that appears, and at the same time you want to make sure that what you do translates to specific browsers - Internet Explorer included.
There are three key ingredients:
1. Flexible Grid - This means columns that can expand or contract, based on size.
Now, look at the adjustment in the column grid. The righthand and lefthand columns have merged into the center column, so that all the content is still present and legible - but optimized for the different size of the browser.
2. Flexible Images (and media) - These images adjust and extend so that they're 100% visible no matter what the size of the view is.
Compare:
In both views, the image is fully displayed and fits 100% inside the page view.
3. Media Queries - This is a little bit more difficult if you haven't encountered them before, but media queries determine the break-points at which all your awesome responsive columns and images actually narrow or expand. If you change your browser window size in Pack, you'll be able to find the points at which it narrows to two dogs per line.
You can follow Ethan Marcotte on twitter; and check out Marcotte's Responsive Web Design Book, if you're interested.