For centuries, visual designer's role has involved creating families of related designs. If you're creating book covers, you may have different languages, where your design needs to accommodate the title from different languages. If you're an automobile designer, you'll have a whole family of cars which need to express the same vocabulary, from the smallest one all the way up to the largest one. In recent years this has gotten even more complicated. Part of what's exciting, but also challenging on visual design for computers is that we have this increasing diversity of devices. This means different size displays, different input modalities, different usage scenarios, all sorts of stuff. So the user interface that works on a watch might be different than the one that works on a tablet, or a phone, or a wall, or a pull out display, or anything that might be coming along. Until recently, I would say that many people did web design, for example, focusing on something that was a laptop-ish size screen first, maybe 1024 x 768. But now there are so many different sizes. You don't even need to go too far afield. Let's just look, for example, at the range of Apple touch screen devices sold in the past few years. You go from a 3.5 inch diagonal screen all the way up to a 13 inch diagonal screen. That is a four fold increase in physical real estate. That's almost a ten fold increase in the total number of square inches of real estate that's available. And that compounds with the fact that you've got higher resolution screens and all a lot other stuff going on at the same time. So there's no way that you can take exactly the same design and just shrink or expand it across that wide a range and have it work. I pulled up the Wikipedia page for responsive web design and appropriately enough, it doesn't do a very good job at all in accommodating different screen sizes. We can see as we start out with a normal browser width, it looks pretty good. But as we shrink the browser, everything collides, and then we expand out the browser, and you get a text that's like this long. It just doesn't work at all. So things that we know don't work for responsive design are, you can't just let boxes get as large or as small as they want. Also, you can't have things be a fixed size, no matter what device you're displaying it on. In one case you need to zoom the view port around, in the other, you're wasting most of the screen real estate. The solution to the strategy of this increasingly diverse set of devices is to create a family of designs that have a similar look and feel but are appropriate for each device. On the web, the implementing technologies for this are media queries and rewriting the web page with JavaScript, among a few other things. The implementing part is for another class, but here, what I want to focus on is how a designer will create a design that can work across a family of sizes. So let's start with a common webpage that you might see is a three-column fluid layout. Where you have nav on the left, more information on the right and then a large fluid column in the middle. This can work really well for laptop sized devices. Shrink it down to say, a tablet though and it might be too large. So with a tablet, what you might do for something of this three-column style is it becomes two columns where you have the nav on the left here. So what you might do for a tablet, is that it becomes two columns where you have the nav on the left here, and then this big column, is what was the fluid piece here before. For a phone, you might not even have enough space for two columns. It might just be one. So for something that's this size, what we might do is we take our content and then the nav, well, that just might be a menu up top that you click on to get to the nav. Or in some cases, people will have a menu that pops out or pops over what's available otherwise. For you as a designer, the trick is to have something where even though the actual rendering necessarily needs to be different as you scale up and down. It should feel roughly similar across different devices. And there's two reasons for this. The one obviously is branding, that you want people to recognize that they're at the same site. The more important one probably is the user experience, that you want people's intuitions about what works here to transfer across these different device sizes. Here's another example of how you can make your design responsive. Let's say we have here something where, again we'll carve off some space on the left for nav. We might have some nav up top, so this could be your primary navigation and your secondary navigation. Maybe there's a big wall paper image up here. And you might have a column here, and a column here, and then some additional information here. A well-designed laptop-sized display, you can often fit four columns of information pretty comfortably. And again, that's not going to work as you go up or down. So what we'll see, just as we went from three columns to two to one here, that the same information is going to change as we go to the tablet. So, in this case, we go down to the tablet and we might have our primary nav now takes up the whole with here, so that's this part. We might have some secondary navigation here. But maybe it doesn't start until a little further down. So we might have this wallpaper image here become something that's full width in the tablet. And then our secondary nav goes below that. And then as opposed to three columns here, these things may condense a little bit. So it may be just these two columns here become one column here and then we can condense this further still as we go down to a phone size. So I'll have something that's like this size here and I have a wall image. My nav gets narrower again and in this case, we probably will need to serialize. Does this come first? Maybe this is second and this is third or is the order different? If you have truly ancillary content, you can often put it behind a menu or pull it across pages. This is one reason that people often suggest doing mobile first responsive web design, because it's a lot easier to add stuff than it is to take it out. And so if you start mobile first, it can be easier to say, well we can, On a mobile website, if you start mobile first, you'll often spatially, If you start mobile first, one common strategy is to split different information across multiple, different pages. On a desktop site or a laptop site, where you have more room, you can often unpack that. And so these things that were three different pages on a phone can become one page on the desktop or laptop computer. Starting mobile first is a big advantage over starting on the desktop because of this ability to expand more easily than to contract. Still, my experience has been it's hard to start with any one form factor. There's different reasons why you might want to start with each of these. But tailoring any one to the other, that can actually be kind of tricky. And so my experience is that you kind of want to start from the mockup stage, having a couple of representative form factors and designing for each of them simultaneously. And it turns out to be a lot less work in the long run if you start with multiple design models up first. It turns out to be a lot less work in the long run if you start with multiple design models up front. Because that lets you think through where you need the flexibility as you're designing. It's a little more work upfront but it totally pays off in the long haul. So in the next video, we're going to talk about how we move from these mockups that we've talked about here into something that is more about pixel for pixel representation for what you would see on a final page.
