Transcript

Jen

This is The Web Ahead, a weekly conversation about changing technologies and the future of the web. I'm your host Jen Simmons, and this is episode 49. Almost to 50. This is 49. I want to first say think you so much to the sponsor of this week's show, the fabulous Event Apart, which is going on right now in Atlanta as we record the show they are on stage saying fabulous things. We'll talk more about them later in the show. But first I want to talk about our topic. This is not a Web Behind show. This is a Web Ahead. About time, Jen, that you do another Web Ahead. It's been a little while, but there are still fabulous new things happening, new technologies coming in all the time with these web browsers that we've been getting shipped to us. One of the things that is coming is significant, like, the first big significant change in the way that we can do layouts on the web since CSS layouts was first invented. I mean that was a big shift from no layout, to tables to CSS, and then we've been doing it the same way for a very, very long time. So today, Rachel Andrew is going to join me.

Rachel

Hello!

Jen

[00:01:21]To talk about what fabulous things are happening in CSS 3 with different layouts. Rachel is a web developer in the UK, she's just outside of London, she's also a writer and a public speaker. She's been working as a web developer since 1997, and you were part of the Web Standards Project, right?

Rachel

That's right, yes. I was part of that initially as part of the Dreamweaver Task Force, because back in the day we used Dreamweaver quite a bit. And so myself and Drew McLellan and some other people worked with Macromedia, who had Dreamweaver at the time, before it was bought by Adobe. We really worked with them to try and get Dreamweaver to output more standards compliant code. So that was really how I got involved with WaSP, back then.

Jen

Nice, yeah, I think we all used Dreamweaver back in the day.

Rachel

I think when we were doing those nested tables, you needed it.

Jen

Ah yeah, slicing up those images to get the javascript to do the rollovers. I couldn't do that by myself. Oh, those were the days.

Rachel

Yeah.

Jen

And so now you have a company called The Edge of My Seat, attheedgeofmyseat.com, and Perch, a little CMS.

Rachel

Yes! So that's most of what we do, is develop and support Perch. So we speak to a lot of web designers and people who are using it and finding out what their interest is in. So it's a quite different way of working from doing the client work.

Jen

Nice. Yeah, I might use it on a project coming up because I don't need a full powered CMS, but I don't really want to make the client use FTP, so maybe. So you're here today because you just published, or you just wrote and Five Simple Steps just published a little book called CSS 3 Layout Modules.

Rachel

Mhmm.

Jen

Our friends at Five Simple Steps. You can go to the website, fivesimplesteps, where the word "five" is a word, unlike 5by5, which the word is a number, and check it out. There'll be links in the show notes to all this stuff, of course. The show notes are at 5by5.tv/webahead/49 for this particular episode. And this book is short, right, it's really more like a booklette.

Rachel

Yeah. The idea with these was, it's sort of a new thing for Five Simple Steps, is to write these little books so that you get people who maybe don't have enough time to write a full book, or about a topic like this one, which is very very new. And a lot of stuff that I've written about may well change, yet. If you take flexbox for example, that's been through a huge change. Sort of trashed my writing of this book, but it's quite like, but something like grid or regions, or exclusions, or what have you, are going to change, so putting that stuff into a full book, there'd be every chance that it would have changed before it finished, you know? So by doing these little books you can quite quickly get it out there. And also because it's an ebook, it can be updated in the future. It's a really good format for that.

Jen

It is, so it looks like the length is almost like the length of a regular book chapter rather than a book.

Rachel

Yeah, it's quite small. It's kind of like a long essay, really.

Jen

Like, a super, super long blog post, or a book chapter.

Rachel

Yeah.

Jen

Yeah.

Rachel

So they're quick to read. And I think for new stuff like this, that's kind of what you want. Because I think a lot of people won't be able to use this stuff in production, so you don't want to know every single thing about every single module. What you want to know is what's coming up, and how might it change things in the future, and do I actually want to learn more about this so I can feed my thoughts back.

Jen

Yeah.

Rachel

That's kind of what you want to know. So you don't want to cover masses and masses of stuff, because that's not really where people are with thinking about this stuff.

Jen

Yeah, and CSS 3, I remember first learning about it in, I don't know, was it 2008, 2007, 2009, somewhere there. And the most exciting thing about it was, "Oh my gosh, I can use this today! I can use," or maybe it was even 2010. "I can use border radius right now!" Especially if I just don't worry what Internet Explorer 7 and 8 and 6 do, they can just get square corners, and IE, while it was still in the future, but once IE 9 came out, and other browsers, well, they'll see round corners, and the world's not going to fail, like the website project, the purpose of this website is not going to fail because the corners are square for 10% of our users instead of round. It was a bit of a shift in thinking that the industry went through in order to say, "Let's use CSS 3 now." Or, alternatively with the example of border-raduis, you could still write the old school code, which took about ten times longer to write, because you had to make all those corners, and the little sprites, and the uhhhh....And if you wanted to put in, you put in 10 minutes writing the new code, and if you want to put in 4 hours to also make your corners round in IE 6, 7, and 8, you could totally do that, and that's true with a lot of stuff in CSS 3, there are polyfills or there are backups, or there's just "don't worry about it," it's fine if you don't have a shadow on that box in some browsers. Some browsers will have a shadow, and some will have a line, and it will be fine. But with layouts, it felt to me at least, like, "Well, you can't have the whole layout of the page explode." Like, I can't use these not yet done, not yet ready, only works, or perhaps only works in one browser, or only works in the new stuff. I can't really use it yet because it's not supported enough yet, and maybe it will start to barely get supported, but leaving my layout completely broken, or with no layout for other browsers is not really as small of a thing as a square corner, right? So that's at least my perspective that I've had for several years now, knowing that a new layout model was coming, but being like, "I don't know when, but somebody will tell me. Somebody else will figure out when is the time, and then they're going to let me know, and I'm going to jump all over it."

Rachel

Yeah, I think that's the thing. With a lot of the stuff that we term as CSS 3, the different modules, some things are kind of easier to get away with if they don't work. Little finishing touches, you can have them or you can not have them, and it will probably be ok. I think a lot of us fairly quickly were of that mindset, "You know, it's ok if things fall back to look a bit plainer in old IEs or whatever." But yeah, you're right. I think with layout, it does feel a bit all or nothing, which can be a bit scary basing it out on something which seems a bit more fragile, or a bit more new. And I think as well, we just got used to doing things the way we were doing them. For people who've been doing this a long time, it's quite a battle to move from tables to CSS, and we still see in Perch support, we still see people with table based websites, and we still see people saying, "Oh, well I don't want to use CSS."

Jen

Yeah.

Rachel

So it's still out there, that attitude is still out there. It's quite difficult. If people've really got their head around using floats and things, this actually works ok, we can make it robust, which you can, and if you're good at doing it, and you're used to doing it. So there's not been that push really, for layout stuff. I think that really, the thing that's made the difference on the web side is responsive design. Because it's actually, while we're tied to source order, which we are with most of our current ways of doing layout, we're tied to source order, so you have to have things organized in your source in a certain way, and that then dictates to some extent how you can position them, and then how you can reposition them for a different viewport width, say. And I think that is what started frustrating me, is that we were tied so much to source order. And I was working on one project with a designer, and he was saying, "Well, for the mobile view, we should be able to pick this up and put it at the top." And I'm saying, "Well, we can't really, because there isn't a way that I can order the source that's going to make both of those things happen"

Jen

Yeah.

Rachel

And I think that becomes the frustration. And for me, the exciting stuff about a lot of the new layout things, just is the fact that we lose that reliance on source order. And we start be able to position things where we want them, and we can use media queries then to rearrange them. And that's quite exciting, I think.

Jen

Yeah, because I feel like with source order, at least recently my best practice--and the people, and really, it's not mine, it's like people who I really respect, and I copy them--is all about, "Do your source order in a way that makes sense, if all the CSS and all the Javascript fell off the page and all you had was HTML,"

Rachel

Exactly.

Jen

Which is what Google, and other search engines have, it's what anybody who's using a screen reader has, it's what anybody who's using a program like Instapaper, or Flipboard, or if your content sort of escapes your own website and goes out into the world, which you hope it does, that's the experience that people have. So to me, that's the first step in the process is figure out the source order. But then that does limit the layouts.

Rachel

Yeah.

Jen

There are certain layouts you can do and certain layouts you can't do.

Rachel

Yeah, and certainly with responsive design, you are having to work out where to make those compromises. Yeah, the best layout for this source in terms of accessibility and the sense of it, may not then be the optimal layout to be able to get a good responsive design. So we're constantly making these decisions and we're making these compromises, and we do it with everything. Even when we're down to choosing which browsers are going to get what experience and things, we're always making some kind of compromise. It certainly isn't that we're all in this ideal world, I think things are an awful lot better now than they used to be, in terms of browser support and things, but we still, it's part of the experience I think of being a web developer is being able to make those decisions, and think where you're going to do the least harm by making a compromise, because we have to make compromises.

Jen

Yeah, I think especially for any of us who were there, back in the day, with image slicing and Dreamweaver and rollovers, and before columns. I mean, this whole idea of having a header with a list of menu links in a horizontal line at the top of the page in a header, and then having a column of text that just scrolls down down down, and having a side bar next to that text, and a footer at the bottom. Like, I remember before that convention existed. When it was more like, you have a page and you make it into a telephone! That idea of sidebars and a header came along. It just seems like we've sort of, it's easy, it's human nature to get into a kind of rut, into a track, where "This is what it means to have a web page, web pages look like this." And it's a good thing because then users, having a list of menu links in a bar across the top of the page is now a convention that most people who use the web on a fairly regular basis, they get that. They look and they know exactly where the links are, where back in the day where it was a telephone or whatever, you didn't even know where the links were, like it took you five minutes to find the links.

Rachel

Yeah, those ones where you had a house, and each part of your site was a different room you had to click on in the house. I like those ones. I think we should go back to that.

Jen

Right! That's what I mean. I don't mean to sound like those conventions are bad, but that we got ourselves into conventions. Sometimes, I think you see it in battles in maybe big publishing company where they've hired designers who don't know anything about the web and they layout things like they're laying out a magazine, and then you have to go back as a developer and say, "I'm sorry, but that's impossible."

Rachel

Yeah, it's so interesting working with designers who are like that. If you've got the time to try and use what they're really aiming at and trying to work that into a web context. I think a lot of this new layout stuff may well make those kind of collaborations a bit more possible. Because where we have to say, "Well, no we can't flow that text around a shape, because you can't do that," or whatever it is. Immediately, for a designer coming from a different background, this web stuff is terrible, it's all little boxes, you know.

Jen

Right.

Rachel

I think that the interesting thing with the ability to do more magazine-style stuff with CSS I think is going to be very interesting. Obviously it could go completely horribly wrong and we develop lots of things that don't really work very well on a screen and things, cause that's a different issue, but I think in terms of being creative with the medium, there's an awful lot of possibility there.

Jen

Yeah, I'm hoping, because it seems like so of these--we're going to talk about what's coming--but it seems like some of these different options that are coming, are coming from the magazine industry, they're coming from people who know Pagemaker, Quark, InDesign, really really well. And they wished the web would layout things the way you could lay them out in one of those programs.

Rachel

That's it. I think coming from people wanting to use the same technologies for ebook design and that kind of thing. We want to be able to lay things out more as a magazine on an iPad screen. So I think there is crossover from the two worlds, and that's quite interesting. I think where different areas get together, those intersections can be quite interesting.

Jen

I think it's going to be fascinating, once there's enough browser support and once the information about how to implement this gets passed around, to see what do we do as an industry, or what do designers do with this possibility, because we've been stuck in this box and now we could throw the doors open and do all kinds of new things. So will we? Or will we discover what works, like a whole new world of things that work really well? I'm sure we'll discover a world of things that don't work very well. We'll probably stick to old habits just out of habit. But I guess I always get a little nervous, like, "There's this new possibility, everybody needs to get on board!" because I'm worried that we're going to miss the boat, like there's a chance to change everything to make it better and we might miss it. Which is a silly worry.

Rachel

I think that's one reason why I wanted to write about this stuff. And I also wrote about grids for 24ways. I've tended to write stuff for beginners, I've tended to write things in the past that are very, very practical, and about things that work now. And I wanted to really take the same kind of approach, but with something very new. To make it understandable, and to make it understandable to people who aren't the sort of person who wants to sit and read w3c specifications. Because I think it's really important, I think it's massively important that particularly the designers, and the people who've had that real design training, you know I'm a developer, I'm not a designer at all, and so I don't really have, I listen to designers, and I try and understand when they're talking about grids, when they're talking about vertical rhythm, or whatever it is, and I sort of nod and say "oh, yes," but I don't really have any kind of design training. And I want this stuff in the hands of those who do. And I want it understandable for those people because they're the people who are going to say, "Well hang on, I can see a huge problem with this. If we're actually going to use it to lay things out like that, there are problems." And if it only becomes understandable to nerds who like reading specifications, then we're actually not the best people to be inputting, and pointing out any problems, or pointing out places where it could be used more creatively or whatever. So I want to write about it because I want people to think about it, really, and see what's going to happen.

Jen

[00:01:21]Why don't you tell us about, what are these new...there's several different layout engines that each could be used instead of, or perhaps along side of, the current way of writing layouts with CSS. So what are they?

Rachel

Ok, so the things that are covered in the book. I started with things that were better implemented, and then moved onto the ones where you have to fire up some experimental version of chrome to look at, so the first thing that I think is pretty cool is multi-column layout, which is the thing that lets you do, like newspaper style columns, which flow nicely. With media queries, you can say, "Well, at this screen width, I want three columns, and this other screen width, I want two." And they'll just nicely flow the text, which is really really hard to do if you try to do it with floats, and you end up having to calculate stuff with javascript, and things. So I think multicolumn layout is certainly soon, that everyone should have a look at because it's supported very well in browsers, so you can actually get it working, and it actually falls back quite nicely. Because if your two columns display as one column in a non-supported browser, that's not really a big deal. So you can kind of play around with that and actually start using that in production, I think, without too much of a problem.

Jen

Yeah, it basically takes what would be, maybe if you held up a ruler to the screen, it would be a three inch wide block, and it cuts it in half and it says, let me do an inch and a quarter column, and then I'll take the content and cut it in half and put half of it in this column and I'll make second column and put half in the second column, right? Sorta?

Rachel

Yeah. And say the typical thing for that is like your magazine or newspaper style columns where things just flow nicely. And you've got a bit of control over where columns break and how big the gutter is between columns, and things like that.

Jen

And how many, you said already, how many columns.

Rachel

Yeah, and how many columns. So that's pretty cool, and I think...it is pretty well supported, and it's quite a nice way to start looking at layout, and it does work really nicely with responsive design because those columns just flow so nicely as you reduce the screen width or whatever. It actually makes it very easy.

Jen

And it looks like it works in everything but IE 6, 7, 8, and 9.

Rachel

Yeah.

Jen

Or in Opera Mini. It doesn't work in Opera Mini. Nothing does.

Rachel

Haha, when you talk about Opera Mini, that's more like mobile devices anyway, you'd probably be in one column at that point.

Jen

Ah, that's true. And I've seen it used with really great success for small blocks of text. The part that I find a bit, and you've alluded to a minute ago, is well, if I have a long article, that maybe at regular one column filling up the screen it's going to be a 600px wide, or 800px wide column, just one big long column, but it's like five screen heights tall on my screen. But when you split it into columns and the person like, reads the column and they scroll down, down, down, down, and then they have to scroll all the way back up to start reading the same column.

Rachel

Well I think that's the problem, yeah? If used in that kind of way, it doesn't really work because that's not how you read on the web, but yeah, I think for small pieces of text, I think it can be quite nice. And obviously if you're prepping stuff for print, you're going to do some print stylesheet, maybe using it, you could potentially use it for that. Where you have got a bit more control over how it's going to end up looking.

Jen

And I wonder if in the future if it's used in combination with some of these other stuff that you're about to talk about, if that will solve this, "please don't make me scroll all the way to the bottom, scroll all the way to the top, scroll all the way to the bottom" problem.

Rachel

Yeah. I have seen occasionally where that's happened, where it doesn't really work, I think, for small pieces of text, it does work quite nicely, and as I say, the fallback to only being in one column, also works fine, generally. So it's kinda worth playing with, I think. You've just got to use common sense and test on lots of stuff. And well, we know that.

Jen

Yeah.

Rachel

If you're using any new stuff, you need to test more. That's kind of, yeah, you have to make sure that...because this sort of stuff which is just coming in to browsers and is experimental in browsers, you may well hit up against bugs or weirdnesses and things because it is very new stuff. So you do need to test it, and also just in terms of will people understand how to use that.

Jen

Well, and at least for me, testing my own understanding of it is usually the....Like, I think I understand it, and then I implement it and then I test it, and they I realize that I didn't really understand it, and I didn't implement it correctly. And then I go back and I change it. That's part of the process, I think.

Rachel

Yeah, yeah. Well yeah, particularly when writing about this stuff's great because there are so few actual things to go and look at. All the time at the moment, there's new stuff about this coming out because people are seeing it and writing about it, which is brilliant. But yeah, when you write about stuff that's quite new, you're just like, "Oh, I can't just go and look up lots of peoples examples," you know, "and see if I'm doing it right." I've run into all sorts of stuff doing grid. You know, "Is that a bug, or is that me, or, have I just..." you know, what's going on here. You've only got one browser it works in, so you can't even just check in another browser and see if it does the same thing, and yeah. The newer the stuff, the more testing and messing around you have to do to get it to work.

Jen

Yeah.

Rachel

Which is why I've tried to do with the book relatively simple examples that people can just get working and see it happening.

Jen

[00:24:08] So multi-column layout is number one, well supported, right now, but you can't use it by, in my opinion, you can't use it by itself, to radically change the entire layout of a website because it's a little awkward.

Rachel

No, no. It's not a layout. It's kind of for those internal bits and pieces, you know. That's really what it's for. For splitting up a bit of content where the lines are gonna get too long.

Jen

Well, and for somehow if you have a project where you are fixing the bottom of the page, maybe you are writing HTML and CSS and wrapping it up using something like phonegap, or your own custom iOS or android application code, then you do have a fixed bottom edge, and you can.

Rachel

Yeah, if you know what your container is.

Jen

Yeah, because you're actually making an app, you're not making a website.

Rachel

Or I've done stuff before where I've converted HTML to PDF.

Jen

Yeah.

Rachel

For printable things or whatever. And in that kind of context, you may well have an idea of where things are going to fall.

Jen

Oh, it'd be great in this print stylesheet. Like, that's brilliant in the print stylesheet.

Rachel

Yeah! So I think there are possibilities, yeah, there's possibilities with that. I think it's just playing with it. Given the amount of support, you don't see it used very much, and I think it's probably because people think of it as, "Well, I wouldn't want," as you say, "people scrolling up and down." I think if you get away from thinking of it as doing your whole layout, and think of it as the little bits, again to add the sort of finishing touch, just makes things a bit smarter. I think that's where to start looking at it.

Jen

[00:25:44] Yeah. Ok, so number two. CSS flexible box layout?

Rachel

Yes, flexbox! Again, this is, we're really seeing an awful lot of stuff written recently, even since I wrote this, I think flexbox is the thing that people are starting to grab on to because it's getting better implemented in browsers. The problem is that I think, as people probably know, there was an old kind of syntax, and then there was an intermediary syntax, and now there's a sort of a finalized syntax for it, so you have to be carful which examples you're referring to. I think CSS Tricks, Chris Coyer has written a really good thing about how to check which flexbox syntax you're looking at when you're looking at an example. Make sure you're actually using the new stuff.

Jen

Yeah, it's interesting because Chris Coyer wrote a blog post yesterday about this, and I'll put it in the show notes, using flexbox, and Andy Clarke also wrote a short little blog post where he talked about it, because Eric Meyer is doing a presentation at Event Apart, I think he did it for the first time yesterday, he's going to be doing it at every Event Apart all year, showing everybody step by step what's going on. And then Zoe Mickley Gillenwater just did a presentation at In Control in Orlando, which is going on right now, so it feels like nobody was talking about it, and perhaps a lot of people we waiting and seeing, and then it seems like, now!.

Rachel

Yeah, will I think it's one of the more mature things that we're talking about here. It's getting to the point where browsers can confidently implement the spec and hopefully it won't change again.

Jen

Yeah, it looks like...I'm looking this up on caniuse.com, that flexbox, the new version is implemented in Firefox 20 and 21, which the current version of Firefox is 19, as of, we're recording this on February 19th, the new Firefox will come out in like, 15 minutes, so. And then it is already in Chrome, version 23 and up. Version 24 is the current version of Chrome. It's also in Opera, for those Opera fans out there. The current version and future versions. Doesn't look like it's in Safari 5 or 6, nor in IE 10. So. A bit mixed, a bit not quite here yet. Chrome has a huge user base, so that's significant.

Rachel

Well, I think it depends on what sort of things you tend to be developing for. For instance, I always stay to people, "You know if you're doing responsive design and you've got stuff that is targeting devices that tend to be running webkit, which is an awful lot of devices, not just iOS devices, you can often get away with using an awful lot more of this stuff in that context."

Jen

Right.

Rachel

Because you know that the devices have support for it. Even if you can't really use it on the desktop layout because you know that, actually your browser stats there are very different. So depending on what you're targeting, you can often use more of this stuff in one place than another. So, there are possibilities there. I think with flexbox, the really cool thing about flexbox for me is just being able to lay things out evenly. Which is something, when you show that to a traditional designer, that it's really hard for us to just to say, "Here's five elements, space them out evenly." And that was like a real challenge for us on the web.

Jen

[00:29:22]Yeah, so explain how this works and how it's different than the current system of either using floats and widths, or positioning and sizing, or, you know, what is flexbox?

Rachel

Well, the situation is where you've got a menu along the top of your page and you've got different length words in that menu, so if you fix the width, to lay them out evenly you'd have to fix the width of them, so you'd have to set percentages or something, which you can kind of get to work, but then if you actually wanted that to lay out with everything taking up just as much as it needed, and then the space between just working out how much space to take up so things just laid out nice and bushed up at the right edges correctly, that's almost impossible, because you need to give things a width to float them, and you need then, you need to calculate how much space there would be. And that doesn't work, you have to do it with javascript. Flexbox, just makes that really easy, because you can just justify things across the width. If you use justify-content: space-between, and that will just spread things out nicely. It's kind of one of those things that should have always been there, you know? The situation where this has just baffled people, the lack of the ability to do this. You're sitting with a traditional designer, and they say, "Oh, well just space those out evenly," and I say, "Well, I can't really. I could fix the width of them, and then calculate the gaps." So I think that's the key thing. I think flexbox's ideal use is for those sort of interface and UI elements. I have seen examples of people using it more for like entire layouts. I think in an ideal world it's probably better for those smaller UI elements, things like navigation and so on. And it just brings a lot of common sense to how we do that.

Jen

Jen

[00:35:40] [inaudible] You've got five of them across the page, they're all different lengths because there's different number of what you said in audio. This is where it's trick that this is an audio format.

Rachel

Yeah, it's really hard to explain things, isn't it?

Jen

Let me draw you a sketch! Or you could get this PDF, and there's a nice picture. I'm looking at the pictures. But so, menu items. You've got five of them across the page. They're all different lengths, because there's a different number of words in each one of them. Right now, what we frequently do is just let that be, and you float each of them, I mean what probably people who don't write CSS don't realize is that you're by default, they're just going to come one on top of each other, like a list, just one two three four five. And what you're doing in order to get them to be side by side is you're saying, please float, like you're a box on water, and I want you to just float yourself over into the corner, and then this next one's gonna go right next to you, and the third one's going to go up against the others, and the third, and boom, they all go into a row, but you can't really control, I mean especially if you're doing responsive, you don't really know the width of the page. You might not know the size of the text. You don't really know....Typically what we've done is just say, "Look, so they're each gonna, you wanna put a box around them and make the box yellow and make them look like yellow buttons, well they're each going to be different lengths, and there's just going to be an empty space at the end, and we can't control how big that space is. Just live with it. Right? Like that's what we've been living with.

Rachel

Yeah! And then the designer's going, "Why?! Why is that so?"

Jen

But what you were describing is if you want to say, "Ok, we're going to make each of these take up one fifth of the total, so if you've got 100 units of whatever, then you get 20, you get 20, you get 20, you get 20, and then make the text be in the middle of your 20 whatevers. And in order to write that code, you have to do a bunch of cheating hacking things that probably will break the moment that people make the text bigger, or change the size of the screen, or, it's just not a....And instead, you can use flexbox and just say, "Hey, there's five of you. Work it out."

Rachel

Yeah. Exactly, I think that's kind of how you'd expect things should work. The other thing that flexbox lets us do, which again is baffling to traditional designers, is it allows us to do equal height boxes.

Jen

Ahhhhhhh, the golden, golden.

Rachel

So if your...in your five things at the top of the page actually some of them wrap around...

Jen

Or maybe they're pictures that are different sizes, and they aren't...

Rachel

Yeah, then the other boxes will also, even if they haven't got text that fills them up, will also remain the same height. And this is another thing that is incredibly difficult to do, and we've done all sorts of bizarre things with images to try and fake the look of equal-height boxes next to each other.

Jen

Yeah, that was the big thing back in the day when everybody was inventing this sort of main column, one sidebar layout, and you wanted your main column to be beige, and your sidebar to be black, and your sidebar was either, and those two boxes were never the same height, so sometimes your beige would only reach so far down, and then there would be white underneath it. Or your black, your sidebar, would only reach so far, and that's where, yeah, there were a bunch of tricks, fabulous tricks, like ok, you need to make an image, a little bit like a slice of beige and a slide of black--

Rachel

Yeah.

Jen

And then repeat that image over and over and over again to fake there being two columns, when it's not.

Rachel

Exactly, and I think, that's it, we've kind of lived with all these ridiculous hacks, but they've kind of worked, and that's how we've been doing this stuff. So it's nice when you see these modules coming through, and as you say, they're just common sense. They do the things that we're trying to do, and that we want to be able to do and when we get a designer who says, "Oh, it would be really great if that could just line up," and it will be able to.

Jen

Is it a separate thing to say, "Please make these boxes be the same height, or does it just sort of like that," well it wouldn't be like that automatically, you must have to say it.

Rachel

Yeah, the properties are: line-height is stretch and that allows them to stretch out to the height of the tallest. Basically it's because they've got a relationship to each other. Whereas before, with things that are floated, they don't really have any relationship to each other. We're trying to force them to relate to each other in some way, but they don't really care about each other, and that's why it's very difficult to say, "I want this one to match the height of that one." What flexbox allows you to do is say, "This group of things are actually related to each other visually, so I'd like them to be all the same height, please". So that's quite cool. I think it solves a couple of those problems that we couldn't get really in most designs.

Jen

Would it be possible to use some of this line-item:stretch, or display:flex, to layer that in. To write, using your example, the layout of links in a menu using traditional float methods, so that it works in all the browsers that don't support flexbox? And then add these few three or four different attributes that are in the flexbox module so that the one or two browsers that do recognize them would, in addition to, sort of override the old model and then start using the new model?

Rachel

Yeah, I think so, or the alternative would be use something like modernizr and see if you've got it, and do something different if you know you're in a browser that supports it, and supports the up-to-date syntax. There's a couple of ways you can do that. Sometimes you can just let things fall back to what else they're using, and obviously if you're combining properties, you're going to need to check that that actually does work.

Jen

In modernizr, for those who haven't had a chance to use it, you put that javascript into your world, and then you tell it what things you want to test for, it will test to see whether or not something, it will test to see whether or not flexbox is supported, and then it will put a class in, is it in the body element or in the html element? But it adds a class up at the top of the page, so that you can write your css to target, I guess you could write your old school CSS and then you could write...

Rachel

Yeah, it basically lets you fork your CSS so you could have one fork which is for these old browsers, or unsupported browsers, and one for browsers when you know you've got that property there. And that's a nice way to do it because what you're doing there is you're making sure you've got something for all browsers. But saying, "Hey, if you're in a nice shiny browser, we can make this look that little bit nicer."

Jen

And would you recommend that in this example to do navigation over doing...?

Rachel

I think if i was using something as new as flexbox, I would probably be using it in conjunction with something like modernizr. i'm not someone who tends to throw modernizr into a project, I've hardly ever used it, to be perfectly honest, because the sort of stuff I tend to end up building these days has to be incredibly robust stuff and has an awful lot of older browsers, so I don’t tend to use it a lot, but if i was going to start relying on things that I knew really didn't have a lot of support in a lot of browsers, then I think I would probably be using that modernizr just to make sure that I gave a good experience to everything. Because that's really what it's about for me, is everything getting a decent experience based on what it can cope with.

Jen

Yeah.

Rachel

And I think that's a nice way to do it, have a look, go, "Right great, you're in a browser so we can make this look even nicer for you." But you're still maintaining a good experience for everybody, and I think that's, to me, that's really important.

Jen

It'd be interesting to see, to do a bit of testing, and see if you write old school and new school stuff together, if it will crash into each other, or if it will work.

Rachel

I think it's going to just depend on the context, really.

Jen

Oh yeah.

Rachel

In this book, I stayed away from worrying about what do we actually do with a production site, because what I wanted to do was just to introduce people to the fact that this stuff is there, and this is how it works. What I didn't want to do was get into a whole, "Well, you could use this, but then you'd have to use this polyfill, and this that and the other." Then you end up with a huge book.

Jen

Right.

Rachel

So I think there's an element of just, "Here, this is really cool!" I mean, yeah, it's really frustrating as well because I'd just like to use that, ‘cause that, it goes back to your rounded corners again. Could I just use this one bit of CSS, or write this ridiculous solution for round corners. And it's that, but I think that's never really going to change with the web, because we're never going to get support for new stuff immediately in all browsers. Even if people tend to be upgrading their browsers, there's still going to be a delay.

Jen

Yeah.

Rachel

So I think there's always that frustration. There's always that, "Oh, I wish I could just use this." That's not ever going to go away. That's just part of our job.

Jen

[00:45:24] Yeah. And I was watching you do a presentation, I'll put it in the show notes, that presentation that you did at FT? which I don't know what that stands for, but I think in Poland.

Rachel

Oh, for the Front Trends, yeah.

Jen

Front Trends, where you were talking about, it depends on the project, and these questions that I'm asking about, which would be more better performance, or which would be better to use a polyfill, like modernizr library with javascript or would it be better not to? And you're really advocating for not throwing everything in just because. Waiting and seeing whether you need it, and then asking the question, like I was just asking about your project, and figuring out for the specific situation that you're in the best way to do it, and include the things that you need to get the job done.

Rachel

Yeah, see you can get very tied to one way of working, and you know this is the only way to do it, and I'm like, "No, no, there's a million ways to do this stuff, and it really does depend on the sort of project you're working on," which changes, unless you build very much the same kind of site for very much the same audience, it really is going to depend on who you're building for, what you can do. And to come back to these compromises again. Which compromises do I make that'll get the best result for the most people who view this site.

Jen

This is also a great example of any listener out there could go run an experience and go try something out and write a really great blogpost that explains what you discover about how to best use flexbox in a world where it's not completely supported.

Rachel

Mmmm, absolutely.

Jen

Write blog post and we'll all talk about you and your blog post and we'll all learn something from you.

Rachel

Yeah, I think the more people who start playing with this stuff, and particularly if you can actually use it in production, if you are able to put live stuff out there and you're able to use this stuff, that's really useful information just to write it up and say, "Well, I did this and I had these problems, and this is how I solved them," because that's how we grow. That's how all of this really, right from the early days when I first started to see CSS at all, that's how we've done it. We've all just looked at stuff and tried it out and made mistakes and made terrible websites and then written about it. You know? And I like that. I like the fact that anyone, it doesn’t matter if you've been doing this for 15, 16 years, or whether you started six months ago, anyone can be playing with this stuff and anyone can write up what they’ve discovered, and we can all learn from that.

Jen

[00:48:08] So you also write here that you can use flexbox to change the order of your boxes.

Rachel

Mmmm, yes, you can flip them so you can display things in a different order and have things switch again. It's something that, it kind of again getting away from this whole, "I'm tied to source order" thing. If for whatever reason, it's better to have things a different way around visually than they are in the source, then you can actually do that with flexbox, which is quite fun.

Jen

It makes it easy because for a long time, I was of the mind that if you've got in your source order one, two, three, and you float everything left, then you're going to get your order to be one, two, three, and it was from John Albin Wilkins that I learned how to use a complex set of negative margins, and all kinds of crazy stuff so that you could have your number one be your main column, and have two and three be your sidebars, so that your main content is in the source order first, and then your side extra stuff comes second. But maybe if you wanted what would be number two in source order to be your left column, to put your content in the middle, your main content in the middle, and your second sidebar in this, my example is number three in the source order, you could do that with floats, you've just got to negative margin a whole bunch of stuff. And it works, and it's robust, and his code totally cross browser, back IE6, totally works, but it's just really complicated to keep your head wrapped around it. I would always grab his code and then edit it. But it would be, "Oh, his boxes, his sidebars are 200px wide, and I need it to be 250. Ughhh, ok let me get a cup of coffee and take three hours to." And SASS has made that a lot easier, but this is making it super easy. You just put order:1, order:3, and boom, your second thing is third and your first thing is second, and uhh, wow.

Rachel

Yeah, as I said there's some interesting stuff in there, and I'm really interested to see how people start using that. As it starts to become better supported. This week, I’ve not had a chance to read a lot of the stuff that's come out in the last few days, because it seems to have been a whole rash of people suddenly talking about flexbox, which is great, so I think there's a whole bunch of new stuff coming up, and I think that's really exciting.

Jen

[00:50:47] Yeah. So number three in your book, CSS Grid Layout.

Rachel

Yes. Now we get on to the things that don't have a lot of support. All my grid stuff has been using IE 10, which uses the -ms prefix. Because the spec was proposed by Microsoft, so IE 10 has pretty good support for grid.

Jen

And it looks like at the moment they're the only browser. IE 10's the only browser.

Rachel

Yes. grid is great fun. And the grid is really the thing for actually laying out your pages in a sane way. And it's sort of designed for page layout. Very, very difficult to describe, isn't it? As well as the stuff that's in my book, I wrote a fairly long article for 24 Ways last year about grid, and the examples for that are all available, so you can fire up IE 10 and have a play with it. That's probably the best way to get your head around grid, is to have a play with some examples. But basically, you can create a grid on a parent element, and then you can put items, bits of whatever, pictures, content, whatever, into position on the grid. And if you're old school, it's actually possibly easiest to think of that a bit like a table based layout, except you're creating the tables, you're creating the grid, using CSS, so it's sort of virtual. Which means of course, that you can change it. So if you're doing responsive design, you can change the grid. You can change how many columns it's got, how many rows it's got, based on your media queries. But I think grid is great. I think it's a brilliant proposal, and makes and awful lot of sense in terms of how we want to position things.

Jen

The syntax looks a lot like the kind of syntax we've been using for gird systems, I was looking at grid-row:3 grid-column:8. Is that true?

Rachel

Yeah, what I did in that 24Ways article does this a bit more clearly, because what I was doing was concentrating on grid. but I took one of the common grid layout examples, sites, and, "Can I implement this using grid layout, and can I get the same kind of effect?" And I could. So I think it's quite understandable if people have been using some sort of grid framework, for their design, they'll probably find grid quite understandable. Again, it's quite sensible, it just sort of works. You can declare your grid, it can be flexible, it can have fixed elements, you can have things which take up a certain amount of space based on a fraction width, so it works well for responsive design. And yeah, Again, it gets you away from source order dependency. It doesn't matter where things are, they can be positioned anywhere within the grid.

Jen

Nice. Yeah, it does seems like a complicated thing to try to explain.

Rachel

Yeah. Once you start playing with it, and the nice thing is because IE 10 does have a really good implementation of it, you can actually really play with it nicely in Explorer, and how strange does that sound, saying, "Hey everyone, go and use IE 10 because you can play with something brand new."

Jen

Well, and it's frustrating for all of us who develop on Macs, which is everybody.

Rachel

Well what you need to do is get yourself over to something I've been involved with recently, which is modern.ie website, where you can download VMs and things, and you can get IE 10. They've also got a three-month subscription to Browser Stack, which is one of these online, creates a virtual machine in my butt, so you can test things online in IE 10. So that's a good way, if you haven't got access to IE 10 on your computer at the moment, you can still test it. It's obviously a bit slow since you've got to do it over the network, but that's one way to be able to play around with this stuff.

Jen

[00:58:57]
Yeah, and it also seems like with all the discussion over the last several years about grid systems, you know different...the work that Mark Bolton has done, talking about the history of grids, apart from the web, and how to take two or three different grids and merge them together and play with them, instead of even width columns, taking a page and dividing it by 12 evenly, thinking more about ratios, or how to create a grid system for yourself, a bunch of math for yourself. And there's been a lot of tools developed to support more and more complex layouts, like SASS libraries, and ways to, "Well ok, I'm going to write this in SASS, and it's going to calculate all these grids for me." We did a whole show on grids, actually. I talked to Mark about. I talked to Scott Kellum on another episode of the Web Ahead, I'll put both of them in the show notes. About how to use SASS to handle some of these things.

Rachel

I think yeah, when I was working with this, and as I say, I'm not a designer, and I thought, "What would be great would be for more designers to look at this and say, 'Does this syntax, does this way of handling grids, does that actually work for you as a trained designer who really understands how grids should work.'" For me, as someone who's quite technical, it seems to make sense, that all checks out fine, but I'd be very interested to know what designers think of it when they start playing with it. Does it actually make sense, are there things missing from that? Because I think it took, to us, to feed back, to the soundest process, and point out where there were problems.

Jen

Yeah, and this spec is not finished. Do you know what state of the process it's in right now?

Rachel

Identify the browser, because. I think when I wrote this, really it's a proposal.

Jen

So it's still a long ways off from candidate recommendation.

Rachel

It's still a long ways off. I think all this stuff is very, very new, so.

Jen

Yeah, right now, it only works in -ms-

Rachel

Yeah, you've got to do it all with vendor prefixes. So it's probably not something you're thinking about using in production, unless you're targeting Windows mobile devices, perhaps, or something like that, because of course they, and Windows apps, can use grid, and that's great.

Jen

Or if you're working on a project for Microsoft.

Rachel

Hmm?

Jen

If you're working on a project for Microsoft, to show this off.

Rachel

Yeah. That's where you do see people talking about it, when you see people developing stuff for Windows.

Jen

Yeah.

Rachel

They're starting to look at it. But yeah, I really hope that this gathers pace, because i think it's really neat. And the more I play with it, the more interested I became, hence me writing such a lengthy 24ways article because that was really just me going, "Oh look, you can do this! and you can do this!" and getting very excitable. So yeah, I really like it, and I'd be very interested to hear what people who are more on the design side of the fence thought of it, really.

Jen

Yeah.

Rachel

Because certainly as a nerd, it seems to show really well.

Jen

Well, and it seems like from what you’re saying, it kind of paves the cow paths that we've done in dirt, for many years. Because layout CSS is some of the hardest CSS to write, it can be some of the hardest part of CSS to master, I think that's part of why grid frameworks have been so popular. If you could just use 960.gs or one of these others, then, "Oh, I don't have to do to all that work then, I can just apply classes to my HTML and I'm done." And if this follows that model, I don't know how closely or what, but if it is in that direction, then maybe that's good that it's picking up on what we've already been doing over these last ten years, as everybody.

Rachel

It felt to me, it felt very sensible, just the way it works seemed just sensible. And it wasn't hard to work out how to use it. Which that's quite a good thing. If you can just start doing it and it works, that's pretty good.

Jen

Yeah. I know Mark Bolton has some very strong things to say about it. I'll put the links to his writings in the show notes. Especially around the terminology, it seems like the spec people made up their own terminology, and he's like, "Let's use the terminology that's been used for 500 years in print design, let's not make it up."

Rachel

Yeah, I think it's that sort of stuff, that that's why it needs people who are much more on the design side of things to look at this. What happens with a lot of this that comes through is that it tends to be the more technically minded people who don't mind reading difficult to understand specs, look at it, and talk about it, and think about it. But perhaps people who are more on the creative side don't get involved, because that's not really their bag, reading boring documents and debating stuff with people, you know?

Jen

Yeah.

Rachel

And where this stuff gets exciting is when it gets into the hands of people who can do creative things with it. It's how I feel about it. Because I can play around with it and make things that's got a load of boxes. I want to see what people can do with it who are more on the design side.

Jen

[01:04:58] Yeah. But then there's a whole other proposal, or perhaps more than one? CSS regions.

Rachel

Yep. So. Regions has come from, it's Adobe and Microsoft. So this really is something that's a bit more like the kind of stuff you'd use for magazine-type layout. So regions, you need to have Chrome Canary, the experimental version of Chrome, with experimental features turned on, I believe that's still the case. This is really cutting edge stuff. But the best place to go and look at examples of that is on the Adobe site. I can send you the link if you haven't got it for the show notes. What regions lets you do, it's an advanced model for content flow. So you can have regions in your document that content can flow into for display purposes, which sounds really really odd to think in a web context, but it does work out for magazine type layouts and print layouts. It's really difficult to try and explain. It's probably better if you go have a look at the Adobe stuff and see it.

Jen

It reminds me of Pagemaker, which later Quark copied and later InDesign copied. But the original Pagemaker back in the day, you would, I don't know, your job is to layout a magazine, and all the people who have written the articles for the magazine have emailed them to you, they're all Microsoft Word documents, right. There may be a faster way to do this, but I'll just explain this flow. So you open up your Pagemaker document, and you grab your text tool, and you draw boxes on the page. And when you draw boxes on the page, you're setting the top edge of the box, you're setting the left and right edges, which is defining exactly how wide the box is going to be, and when you drag, you're dragging to make a box, but when you set the bottom edge of the box, that's the bottom of the box, it's not going to go any further than that. And then you can go and draw another box, and another box, and another box. So if you open up your favorite magazine, and you look at it, that's what somebody did, is draw boxes of where they want the text to go. And one of them was this wide, and then there were two that were skinny underneath it, and next to that whole group was a big one that went all the way down the side of the page. And then you grab copy, well, later you could import, you would import your Microsoft word document and you'd get this special little picture that would show up, and you would click the first box where you wanted the article to start, and then you would link, it would fill up the box with text, and when the box was full, it was a little different on different programs, but somehow there was some tiny icon would show up on the bottom of that box like, "Hey, by the way, I've got more. There's more words under here. I'm not showing them to you because my box is full, but there's more here." And you could click that little icon, and then click another empty box, and it would link the boxes to each other and the article would flow from one box to the next box to the next box.

Rachel

Yeah, that kind of really is what you're doing. You're saying, "Yeah, I've got this chunk of content, which is here, in the source, and I've got these three boxes over here in the source, and I want that content to enter in those boxes spread out evenly, so that it fills them up." What that allows us to, to start is to have really good control over source order, so that big chunk of content might be a big article, can all be one piece of content somewhere in the source, you don't need to break it up into three divs, for instance. But it also means the boxes it flows into don't actually need to be next to each other. So, you can do things like you might have in a magazine, have a big picture in a middle column and text on either side of the big picture and that could be one chunk of copy that's then flowed into those two outside boxes. Yes, very difficult to explain, but yes, I think if you've used those kinds of desktop publishing tools, it probably makes a lot more sense because that's really what you're doing.

Jen

Yeah, and the thing that would happen in Pagemaker, Quark Xpress, InDesign, is that you would change the font, and, you know "Oh, I changed it to Times New Roman because I'm trying to figure out which font to use," and Times is a little smaller, so the text shrunk up a little, and now in the first box, there's three more paragraphs than there was before, and the second box starts at the next word that comes after the last word in the first box. Like, the content would, because it's flowing through the boxes, it would just automatically resize itself and refill itself.

Rachel

Yeah.

Jen

Sometimes you'd end up with empty boxes at the end because you ran out of content, there's no more need to fill that up, but if you decide that you're going to up your font size from 12 to 14, or whatever, then it would reflow again and it would fill those once-empty boxes back up with the rest of the content that was missing.

Rachel

Which actually makes quite a lot of sense on the web, when you think about it. Because we don't often know how much space things are going to take up. So actually having that control, being able to say, "Well, actually, just carry on." You can specify a final box, which fills up with whatever's left, so you've got a bit more ability to shape how things are going to lay out. And yeah, it's pretty cool. It's fun to play with.

Jen

Well, I would imagine that one of the things that would be most appealing to Adobe fans, people who use InDesign, people who wish the web were more like print, is that you fix bottom edges of things.

Rachel

Yes, you can say, this is so tall. I think things like, "Oh, I've got an image, and I would like there to be a column of text next to that image that is the same height as that image, and then all of the rest of it flow underneath, or go into this other column, or whatever.

Jen

Well, or I want my whole page to be 8 inches tall, or what would that be in metric. So 15 centimeters tall, that's the, and you can probably hear in my voice, I'm not sure how I feel about this. Part of me gets it because I did print design for many, many, many years, and it could be really exciting to have more control over layout, and be able to do the kinds of things that I used to do, that people do in print. But part of me is like, "Stop trying to cram print down the web's throat, like it's not..."

Rachel

Yeah, but I think it depends on how it's used.

Jen

Yeah.

Rachel

I think if we just say, "oh, well let's just make the web now look like magazines," then that's one thing. But if we say, "Look, with these sort of things coming in, we've actually just have got better control to create really nice layouts. Using typography really well. And we're starting to see people really get interested in that, anyway. There's a lot from magazine style layout, which is really beautiful and I think can bring a lot to how we see things on the web and how we see things on an iPad screen, for instance, or another device. Things don’t just have to be, as you mention, a stereotypical website with the navigation on the left, and we're getting away from that just because of the touch devices we're using and things.

Jen

Yeah.

Rachel

So I think there's possibilities here, as long as we are taking them forward, rather than using them to take a step back and make everything look like a print magazine.

Jen

Yeah.

Rachel

And I think that's very much about how people use this stuff. And I think the initial examples are always going to be, "Oh look, we can make things look like a print magazine," because that's, particularly for those of us who are more technical and less of a designer, that's kind of all we can see it as. I don't have the creativity to say, "Oh, well you could do this with it, or that with it or..." because that's just not what I do. I write code. So I think that's where we want this stuff in the hands of people who can say, "Yeah, but it could be used for this." And I think that's the sort of thing we'll start to see as people start to play with it. Because really, that's what happened with floats and so on, you know to actually do CSS layout in the first place. People saying, "Hey look, you can do this with this." I think it's just how it's used. And there are going to be people who say, "Oh great, that means I can make my website look exactly like my magazine," but I think that's...I think we're probably getting away from that, really. I think certainly those people who are going to grab on this earlier aren't going to be those who want to be stuck in the past. It's going to be people who want to see what they can do with it in the future.

Jen

Yeah. It does seems like one of the more radical things. Do you feel like it is?

Rachel

Yeah, I think it is. And it'll be interesting to see how...it's at a very early stage. It'll be interesting to see where it ends up, but it's actually, in terms of being able to manage where things are in your source, it's dead useful. If you can say, "Right, use HTML 5, here's my article, this is my big chunk of text, and I want to keep it as a big chunk of text, I don't want to break it up into a loads of other markup so it can be easily repurposed, what have you. But then I'd like to be able to display it in this particular way for this particular device, and maybe I want to display it in a completely different way for another device." And I think that that's what it gives you the flexibility to do. It's to create essentially arbitrary layouts, and then flow copy into them.

Jen

Yeah. So is it, I'm looking...I'm trying to quickly. What about height with these boxes, do you always set the height? Or is it possible...?

Rachel

No, you can have boxes that will just fill up with whatever's available.

Jen

That will grow.

Rachel

Yeah, yeah, they don't have to be fixed. And you can use a combination. Probably what people will tend to do, you know, you want to do something at the top of the page which is quite precise, and then you just flow the rest of the article, or maybe use some other layout method in the final box, like multi-column layouts, or just to spread it out. I think what we'll see is this stuff being used in combination rather than just using one of these solutions. They're quite different solutions, it's not a case of "You'd use this or that." It's, "You're going to be using them in combination."

Jen

Is there a CSS attribute so that you can say, "I would like you to make this the height of the screen?"

Rachel

I don't know, to be honest, I don't know how you'd necessarily do that.

Jen

Like, how would...Is there a way for the browser to know where the edge of the screen is, and if so, could it return that information back before it renders the page with the CSS. Using the CSS.

Rachel

Again, it's that sort of...yeah.

Jen

‘Cause I wonder if that will be....Because that's sometimes where this question, this collision of web vs. print comes in where print centric designers insist that such and such be above the fold, and you're like, "I get what you're saying, but there is no fold, like I don't know where the fold is. It's in a different place on every screen." Or if someone wanted to do a layout where it was more like a book, so they use Javascript to do book, to turn the pages, but they want it to flow content in boxes, but somehow the height of the boxes would be very different depending on how big the screen was. Huh. Maybe by the time they're done with it they'll figure something out. Or maybe that's an impossible question to answer. Or an impossible problem to solve. I thought I saw something recently, somebody talking about it.

Rachel

Hmm, yeah, someone listening may well put us right on that.

Jen

Yeah, anybody in the chat room. Yeah, ‘cause it does feel a bit like this tension between knowing the edges of your canvas, the way that people do when working with paper, vs. not knowing, especially with the perspective of responsive web design these days.

Rachel

And I think that's always going to be...there's always going to be things we don't know, and I think this stuff is interesting, but then it adds an awful lot more complexity to that. And it adds the more precise you want to be about stuff, then the harder it is to deal with all those different breakpoints, and what happens if someone's on a very small screen, which one of these things are we using? It just gives us more decisions to make.

Jen

Yeah.

Rachel

So, I think in the end if we have more complex layouts, then we have to spend more time working out what we want to do. Then some of this stuff will just save us a lot of time. Because we'll not be battling with some of the strange behavior inherent in using something like floats to layout our sites, which is not really what they're designed for. So, I think using the thing specifically designed for a purpose is going to tend to be better. But certainly, it does add other issues in terms of what you do about the older browsers, in terms of how accessible some of this stuff is. We don't want to starting to create completely unreadable websites because of all this shiny new stuff. Let's use it! So yeah, I think...but to say, "That's our job" really, is to figure this stuff out.

Jen

Yeah.

Rachel

And I think, you know, [inaudible 01:19:51] see people do who some crazy demo of something, and then a load of other people will jump on them and say, "Ah, you could never use that in the real world!" And it's well, "No, we need the crazy demos!" We need to see the edges of this stuff and what is possible, because a small amount of that will then make its way into production, or make it's way into what we actually use day-to-day.

Jen

Yeah, it's those crazy experiments and the demos that help us break out of habits that we don't need anymore. And help us figure out, "Ok, what's a good habit, a good user experience pattern that we need to continue to use, and what's an old habit that we got stuck in because of the limitations of our hacky hacks around old technology that's now no longer relevant?"

Rachel

Yeah, I don't know about you, but there's so many things that I'll catch myself doing when I'm writing CSS. And I'll think, "You know, is that relevant any more? What browser was that for? Why am I doing that? Why am I still including that little bit of code?" It'll be something that made things work in IE 5, you know? Sort of like, we're carrying this history with us all the time. I think sometimes you have to look at what you're doing and say, "Are there things that I just do by default because that made things work, once?" How long does it take us to shed those ways of working?

Jen

Yeah.

Rachel

Those of us who've been doing this a long time, we carry that weight of having to deal with Netscape 4 with us.

Jen

[01:21:38] Yeah. Netscape 2. So then number five, the fifth section of your book, the last one, is CSS Exclusions.

Rachel

Yeah, so again, you'll find more stuff about this on the Adobe site. Again it's very, very early stage. You sometimes hear it mentioned instead of single position floats mentioned, which is of the same thing, which is being superseded by this working draft, so the really cool thing that I think people will like from this is the ability to float items in a more controlled way. So things don't just float to the top left and things wrap around. You can actually position an element and let things flow around it. So you can put things right in the middle of your copy, and it will flow around both sides, which that is something that designers have been asking you to do and you say, "Oh no, we can't do that."

Jen

Yeah, and that's a classic magazine layout trick, right out of, I don't think Pagemaker, oh this is the edge of my memory, I don't know if it did that or not, but I think it was in Quark. I think it came into Quark, one of the versions of Quark. Where you could import an image, the image would be in a box, and you'd just grab the box and drop it in the middle of the page and put a margin on it and your content all scooted out of the way.

Rachel

So basically with this you have to use this in combination with other positioning stuff, it doesn't have it's own positioning stuff. So essentially you can position an item, and then you can create an exclusion for that item, which then means that the text will flow around it. Which is pretty cool. And again, the best way to have a look at this stuff is if you have a browser that supports is, so Chrome Canary is probably what you need, to go and have a look at this stuff on the Adobe site and see how it's working. Again, it's just another, it may well be that these proposals become combined in the future into sort of one thing. At the moment they're separate. It's just another interesting little thing that covers something that we've asked for, that we've said, "Why can't you do this?" Once you know how floats work, it's sort of the logical next step is "Why can't I float this text around something in the middle of the page, why doesn't that work?" So that's where this is coming from.

Jen

Yeah. Yeah. I think it gets real interesting because with floating you can get squares, you can make your text move around a square box, but with the exclusions you can do odd shaped objects.

Rachel

Yes, yeah.

Jen

You can have a big circle, and your text can then float around, can squish itself so that it wraps around the circle, or on this Adobe site, there's a picture of this car, and the text kind of follows the outline of the car. There's probably an SVG in there, as well. It's not magically....

Rachel

You can also do stuff like put text inside shapes, and things. So again, you see that in magazines, whether or not it works very well on the web, I don't know. But then we're not always just creating stuff with HTML and CSS for the web these days.

Jen

True.

Rachel

[01:25:18] So I think it's interesting, and I think it's interesting that it's come from Adobe, because they do know about this sort of thing. They do know about people wanting to lay stuff out in a nice way.

Jen

Yeah, they bought everything up.

Rachel

So I think it's interesting, I think it's great to see Adobe doing this sort of stuff and putting this out there. I think it's great to see Microsoft to come up with the grid proposal. Because this, you know going back to talking about me being involved with the Web Standards Project, this is what we asked for back then. What we wanted was these companies to be doing the interesting stuff, but instead of saying, "We're going to put this in our browsers so everyone will think our browser is better and you'll all come over," Instead, they're doing that through the standards process.

Jen

Yeah.

Rachel

And kind of competing via that process. And then to see companies, like Adobe, coming through and putting forward proposals and saying, "You now this would be really cool." Then that stuff is getting in to the standards process, and we can all look at it, we can all play with it, we can comment on it. And that's what we wanted. We wanted things to go through that process so that it can become part of open technologies [01:26:38 inaudible] we're using.

Jen

Yeah.

Rachel

And I think that's really cool, and that's what excites me the most, that that's happening. We're getting input from people who do know about design, and what people want to add magazine style layout stuff. You know, Adobe knows about that stuff, so it's great that it's coming through.

Jen

Yeah, that's true. I really like that there's more than one CSS module happening regarding layouts and coming up with new tools, so that it's not all or nothing, the entire internet needs to agree on one system, but it feels like however it worked out, there are several different possibly overlapping ideas, possibly competing ideas about how to do layouts, and if this all matures and arrives in an optimal way, then as developers in the future, as designers in the future, we'll be able to say, "Oh, you know I got like three or four different ways I could do this, for this particular project I think this is going to be the CSS I want to write."

Rachel

Yeah.

Jen

And we can be more creative and be more like, "Oh, let's try something new on this one." And not be stuck with one way to do things. And meanwhile, the old way is going to stick around, so we can use the old tools anytime we want as well.

Rachel

Yeah, I think sometimes at the moment, the compromise is you try things a few different ways, and the one that blows up the least, or the one that seems the most robust is, that's what we're going to do now, and I think it's nice to see things that are coming through that are specifically designed for doing layout, because at the moment we do layouts without tools that are specifically designed really for doing layouts.

Jen

Yeah.

Rachel

And so I think to actually have that kind of control, I think some of these specs are relatively complicated to understand, particularly at the moment. But as we go forward, more people are going to write about it, and write about it in an accessible way, and hopefully we'll see more examples and things out there. I mean the last couple of things that we've talked about, regions, exclusions, and shapes just don't have a lot of browser support, so it’s very difficult for people to get their hands on it and play with it at the moment. But hopefully that's going to change.

Jen

Yeah, it sounds like they're very much in the, let's-fight-about-this-spec-for-a-while-and-then-figure-out-the-best-way-to-do-it-by-having-a-big-discussion, stage. Like, everything goes through that stage, and at some point they’ll come out the other side, and the other side is, "Ok, we've all talked about it for a long time and we've debated all these really good debates and now, this is the conclusion of this debate." Is that right, that they're not quite at that point, they're still hot and heavy.

Rachel

I think yeah, these are very early stage. but I think it is worth looking at, and I'm glad that Adobe have got examples up on a site and people can go and have a look at them because I think they're things that people will think, "Yeah, that could be so useful" and it'll be interesting to see how those progress.

Jen

Yeah, they put all their code up on github, so we'll put the links all in the show notes and people can go hunt them down and check it out, and help us figure it out.

Rachel

Yeah.

Jen

[01:29:55] So thank you so much for being on the show today and explaining all of this. People can follow you on twitter, right? You're @rachelandrew, is that right?

Rachel

Yep, I'm just @rachelandrew on Twitter where I talk about all sorts of things, business, and tech, and my broken arm, and my cat and things like that.

Jen

Yeah, how is your arm?

Rachel

Yes. My arm's fine, it's a waiting game now. For those who don't know, I'm a keen runner, and was miles in training, in the snow, in this tiny amount of snow that we get in the UK. I mean it really is ridiculous, we had snow for about a week, and while it was here, all three inches of it, I managed to slip on it, fall backwards, and completely shatter my right elbow.

Jen

Are you right handed?

Rachel

I am right handed.

Jen

Ah.

Rachel

So I'm sort of typing left handed and getting very cross. And yes, it's going to be a long time before it's fixed, I've now got a very interesting looking metal elbow.

Jen

Yeah, it sounds like...how many surgeries did you have?

Rachel

I had one surgery, but I was there for six hours. And I'll have to go back at some point. Some of the pins they've put in they'll take out. The creepy ones that I can now feel under my skin I think are the ones they're going to remove eventually.

Jen

Wow.

Rachel

So yes, if you look at me at conferences this year with my scary elbow, yeah.

Jen

I was reading on your blog you're updating on your running blog about your fall and your elbow, it just sounded...I'm just so sorry.

Rachel

Yeah, it wasn't my best moment, as we say. The worst thing is I can't run for at least six months because of the danger of falling on it again. So I'm kind of a bit like a little old lady at the moment, who isn't allowed to have a fall.

Jen

And you were training for a marathon, right? I mean you were going to run a marathon.

Rachel

Yeah, we'll I've done a lot of half marathons, I like running distance, so yeah. At the moment, all I can do is go on a static bike in the gym because, again I can't cycle, or anything with any risk of falling. So yeah.

Jen

Wow.

Rachel

So be careful out there in the snow. This just proves that British people can't handle any kind of weather at all, really.

Jen

Ugh, that's terrible. Well I hope it heals up quickly.

Rachel

Yeah, it's getting there. It's kind of more annoying than anything, now, because there's so many things that I can't do. But, yeah. Don't run in the snow.

Jen

People can follow The Web Ahead on twitter, it's @thewebahead, you can follow me, @jensimmons, on twitter, I want to say thank you again so much to An Event Apart for supporting the show, go check out their website, aneventapart.com, and look at the schedule and all the fabulous people who are going to be speaking. If you want to know more about all these layouts in fact you can come hear Eric Meyer talk about them. Because I have a feeling we're going to need to talk about these a lot for quite some time. And pick up Rachel's book over at fivesimplesteps.com, it's two pounds, right? It's like...

Rachel

Yeah, something like that! They're super cheep, and there's a whole, they've just released the other couple in the series, they're selling them individually or they're selling them in little collections of four many books on various things. And I think there are going to be some more to come, so it's quite a nice way to get a little bit of information about a subject.

Jen

Yeah, I think it was $3.18 when I bought one this morning. So yeah, quick little....And there's no paper version. Just ebook.

Rachel

Just ebooks, yeah. I've got my copy here on my iPad mini, and they look very nice on the iPad. Nice to read. So.

Jen

Oh nice. Yeah, that's it. Thanks people can check out the schedule 5by5.tv/schedule to see when we'll be recording our next show if you want to listen live, or just if you want to know, "What's up, when's the next show?" I'll be lining people up, so thanks for listening.