Responsive Layouts with Zoe Gillenwater

Zoe’s Slides (PDF)

Books that Zoe has written, because she’s super smart, include Stunning CSS3 and Flexible Web Design

Zoe skips over the what and why of RWD and goes straight for the how (we’ve already heard it twice before anyway)

Fluid/Liquid layout – they mean the same. Basically it uses percentages.

A hybrid layout is one column fixed and one column flexible.

Adaptive layouts are multiple fixed-width layouts that are swapped between with media-queries.

Designers and developers often get anxious when thinking about responsive layouts, but by default the web has always been responsive. If you add block level divs to your site sans CSS it it flexible out of the box. FTW.

Zoe takes a look at little pea bakery, and example site she uses when teaching responsive design  (and obviously also from her book)

Start with a wrapper div with a 6% margin on the left and right. You could just as easily do an 88% wrapper width with margins set to auto. Do with it how you wish.

Percentages are relative. 20% of a full width will always be larger than 20% of a smaller container div.

Again to work this out you take target / context = result. THE FORMULA FOR EVERYTHING! (yes, even to make higgs bosons)

If you’re using a fluid grid you need to remember to do this calculation on any nested grid areas.

Most of the pre-created grids out there don’t mention this upfront, you will sometimes need to do these calculations yourself. There are frameworks that already do this for you (Zurb, Twitter Bootstrap).

When browsers round the percentages it could round everything up and cause the layout to break. It’s a good practice to keep everything added up to less than 100%.

box-sizing: content-box
Padding and border added on to the width/height.

box-sizing: border-box
Padding and border are SUBTRACTED from the width/height. (I <3 box-sizing: border-box…. it’s rad.)

.column {
 box-sizing: border-box;
 padding: 0 20px;

Now all columns sit the same witdth no matter what padding you set.

You can also use a transparent border to make up for the margins.

Always use the -moz- and -web-kit prefixes to cover all broswers. IE6 and IE7 don’t support the border-box method so you might need to override the layout in an IE only style sheet. alternatively you could use
Zoe recommends Gridpak as a resource to get started with your responsive grids.

If your DOM matches the page layout everything is pretty easy. If you want things to stack correctly on the small devices (main content first) then you need to work out how to float the elements properly.

Negative margins are a great way to allow the content heirarchy to be set in the HTML and use CSS to change the layout to suit this. This works IE7 and up.

For IE6 this breaks (the side bar disappears). To fix this you can
Zoom: 1; to wrapper
display: inline to the content

Starting with Media Queries

start mobile?
Start desktop?
Pro’s and Cons’ can be read on essential considerations for crafting quality media queries.

Zoe says if you starting with RWD or are retro-fitting an old site you’re better off starting with the full desktop styles and then use max-width to over-ride the layout.

Media queries themselves don’t do anything, it’s the CSS INSIDE that matters.

If you’re desktop site was designed for 960px then you might want to include a @media screen and (min-width: 1200px){} query to extend the site when viewed on a much larger viewport.

One of the main issues on smaller devices is the line lengths on small devices. Remove things like column counts and floats so that they stack on each other.

If you’re using @media (max-width:550px) & @media (max-width:770px) you find that sometimes you don’t want items to override other max-width you can declare an additional query for min-width to exclude it. i.e. @media screen and (max-width: 700px) and (min-width: 551px){}

Make sure you add <meta name-=”viewport” content=”width=device-width”>. Most mobile devices set your webpage in a 960px viewport. iOS does this so most sites look alright.

If you use this in iOS there’s an issue….add maximum-scale=1, but keeps the user from being able to scale the page. Set initial-scale=1 but it means that rotating causes another bug. There is a fix for this bug, ios-orientationchange-fix.js .

Feed IEMobile 7 specific styles because it doesn’t support media queries. This would be okay if you go with mobile first, but desktop first will have issues. It’s okay on later devices though.

If you’re calling in Respond.js or css3-mediaqueries you should include it in a CONDITIONAL comment so that users don’t have an extra http request.

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

3 Responses to “Responsive Layouts with Zoe Gillenwater”

  1. Peter Demaria

    You have a broken link for Gridpak.. missing the http:// .. bad relative link (404) .. . Awesome article though, some really practical info on creating responsive layouts!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>