This course has been updated! We now recommend you take the CSS Grids and Flexbox for Responsive Web Design course.
Transcript from the "From Fixed to Fluid" Lesson
[00:00:00]
>> [MUSIC]
[00:00:05]
>> Ben: Okay, so over lunch somebody sent me this. Is it James? Is that right? Okay, so we're gonna talk about a different kind of responsiveness here today this afternoon.
>> Speaker 2: [LAUGH]
>> Ben: [LAUGH]
>> Speaker 2: [LAUGH]
>> Ben: There you go. [LAUGH] I have no idea why we're looking at this, but I thought it was kinda funny.
[00:00:43] And James shared it so, [LAUGH] [COUGH] yeah, there you go, enjoy. Okay, so before we jump into retrofitting, couple things. I didn't get to talk to anybody about having beers this evening. Is there anybody who's actually interested in doing this, or am I gonna be drinking alone? Okay, awesome, nice.
[00:01:00] So, we got a handful. I don't know where I am, so you guys are gonna have to recommend a good place. Hopefully it's not that far from here. Someplace that we can get to quickly and get back.
>> Speaker 2: That would be, I'll tell you after. Well, Burger Jones.
[00:01:16]
>> Ben: Okay, so, if you're interested in having some brew after this we can talk shop a little bit or we can just drink. That's fine, too. But just hang around a little bit after and we'll figure out.
>> Ben: Okay.
>> Ben: So what dying questions do we have after our morning?
[00:01:38] Anybody? No questions at all. I'm either a really good teacher or you guys are really smart, one of the two, right? [LAUGH] Okay, so let's talk a little bit about retrofitting. I believe that there are times in the life of an organization when starting over with their web presence is a really good idea.
[00:01:57] But I also think that there are times, I also think that a lot of times we kinda jump to that conclusion. I think we're tempted by file new and starting from scratch, and not having to figure out what's already going on. But I would like to see us, as a community, start to kind of evolve our sights a bit more than just redesign them all the time.
[00:02:17] Now I say that as my organization is embarking on a complete rebuild of our site. [LAUGH] So I mean, I get it. Sometimes it's something that you gotta do. But not only is it something that we kinda sometimes have to choose whether we start over or not, but sometimes we're in a scenario where we're asked by a customer to do sort of the minimal that we can do to get a better experience.
[00:02:43] And so what I wanna do is, somehow we've kind of gotten into a couple projects here where we've been asked to do some of those kinds of things. So I have a little bit of experience embarking down those kinds of paths. And I wanna share with you guys a little bit about what I've learned there.
[00:03:00] So quickly, what is a Retrofit? Here's kind of how I wanna define it, just for the sake of our conversation today. Finding the fastest and lowest-risk approach to creating a better experience on an existing site for users of any screen, okay? Any screen size. Now we're not necessarily talking about a specific implementation.
[00:03:23] So it may be that sometimes you're allowed to rewrite the HTML. And that's, you're just sort of retrofitting the back end essentially, and then you can redo everything on the front. It may be that you're not allowed to touch the HTML, and you have to only write CSS.
[00:03:37] And we've been put in that position many times. And there's some really, I mean there's, you can imagine how challenging that could be depending on how that markup looks. So I wanna walk you guys through two different things. We're gonna cover some techniques you can use to try and do some retrofitting.
[00:03:53] And we're also gonna talk about something that, I refuse to talk about retrofitting unless I get to also talk about how you work with the client in a retrofitting scenario, okay? So you'll see why I think that's important. I mentioned a little earlier this morning this book by Kristofer Layon, a really, really good book.
[00:04:11] Nice short read, actually I think I even have it with me here. That's how good it is. I carry it with me. All right, this is really good. If you wanna come up and take a look, you're welcome to. But it's just a lot of really good information about how to create a better experience for users on small screens in particular.
[00:04:29] But using these kinds of techniques that we've talked about, when you can't always start over. Dealing with legacy sites. So, a really good resource for this kinda thing. [COUGH] I also have another repository that we could, if you're interested in looking at some of these kinds of techniques, I have a separate one out on GitHub.
[00:04:49] If you just go to github.com/BenCallahan there's a rwd-retrofitting. And a lot of these examples are in there as well. And this'll be in the slides if you don't wanna necessarily get into the code for this part.