Ethan’s ode to the
fr unit in CSS grid.
Friday, July 20th, 2018
Ethan’s ode to the
Monday, June 4th, 2018
I noticed something interesting recently about how I browse the web.
It used to be that I would notice if a site were responsive. Or, before responsive web design was a thing, I would notice if a site was built with a fluid layout. It was worthy of remark, because it was exceptional—the default was fixed-width layouts.
But now, that has flipped completely around. Now I notice if a site isn’t responsive. It feels …broken. It’s like coming across an embedded map that isn’t a slippy map. My expectations have reversed.
That’s kind of amazing. If you had told me ten years ago that liquid layouts and media queries would become standard practice on the web, I would’ve found it very hard to believe. I spent the first decade of this century ranting in the wilderness about how the web was a flexible medium, but I felt like the laughable guy on the street corner with an apocalyptic sandwich board. Well, who’s laughing now‽
Anyway, I think it’s worth stepping back every now and then and taking stock of how far we’ve come. Mind you, in terms of web performance, the trend has unfortunately been in the wrong direction—big, bloated websites have become the norm. We need to change that.
Now, maybe it’s because I’ve been somewhat obsessed with service workers lately, but I’ve started to notice my expectations around offline behaviour changing recently too. It’s not that I’m surprised when I can’t revisit an article without an internet connection, but I do feel disappointed—like an opportunity has been missed.
I really notice it when I come across little self-contained browser-based games like
Those games are great! I particularly love Battleship Solitaire—it has a zen-like addictive quality to it. If I load it up in a browser tab, I can then safely go offline because the whole game is delivered in the initial download. But if I try to navigate to the game while I’m offline, I’m out of luck. That’s a shame. This snack-sized casual games feel like the perfect use-case for working offline (or, even if there is an internet connection, they could still be speedily served up from a cache).
I know that my expectations about offline behaviour aren’t shared by most people. The idea of visiting a site even when there’s no internet connection doesn’t feel normal …yet.
But perhaps that expectation will change. It’s happened before.
(And if you want to be ready when those expectations change, I’ve written a Going Offline for you.)
Tuesday, April 3rd, 2018
Everything You Know About Web Design Just Changed by Jen Simmons
Alright! It’s time for the final talk of the day at An Event Apart Seattle (Special Edition). Jen is wrapping up a CSStastic afternoon with her talk Everything You Know About Web Design Just Changed. These are my notes…
Ready for another hour of layout in CSS? Well, Jen will be showing no code in this talk. She’s actually nervous about this particular talk. Is she really planning to say “Everything about web design just changed”? That sounds so clickbaity! But she really believes we’re at an inflection point. This may be the sixth such point in the history of the web. One of those points where everything changes and we swap out our techniques.
For the last few years, we’ve been saying that everything changed when mobile came along. But actually, the real fight has been going on for longer than that. It’s the battle between wanting art and dealing with how the web works.
There’s a seminal book called Creating Killer Websites by David Siegel from 1996. In it, he describes the first time he saw the same site in two different browsers. His reaction was panic. The web gave control to the user. David Siegel wanted more control. And that’s how we got spacer gifs and tables for layout.
What are the five major changes in the history of web design?
- Simple HTML. There was only one kind of layout: flow layout. There’s no CSS, but the browser is still thinking of everything has having a box. Text takes up as much space as it needs. Images take up as much space as their size. This is flow. There wasn’t much you could do until tables came along. They were created for tabular content but abused for layouts. The “We need art!” crowd used what was available to them at the time. Lots of slicing and dicing.
- Flash. It was hard to get HTML tables to work in multiple browsers. Flash seemed like an amazing chance to start over. And we could do things that were previously only possible in CD-ROMs. As a designer, you take an element and place it where you want to go on the stage (the UI tradition that goes all the way back to Xerox PARC). We made some crazy sites, explored a lot of possibilities, and got a lot of control. But the downside was the lack of accessibility. We went back to getting to grips with the web as its own medium. Jeffrey’s book, Designing With Web Standards, was a rallying cry to allow HTML to return to doing what it was meant to.
- Fluid Layouts. This was a return to the way the web always behaved—content takes up as much room as it needs to. But this time there’s a certain amount of control over how things are laid out. Still, we pretended that nobody has screens smaller than 640 pixels or bigger than 1024 pixels. We still live with the idea of fluid columns today.
- Fixed-Width Layouts. The “We need art!” crowd wanted more control than fluid layouts offered. We pretended that everyone’s screen was at least 640 pixels, or later 800 pixels, or later 1024 pixels.
- Responsive Web Design. Unveiled by Ethan at An Event Apart Seattle in 2011: flexible grid; flexible images; media queries. It’s a return to fluid layouts, but the addition of media queries gives us more control. The idea of fluid image was a bit radical. Up until that point, we thought of images as always being their intrinsic size. But something Ethan said that day was “It’s not just about layout.” And it’s true. For the last eight years, it’s been about more than layout. You set out to redesign your website and end up redesigning your whole business. Responsive web design is, frankly, what the web is now.
But let’s talk about layout. What’s next? Intrinsic Web Design.
Why a new name? Why bother? Well, it was helpful to debate fluid vs. fixed, or table-based layouts: having words really helps. Over the past few years, Jen has needed a term for “responsive web design +”.
Responsive web design has flexible images. Intrinsic web design has flexible images …or fixed images. Whichever you want.
Responsive web design has a fluid columns. Intrinsic web design has fluid columns and rows.
Responsive web design uses media queries. Intrinsic web design doesn’t necessarily need them.
The name comes from words that have been floating in the ether. In Rachel’s talk, the words “sizing” and “intrinsic” came up a lot. This is about the nature of the web.
Let’s look at images specifically. Before responsive web design, images overflow their container if they are bigger than the container. Fluid images (as used in responsive web design) shrink and grow depending on the size of their container. You can also make images fluid in a vertical direction. If we make the image fluid vertically and horizontally, the image looks distorted. But now if we use
object-fit: cover we can specify how we want the image to react.
Fixed or fluid? With grid layout, you can mix fixed and fluid. You can make a layout fluid until it hits a minimum size, at which point it stays fixed.
There are four stages of squishiness:
minmax()(fluid until fixed)
auto(a return to flow)
That’s a powerful set of tools that may take us years to explore.
We can do truly two-dimensional layouts: rows and columns. Every one of those four stages of squishiness works for rows as well as columns. This means we can create intentional white space. Jen made a video about this and got the response that this was always possible, but it’s different now: it’s more intentional. You can set heights and widths.
We can have nested contexts now:
- Flexbox (formatting context)
- Grid (formatting context)
- Multicolumn (formatting context)
Floats never created a new formatting context, which is why used clearfix. Now we don’t need hacks. You can mix and match, choosing the best layout tool for the job at hand. You can have a grid layout that has flexbox items within it. The Firefox dev tools allow you to inspect each layout type separately. You can use the nightly build to get the latest tools.
Then we’ve got ways to contract and expand content. We have more options now. For a while, we’ve had the option to squish and grow (e.g. with fluid images). Another is wrapping and reflowing (like we can do with text). Another option now is to add and remove whitespace. Maybe the content size doesn’t need to change; the whitespace shrinks and grows instead. An even more radical option now is to have things slide behind one another and overlap deliberately.
Sometimes you don’t even need to use media queries (meaning we’ve effectively got container queries). But we can still use media queries, as needed, to tweak the details.
So intrinsic web design is:
- Fluid and fixed
- Stages of squishiness
- Truly two-dimensional layouts
- Nested contexts
- Expand and contract content
- Media queries, as needed
We have a whole new sandbox that we can play in. You can find examples at labs.jensimmons.com.
Wednesday, November 1st, 2017
A really great case study of a code refactor by Mina, with particular emphasis on the benefits of CSS Grid, fluid typography, and accessibility.
Monday, December 19th, 2016
A very very in-depth look at fluid typography in CSS using
Friday, December 9th, 2016
Some really great CSS tips from Rich on sizing display text for multiple viewports.
Thursday, March 7th, 2013
Told you so
One of the recurring themes at the Responsive Day Out was how much of a sea change responsive design is. More than once, it was compared to the change we went through going from table layouts to CSS …but on a much bigger scale.
Mark made the point that designing in a liquid way, rather than using media queries, is the real challenge for most people. I think he’s right. I think there’s an over-emphasis on media queries and breakpoints when we talk about responsive design. Frankly, media queries are, for me, the least interesting aspect. And yet, I often hear “media queries” and “responsive design” used interchangeably, as if they were synonyms.
Embracing the fluidity of the medium: that’s the really important bit. I agree with Mark’s assessment that the reason why designers and developers are latching on to media queries and breakpoints is a desire to return to designing for fixed canvases:
What started out as a method to optimise your designs for various screen widths has turned, ever so slowly, into multiple canvas design.
If you’re used to designing fixed-width layouts, it’s going to be really, really hard to get your head around designing and building in a fluid way …at first. In his talk, Elliot made the point that it will get easier once you get the hang of it:
Once you overcome that initial struggle of adapting to a new process, designing and building responsive sites needn’t take any longer, or cost any more money. The real obstacle is designers and developers being set in their ways. I know this because I was one of those people, and to those of you who’ve now fully embraced RWD, you may well be nodding in agreement: we all struggled with it to begin with, just like we did when we moved from table-based layout to CSS.
This is something I’ve been repeating again and again: we’re the ones who imposed the fixed-width constraint onto the medium. If we had listened to John Allsopp and embraced the web for the inherently fluid medium it is, we wouldn’t be having such a hard time getting our heads around responsive design.
But I feel I should clarify something. I’ve been saying “we” have been building fixed-width sites. That isn’t strictly true. I’ve never built a fixed-width website in my life.
Some people find this literally unbelievable. On the most recent Happy Mondays podcast, Sarah said:
I doubt anyone can hold their hands up and say they’ve exclusively worked in fluid layouts since we moved from tables.
Well, my hand is up. And actually, I was working with fluid layouts even when we were still using tables for layout: you can apply percentages to tables too.
Throughout my career, even if the final site was going to be fixed width, I’d still build it in a fluid way, using percentages for widths. At the very end, I’d slap on one CSS declaration on the
body to fix the width to whatever size was fashionable at the time: 760px, 960px, whatever …that declaration could always be commented out later if the client saw the light.
Actually, I remember losing work back when I was a freelancer because I was so adamant that a site should be fluid rather than fixed. I was quite opinionated and stubborn on that point.
A search through the archives of my journal attests to that:
- 2003: The long debate
- 2004: Regurgitating the chestnut
- 2004: Fixed vs. Liquid… yet again
- 2005: Fixed Fashion
- 2005: Transparent liquid
- 2005: A List Too Far Apart
- 2006: Fixtorati
- 2007: New Year’s Resolution
- 2009: Zoomfusion
Way back in 2003, I wrote:
It seems to me that, all too often, designers make the decision to go with a fixed width design because it is the easier path to tread. I don’t deny that liquid design can be hard. To make a site that scales equally well to very wide as well as very narrow resolutions is quite a challenge.
In 2004, I wrote:
Cast off your fixed-width layouts; you have nothing to lose but your WYSIWYG mentality!
I just wouldn’t let it go. I said:
So maybe I should be making more noise. I could become the web standards equivalent of those loonies with the sandwich boards, declaiming loudly that the end is nigh.
At my very first South by Southwest in 2005, in a hotel room at 5am, when I should’ve been partying, I was explaining to Keith why liquid layouts were the way to go.
That’s just sad.
So you’ll forgive me if I feel a certain sense of vindication now that everyone is finally doing what I’ve been banging on about for years.
I know that it’s very unbecoming of me to gloat. But if you would indulge me for a moment…
I TOLD YOU! YOU DIDN’T LISTEN BUT I TOLD YOU! LIQUID LAYOUTS, I SAID. BUT, OH NO, YOU INSISTED ON CLINGING TO YOUR FIXED WIDTH WAYS LIKE A BUNCH OF BLOODY SHEEP. WELL, YOU’RE LISTENING NOW, AREN’T YOU? HAH!
I’m sorry. That was very undignified. It’s just that, after TEN BLOODY YEARS, I just had to let it out. It’s not often I get to do that.
Now, does anyone want to revisit the discussion about having comments on blogs?
Thursday, April 26th, 2012
See now, this is why liquid layouts are the way to go.
Thursday, March 15th, 2012
Luke catalogues layout patterns in responsive designs.
Thursday, December 29th, 2011
Stephanie focuses on Android but this is a cautionary tale about trying to impose control over what you’re sending to the multitude of mobile devices out there.
Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices.
Saturday, November 19th, 2011
The process behind the mobile-first responsive design of audiovroom.com.
Monday, November 14th, 2011
On the importance of using a fluid grid in responsive design.
Friday, October 28th, 2011
A framework for banging out ready-made responsive designs.
Thursday, September 22nd, 2011
A set of default styles to get started on a mobile-first responsive design.
Wednesday, August 17th, 2011
I’m usually not a fan of CSS “frameworks” but I like the thinking that’s gone into this fluid, responsive system. I particularly like this advice:
Take it apart, steal the parts that you like, and adapt them to your own way of working.
Saturday, July 23rd, 2011
Another browser-based tool for testing your responsive designs at different screen sizes.
Tuesday, July 19th, 2011
On the importance of using fluid grids as part of responsive web design:
We do responsive web design, but we don’t do it for the sake of being trendy. We do it because we believe it’s the way websites should be made. This is an opportunity for us to finally embrace the dynamic medium we build for. The web is not fixed width.
Sunday, June 5th, 2011
A thoroughly lovely responsive design, very nicely and thoughtfully executed.
Tuesday, May 10th, 2011
More documentation of a responsive redesign, this time from Trent Walton. Be sure to check out the FitText jQuery plug-in that was created as a result.
Documenting the process of switching to a responsive design. I think there’s always insight to be gained from seeing how your peers are approaching these challenges.