Responsive Web Design The Responsive Dip

Transcript from the "The Responsive Dip" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Ben: All right, so I wanna close this up today, just I wanna tell you guys a couple of stories. I wanna just wrap this stuff up and tell you where I think we are as an industry with responsive and where I think we're gonna be headed, where I think we need to go.

[00:00:19] So this is a picture actually taken in my office. We were incredibly lucky. We moved my three partners at that time, and it was just the four of us, when we started back in beginning of '09. We moved our business, we had been contracting with each other prior to that, and we decided to merge and really try and take it seriously.

[00:00:40] We moved our business up to the top floor just like a loft apartment of the of the building we were in. And the guy who owns the space moved down to Florida. So he said, would you guys be interested? And he can get this massive pool table out of the office [LAUGH], or of his apartment.

[00:00:57] So it got left, and needless to say, we've played many games of pool while we were working. And actually, we solved a lot of problems around the pool table, cuz it's just getting your mind off of what you're doing sometimes is what you need. But I'm a bit of a perfectionist.

[00:01:14] I love to be really good at the things that I do, and I hadn't played much pool up to the time that we moved into the space. And so I think three days after we got into this space, I played a couple of games, and my partners realized that I sucked.

[00:01:30] I went to a bookstore and bought a book on how to play pool [LAUGH]. And so I'm sitting at home that night I got the book, and I'm reading through, I read the first chapter. It was all about angles, and I thought, okay, this makes a lot of sense.

[00:01:44] I understand physics, I can do angles, so I started to play the game a little bit differently. Really, all I cared about was angles, and I started focusing on making sure that where I contacted the ball, the cue and the next ball I was shooting for would guarantee that that was gonna go in.

[00:02:03] And I actually got a lot better at pool pretty quickly. Now, I was terrible to start with, so a lot better is relative. But what happened is we play a game called nine ball, and I don't know if your a pool player or not, but in nine ball, you're supposed to contact the balls in order.

[00:02:20] So when you break the one balls at the front of the rock, you strike that one ball to break. And then if it doesn't drop, your next shot has to contact the lowest number ball, so it would be one in that case. Now, the goal of the game is still to put the nine ball in, so if you can combo it in, you win.

[00:02:38] But generally, what the flow of the game is generally that you put in the balls in, in order. So hitting the first shot is great, getting those angles right is great, but in nine ball, you have to do a lot more than that. You have to position the cue ball after you sink a ball so that you have a shot on the next lowest number of ball.

[00:03:01] So I got really good at putting the first ball in, and I never had a shot at the second ball, so it didn't actually help me out in the long run in this game. So I thought, okay, something's wrong here, I plateau, and I was getting the first shot in, and I just need to start thinking about how to position the ball.

[00:03:20] So I went back to my book, and I started reading a little bit further, and I started to read about English for spin. And I realized that if you spin the cue, when it contacts that next ball, it actually has a great amount of impact of how it was spinning as to where that cue ball goes.

[00:03:35] So you can actually do quite a bit of positioning of that ball. So I said, excellent, now I know what to do, I'm gonna start spinning. So I get in to the next day, and I start playing, and I'm thinking about the angle, but I'm also thinking, okay, the two balls over there.

[00:03:50] I got to position the cue, so I needed a little down to the right. Okay, boom, and what do you think happened? I missed the first shot, all right? I actually got worse at pool [LAUGH], because I had been living in this false sense of security that I had improved, because I hadn't really torn down what I knew.

[00:04:10] And I had to just break it all down, and start over, and I needed to learn how to spin and get the angle right. So I'll show you guys a little chart here. This is my pool game over time, right? So I started out over here. I had no idea what was possible in this game.

[00:04:30] I'm on this side. I creep up to the top. I'm getting the first shot right, and then I realized I need to start spinning to be able to control the ball. And boom, I go down almost as bad as I was when I first started. But now, I have the potential to get a lot better.

[00:04:45] And I had to go through this breakdown in order to get to a point where I could actually get a lot better at this. I'm not the first guy to start thinking about this idea. Seth Godin wrote a book about it called The Dip. And even before that, Noel Burch coined the term, and she called it the four stages of learning any new skill.

[00:05:06] Today, we call it the stages of competence. And I've overlaid those four stages on top of this dip diagram for us to think about a little bit. So that first stage, unconscious incompetence, right? The world is new, you don't know how bad you are. Unconscious incompetence, okay? That was me when we first walked up to this pool table.

[00:05:28] And finally, you get to a point where you're still terrible at something, but you recognize that you're bad, you're conscious incompetence,okay? So you recognise it, you're still incompetent, okay? There's still much more competent people out there. If you push through the dip, you get to a point where you reach conscious competence.

[00:05:48] In other words, you are very good at what you do, you're competent, but you have to focus. You have to really think about it. It's not second nature to you. And then, unconscious competence is the final stage where you get to a point where you have mastered something so much so that you almost don't even need to think.

[00:06:05] It's second nature, it's just in your DNA. And I think that as an industry, we're learning some new skills, and I think that this applies to us as an industry. We've been playing around with these techniques. CSS guys and gals have been playing around with these techniques for a couple years now, and we need to realize that there's a whole lot more we can be doing with this stuff.

[00:06:33] We've got to start inviting some other people into the conversation. That's why I wanted to talk about some of the process stuff earlier today. We need to invite the user experience people into this conversation. We need to get some content people involved. Back-end devs, you were asking me what can you do as a back-end dev.

[00:06:49] You're interest in this stuff. There are some real problems with content management systems right now, especially when you start to implement some of these things. So there's lots of challenges that we've all got us put our heads together on to solve, and I think there's a lot we need to learn still.

[00:07:05] So I've written a bit more about this. It's called The Responsive Dip. You're welcome to check that out. But the end game there is that I think we need to push through that responsive dip, but we need to do that together, and the way that we'll do that is the responsive mindset.

[00:07:22] Ethan Marcotte is very eloquent, but he's also very protective of the definition of responsive web design. Obama's site, during the campaign, was redesigned several times. I know a couple of the guys working on that site, but it was interesting, cuz they had done an adaptive approach where they weren't using percentages flexible foundation.

[00:07:46] They were really using three fixed width layouts. It's what they had chosen to do initially. And Stephanie Rieger did a write-up about it in .NET magazine. It tore apart, like it was pretty negative. .NET magazine tweeted about it and said, hey, check out Stephanie's review of the new Obama responsive site.

[00:08:09] And Ethan wrote back immediately. He said, that site is not responsive. And it wasn't responsive by his definition, because there was no fluid grid. So okay, I understand that, and he started this whole thing, so I'm not gonna speak poorly of him in any way. But I do think that we need to shift to a mindset.

[00:08:30] We need to start stop thinking about the specifics of this and start to embrace it in a more holistic level. Check out this quote from Andy Clarke. The truly responsive design web designer wasn't born until after the launch of the iPhone. We haven't seen his or hers work yet, right?

[00:08:49] This is true. How many of you guys have kids, right? They're playing with these touch devices. It's amazing, some of the speed with which they pick this stuff up. Sometimes I work a little bit from home, I'll be sitting at the kitchen table, I have my daughter on my lap.

[00:09:02] We type in something, flip over to a browser, and she reaches up to my laptop screen. She wants to touch that. Same thing, we have a big television. A friend of mine has a big television that's pretty low. Kids can reach it, and all of the sudden, the kids are walking up, and they're trying to swipe things on the TV.

[00:09:18] That's just this is their mindset. I think if we could start to think more along the lines of these children, really, I think we could start to do some really amazing things with these techniques. So let's talk about moving beyond the techniques. We've talked about small resolution first, CSS structure today, but we haven't spent a lot of time talking about the idea of mobile first process.

[00:09:48] Luke Wroblewski coined the term mobile first, and he's got a book out. Same publishing company as Ethan's. It's book apart a really incredible read. You need to get that if you're seriously considering doing some work in the mobile space. But the premise there is that our sites are like the microwave interfaces we looked at.

[00:10:10] They're just overloaded with too much stuff. Users don't want that stuff, they really don't. They have a couple things they want to get to. Your site exists to communicate, and so you need to let it do that. And mobile first process is a way for us to look at things from a different perspective, start to think about what's truly needed when your real estate on the screen is so severely limited.

[00:10:36] And if you can make some prioritization decisions at that stage, then you can start to ask the question, are those things that you cut out, are they really needed even at larger resolutions? So mobile first process. I think performance as a feature, Stephanie Rieger has done some good, and Brian have both done some really good writing on this.

[00:10:54] I know you guys talked about performance. Was it last week when you're talking about performance? There's so much to be done here. So much of this stuff in responsive, it's gotten a bad name, because people are taking massive websites and cramming them down onto small screens. Of course it's not gonna be performing.

[00:11:13] So we need to start thinking about ways that we can implement these techniques and still get performance sights. Truth is users expect your site to be faster if they're on a small screen, they have a higher expectation. And most of the time, they're not faster. So we need to think about this.

[00:11:32] It needs to be something that's worked into the process throughout as we go. You can't just make a site fast at the end of a job, okay? Chris Coyier has some really good, he actually did at the Responsive Web Design Summit. He did a really good, I think his talk was called, let's do a bunch of simple things to make our sites faster [LAUGH].

[00:11:53] And really good. Just a ton of really simple things that most of us just don't do. Limit requests, do some expires headers that make sense. There's really simple things, Gzip, all kinds of stuff. The idea that the server is our friend, we've been using server side technology forever to serve different components, different versions of sites.

[00:12:18] These techniques are really well-documented. I think we need to start thinking about how we use the server in responsive. Most of the sites out there now just completely ignore the server. It's all happening in the browser on the front end. I think there's a lot that can be done here.

[00:12:33] So again, in a single day, we don't have time to dig into all these things, but a lot to be done. More modular content systems, Karen McGrane is talking a lot about this now. Just really, we need to start thinking about building systems to manage content, right? We're not building web pages anymore.

[00:12:52] We're past that, guys. There's so much content in a given system that needs to be represented. We need to do it in a way that's much more modular. We need to start thinking about content management systems in a way that actually is more closely related to what they're called, content management systems.

[00:13:10] They're not website management systems. We need to build systems that manage our content and allow it to be served to multiple channels. I think there's a lot that needs to be done there. And then content and functional priority, just I've talked a lot about this today, it's something I harp on all the time.

[00:13:29] I just feel like we need to start prioritizing content, we need to start prioritizing functionality. Those are the things that we can do on the front end to make the experience a lot better when the functionality and content is fairly complex. And then, I think there's some things we can do to move the industry forward.

[00:13:48] In fact, being here today is significant for me, because I love this man, this is incredible. To sit down with peers in the industry who care about the same things, talk about some of the challenges that we're all trying to solve and just share what's working and what's not.

[00:14:07] This is how we get better at what we do, so cheers to you guys for being here. Apprenticeships. This is something we've been thinking a lot about. If you're in a scenario where you have the capacity to bring in some younger talent and get them in front of people who care about the web, who care about standards, we need to start doing that sooner.

[00:14:26] Colleges and universities, they're not educating the young kids coming into this field well enough to do this stuff. Think about it. If you started university three years ago, responsive web design didn't even exist, right? Our industry is changing so fast. I sit on a couple different advisory boards for curriculums for these colleges, and it's frustrating.

[00:14:50] They need people like you guys to be on those boards to be asking the hard questions, pushing them to make some decisions faster. It takes us a year to get some new curriculum through, and that's just an initial pass. This stuff, it's moving too slowly. Our industry is changing way beyond what we can do and in colleges.

[00:15:13] And then, experimentation, experimentation, experimentation. You've got to start playing with these things. Don't be afraid to use these techniques even though they're not fully proven. Think about it. If you don't do any of these stuff, your users are still gonna go to those sites on small screens. You're still gonna download all those assets.

[00:15:32] They're just gonna have a much worse experience doing it, so we might as well make it a little bit easier for them. And with that, I will thank you guys so much for your time. That's all I've got, but I'll be around. We'll have questions, we'll have some brew.

[00:15:46] Thanks.
>> [APPLAUSE]