Responsive Web Design Introduction

Transcript from the "Introduction" Lesson

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

[00:00:39]
>> Ben: September 9th, 2007 at 6:30 in the morning is a moment that kind of changed my life. I'm gonna get a little bit cheesy on you here. That's actually my birthday, September 9th. And somehow my wife had managed to purchase for me the first generation iPhone without me knowing.

[00:00:55] Somehow, she got the credentials to my iTunes account and activated this phone probably at about two in the morning. She set the alarm for 7:30 AM, snuck back into our room and put the thing right next to my head on my little night stand there. And I'm, the whole time, clueless probably snoring.

[00:01:16] And she snuck around the bed, climbed in. Laid there for about ten minutes and realized she wasn't gonna able to sleep until 7:30. She hopped back up, went back around, changed to 6:30. All this happening while I'm still sleeping. 6:30 in the morning boom, my alarm goes off.

[00:01:31] And it's the original you know that [SOUND]. You know that, all right, you've heard that a million times. And I have this moment where I can see this in my mind's eye. I'm laying sort of horizontally, obviously, with my head on my pillow. I happen to have my head tilted right towards this iPhone and I can see this glow.

[00:01:53] And I hear that sound, and I'd heard that sound on commercials and other things but I'd never owned an iPhone up to this point. And it's probably been since that day that I've been walking around with an iPhone in my pocket. Almost immediately, this kinda changed my perspective on the Internet, on the web.

[00:02:16] And you guys remember Steve standing there with, I think, the New York Times or some popular newspaper. And he's kinda showing us double tap zoomed in. Swipe to the left, or the right, and we get to see the article next, double tap again zoom out. And that experience was one that he said the Internet in your hand, the internet in your pocket and it really has kind of changed our perspective on what's happening in our role as web designers and developers.

[00:02:44] How many of you guys have a smartphone of some kind? Okay, most people. Those of you who have a smartphone, how many of you also have a laptop or a desktop computer? And those of you have both of those how many of you also have a tablet of some kind?

[00:02:59] Right, it's crazy isn't it? Look at this, 52% percent of laptop owners also own a smartphone. This is in the US. 31% of smartphone owners also own a tablet. 23% of laptop owners also own a tablet, and 13% in the US own all three. The past five years have completely changed our industry.

[00:03:32] We've sort of been faced with coming to the realization that the web is not fixed width. And so we're gonna spend the rest of today, talking about ways that we can approach, sort of addressing this truth, okay. Before we do that, a little bit of housekeeping for you.

[00:03:49] My name is Ben, as Mark said bencallahan on Twitter and on app.net. And you can check out my company, it's called Sparkbox, seesparkbox.com. We're a small shop, there's only 10 of us, 10 or 11 of us. And we're always hiring good people. We've only been around for a few years, actually.

[00:04:13] And we've staked our reputation on the idea that websites need to work at a lot of different resolutions. I also was a founder of a workshop series called Build Responsively, it's just been going on this year we're planning 2013 now. Just kind of an opportunity for us to get out and start some conversations about how this stuff should be done.

[00:04:37] Opportunity to meet some really smart people in some really cool cities. And it's something that I've really enjoyed this year. And Marc mentioned I really do enjoy education. I hope that as we spend this day together you don't hear me speaking down to you in any way. I really am just here to facilitate a conversation.

[00:04:53] I've got a lot of ideas and I'm very opinionated and I'll share all that with you. But I'm really looking for you guys to jump in share some of your experiences and let's figure out there are some things we can all learn from all right. I enjoy a good brew on occasion and so I don't know if you guys got the email, I tried to send something out to everybody before but if anyone is interested.

[00:05:15] Maybe at lunch time we can talk and see who's interested in having a beer or something after. I've distributed this little beer icon throughout the presentation and what that really means is that I probably have a whole lot more to say about that topic and I would love to discuss it with you over a pint.

[00:05:30] So if you see the icon really I can probably put that on every slide but I've kind of picked out some key areas where I have a lot more thoughts and just probably don't have time to squeeze all that into a single day. Yeah, so we'll try to figure out a time, maybe this evening.

[00:05:45] If you can't make it, no worries. But yeah, we'll talk. Speak up, I already said this, but I really am looking for you guys to participate here. From what I understand, it's the same group that's attending each of these, so you guys probably already know each other. So I'm the odd man out here.

[00:06:01] So don't hesitate to jump in and ask some questions, and contribute some of your ideas. Also, in that email, I mentioned this repository. If you haven't had a chance to pull those files down, we are gonna be walking through some code. I'm not going to get through all the stuff that's in that repository.

[00:06:18] There's a ton. There's 14 or 15 different directories in there with lots of different examples and some cool stuff. So there's also a readme file in that in that repository that has got loads of links, resources on this stuff. I haven't provided the slides ahead of time. I will put them up for you afterwards.

[00:06:38] But what I'd like to do is see where the conversation goes and then go back and make sure that the slides are accurately representing what we actually discussed. But the readme in that repo has a ton of information and all the links in here are also in that repository.

[00:06:54] So don't feel like you need to jot all that down or type everything. You can get to that info at any time. This is what I have. I'm going to try to get through all of this stuff today, okay. I've actually got more than this in my presentation and so I'm pretty flexible.

[00:07:12] If there's something that you don't see me covering that you want really want to get to, make sure you bring it up. Try to hit me at lunch time or something and mention it so that we can try to work it in the afternoon. But we're gonna start with this 101, the idea of just bringing everybody up to speed with Responsive and what are the three core techniques, what are some other considerations we should be thinking about as we do this kind of work.

[00:07:31] We're gonna talk about process, and I know that a lot of you guys maybe are in the code regularly, but I think that any time I talk about Responsive I try to also talk about process. Because these techniques, they're sort of interruptive, they're disruptive with with the way that we work.

[00:07:49] And for a long time I think we've been trying to just squeeze it into our existing process and there's a lot of things that need to change. So we're gonna cover some of that stuff. We're gonna talk about ways to apply styles, because there's a lot of different ways to do this.

[00:08:03] And we'll get into some details on ways that you can link to styles, and how you can write media queries and those things. We're gonna talk about retrofitting. Not everybody gets to start over with every project. And so, how are there other ways that we can use some of these responsive techniques on more legacy type sites?

[00:08:20] JavaScript to the rescue. We're gonna talk about some really incredibly useful poly fills and wrappers for HTML 5 API stuff that's gonna be really cool. There's a ton of stuff. I could spend the whole day just on that. So I hand-picked a few of these that I think are most critical.

[00:08:35] Lessons learned, some stuff that I've learned just from doing this for a couple years now and then we're going talk about what I think is next and responsive. And I guess with that we will jump right in any anything immediately, you guys are seeing that I'm not going to cover that you wanna get to?