As the web regained its dominance, it suddenly faced a new challenge—more and more devices, with more and more screen sizes. Developers adapted by creating projects with more layout options, but the pressure kept building.
- I just really enjoy watching it grow, and in a way, that front row seat I had to the web itself starting up, it's that same sort of excitement and innovation that's happening as we try to figure out how to make that work on all these different devices. Like it feels exactly the same to me. - When people started to use mobile devices to access the web, it humanized the web much more. It didn't feel like a place you have to go and a thing that you didn't understand. It felt like, you know, something that's in your hand, it's in your pocket.
So it became something that people felt I think much more comfortable with and intimate with, and at the same time understood even less. - When I first started building websites, we only had basically one screen size to focus on, 800 pixels by 600 pixels, and then gradually over time those got larger. 1024 by 768 was like the monitor I had for the longest time, and you'd build websites, you'd lay those out in Photoshop to fit the space that you had, and as screen sizes got larger, so did the websites that we built. - The constraints were relatively minor right, from 640 as that dropped away, 800 and up to 1024, you know, we didn't get a wide range of screen sizes.
We could almost fake, we could always get away with it with fixed width layouts, or a little bit of fluidity, and we did for a long time, but all of that really changed in 2007. - Then when the phone came around it was like, okay, well I just have to worry about this 1024 by 768 and then this 320 by 240. That's all I have to worry about. Then, tablets came around, and then you know, it was like well, I could probably do something a little bit in between.
I mean it still did 1024 by 768 so I could still do my desktop on the tablet. - So you know, the iPhone comes out, we've all got them, and we suddenly ah, I get it now, all my favorite content ... It's really painful, like 80% of the time I'm using the web now, it's a pain because I'm not at my desk. I'm in bed now using the web for the first time in my life, or I'm on a bus, or I'm at the airport or you know, on the subway. So we kind of went from being a theoretically kind of interesting idea to a practical, personal itch.
Wow, I'm going to fix this. - It was this sort of thing that dawned on me where I realized that essentially all of this custom stuff I was doing with CSS to these html documents in some ways was breaking the portability of those things, and that having to pinch and zoom around a fixed width site is not ideal. - I started getting RFPs for designing an iPhone website. That's sort of where I kind of like started thinking about responsive design. It's like, well where does this game stop, right? It's like, do we start designing S90 websites? Do we start designing iPad websites? You know, when do we stop trying to manage the new device that hits the market? - I was pretty aware of the responsive work that Ethan was doing from a very early stage, but I don't think I knew the term until I saw him speaking.
I think it was the Invent a Part in Seattle, and he blew everybody away. Everyone was like, you could sense people in the room were like, holy shit, (laughs) and I remember Eric Meyer even being ... Like Eric Meyer had been talking about media queries as this kind of obscure, unused bit of CSS, and then Ethan came up and said, "Oh yeah, I got media queries," and just like threw his mic down and just blew everyone's mind about how to use them.
- There was something about the talk, you could feel it in the audience. Everyone just ... It became more and more electric. It was like yes, this is ... Yes, this is a thing that we are witnessing that this is a huge shift, and it's not a shift that's coming. It's not a, "Hey one day you're going to be able to do this." This is right now. - In the first article I basically defined responsive design as kind of having these three main front end components. So that as a foundation, you need some sort of flexible or fluid grid-based layout.
Then you have images and media that work inside that flexible context, and then media queries form CSS3, and by using media queries on top of those flexible layouts, you can articulate how those fluid grids reshape themselves or represent themselves depending on certain conditions in the client, namely the size of the screen or the browser window. So that's kind of like the baseline. That's really all you need to make a responsive site, and then from there, it's kind of an exercise on the designer, you know. You can build a website that is five megabytes too big.
You can build a beautiful responsive site that only works if you have Java script available to your browser. Or you can build something that's incredibly light weight and fast and lean, but at the end of the day it starts thinking about layout, and then you can sort of enhance from there and really refine the experience, but it's about basically embracing the flexibility that's intrinsic to the web. - I remember I pulled up Ethan's demo in the browser, and I squished it, and immediately as things started to rearrange, I realized that this thing was going to dismantle my process completely.
That the way that I talk to clients and the way that we worked with each other at Paravel, that was all gone, and now I had to find a new way to sort of express myself creatively to solve problems in a new approach. So my first reaction was, this is terrible. I wish it would go away, and I don't want to deal with it. - There was no denial for me. I knew it was right, and I knew it had to be-- - [Interviewer] You just didn't want to do it. - I just dived into depression. It's like, I don't know whether I've got the energy anymore to learn yet another major thing. I can just about cope with that kind of incremental evolution of the web that goes on the whole time, but when you drop something major on me like that it's like, okay, here we go again.
You know, it was that kind of feel. - Just all the different devices, all the different resolutions, all the different pixel densities that we have to deal with. Their trying to fit everything into fixed boxes is just a fool's errand at this point.
In the film, Matt Griffin knits together a narrative from dozens of conversations with important figures from throughout the web's history. He interviews Tim Berners-Lee, Denise Jacobs, Jeffrey Zeldman, Ethan Marcotte, Chris Wilson, Lyza Danger Gardner, Eric Meyer, Irene Au, Alex Russell, Trent Walton, Val Head, Jonathan Snook, and many more. The result is a series of unique insights about why the web is structured the way it is, why standards matter, how mobile disrupted everything, and why the web isn't done growing.