Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Modern Layouts: Getting Out of Our Ruts51:27 with Jen Simmons
In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout started appearing. Now with new CSS properties for layout landing in browsers, we may be about to see a bigger renaissance in layout design patterns. How can we better use the space inside the glass rectangle? What layout innovations could help users better find and focus on what they want? Take a walk through where we’ve been, where we might be going, and how we can better design for the true medium at hand. This talk features practical examples of what's newly possible, along with access to a code repo for you to play with later.
[MUSIC] 0:00 I do think we're in a rut. 0:05 I think we're in this rut where we've been doing layouts, in a certain way for 0:06 quite a long time, and we are at the point where we 0:10 don't really think about what we're doing, we just keep doing it. 0:13 And this is the rut, the rut is shaped like this. 0:17 And you see website, after website, after website that all looks exactly the same. 0:23 Oh look, here it is on iPad, maybe that's different. 0:31 Here are some design blogs. 0:35 These are professional, amazing, top-tier graphic designers with their design blogs, 0:38 that look exactly the same. 0:42 And I, I guess I'm being a little bit generalist, I mean, 0:47 some people don't have this layout. 0:49 Some people have this layout. 0:51 [LAUGH] so, I'm thinking about, like what, what happened, where did this come from? 0:54 And in some ways it really, the, the place that I feel like it really became the way 1:00 to do things, is back in this era when blogs were 1:05 awesome and new and we had just grown from screens. 1:10 That were 640 pixels wide, over 15 inches, and 1:16 then we had 800 pixels, and we were like what should we do with the extra pixels? 1:21 [LAUGH] We can make our text longer but that doesn't really look good, 1:24 let's make the text stay the same kind of shorter length, and 1:28 then oh look we'll put sidebar stuff in the sidebar. 1:30 And it was pretty amazing for 1:34 a while, because the things in the sidebar were super interesting. 1:35 It was like, other awesome blogs. 1:38 And look, who made comments? 1:41 Like there were magical robots who would generate things to put in the sidebar, 1:43 like a list of the most recent posts. 1:47 Totally breakthrough revolutionary stuff, right? 1:49 But this is what we've done over the last, whatever, 10 to 15 years, 1:52 we've trained ourselves and everyone else, to never look in the sidebar. 1:56 So, what are sidebars today? 2:02 Sidebars are the perfect tool for hiding content. 2:03 [LAUGH] 2:07 If you want no one to look there, put it in the sidebar. 2:09 And the reality is that we have this huge canvas, 2:13 we have this blank, I mean more than a blank page. 2:15 This is a blank three-dimensional, computer powered space, in which, 2:18 we could really do anything. 2:24 Or I should draw this. 2:26 I should show you, this is your, your canvas. 2:27 The space in which we could do stuff. 2:30 And yet we're sort of stuck in this rut. 2:32 So we see some, 2:34 sites that are coming out that are beautiful, this is the great discontent. 2:35 Huge photos on the top, amazing, beautiful typography, amazing. 2:40 But you know, it's very easy for 2:44 us to still be stuck in this same rut, like oh we'll just make sidebars and 2:45 then we'll drop them to the bottom in the responsive layout, it will be awesome. 2:49 And for some designs that's perfect. 2:55 But what, that's not perfect for every design. 2:56 Right? 2:59 There are other things we could do. 3:00 And you do see people doing other things, here are several websites. 3:02 Where you, you know, 3:06 we see this, especially there's like a band of color and there's some stuff. 3:07 And then it kind of, more stuff, this sort of back and forth, this kind of a shape. 3:10 Oh, the colors mm-hm. 3:14 This kind of a shape, you know, color bands. 3:17 But frequently what ends up in each of the color bands is, oh, we took that and 3:19 we split it into threes, and then we split it into twos. 3:23 So now we sort of have these two different ruts going on where it feels like okay, 3:27 you don't have to do this. 3:31 You can do that, [LAUGH] but that's it. 3:33 Like there's, I remember a day when this was, 3:36 the predominant layout method, pattern on the web. 3:42 Who else remembers this? 3:45 yes, right? 3:48 And really, the original layout pattern was this. 3:50 This was the original layout pattern of the web, no layout at all. 3:53 We had a lot of websites that looked like this. 3:57 This is back in the day when there was no way to like, 4:01 change the background of the website, so everything was gray. 4:04 GNN, Yahoo. 4:06 So this shape, like you can best see it here [LAUGH] Space Jam! 4:09 Space Jam was awesome. 4:18 Or,the original Microsoft homepage. 4:21 microsoft.com. 4:25 It's their first homepage. 4:27 This, actually, was recently redone. 4:28 It was taken down, but 4:30 it was recently, the folks over at Paravel put this back up. 4:31 Trent Walton was on the Webhead episode 80, 4:34 and he talked about this, and kind of what they did to figure out. 4:36 Because this was done in an era where there would not, 4:39 this is before Tables for layout. 4:42 So like, how did they even do the layout? 4:45 There's a lot of stuff like this, lots of circles. 4:46 Also lots of splash pages, we now know splash pages, bad. 4:50 But circles, are circles bad? 4:55 Here's another thing with a circle, here's another circle. 4:57 Now there were some columns. 5:00 But we, you know, people were using columns in kinda different ways. 5:04 Another layout, early layout. 5:09 This reminds me of, what we're doing now. 5:10 I feel like, you know, this layout, is the modern gorgeous typography version of it. 5:13 Random chaos layout. 5:21 There's a lot of random chaos layouts. 5:23 Another one, this one is from Hotwired. 5:26 I really like this because it's columns, but 5:28 the columns are not really aligned at the top. 5:31 There's different amounts going on at the top of the columns. 5:34 Subtle difference, huge visual impact in this sort of, world that we live in now, 5:38 where everything looks so 5:43 much the same, even a small change is going to have kind of a big impact. 5:44 And of course a lot of the designs that were being made were, were, happening 5:48 the way that they were happening because, we were using tables to do layout. 5:53 This is a coding example, and 5:57 a drawing of tables being used to display tabular data, good use case. 5:59 Super early web design book, with the old school code. 6:05 This is a great example of tables being used for layouts. 6:11 And here I dug in to show you, for those of you who weren't there in those days, 6:15 we would make the tables invisible by setting border to zero. 6:20 I'm going in right now hacking in, in this video and changing all the borders to one. 6:24 So, you can see where the actual tables are, and how everything's set up. 6:29 So that's the layout, there's table, 6:34 nested inside table, nested inside a table. 6:36 It was crap, as far as code. 6:40 But it gave us a chance to do things like Space Jam, 6:44 right, like there's the Space Jam with the the lines on. 6:46 But here's the thing. 6:50 Graphic Design has not always been like this. 6:56 Right, this is what web design, Graphic Design on the web has looked like. 6:58 And we've been in our own little bubble where we kind of think about the web, and 7:02 we get ideas about how to make a website from other websites. 7:04 These, wait oh, oh, I'm gonna make a new website. 7:08 What should I do? 7:10 I'll go to all the websites I like, and 7:10 see what kind of ideas I wanna take from them. 7:12 But you know what? 7:15 There's like this whole other world of other people, who have decades and 7:15 decades, and centuries and centuries of graphic design experience. 7:20 So I'm gonna talk a little bit about this person, Anna Wintour. 7:25 She is if you don't know her, she is the Editor in Chief of the American Vogue. 7:28 One of, just incredibly successful, and one fo the most powerful people in 7:36 the fashion industry and they over at Vogue make amazing magazines. 7:41 Vogue magazine is not just another fashion magazine. 7:47 It's like the best fashion magazine and 7:49 they spend all this time and money in creative budgets. 7:51 And awesomeness to make gorgeous photographs like that one, and this one. 7:54 And then they put them in their magazine, and 8:00 they do layouts like this where the content, the words are supporting the, 8:02 the, the image, the image and the words go together. 8:07 The layout itself is really just making it possible to see that content. 8:10 There's a documentary about Anna Wintour and 8:16 the making of the Vogue's September issue, the biggest issue of the year. 8:17 It's an amazing documentary, it's really fun to watch, I recommend it. 8:21 But in this documentary a lot of what they're working on, is about this wall. 8:25 They have this room with this wall, and they are coming up with ideas. 8:30 They're pulling clothes off the racks. 8:35 They're going and doing these incredible photo shoots, they're bringing 8:36 the photos back, choosing from hundreds of photos which ones they wanna use, 8:39 they're sending them to the graphic design department, they're doing these layouts, 8:43 they're writing articles they got. 8:45 You know, people writing editorial back and forth. 8:46 They do whole series of things, they put them up on the wall. 8:48 They decide to shuffle the pages around, they decide to rearrange everything. 8:51 They cut whole articles because it doesn't fit the whole context of Vogue. 8:55 All of this is focused on the print magazine. 9:01 And then comes, vogue.com. 9:05 So, let's go to vogue.com. 9:09 This is what the, I guess the home page of Vogue Magazine on 9:15 vogue.com looked like back in June when I took the screenshot. 9:19 Let's scroll, now this is the page for Vogue magazine. 9:24 Right? Like where was Vogue magazine? 9:35 Okay, I think it's here right, so okay let's dig in, 9:36 [INAUDIBLE] bear is making me curious, let's click on that. 9:41 Okay. There's a like, carousel of an ad at 9:46 the top, like just, okay, let's just pretend that didn't happen. 9:50 [LAUGH] Here's the, page for this article. 9:55 Sidebars and, and header just crazy, crazy. 9:59 Well let's just zoom in a minute and look at the layout of the article itself. 10:04 Prominent share buttons, really important. 10:11 All this stuff is trying to get you to go other places. 10:16 There's one sentence, and then there's a tiny thing that says see the slideshow. 10:18 Like I want to see the spread, I want to see the, 10:23 in the magazine it would be like, you know, six pages, flip back and forth. 10:25 All right, click this See the slideshow, we get this. 10:29 Okay, could click on the bear picture, we get this. 10:31 Like, what happened to this? 10:35 Why can't I see this on the website? 10:38 I, if I'm looking at a computer screen, a tablet screen, a phone screen. 10:42 There's RGB light coming out of the device into my eyeballs. 10:47 Like, it's the most beautiful, it's like looking at photography from slides. 10:52 It's way better than magazine paper, and yet 10:57 it's not being used whatsoever when you've got stuff like that going on. 11:00 And how is this happening? 11:05 These people are at the very, very, very top of their career, 11:07 making some of the best work in the world, so that it can be displayed like that? 11:11 And there are lots of reasons why. 11:14 This is not, I can't talk about all the other, the many big, 11:18 huge people problems and what's up with Connie Nest, and blah, blah, blah. 11:21 Right? 11:24 But what we do know is that somewhere along the way, 11:25 pretty much everybody involved in this project said, we're making a website, 11:29 it has to be shaped like that. 11:34 So, okay it has to be shaped like that, so I guess we'll do this. 11:37 And what I'm here today to say is it doesn't have to be shaped like that. 11:43 So let's stop it, it could be very easy to blame this on the ads, right? 11:47 This is, this is a collection that Marilyn Mann put together couple years ago, 11:52 he calls it Noise to Noise Ratio, 11:56 it's a Flickr photo set just showing you how much. 11:58 The articles that you might actually have gone to the page to see are in the white, 12:04 and then everything else on this page that he kind of grayed over is all the content 12:08 that is not relevant to the article. 12:12 But the thing isn't in the fashion industry ads are a big deal, 12:15 ads in the magazines are actually a feature. 12:20 If you buy the September issue of Vogue, 12:23 it's like 800 something pages, and more than half of that are advertisements. 12:25 And yet the ads are actually really valuable to people. 12:31 They're, they're actually a big part of the content. 12:33 If you look at this, I, I picked these, this is not Vogue this is 12:36 another magazine, but I picked it because it's really interesting. 12:39 On each of these, the right-hand page is an ad and the left-hand age is editorial. 12:42 And in each one, they like paired the ad with editorial that 12:47 kinda matches graphically, goes together. 12:51 So let's be more inventive with our layouts and 12:56 see if we can really present the content that we have. 12:59 So I'm fascinated with magazines. 13:04 And in, and in some ways I can't believe that I'm standing up here. 13:05 I cannot believe that I'm standing up here saying, 13:07 let's look at print design to get ideas for the Web. 13:10 [LAUGH] I feel like I spent the first 15 years of this saying, let's stop it. 13:14 Stop thinking about print, it's not print. 13:18 The Web is not print, we're not talking about print, cut it out. 13:21 And now here I am going, hey let's talk about print [LAUGH]. 13:25 You know what there's really a good ideas in print, 13:28 let's see what we can do with those ideas. 13:32 So I'm gonna talk about some of these. 13:36 I'm just, I pulled some just random images off the internet you know, 13:39 magazine layout, that I think are interesting. 13:43 I, I also especially was looking at back in the 60s and 13:46 70s there were a lot of experiments in magazines. 13:49 Things are very, kind of like, cool and 13:52 it didnt have to be totally commercial, there's a lot of crazy stuff going on. 13:55 There's another one, here's a. 14:00 This one, hey look at those shapes she's interesting. 14:05 This is a bit more mainstream right? 14:09 Why couldn't you make a webpage look like that? 14:12 Oh right, cause we dont have the technolo, oh yes you do have the technology. 14:17 As of like five weeks ago you can do this. 14:21 [LAUGH] So we're gonna look at CSS' shapes, level 1. 14:24 Here I've got, I'm working on a website for the web ahead. 14:31 Here's a guest bio, little bit of a guest bio. 14:35 I'm gonna start out by floating this thing left. 14:39 And putting a margin on the left and right around it. 14:42 This is also your fallback for progressive enhancements. 14:45 I'm gonna show you the magic in a minute but if the browser doesn't 14:47 understand the magic and it ignores the magic you get this, right? 14:50 This is a great little fallback. 14:54 Not amazing but hey it's fine. 14:55 Then we add one line of code, shape-outside circle [SOUND] colon. 14:57 And it wraps the text around the shape. 15:05 Small detail, but really kinda amazing. 15:09 If you wanna follow along, by, by the way, labs.thewebahead.net. 15:13 You can pull up this code right now, 15:18 there's demos, they're running demos up there and 15:20 you can like inspect and mess around with what I'm showing you right now. 15:22 That one I just showed you and the bunch more I'm about to show you. 15:25 This is also all the github repo, the github repo link is in the, 15:28 all you, the only URL you need is labs.thewebahead.net. 15:31 Also you can follow me on Twitter, Jen Simmons, 15:38 I'll be uploading these slides to speaker deco later today. 15:40 And you can get the slides which have the thing with the link and 15:43 then right, find all this stuff. 15:48 So CSS Shapes level one is a w3C specification. 15:50 It's in candidate recommendation stage. 15:55 For those of you who don't know there's these five stages that 15:57 each web spec goes through. 16:01 It starts out as a working draft. 16:03 It may or may not live past that stage. 16:04 It might get cut right there but 16:06 once something kind of goes through a working draft, lots of changes get done. 16:10 Lots of discussion, lots of fights and email lists. 16:12 Goes into Last Call, then Candidate Recommendation. 16:17 Once it's in Candidate Rec, 16:19 Candidate Recommendation frequently it's pretty good to go. 16:20 It starts to really be put into browsers, 16:23 Proposed Recommendation is like hey this thing's really baked. 16:25 Some people think they, they misunderstand and they think that they have to wait for 16:29 something to be in Official Recommendation before they should use it, but, I think, 16:32 didn't, she says two officially moved recommendation like 16:36 last year or something. 16:41 Was it, somebody knows the date but, 16:43 you don't have to wait until it's in recommendation. 16:45 You'll be waiting, it'll be 2020 before this stuff's in, is in recommendation. 16:48 So of course Can I Use is the place to 16:51 find out what the browser support stuff is. 16:54 And CSS Shapes Level 1, good to go in Chrome. 16:57 The Safari that came out, like, last week. 17:01 And not literally, but Opera. 17:05 So, it doesn't work in, in Firefox or IE. 17:08 But like I said, if, with some smart progressive enhancement strategies, 17:11 you can totally start using this today. 17:14 Shapes works on floated things, so you float something and 17:16 then you make a shape around it. 17:19 There's a bunch of different properties, 17:23 well two properties really that I'm gonna talk about, 17:24 but a bunch of different, thingymathings that you can put on the property. 17:27 Shape outside, I showed you circle, there's also a ellipse border box. 17:31 Inset with a bunch of stuff, url, and then there's this thing called shape-margin. 17:36 So here is the ellipse. 17:43 It's, this ellipse has a 50% and 50%, so it's really like a, 17:46 a, you know, an ellipse shape, like a big, perfect oval. 17:52 If you wanted to make an egg, you know, you can make an ellipsis shaped more like 17:56 an egg by modifying those numbers around, changing things around, and this image and 18:00 the other image, both of them I cut them out in Photoshop, right? 18:05 So, the image is already shaped like a circle or shaped like an ellipse. 18:08 Here's an example where the image itself is still a square. 18:11 I put a border radius of 100 pixels on the image. 18:16 So now the image itself gets cropped. 18:22 It's floated, got a margin, so 18:26 that the text wraps around it, so, the image is set 50% of the width. 18:28 And I'm just gonna add shape-outside: border-box, shape margin 30 pixels, and 18:32 this takes the text and it wraps along the same curve as the border radius has. 18:40 So then if I wanted to make this smaller or bigger I could keep changing the border 18:46 radius and the text would just automatically adjust to go with that. 18:50 It's actually really simple, the code is really quite simple. 18:53 What's hard is changing our mental models and 18:57 our expectations of what's possible, and starting to use this stuff, 18:59 starting to really create designs that implement these ideas,. 19:03 Here is a polygon, you can do shape outside polygon. 19:08 It's got four points on it, it's actually a diamond, right, 19:13 this polygon's a diamond, I just copied and pasted it out of a code example and 19:16 found myself a kitten that would fit in the diamond. 19:19 [SOUND] But, polygons don't have to have four points, 19:21 they can have how many ever points you want, they can be any shape you want. 19:25 They can be this crazy polygon. 19:29 The people who have been experimenting with this quite a bit, you know, 19:32 the first bleeding edge people. 19:36 Have been struggling because it takes a lot of work to figure out 19:39 what your polygons should be in your, in Illustrator. 19:41 And then you're back and forth, and back and forth. 19:43 So this got made to solve that problem. 19:45 It's an extension for Chrome. 19:50 That you can free. 19:52 Download into chrome from dep tools. 19:53 So you can inspect the polygon on. 19:56 The shape and make changes right there in the browser until you like it and 19:59 then you copy and paste that code into your CSS file so 20:05 here, you can see I'm gonna inspect the kitten. 20:09 There is the image. 20:13 There's a little crazy it's really hard to find but this little tiny tool down there. 20:18 You go into the shade, you get the little tiny other tiny thing and 20:22 you can click and just drag the points of the polygon around. 20:27 [LAUGH]. 20:32 >> And I can double click, or maybe it's single click, but 20:36 I can click on the dashed line and add points. 20:38 So there I'm gonna add a point. 20:42 >> [LAUGH]. 20:44 >> It's way too easy. 20:47 Right? 20:52 Awesome. 20:53 And then you just grab that stuff and put it in the thing. 20:56 There's more than one mouth hanging low right now. 21:03 [LAUGH]. 21:05 >> What? 21:07 Here's another possibility. 21:16 Let's say you don't wanna sit there and make this whole polygon shape. 21:18 You can instead make a mask image and use URL. 21:22 Shape outside URL foo and point to your mask. 21:26 So here's these this photo of all these bees. 21:31 This is an example on CodePen. 21:36 You can see that the, on the content in the HTML there's. 21:38 It's pointing to the URL for the beehive with the bees. 21:42 It's all in color. 21:45 And then over in the css, 21:47 the shape outside property, the URL it's pointing to the image for the mask. 21:50 And this is the mask, it's black and white. 21:56 So, white is where stuff flows into, and black is where stuff does not flow into. 21:58 So, then, you've got this result of, text going along the edges of the bees when you 22:03 really didn't have to foster the polygon at all, you can just make the mask. 22:08 It's another total possibility. 22:12 [UNKNOWN] the episode, which one is that, 22:17 81 of the web ahead and talks all about shapes. 22:20 I'm also pointing to this, because there's the show notes for this particular episode 22:25 and links to the chrome extension I showed you to the demos that Adobe, 22:30 to like a blog post on exactly how to use the polygon tool with information 22:35 about exactly where that those tiny little arrow buttons are so you can find like. 22:41 All the stuff that you might want to know, now that you're like what. 22:45 There's a great set of links here that you can dig into and find out. 22:49 Follow them to places. 22:53 So level one CSS shapes level one. 22:57 There was a bigger and more ambitious thing going on with CSS shades. 22:59 And exclusions. 23:04 They were all sorta one thing. 23:05 And I guess it was overwhelming? 23:07 I don't know. There was a decision made to make it, 23:08 to break it out. 23:10 So CSS Shapes Level one does shape outside. 23:11 There's also a lot of work being done on doing shape inside, 23:14 which will be in CSS Shapes Level two. 23:18 Which is, like, not coming soon. 23:20 But will eventually be coming soon. 23:23 So here's another like example from a magazine of just really simple. 23:25 Eventually, it would be best to do this as a shape inside, 23:30 where you would draw the shape and you would put the text inside the shape. 23:32 But you could cheat, people are doing experiments right now, 23:35 cheating, doing the shape outside where you draw these, you know, 23:37 you draw the negative space and get the same results with a hacky kind of thing. 23:41 But you know this is amazing because of the stairs. 23:46 Because of the graphic, art direction and stuff. 23:48 Here's another one, where text is being put inside that q. 23:53 Again this is would be a done better shaped inside. 23:58 You could cheat and probably kinda get the same result with the shape outside 24:01 [BLANK_AUDIO] 24:05 So let's look at some more magazines. 24:07 [BLANK_AUDIO] 24:08 And just get ideas. 24:11 They're not always, 24:15 these experiments, very readable, but they might give you an idea. 24:16 So turning things. 24:19 Yes we can turn things transform rotate negative ten degrees on this main element. 24:28 People talk about transforms a lot, when they talk about CSS animations but, you 24:36 know what else you don't have to animate to transform just use it plain simple. 24:40 So here's another little demo, demo I did where I made the h1 title. 24:47 We rotated negative 90 degrees, so we don't go on the side. 24:51 Oh, here I combined rotate and shape outside so 24:56 that title is kind of slanting and the text wraps around it. 25:01 It's a little, you know, it's a little fidgety tra rotates can be 25:05 a little fidgety, to get a mess around to really get it to work. 25:08 But totally does work. 25:11 It's still. This is what's so 25:15 funny about the w3 spec rates. 25:17 It's still in working draft. 25:18 But it's totally implemented everywhere. 25:20 So you can really use this, I mean I8 you need to have an alternative universe for 25:24 I, but we've been doing alternative universes for I8 layouts the whole time. 25:28 Conditional CSS style sheets, go for it. 25:33 Write separate code. 25:36 Don't worry about it or ignore it or tell everybody no. 25:37 And then Opera Mini. 25:42 You know, Opera Mini's gonna have a red thing right here. 25:43 First of all, Opera Mini is, is for phones. 25:46 So that's gonna get your default, no media query, 25:49 responsive layout of, like, tall and skinny. 25:54 So I don't, it doesn't scare me when it comes to layouts. 25:57 Cuz I don't wanna put things all over the page. 25:59 I want things to be tall and skinny. 26:01 And Opera Mini is really important, 26:03 because it is one of the most popular browsers around the world. 26:04 It's used on a gazillion gazillion internet connected phones, 26:08 that are not $700 so you want to pay attention to Opera Mini and 26:12 its a really good idea to do testing in Opera Mini but, Opera Mini is 26:17 A not going to implement these crazy things and B should not block you. 26:20 You should totally be using these things anyway. 26:24 You just gotta go back and, you know, progressive enhancement. 26:26 Think about how the fallbacks are gonna work for affirming. 26:29 More magazines. 26:35 Some really beautiful layouts that work because. 26:38 They are paying attention to the edges of the page, right? 26:41 Just the headlines right up against the edge of the page. 26:46 This is just so beautiful. 26:52 Rightness and quiet and modern and beautiful. 26:53 Thinks are, you know, centered to the page 26:56 [COUGH] Here's another one. 27:01 This is another thing that's just so 27:06 funny cause for years, we've been saying, Don't talk to me about the Viewport edges. 27:07 You're not allowed to think about that. 27:13 This is not print. 27:14 Don't design to the edges. 27:15 But you know what, those are really pretty. 27:16 Like, maybe we could design to some edges. 27:19 Let's see if we can design to some edges. 27:21 So, here's an example I'm gonna walk you through. 27:23 Really simple. 27:27 I got this main element wrapping everything. 27:28 An image. I dropped a non semantic div around this 27:31 stuff so that I can combine, you know, hold it together with a headline and 27:35 a simple paragraph. 27:38 Right? It's totally simple code. 27:39 And this is, of course. 27:42 Oh yeah so, yeah then I took the image floated it left, this is a CSS for 27:44 that HTML, float the image left drop my margin on it on the right, 27:49 make it be 50% of the width and then im just going to put some padding on 27:53 the inside this [INAUDIBLE] to get it away from the edges of the page. 27:56 This is then how that looks. 28:01 Right? 28:02 It looks gorgeous in the screenshots. 28:03 Oh, yeah cuz I put the edge of the browser window at the bottom of the photo. 28:04 [LAUGH] That's not real life. 28:08 Real life is this where the image is just hanging out in the corner being 28:10 floated and the stuff is just sort of sloppily getting around it. 28:14 You know, crop off her body. 28:19 Let's see what we can do instead. 28:23 So, let's get rid of the width of 50% on the image and 28:24 instead set the image to be height of 100 vh. 28:27 VH, is a new thing. 28:29 This is what you get instead. 28:33 The image is staying the full height. 28:35 100 is sort of 100%. 28:38 VH meaning viewport height. 28:40 So okay. 28:42 Look. Hey, look at that. 28:44 The image is sticking. 28:45 It, it's going along with the edges of the page. 28:47 Now of course here and for those of you who are extra smart. 28:50 Oh right there like the content when it overflows is still gonna wrap 28:54 down around the bottom. 28:58 The image is just setting itself to the height of the viewpoint. 28:59 The image isn't fixed to that height. 29:01 so, let's step it up a little bit. 29:05 Let's also make the width of the photo be 50vw, 29:07 which is kind of the same thing as saying 50% in this particular context. 29:10 Let's also set the font size to 6vw, vw being width, so 29:16 the height is thinking about height, and the width is thinking about width, and 29:21 the, this we're gonna tie to the width of the viewport. 29:24 And this is what's gonna happen, the, we lose constraining the aspect ratio, right. 29:28 It's not a good idea for photos of people, but for 29:33 something else it might be fabulous. 29:35 And the text up here is growing and shrinking, right, look at that. 29:37 You haven't been able to do that without Java Script. 29:43 Right? 29:47 How many times have you maybe wanted to do something like that, 29:48 to have the total of the website be always the size of the browser window? 29:50 Here's a demo that I did that's way more complex where I 29:58 basically everything is laid out in size using viewport units. 30:02 There's a bunch of media queries, so these circles keep jumping in size because there 30:06 is a media query that changes the size of them, but the normal absolute positions 30:10 using Viewpoint Units, and 30:15 part of what is interesting about these Viewpoint Units is that. 30:21 In a way my braing still has not wrapped around what's possible. 30:25 There's just all these things that I've been saying this whole time is 30:28 totally impossible but actually are and it's very confusing kinda go back and 30:30 be like I don't know what's possible or not anymore but the reality 30:34 is that any place that you might use a rem and m a percent or a pixel. 30:40 Anywhere. 30:45 Instead of using a pixel or a % or 30:46 whatever you can use vh, vw, vmin, or vmax. 30:49 Vmin, basically the browser will measure both directions of the viewport and, 30:54 you know, if your browser is shaped like this. 30:58 The vmin would be this height, this distance, and vmax is this distance. 31:01 Or if your browser window is shaped like this then vmax is the longer one and 31:05 vmin is the shorter one, so it's a less about which direction and 31:09 more about which, which one's shorter. 31:11 Like if you wanted to have square that was always square. 31:14 And didn't, and just sort of ignored the ex-, 31:19 outside extra stuff. 31:21 You could use that. 31:22 It's in candidate recommendation. 31:25 There's the link to the spec. 31:26 And it works pretty well already! 31:28 It's been around now for quite awhile, actually. 31:30 And the lack of support over here is based, the vmax and 31:33 vmin are not supported. 31:36 But vh and vw total, they are. 31:37 So it's really safe to use this. 31:39 You know, except for IEA, but see previous comments. 31:41 So look at some 31:45 of our magazines. 31:47 Right, what do these have in common? 31:55 Columns. 31:57 Man, it would be nice to have columns. 31:59 Let's look at multi-column layout. 32:02 How many people are using multi-column layout? 32:03 Yeah. 32:08 So, here's no, no column, right? 32:11 We know what this is. 32:12 This text just grows forever. 32:14 Here's a typical responsive web design. 32:16 Oh, let's cap the line length. 32:19 So that, you know, it's readable, we've got a nice 32:20 limelight on our text and we'll just, I don't know, make giant margins. 32:26 That's the code for that example, right, 32:31 max-width 500 points, pixels, with a margin 0 auto hack to make it centered. 32:32 But let's, let's get rid of that and instead have column-count 2. 32:39 And column-gap, 2em. 32:43 And this is what happens. 32:47 So we get two columns, with two ems of space between them. 32:49 And the grow as long as they're gonna possibly grow, and 32:53 get as short as it possibly gonna get. 32:56 Which is cool. 32:59 The, the text. 33:01 Flows from the first column to the second column. 33:03 The columns change the length automatically, and the, and 33:05 the, all that content just goes into the other container. 33:08 It works everything out, all those little things that you were, 33:11 it's not like a span around half of it, a span around the other half, and 33:13 oh, my God, somebody added a sentence and like, you know. 33:16 But let's make it even better by switching to column width 200 pixels instead 33:20 of column-count two, because I don't really want two columns everywhere. 33:26 When it's like narrow I want maybe one column and then I want two columns, and 33:31 then I want three columns and then I want four columns. 33:35 And I'm lazy, I don't want to 33:37 write a gazillion media queries that keep changing the column count. 33:38 So instead I can write column-width 200. 33:40 Column gap two them and this happens. 33:43 So, when it's really skinny like that basically the browser is 33:47 trying to keep the text column at around 200 pixels. 33:49 And it will change the number of columns by itself in order to 33:53 make it stay sort of around 200 pixels. 33:57 Which I think is amazing, and 34:03 kinda miraculous, and really awesome for about that much text. 34:05 [NOISE] Right? 34:09 That's cool. 34:13 A lot of stuff is much longer. 34:14 But it works for this amount of text. 34:17 Here's a, a little more complex example to show you. 34:19 Some of the other stuff to show you like, okay, now I put the title inside the thing 34:22 that's got the CSS applied to it so it's part of the column and 34:26 the image which you can see is the image just gonna go along for 34:30 the ride and it's gonna be it's just sort of works out and you can 34:33 put a border in the middle of everything of what, you know, line rule column. 34:38 So here's the code for that. 34:43 A column-rule. 34:43 I added a column-rule, right? 34:47 It's in candidate recommendation. 34:51 And it's supported pretty much everywhere. 34:54 It's got these weird you know, all these, like, partial support. 34:56 Because there's a bunch of things around column break and page break and 35:00 bla bla bla that I did not even talk about. 35:03 Stuff that I talked about is all green green green green green 35:04 but of course it doesn't I don't know it's just it's not a great solution for 35:09 a super long article because or maybe it is but. 35:13 The usability of a giant article in two columns and 35:17 you read down one column while you're ignoring the other column on the web? 35:21 Like that's a little bit unexpected and then you get to the bottom and 35:24 you got to scroll back up and start again. 35:27 We know how to do that with a newspaper or a magazine. 35:29 It's a little bit weird on the web, ,. 35:32 And what we really want to have instead is this thing called Regions. 35:35 Who knows what this is? 35:41 Me too. [LAUGH] this is 35:46 Page Maker from way back in the day. 35:47 This is the original desktop publishing tool for laying out magazines. 35:49 It became, or you know, Cork took it's mental models from this and 35:53 Design took it's mental models from Cork and this. 35:57 And basically you get this, which is you get, you get to you know, 35:59 when you're in Page Maker, and Cork, and Design you have an article that's I 36:03 don't know, in Word Perfect, Word Star, Microsoft Word. 36:07 And you import it into your page layout and then you draw boxes. 36:10 And the content flows through those boxes. 36:14 And if you change the type from New York to Time and the Times type is much, 36:17 much smaller then the content just re-flows. 36:23 And if it doesn't need that last box because the article's now too short, 36:25 it's fine, it just ignores the last box. 36:29 It's great. You can add a paragraph and 36:33 the whole thing re-flows. 36:34 That's how magazines get made digitally. 36:35 And it would be really, really nice to have that on the web. 36:39 And Adobe thinks it would be really, really nice to have that on the web. 36:41 So they've been doing a lot of work to try to get that on the web. 36:46 And that's what regions are. 36:49 Would be a way. 36:51 Regions are a way to define these containers. 36:52 And to flow content through those containers. 36:55 It's not very well-supported. 36:59 Which normally doesn't really scare me. 37:01 Except there's a problem with this support, this lack of support. 37:03 If you notice here, Chrome had it in Chrome behind a flag. 37:07 And then they removed it. 37:11 there's, there's a big controversy right now around whether or 37:14 not regions is a good idea. 37:17 And there are people who believe regions is a terrible idea. 37:19 And some of those people make browsers. 37:21 >> [LAUGH] 37:23 >> I, I don't have to explain the whole de-, 37:28 debate. But in some ways, it's. 37:31 How come Lee, the guy who, like. 37:32 You know invented CSS. 37:35 [LAUGH] He thinks its a bad idea because you could do this with empty. 37:36 You end up maybe doing this with empty divs. 37:39 So you have your article and then you have a bunch of divs in your html that 37:42 are there for no reason but to be the containers that everything flows through. 37:45 Sarah [UNKNOWN] responded with this article, 37:49 reasons matter, where she explains that we don't have to have empty divs. 37:52 You could do that with psuedoclasses. 37:55 And use before and after and make these sort of. 37:56 Pretend spaces, I'm not sure exactly why Google pulled it out of Chrome. 37:58 I, at some point I'll meet the people who did that. 38:04 And have a chance to ask them. 38:05 But, it may, 38:06 they say, some people are saying it's because of performance reasons. 38:07 Maybe the code that implemented in Chrome was written really bad, and 38:10 it needed to go. 38:14 But it could totally be written better. 38:15 Or maybe it can't be written better. 38:16 Maybe that was the best code they could figure out. 38:18 And the performance is just terrible. 38:20 I don't know. There's, it's. 38:22 This is gonna be a long debate. 38:23 This is one of those things that's just not working out very easily. 38:24 I talked to Sara Soueidan about this on the show that she was on, 81. 38:28 If you wanna hear more about it. 38:31 Cuz she's been right in the thick of it. 38:33 We need something like regions. 38:36 I don't know what it will be. 38:39 So heres something, you see this pull quote over here? 38:45 How it like, has text wrapping here and over here? 38:49 And how the text like comes down and 38:53 then goes around it, that you cant do this with a float. 38:56 Or here, text again, on both sides of that full quote or this one. 39:01 You could do this if this quote were in line, in this article. 39:07 Like blah blah blah, blah blah blah, paragraph paragraph, aside, block quote, 39:14 blah blah blah, paragraph paragraph paragraph. 39:18 But what if you wanted that block quote to actually be at the bottom of 39:20 the source order and you wanted all of the article and 39:23 then you wanted this thing at the bottom and 39:25 you wanted to be able to grab and pull it up and drop it in the middle right here? 39:26 Really what you wanna do 39:29 is absolute position it right into the middle of the page. 39:30 Then you wanna absolute position it base on the height of the view port. 39:33 So it's always in the center. 39:36 That would be cool and 39:37 then have the text flow to an absolute positioning or completely. 39:38 Different universes, they don't work together. 39:43 So if you absolutely position it, 39:45 you're gonna have all the text on top of the quote or 39:46 the quote on top of the text, right. 39:48 Here's the solution. 39:51 Exclusions. 39:53 CSS exclusions will eventually get here. 39:55 It's a little bit hard to even now, what's going on with it right now. 39:59 It's not even on, can I use, but 40:02 I brought it up because I, I think as we're changing our mental models and 40:04 we're figuring out how to do these new things, we're gonna hit the new limit. 40:08 And right now, this is a limit, but it's a limit that's being worked on. 40:12 And maybe a year from now, we'll be able to use exclusions and 40:16 we'll be able to do even more kind of. 40:19 nuanced, amazing things. 40:21 And then there's Flexbox. 40:25 And Kenzie Conrad just did a talk on this. 40:29 I was gonna tell you all to go to her talk, 40:30 cuz it would be a fabulous one to go to after mine, but it was before mine. 40:32 And I don't have time to really explain Flexbox at all, but 40:39 I will say like here's a example of how I used it. 40:41 I wrote the code for this Chrome developer website a year ago. 40:46 So it was good enough to go a year ago, it's good enough to go now. 40:52 And the thing that's awesome about it is that, you know, 40:55 how many of you have ever gotten. 40:57 A, a PSD from a designer was somehow magically, 40:59 all the content is exactly the same length as all the other content. 41:02 [LAUGH] And somehow magically all the boxes just line up on every row. 41:06 And they're always the same height. 41:11 Right, like that doesn't make me angry [LAUGH] used to. 41:14 And I used to want to be able to go back over to the designer and say, okay. 41:20 Let me, let me tell you a secret. 41:23 You're designing for the web [LAUGH] and the web doesn't do that. 41:24 But the thing is, now the web does do that. 41:29 This oh wait. 41:32 That was totally the wrong button. 41:34 These things of like, different lengths, these boxes. 41:36 They have different amounts of content and it's okay. 41:39 The browser actually calculates how tall the, you know, 41:42 oh there's a row of four things. 41:45 What's the tallest one? 41:47 This is it, how hall, high should we make that box? 41:48 Cool, that's how high we'll make it. 41:51 Let's make all the other ones on that row the same height. 41:53 Or if you want them to be different, you can. 41:55 Or if you want the difference to be at the top of the row instead of at 41:57 the bottom of the row, you can. 42:00 And they, and they change like this little row right here, these two right at 42:03 the moment, are really short, all these ones are long, but once you switch rows, 42:06 you know, it just recalculates everything for you, no big deal really, really nice. 42:10 This is a great resource for learning more about Flexbox, 42:17 Chris Coyier's page everything you need to know, a complete guide to flexbox. 42:20 And this is the kind of stuff, just quickly, 42:25 these are some of his diagrams of like, you know, you can center things. 42:28 You can have them all, if they're not gonna be the same height as each other, 42:32 the things in a row, 42:35 you can have an extra space be the bottom, or like I just said at the top. 42:36 Or you can line them up along the baseline of the text. 42:40 What are you gonna do with the extra ones at the bottom when they're like 42:43 not the even, you know, it's not you don't always have 12. 42:47 So it's not three, and four, and two, and six magically. 42:50 It's like there's an extra one by itself. 42:54 Do you want it to fill the space, or 42:56 do you want it to just be centered or do you want it to be over on the side? 42:57 Like you can specify all that stuff with Flex Box it's in last call, 43:01 it's super widely supported, we were waiting last fall for 43:06 Firefox, Firefox to catch up, because everybody else had implemented flexer app, 43:09 but they did, they caught up finally, so you can totally use it. 43:15 And Grid, I think the way that. 43:19 The super, most basic way to think of Grid is to think of 43:22 throwing away your grid framework CSS library. 43:24 So you don't use, whatever, Susie, Sassy, or s-, 43:28 singularity, Susie, what are some of the other ones? 43:34 960 group C, grid CS, like all these frameworks that we've been using so 43:39 that you don't have to write all the crazy float c, 43:44 float CSS, or you don't wanna write all your layouts by hand. 43:46 But you're s, you have a grid system, and you're shoving everything onto a grid, 43:50 this is a way to use something else besides that. 43:54 And I think this will have more superpowers as well. 43:58 It's still in working draft. 44:01 They're still discussing it. 44:03 I mean there's de- 44:04 Debates still going on. 44:04 And it's not implemented, so you really can't use it yet. 44:07 But but you can experiment with it and 44:10 get this, if you wanna experiment with it, pull out the most cutting edge browser, 44:11 Internet Explorer [LAUGH] [LAUGH] And try it out. 44:15 And because it's still in working draft, 44:21 you could actually have some impact on what happens. 44:22 You can email the list and say, this is almost 99 percent of what I want but 44:24 this 1 percent is really still kind of a problem. 44:28 Why don't you look at that because there's still time to kind of get 44:31 some of that worked out, the kinks worked out. 44:34 And then there are more. 44:37 There actually are many more. 44:38 CSS fragments and figures are two, like, ideas in the sky that are getting 44:40 debated but they're stuck in draft and may or may not ever see the light of day. 44:46 Some of those are things that people are advocating instead of the CSS 44:52 region specifications. 44:55 Overflow's getting new super powers. 44:58 There's, it's not just gonna be the things I talked about today. 45:00 Like this is, much, much the same as we've been seeing with other parts of CSS for 45:03 the last bunch of years. 45:07 Used to just be 1, CSS1, CSS2 and then we thought like. 45:08 Now, we're just sort of getting this nonstop bunch of 45:11 extra features all the time. 45:14 [INAUDIBLE] That's gonna happen with layouts. 45:15 It's gonna keep changing. 45:16 Let's go back to magazines. 45:20 That's all the tech. 45:22 Let's go back to what we're doing this for. 45:22 I think, I just think that's beautiful. 45:28 I just jam these in here because I wanted to. 45:29 [BLANK_AUDIO]. 45:31 Just crazy, right? 45:33 Like, what can a web page look like? 45:34 But you know what? You don't want to make that your webpage. 45:37 That's not going to work as a webpage actually. 45:40 What you really need to make sure you do, what we all need to do, 45:43 is to translate things, not transfer them, 45:46 not transfer these ideas directly from print into the web. 45:50 That's what doesn't work. 45:53 We know that's what doesn't work. 45:55 But to somehow see something from outside of our world, 45:57 and translate it into our world. 46:02 Because of course we, you know, books and magazines and a lot of print is. 46:05 This page-turning thing, you hold it and 46:13 you turn the pages, are going in a horizontal line through a mental model 46:16 to experience the content that's in that space. 46:21 And for the most part the web really works better as a tall scrolly thing. 46:24 Like an ancient scroll. 46:30 With all the same problems of an ancient scroll, by the way. 46:31 But that's the model on the web. 46:36 So, you gotta turn things. 46:37 You gotta change the way that they're being done. 46:38 I've worked on projects where people really wanted to try page 46:41 turning on the web. 46:44 And, and, every one of them, we give it up. 46:45 Oh, yeah, page turning on the web, you're right, it doesn't work. 46:49 Okay, let's go back to the scroll. 46:51 also, you know, this, the. 46:53 Pages are not a fixed size. 46:55 They could be any size. 46:57 They could literally be kinda crazy and size. 46:59 So you have to of course design something that's gonna work as glob that morphs, 47:02 not as a fixed paper. 47:07 And your content is gonna be all kinds of different lengths. 47:08 Many of us are not building bespoke, this is a slide completely stolen out of 47:14 Karen McGrane's amazing talk that she did, Adapting Ourselves to adaptive Content. 47:19 If you haven't seen the video of this talk I highly suggest looking it up but, yeah, 47:23 truncation is not a context strategy. 47:27 You're not gonna have the same number of characters. 47:30 You're not gonna have the same sized pictures. 47:32 You're not gonna have. 47:34 Right? So you are designing a system. 47:34 You're not designing individual pages. 47:36 Usually, for big clients, you are designing the whole system. 47:39 So, the layouts have to be a pattern that's gonna work for 47:42 lots of different content, lots of different length. 47:45 And that's a limitation for us. 47:48 although, there are times where, you know, it's a big time to experiment right now. 47:49 So you might do an experiment where it's bespoke, and 47:54 you know exactly how many characters are in the title. 47:57 And you do things with that title, just for the heck of it, 48:00 that you wouldn't be able to do on a big, content management driven project. 48:02 But I do think this is a time to really experiment and help each other, and 48:07 help ourselves get out of these ruts. 48:11 And figure out what we should be thinking about. 48:12 And help us understand, you know, 48:14 what could be, where it is that we could be going in the future. 48:16 It's one of these amazing moments where, you know, for a while you don't have 48:20 a choice, because everybody's kinda thinks that it should be done in a certain way. 48:24 And there's this moment where. 48:27 All of those ideas are questions and amazing new design patterns emerge. 48:29 And this is a place where you could be the person who figures something out that's so 48:34 kind of just perfect that everybody copies you. 48:38 [LAUGH] Everybody's like that's the new awesome. 48:42 I just think we should. 48:45 Get out of this. 48:47 You'd need to get away from this. 48:49 This could still be a great, you know, you're still gonna, 48:50 we're still gonna build websites like this. 48:52 This could be, this maybe is the best solution for 48:55 something that you're working on. 48:58 But I, what I really want to do is get away from the idea that this is 49:00 the only way to do it. 49:03 This is how you're supposed to do it. 49:04 Somebody going to school right now who learns how to design a webpage 49:07 learning that step 1 download 960GS, step 2 open 49:11 video with three templates like to just get away from this, So, I want 49:17 to leave you with one last story from the fashion industry as well. 49:23 Bill Cunningham is a fashion photographer for the New York Times. 49:28 He's well known for shooting people on the street and doing originally 49:31 it was just collages in newspapers of all of these outfits that people are wearing. 49:38 And there's an amazing documentary about him. 49:42 And I just wanted to show you this clip because I think this really, for me 49:47 these two documentaries about the fashion industry are really inspiring, thinking 49:51 about how can we create layouts that really honor the content that we have. 49:55 [MUSIC]. 50:00 >> I would come after my job at the Times, and we would lay this out and 50:02 then I go home about 2 o'clock. 50:06 Biked back from. 50:09 >> [LAUGH]. 50:10 >> Soho, where we were. 50:11 >> I think one Details magazine, 50:12 it was fall special, 125 pages of Bill Cunningham. 50:13 >> 100 pages? 50:18 >> 99. >> 99 pages. 50:21 We just, we never thought of it. 50:23 We just went on and did what we wanted to. 50:25 We. >> 70. 50:28 >> And said what we 50:28 wanted to say. 50:29 >> 111 pages. >> 111 pages. 50:30 Here what I did is I blew up 50:31 the embroidery of the coat, and we put it on the pages, and 50:33 then put the coat small in the middle of it. 50:36 Cuz the news was in. 50:39 >> Yeah. [CROSS-TALK] The big was this. 50:41 >> Cuz it was like something out of the Renaissance. 50:43 You see? 50:45 You try to show the reader what was really new. 50:46 Look at, look at this. 50:49 It's like something from Paul Poiret 1910.The Shahrazad, the Arabian Nights. 50:50 Look at the embroidery, the tassels, the lace. 50:57 Now, I mean imagine the extravagance in these pages. 51:01 Annie Flamda's never blinked. 51:04 You can't say anything, Annie! 51:06 I didn't take money, so I can do what I want. 51:08 >> Did she [CROSS-TALK]. 51:10 >> And a wonder, it's a wonder she didn't say, that didn't mean you can bankrupt me. 51:11 >> So thanks. 51:14 >> [APPLAUSE]. 51:17 [BLANK_AUDIO]. 51:25
You need to sign up for Treehouse in order to download course files.Sign up