Responsive or not, there’s no reason why we shouldn’t all be designing and building sites on flexible foundations.

This concept is nothing new, having been prophetically outlined in Jon Allsopp’s 2000 article, A Dao of Web Design. Sadly, I’m able to count myself among the many who, until recently, have failed to see the benefits of embracing the inherent flexibility of the web. Andy Hume states it well:

The web is responsive on its own—by default. It’s us that’s been breaking it all these years by placing content in fixed-width containers.

And here I thought I was doing the web a huge favor with my fixed pixel-based layouts. That isn’t to say that sites I built with Paravel well before RWD aren’t good, but their pixel-based layouts make them far less portable. Good design could have been made better had we grasped the benefits of the flexible foundation years earlier.

Flexibility Applied

Let’s take the difference between button #1 and button #2 as an example. Visually, they’re identical across media queried changes, but because button #2 was built on a flexible foundation (using relative units1 and percentages), it scales proportionally with media queried font-size changes or when users increase their browser default font size. Button #1 requires extra code to keep everything to scale because of the pixel values set for padding. In many ways, every time we use a pixel value in CSS we’re rasterizing what was a fully-scalable web.2

Extra code like this adds up. With Paravel’s first few responsive projects we were so fixated with the 3 key ingredients (flexible grids, flexible images, and media queries) that we still used pixel values inside of our flexible grid. Thus, we needed to rewrite the vast majority of our CSS from one media query to the next in order to keep things proportional.

See this example #1 of a tiny site. By definition, it is responsive. There are flexible images, flexible grids, and media queries. But notice how much CSS is packed into each media query. Now, see example #2. It’s the exact same site, but because it’s built on a flexible foundation the entire thing scales from one media query to the next with a single font size change. Everything subsequently utilizes a relative unit so it scales proportionally no matter what.

This paid off a few weeks ago, when a client wanted to make significant changes to the layout for his site. Type, imagery, buttons, etc. needed to be smaller and overall width & spacing (margins / padding) needed to be reduced. Thankfully, this was as simple as adjusting the body font-size at wide views. Years ago, however, this could have set the project weeks beyond scoped timeline and budget.

If I could go back in time 3 years I’d tell myself that the red jacket is going to make me look like an asshole. Then I’d slap myself and point out that flexible grids and flexible images are great, but ultimately I should be focused on making things truly scalable by thinking twice before I used pixel values in my CSS. Perhaps that’s what RWD really should be defined as in the end—sites built on a fully-flexible foundation enhanced by media queries.

The sites we’ve built to display on a desktop, smartphone, or a tablet today could be on a TV Screen, coffee table display, or mega space yacht projection system tomorrow. Do yourself a favor and heed the advice of the Dao:

The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility and produce pages which, by being flexible, are accessible to all.

  1. Style sheets that use relative units can more easily scale from one output environment to another. Most of the time I use em and rem. 
  2. I’m sure there are occasional exceptions. 
Ads by Fusion

47 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Jim

    Love this line:

    “In many ways, every time we use a pixel value in CSS we’re rasterizing what was a fully-scalable web.”

    It’s funny we used to do this and think it was great ... Speaking of which, can we also get a picture of this red jacket?

    Thanks

  • Joseph R. B. Taylor

    So true. I argue about this with my co-workers all the time. These days the responsive process feels very natural. Moreso by starting with the small screen and expanding outwards. This approach plus relative units is a very easy way to build. It makes sense.

  • Brett Jankord

    Interesting to see the code between example #1 and example #2.

    From this, it’s obvious that using a flexible foundation would help with performance, since there is less code to load in example #2.

    Breaking away from pixels is hard, it has been so ingrained in our process, especially those who are designers/developers. Though the benefits of a flexible foundation a clear.

  • Cody

    Could not agree more with this article. Thanks for your insights.

  • simurai

    One problem with using EM/REM is pixel snapping. When the calculated size would translate into a sub pixel, browser either round up or down so that it looks sharp. And that pixel snapping can sometimes lead to a 1px gap or throw off the proportions. See the inner circle/square of the radio/chechbox when resizing with the slider: http://codepen.io/simurai/pen/dHBgf

    I guess it’s less of a problem when doing larger “Flat” designs where spacing is more spacious.

  • Rob

    Great read Trent. Question: Do you see a significant benefit in ems vs rems with a strategy like this? Does rem padding scale the same way ems do when the body font size is incremented upward?

  • Trent

    @Jim: The jacket is long gone. Luckily :)

    @simurai: Agreed. It’s tricky business we ran into last week with some rounded corners... could be one of those exceptions.

    @Rob: I think choosing between em & rem units can depend on the situation. They’re both scalable. Typekit and Snook both have great articles on the topic.

  • Rob

    @Trent: Thanks for the articles! I’ll give them a read.

  • Kevin Brennan

    It’s going to be tough to shake off the pixels but I’m going to give this a try on my next project.

  • Mike Torosian

    Great post Trent, I really enjoy your blog and all that you and the Paravel team does to provide helpful information on your experiences with responsive design, it is really helpful, keep up the great work.

  • James

    Great post Trent. I recently used a relative unit approach to most calculations on my personal site and when you change the relative value of the body in relation with each media query, it’s a thing of beauty and everything scales nicely.

  • John J. Locke

    Brilliant Codepen examples, Trent. I’ve been making sure to build responsively for quite some time now, making sure to use ems instead of pixels, using percentages, etc. I understand rems, but have never used them. I had never thought to base the media queries around the font-size. Sure, I’ve used % to readjust it, but this article, and particularly, the Example sites #1 and #2 gave me a deeper way to think about my next Responsive design.

  • Chris Meeks

    I’ve been hesitantly using pixel measurement in areas where I know I shouldn’t for a while now. Making the case that maintenance becomes more difficult is a really good reason to stick to an EM standard.

    I’m curious, how often do you guys use percentages over EMs? It seems that percentages are the premium form of a responsive solution but can obviously get you in trouble at times. I’ve found that I mostly use percentages for widths and EMs for heights, since percentages suck for that.

  • Trent

    @Chris Meeks: For me, percentage vs (r)em usage is pretty case-dependent. I always use percentages for width if it’s in a grid, but for something like padding within a button ems might make more sense. For vertical spacing, I’ll sometimes use percentages (like on the title banner on this site), but usually it’s relative units.

  • Colin Wiseman

    This is the problem with our world. Here is a guy making a great point, that we can simplify our worlds by using percentages, but the problem here is that he quite happily breaks some of the rules found in CSS Lint (http://csslint.net/) to get his CSS to work. Throughout all his code he uses “box-sizing: border-box;” but CSS Lint folks state quite clearly this should be avoided:

    https://github.com/stubbornella/csslint/wiki/Disallow-box-sizing

    “The intent is to ensure that developers realize this property is not supported in older browsers such as Internet Explorer 6 and 7.”

    So although he is targeting newer browsers with his CSS, he will have to do hacks in other ways to get his site to work in older browsers. BAH!!! It’s a twisted horrible world we live in!

    (I blame IE)

  • Trent

    @Colin Wiseman: Actually, I don’t think this site’s layout needs box-sizing: border-box; to work properly. Furthermore, its CSS is structured moble-first so IE 8 and below (less than 0.5% of traffic) will get a 1-column layout.

  • Marc Costello

    Excellent article.

    I strongly believe that part of the webs evolution into using fixed containers is down to browser limitations and compatibility issues.
    Of course this isn’t the only reason! .. Just saying.

  • Zoe Gillenwater

    Agreed! That’s why I wrote an entire book on creating flexible web sites (titled Flexible Web Design, of course!) back in 2008. I’ve been building liquid layouts almost exclusively for many years now, and I’ve presented at conferences spouting off that exact same sentiment you quote Andy Hume on in the beginning of this article! It’s always been funny to me when people used to ask why they should make sites flexible--the more logical question is why make sites fixed-width, when the web is flexible by default? I find it encouraging that I don’t get that question much any more. I’m so glad that flexible web design is finally being adopted as a best practice!

  • Dave Rupert

    @Colin Wiseman: I’d be careful not to be dogmatic about CSSLint. It’s a great tool, but it’s suggestions are typically for large scale applications (i.e. Facebook).

  • Kevin Haggerty

    I’ve been designing flexibly for a while now and it’s extremely liberating to not worry about pixels anymore. I use percentages for most horizontal values, and rem for verticals. Padding and Margin are sometimes EM. I still use PX for things like border widths and shadow offsets, visual effects.

    If you’re interested in learning what it feels like to truly design flexibly, there’s no better place to start than my own web app for Responsive Web Design: Edit Room.

    http://www.edit-room.com

    * Edit Room automatically creates flexible layouts while you work.
    * Adjust the display width and you can immediately preview your vision across all possible widths.
    * Design for multiple screens. Create custom breakpoints where the styles need to change, and then adjust until it’s flexibly perfect, everywhere.

  • Colin Wiseman

    @Trent: I hear you. A lot of the sites I have worked with still get decent traffic from the IE6/7 brigades. MS should throw in the towel with browsers and let decent companies do that job.

  • Colin Wiseman

    @Dave Rupert: True Dave. Just been reading a lot of articles from/about these guys. People, inc Smashing Mag., say they know their stuff, and am always on the look out for things to help me manage the psuedo-large sites I work with.

  • Brad S.

    @Trent: With all due respect, I find it terribly hard to believe that IE 6-8 makes up less than half a percent of your traffic when just about everywhere else these browsers make up a percentage that’s usually in the teens.

  • Trent

    @Brad S.: I checked recent stats and I’m at 0.72 for the month. If I’m wrong, it’s only by 0.22%. I can live with that :)

  • Mike Torosian

    @Brad S. it’s really not hard to believe, most people visiting this site are probably in the web design/development world and likely don’t use IE :)

    @Trent What is your advice for simplifying responsive layouts, for example, your example #2 uses a flexible grid and very little code within the media queries, however, in the sites I have been working on I find that I am using quite a bit of code within media queries to accomplish the layout I am going for. I don’t know that there is anything particularly wrong with this, as I have seen others build this way as well, however, I am always looking for ways to streamline and make things cleaner, how did you and the Paravel team come up with the system that you use where it seems not a tremendous amount of code is used to adjust layout within media queries.

  • Chris Ferdinandi

    @Mike Torosian: I struggle with that too. I’m going to take a look a Foldy, the free 6 column grid from Paravel. https://github.com/davatron5000/Foldy960

  • Trent

    @Mike Torosian and @Chris Ferdinandi: You’ll need more CSS for structural grid / layout changes, and I think that’s perfectly okay. The trick is building on flexible foundations so the things that should scale, do.

    I’ve commented on the CSS in example 1. Everything below “extra code” on lines 106, 137, and 168 within each of their containing media queries could be considered unnecessary.

  • Francesco Belladonna

    The article is really nice, this was exactly what I’m trying to achieve since years.

    The biggest problem, is that we can’t resize background images, that’s why usually I can’t make a flexible design.

    Nowdays this is changing, but I think it wasn’t possible ’till some javascripts/css background-size have been implemented.

  • Trent

    @Francesco Belladonna: Take a look at this. You might also find this ALA article interesting.

  • Spiros Martzoukos

    What happens when you want to increase the font-size as the screen size decreases? Relative sizing of type with the screen size is not a panacea as we usually want bigger font-sizes in smaller screens, or bigger reading distances(TVs, maybe?).
    I’m not against relative sizing, but the above are cases where I stumbled upon many times and had to come up with specific styles and, thus, break the overall mentality of my stylesheet.
    Thinking wishfully, a reverse (y = a/x) size unit would be more appropriate. What would you say about a new relative unit size that is not 1 on 1 sized, but has a specific (user defined) formula to calculate the relation to the body font-size?

  • Trent

    @Spiros Martzoukos:

    What happens when you want to increase the font-size as the screen size decreases?

    It wouldn’t be automatic, but couldn’t we use media queries to set breakpoints that decrease font-size as easily as we could increase? I’m curious to know if you had a use case in mind for this scenario.

  • Charles

    @Joseph R. B. Taylor: Hi James, We disagree... you should start with a large screen (TV) and scale down to the smallest screen. You can always takeaway but it’s hard to add. Ie. We can scale an image down from 750px width to be 250px width but if we scale an image up, it loses quality.

    Remember, today everyone is think iphone/mobile (retina/non-retina) but with the advent of TVs becoming the point of usage, if you design for a 4″ mobile then display it on a 55″ TV, what do you have, a mess. However, design for the 55″ and then takeaway features and layout components for the small media and it will display great.

    Again, it is alway easier to take away a feature responsively then to try and add features, especially items that are pre-rendered (images, videos).

    @simurai: Hi Simurai, I don’t remember the code of the top of my head but you can use the calc() to get around the sub px issue, I believe with a @media. Again, I don’t remember the exact code so I would test my memory here but that issue has been solved.

    @Trent: Thanks for the great article! Especially with the ability of website equalling to offline fully interactive downloadable webapp, responsive design is very important. HTML5 is going to take the website to everything and everyone, so the end user might be on a 85″ TV to a 1″ watch. Designers and Developers have to work closely together to get it right now so they don’t do the blame game later.

  • Jorge Pinon

    Good article. I’ve been dutifully sticking with em-based design for years. I think it was when I read that font-size and grid layout are inherently connected (from Mark Boulton maybe?).

    I do, however, sometimes specify a max-width for the overall container in pixels. It makes a lot more sense to also set max-width in ems, to avoid overly long line lengths.

    I assume you’re using LESS or SASS to come up with those 3-5 decimal places in your CSS? Like margin: 0.469em?

    (Man, I wish my IE8 and below traffic was less than a percent! Mazel tov!)

  • Juan Hidalgo Reina

    Great Article!!!!!

  • dacosta_rafael

    in http://codepen.io/TrentWalton/pen/sCgBq ,

    how did you determine 37.500em is 600px? I’m not seeing where you reference the baseline for a calculation

    @media screen and (min-width: 37.500em) { /*600px*/

  • Matt Smith

    Spot-on! Terrific post, Trent!

  • Chris

    Nice article and couldn’t agree more. Just wondering do you use ‘em‘ and/or ‘rem‘ for things like ‘border‘ and ‘box-shadow‘? I’m still using ‘px‘ here but thinking of converting.

  • Trent

    @Jorge Pinon: Thanks + good stuff. Fairly often, I just use pxtoem.com for calculations.

    @dacosta_rafael: Hi! Those were calculated based off of a 16px base using this site. Check out Lyza Gardner’s post for more info.

    @Chris: Thanks :) I use relative units to be consistent, but perhaps exceptions apply with things like box-shadow or border-radius. Then again, if you find yourself re-setting those px values within alternate media queries you might want to go back and set those relative units.

  • Francesco Belladonna

    @Trent: Sorry I read the comment only today, yea I know about CSS3 and that’s how we can reach a “flexible fundation”, still this wasn’t possible before CSS3, I’m really waiting for that feature.

  • Jack

    I like this idea and I tried it on my last website, but during the project there were several changes in html that messed up my em calculations so I had to go back to px to stay sane.

    How does your workflow with ems look like? Do you use comments to document sizes in px?

  • Ronnie Johnson

    Great article. Something I’m trying my hardest to implement at my current job.

  • Seth Warburton

    Great article Trent. I truly believe there should be no ‘if this’ or ‘when that’ clauses to applying RWD. It should be the default for any sensible web designer because it’s not only a better option, it’s an easier one!

    This is golden:

    “In many ways, every time we use a pixel value in CSS we’re rasterizing what was a fully-scalable web.”

    Though it would be great if the next killer quote you pen could fit on a t-shirt ;)

  • Cole

    All this flexibility stuff, reminds me of developing on iOS vs Android. With iOS (iPhone or iPad) you don’t have to worry about screen dimensions. There is only one. You just have to adjust for screen rotation which is fairly simple and straightfoward. Android on the other hand is different. There are too many devices with different screen dimensions. It’s a headache.

  • jihoonsuh

    what did u use to run this site? is it squarespace? wordpress? or is it all built from scratch?

  • Trent

    @jihoonsuh: WordPress... more info.

  • Matt

    It really depends on your website - I actually wrote a blog about this just a couple days ago before finding your blog, if you have a website such as doom3.com (same example I used), it needs to be very artistic and creative where building this around a responsive fluid design would take a lot of resources. I think however the least they can do is design for each increment of resolutions, i.e. width of 320, 640, 960, 1024+, or something along those lines, but again for a website such as this example I gave, it would be resource intensive to do the art for all these resolutions to look right.

    Responsive is indeed the way to go, but not for everyone :)

  • Luke Boobyer

    Spot on with this article. I’ve worked on a few projects where the foundations have been a complete mess and it’s taken ages to get them to be truly flexible and responsive.

Leave a Reply