Embracing the Exciting Future of Grid Layout

Paul Boag

On this episode of the Boagworld Show, we are joined by Andy Clarke to talk about the design possibilities supported by CSS Grid.

This weeks show is sponsored by Balsamiq and FullStory.

Transcription

Paul: Hello and welcome to the Boagworld Show. The podcast about all that's best digital design, development, and strategy. My name Paul Boag. Joining me on the show is Marcus Lillington and Andy Australian Clark. Hello, Andy.

Andy: G'day. As they say down here. Everybody says that our here. They say, "G'day." They say, "No worries." They say, "Coming for a sausage sizzle."

Marcus: What?

Paul: What?

Andy: A sausage sizzle.

Paul: What's a sausage sizzle?

Marcus: It's a euphemism.

Paul: A barbecue?

Marcus: It's a little bit … That's what it is.

Andy: It's an Australian tradition. Now I want you to imagine something, okay? I want you to [crosstalk 00:01:04]-

Paul: I don't want to know. Hang on. I don't know if I want to imagine any kind of Australian tradition that involved the words, "Sausage sizzle."

Andy: Now-

Marcus: I'm feeling brave. Go for it.

Andy: … I want you to imagine. I want you to imagine a B&Q superstore.

Paul: Right.

Andy: Either in Rill, or somewhere like … Somewhere nasty like Lincoln. No, no, Peterborough. Apologies to all the listeners that live in Peterborough, right. But I want you to imagine everybody turning up to the B&Q superstore in Peterborough. Not for the plastic chairs, and perhaps a five liter tub of Dulux Ultra White. But no, for a barbecue where they sizzle sausages. And this is an Australian tradition. They have basically the equivalent of B&Q is Bunning's. Bunning's Warehouse. And-

Marcus: We got one of those in Basingstoke now.

Andy: Right. And it's an Australian tradition that on a Saturday, you go to Bunning's not just for the paint. But for the sausage sizzle. But [crosstalk 00:02:19]-

Marcus: Where does it … In the Car park? You do it in the car park or what?

Andy: No, see this is the big dilemma, right? Because … And I haven't done it. But I'm told by Australians that have. But what happens is, is that you get your sausage, but what do you do next? Do you stand in the 35 degree heat, sweating your nuts off while you eat your sausage? Or do you take it back to the car? Trouble is, the car is a 170 degrees. So what is it that you do? Do you, and here's the thing, do you risk turning the air conditioning and the ignition on while the car cools down, and then going and getting your sausage sizzle and taking it back to the car? Or do you … Anyway, it's all very complicated. And there are whole T.V. shows in Australia devoted to strategies for the sausage sizzle. I made that bit up actually. But it is.

Marcus: I think you did, didn't you? Yeah.

Paul: I totally believed you.

Andy: Actually it is a cultural phenomenon.

Marcus: I still don't quite understand the process of the sausage sizzle. Where do you get … What, does somebody cook it for yeah? Do you cook your own? Do you take your own barbecue with you? Do you put it by your car? Do you take it into the store? I need more detail, Andy.

Andy: Well, I suppose you could take it into the store. But I bet they have a no drinks, no food policy. Just so that you don't get ketchup all over the patio furniture. But no, I think that it tends to be like charities. You'll get like a charity cookout or something like that. So they're probably-

Paul: Oh, okay.

Andy: … raising money for, I don't know. Think if-

Marcus: Grillers.

Andy: Think of some charity. [crosstalk 00:04:07].

Marcus: Well, you didn't this is the way to start the show this week, did you Paul?

Paul: Well, you say that. But we've got Andy on the show. And this is inevitably what happens. We spend the first 20 minutes talk about something completely unrelated to digital. Surely now, Andy. Surely now it's time to come home. If that doesn't push you over the edge to go, "Let's come back to Britain," where sanity rules the day, I don't know what is gonna. You've completely gone rouge.

Andy: No, you see I-

Paul: Did you see that link I sent that I've put in the show notes? The one-

Marcus: Mm-hmm (affirmative).

Andy: Yeah. No I did see the link.

Paul: Go on. You're long way away [crosstalk 00:04:46]-

Andy: I've been back. Don't forget. Don't worry. I came back over Christmas. And so I've been back to Brexit Island. But I was able to escape, because well to be honest, it's because I can speak French. So what I did when I got to Stansted was just put on a little phony French accent and they let me out.

Paul: But you've seen on that article I posted in the show notes. And I'll put them in the show notes that everybody else sees as well. Australia is only the seventh nicest place to live, while apparently Britain is fourth now.

Andy: Yes, I know.

Paul: Which I think is pretty … I think says it all.

Andy: But no, I saw this. And let's just read it out for the listeners, right? United Kingdom also in the top 10 best countries for, here we go, "Cultural influence."

Marcus: Yes.

Andy: Who wrote this? MC Hammer on crack?

Paul: It was written by an American. So you know, they've got very low expectations when it comes to culture, don't they?

Andy: Yes. Okay. "Entrepreneurship." We can talk about Dyson.

Paul: Yeah. See.

Andy: Talk about Dyson if you like?

Paul: Mm-hmm (affirmative).

Andy: Probably that's about anything I can think of. "Power." Rapidly diminishing. "Starting a business," –

Paul: Yeah.

Andy: … in another European country. "Most forward-looking." [Pfft 00:06:24].

Marcus: Yeah, I have to-

Andy: Most in-

Marcus: … agree on that one has not been really true anymore.

Andy: No. "Most influential." There are people around … There are tribes undetected by white men in the Amazon that are more influential than the United Kingdom at the moment. "Transparency," good luck with that Brexit process. "Education." Well you know, all of those foreign students going somewhere else. And, "Starting a career." Whereas if you look at Australia, here we go, it's best for cultural influence. Well, you've seen Crocodile Dundee. You know what it's like.

Marcus: And displaying the sausage sizzle. Absolutely.

Andy: And the sausage sizzle. "Quality of life," it's very sunny. "Most forward looking." "Best countries to headquarter a corporation." That's a strange one. Yeah.

Marcus: [crosstalk 00:07:24].

Paul: It's bloody miles away from anywhere.

Andy: Yeah, no, it is bloody miles away from anywhere. That's great. You just send an email and three days later you get a reply. "Raising kids." Yeah. "Traveling alone." Well, as long as you don't get eaten by a dingo I suppose that's okay. There are tens of thousands of miles of things that want to kill you and eat you.

Paul: I'm fascinated by the last one. Sorry to skip ahead, this could take forever. Right, apparently Australia is one of the top 10 countries for women. What does that mean?

Marcus: Yeah. You can take that two ways, couldn't you?

Paul: Yeah.

Marcus: [crosstalk 00:08:06].

Paul: Exactly. Yeah. Exactly. I mean they're well-known for treating women with respect and et cetera. I don't know. I don't know what they're getting at there. It's just the one word, "Women."

Marcus: Mm-hmm (affirmative).

Paul: Anyway.

Marcus: I'm saying nothing.

Paul: Nobody wants to know exactly.

Marcus: No, no, no. No comment.

Paul: Well, this is a definitive proof that you should come back to Britain is all I'm saying. But anyway, how long have we waffled for already? It must be time, please, to talk about something web related.

Marcus: No, no, no.

Andy: But we haven't talked about apes.

Marcus: We've only talked like one minute.

Andy: We haven't talked about apes. We haven't talked about weeing in hotel kettles.

Marcus: What?

Andy: One of the things that we do on a podcast.

Paul: I have never talked to anybody about weeing in a hotel kettles. Is that a thing?

Andy: I don't know. But I always take my own kettle with me whenever I travel, 'cause you just never know.

Marcus: That's brilliant.

Paul: Do you know, that has honestly never occurred to me. Now, that's it now. Fortunately I don't use kettles very much. So that helps me, 'cause I don't drink tea or coffee.

Andy: There'll be a run now on portable travel kettles at B&Q.

Paul: I think that makes a big assumption that anyone actually listens to this podcast.

Andy: Well, three of four then.

Paul: Yeah. Exactly. They might sell one extra kettle.

Andy: There you go.

Paul: Okay. So yes, there's that.

Andy: There is that.

Paul: I don't know how to segue from weeing in kettles into talking about our first sponsor.

Andy: Oh, who's our first sponsor, Paul?

Paul: No. I don't feel that I can mention Balsamiq, because if I do-

Marcus: You just did.

Paul: Oh, yeah. Okay. That messed it up. If do, they're forever gonna be associated with weeing in kettles. And I don't think they're gonna be particularly happy with that link. Or perhaps they will. Perhaps that will become their major selling point. They'll put on their website, "Recommended on the Boag World Podcast alongside weeing in kettles."

Andy: What I'd like you to do now, I'd like you to do the Balsamiq sponsor script. But replace the word, "Balsamiq," with, "Hotel kettle."

Paul: Okay. We'll do that. Right. So hotel kettles are an easy way to wireframe your website, because they-

Andy: This isn't working.

Paul: … hotel kettles have a very-

Marcus: This isn't working.

Paul: … low … Is it not working?

Marcus: No. No, no. Do the proper sponsor read.

Paul: I was getting into that. You just ruined the fun. You've suddenly gone sensible. All right. Let's talk about Balsamiq. So, Balsamiq are a really easy to use wireframing tool that … Andy, you must've used Balsamiq?

Andy: I have once or twice, yes. I can't profess to be a Balsamiq master. But yes, I have. I have come across it.

Paul: Now, you probably are of the mindset, "Well, it's a bit old and a bit out of date. And it's not cool and trendy like InVision," or something like that. But in actual fact, Balsamiq is aimed at a completely different market. And they've been very clever I think the way that they've positioned it as a tool. Because it's actually not for people like Andy, or people like me. It's designed for everyone else. Not everyone except me and Andy. But every kind of … People like Marcus. It's aimed at … Not even you. You're a bit too competent these days. I'm not … No, nah. Now I'm just [crosstalk 00:11:53]-

Marcus: A bit too competent.

Paul: Yeah.

Marcus: I'm not really too sure how … Quite sure how I'm meant to take that.

Paul: Well, also the other problem is, I've implied that every Balsamiq user is incompetent. Which probably is as bad as saying that they're associated with weeing in kettles. Okay. Let's start that again. What I mean by that is it's aimed at marketers, it's aimed at managers, it's aimed at project managers. People that aren't user interface designers, that aren't UX people. People that don't use tools like Sketch and Photoshop, and that kind of thing. It's got an incredibly low barrier to entry, and it's a tool that's designed really for them to replace pen and paper. To enable them to quickly express their ideas and what's going on in their head. So it's great for kinda non-professionals.

Now, that may create some fear amongst, if you're a designer listening to this, you might not like the idea of non-designers creating wireframes. And so you may be tempted not to recommend Balsamiq to other people. But I would say, we need to get over that. We shouldn't fear other people who aren't designers expressing design ideas. Because for a start, if you get a stakeholder or somebody like that producing wireframes, it helps that you understand what their expectations are. So that when you present the design, if you've gone in a different direction, you at least know that you've gone in a different direction and are prepared and ready to handle that.

Also it'll help you identify problems early on between what you want to do and what you know is right to do, and what maybe they've got in their heads. So you head those problems off early. And let's be honest, they might have good ideas. You don't have to be an expert to always come up with the best ideas. Other people do occasionally, and we need to embrace that. So I'm a great believer in getting non-designers to do wireframing, and explore ideas visually. Because if for no other reason, it's also an opportunity to educate them a little bit and help them understand some of the challenges around designing user interfaces.

Balsamiq is also a great tool for collaboration, and actually encouraging those kinds of conversation between designers and non-designers. So you can get 30 days free trial by going to balsamiq.cloud. But if after those 30 days, you go and sign up and enter all your billing information. If you use the code, [balsamiqboag 00:14:40] at that point, you'll get another three months for free. So it's definitely worth doing. So check them out at blasamiq.cloud. So there we go. That is my Balsamiq sponsor bit.

Andy: [crosstalk 00:14:57]. It was professionally done. It was. It was very professional done.

Paul: I think it started off a little bit wobbly if I'm honest.

Marcus: Then you found your feet.

Paul: And then I got there in the end.

Andy: Yeah, you did.

Paul: Fortunately … Yeah. Fortunately they are very forgiving client. So that's good. So there we go. Right. Let's dive into the discussion. What are we gonna talk about today? Andy, CSS Grids. They're your in thing at the moment, aren't they?

Andy: I think that they're lots of people's in things at the moment. All of a sudden … Well, maybe not all of a sudden if you're Rachel Andrew. But-

Paul: [crosstalk 00:15:35].

Andy: … all of a sudden Grid seems to be the [inaudible 00:15:39] topic of choice amongst web professionals. And to be honest, I'm not bloody surprised, because it's fabulous. And I'm actually very excited about Grid. I mean, I know I ought to get out more. Need to get some friends, stop hanging out with the Bondi bikers. But-

Paul: That is a story. I don't wanna pursue either. Carry on.

Andy: But I'm excited about it not just from a kind of a nerd code point of view. But also because I think that finally, finally we are able to produce the kind of imaginative layouts for the web that we're used to seeing in other place. But because of various reasons, we haven't really been able to accomplish without a ton of hacks, or browser issues, or whatever.

Paul: What … I mean, what … But to interrupt you. What kind of thing are you talking about? You know, because CSS has always been pretty flexible in the way you're producing. What do you feel like Grids can do that floats or flex box, or whatever else couldn't?

Andy: Yeah, I know. I mean there's always that kind of guns don't kill people, people kill people. And bootstrap doesn't make terrible boring layouts. People make terrible boring layouts.

Paul: Right, okay.

Andy: But there has been … And let's just sort of wind it back a little bit in terms of some of the kind of, the history of the web if you like. And what we've done on the web from a design, particularly a layout design point of view, has always to a certain extent been dictated by the technology. It's been dictated by the properties that we've got in CSS. It's been dictated by the browsers obviously, 'cause that's where things end up. Unless you just wanted to punch a load jpegs, or PDFs online. And if you go back, back, back to when CSS, when web design first started. Things were incredibly plain. And single column layouts, because we didn't have any other way of making that stuff up.

And then we start moving into that kinda table era, which was interesting because we started using, particularly if you are like me and you used Dreamweaver. And you didn't actually understand code at that point. We would use something like Dreamweaver almost like a desktop publishing tool and we'd be able to create some, what today might be considered to be not terribly usable layouts, or whatever. And if you look back at things like the Microsoft homepage, or even the early Apple homepages or whatever, they wouldn't be considered today to be the most UX friendly layouts. But they had some kinda spark and personality to them, 'cause we were thinking about things in a slightly different way. But obviously under the hood, it was all tables and spacer gifs, and all of the kind of … Tables were a layout hack essentially.

Paul: Yeah.

Andy: And then we kind of, we grew up a little bit and we started thinking about CSS. And there was this whole kind of era where things generally fell into two columns. You've got your two columns with a sidebar. If you think back to our friend, [Jeffrey Zeldman's 00:19:39] site. The one that we can all remember from back in the day. One main column, one sidebar, with a blog roll. Remember those?

Paul: Mm-hmm (affirmative).

Andy: And that was what the majority of the web looked like for half a decade or so. And then responsive design comes along and all of a sudden we have to start thinking about things being flexible. And one of the ways in which we did that in order to kind of make things simple was, wait for it, single column layouts.

Paul: Mm-hmm (affirmative).

Andy: And again, Jeffrey's site is a good kind of example of that. We ditched the sidebar. So the technology, the capabilities of browsers or devices, or whatever, definitely definitely influenced the designs of layouts. And we fell into kind of common patterns. We fell into the whole, "Everything's inspired by Squarespace." You've seen the Tweets, "Which one of these two layouts are you designing today?"

Marcus: Yeah. Yeah.

Andy: John [Ten 00:20:44], kind of even I've talked about web design has lost its soul and all of that kind of stuff. And we have been able to do cool stuff, but there's always been something which is kind of holding us back in a certain way. And a lot of that has been about our attitude towards technology and how we should use it, and what we think is appropriate.

Paul: Do you think a lot of it comes down to time constraints and budgetary constraints that because it wasn't easy to do the more creative stuff, we didn't do the more creative stuff? And that because CSS Grids, once you've learnt it, makes it easier to do that more imaginative layout. Therefore we can do it more, because we can do it within budget and time constraints. Is that what you think is happening? Or is it just that we lack the imagination, if that makes sense?

Andy: Look there's always been in some areas of the market, more money than sense.

Paul: I wish I was in that part of the market.

Andy: Yeah. Me too. Me too. But if you think about what the big brands have done. And you think about companies or organizations that have got more money than you can shake kangaroo at. Then I don't think that that's been an issue. I think that the issue has been that there's inside of organizations whether it be designers or developers, or whatever. We thought, "Oh, you know, responsive design needs to be simple, therefore … " And I think that particularly when we start to think, we have thought more over recent years about making design systems and [codeifying 00:22:39] things into a bunch of micro and macro components. That actually we've just thought, "Well, that's design sorted now."

Marcus: Mm-hmm (affirmative).

Andy: And it's a shame, because CSS Grid it's not just about the kinda of the technical capabilities. We can talk about … If you want, we can talk about how good it is as a prototyping tool for example. Or we can talk about how much better it is for responsive design. Or how brilliant it is because we can make layouts that are independent of the content order. But there's actually, I think there's a deeper advantage to being able to do layouts with CSS Grid, and all of the possibilities that come with it. And we don't talk about that as much.

Marcus: Mm-hmm (affirmative).

Paul: Yeah, okay. Fair enough. So what kind of possibilities do you see in it? What is it that you would like to see people do more of?

Andy: Well, I think that one of the things that we've forgotten on the web for several reasons. You've heard this mantra of, the web's not print.

Paul: Mm-hmm (affirmative).

Marcus: Mm-hmm (affirmative).

Andy: Everybody says that. The web isn't print. And no, it isn't print because people don't use the web in the same way that they read a magazine, or consume a newspaper, or whatever the medium we're talking about. But there are fundamental aspect of design that transcend … God, I hate that word. Transcend the medium. And layout is one of those things. Particularly layout proportions, et cetera, that are linked to things like typography. So in other media, people still remember how to use layout to enhance the meaning of a story. They use layout to help communicate something about the content that they're presenting.

So for example, if you think about for example tension versus harmony, or asymmetry versus symmetry. All of those things say something subliminally to somebody that's reading or consuming that content, in exactly the same way that we know that, if you choose the wrong color, you're gonna give the wrong impression. If you set your type … If you set your financial report using market felt, you're not likely to give off the professional impression. I've graduated from Comic Sans. No, I joke.

Paul: Yeah. And I did notice that. That was-

Andy: Yes.

Paul: That was good.

Andy: Yes.

Paul: Yeah.

Andy: But we should know by now that the typefaces that we choose play an important part in somebody's understand of the content or the design. And layout isn't any different. But we've kind of not had … We've either not had the opportunity, or we've forgotten, or I have no idea what the reasons are. We've forgotten that layout plays an equally important part of that. And one of the great things about CSS Grid is that it lets us much much more easily create layouts that are appropriate to small screens, appropriate to medium size screens, and appropriate to big or even bigger screens without having to resort to the sort of layout hacks, or all the limitations of what we've been used to.

So it's really about … I mean the whole thing comes down to art direction is what it comes down to. And it comes down to looking at the piece of content, understanding the story that you're trying to tell. And then being able to produce a series of layouts really easily, independent of the content order if you need it to be. And that's brilliant. That's absolutely brilliant. And so it's not about … We've all seen people do, "Oh, let's take a magazine layout and redo it with CSS Grid." Or, "Let's reproduce a poster from the Swiss School of Graphic Design in CSS." Good, they're all great. These technical demos are all brilliant for showing off what we can do. But they're kinda missing the point in a way. And that's what I think what we need to do, as well as talking about the technology, and the how. We need to talk about the why.

Paul: I mean the thing that excites me the most about CSS Grids from a … 'Cause obviously I'm more leaning towards the user experience, usability side of things. Is that it makes it easy for you to break the grid, which is kind of ironic really. The whole thing is called CSS Grids. And the thing I like most about it is the fact that you can break the grid. So for example, I don't know. If you look at something like my own website, I've got images that break out of the central column to the left and to the right. I've got pullout [inaudible 00:28:39]. All of that stuff is incredibly faffy to do compared to doing it in using CSS Grid.

And for me, that's exciting because it enables, it gives you more tools to create a visual hierarchy for a page, right? So let's say you wanted to draw people's eye to a call to action, for example. There are lots of ways that you can do that. You can draw their eye using color, animation, size of it, spacing around it. All of those kinds of things. But now with CSS Grids, it makes it easy for you just to offset it slightly from the column that it's in, which gives it a little bit more … Makes it grab your attention a little bit more. So it's those kinds of things that I like.

And the other thing that I really like as well, is that traditionally, in looking at a kind of grid layout on website, everything is made up of boxes essentially. Rectangles. Now, to some regards grids are the same, that you've those kinds of column and those rows. But Grids will allow you to combine columns and rows together to create almost like a Tetris effect. So you can have stuff that isn't just a rectangle, but actually more interesting shapes that you load content into. So for me it all comes down to the ease that all of this can be done compared to the past.

Marcus: I've-

Paul: But the big question … Sorry. Go on.

Marcus: No, I'm feeling more and more the need to Eeyore here.

Paul: Right. Go on.

Marcus: Well, I mean we've been experimenting with CSS Grid for a while. And we've found that it doesn't yet do everything we want it to do across all of the browsers that our clients are using.

Paul: Yeah.

Marcus: Which is an issue. So are we talking about something that will be great in a year's time, or two years time? Or have we just not found the fight ways yet? Because we use aspects of it. But we're using all of it.

Andy: Well, okay. So let's unpack that a little bit. You can tell that I've been working in a business for a year, can you? 'Cause now I know all the buzzwords. I'd like to leverage my experience.

Marcus: Oh, stop it.

Paul: Oh, shut up.

Marcus: We can find some synergy, definitely.

Andy: Yes, we can. As long as we're all aligned on our strategic priorities.

Marcus: Go on.

Paul: Go on then.

Marcus: Unpack it, Andy.

Andy: This is a really good question. And I saw a Tweet from somebody. I can't remember who. I think Rachel might've retweeted it the other day. About Grid being in something like 83% of contemporary browsers. So that's great. But there will always be, and has always been this argument about, "Well, what about IE 11, or 9, or 6?"

Paul: Yeah.

Marcus: And 6, yes. We do still need to support that.

Andy: So the same argument applied to Grid today as applied to border radius back in the dawn of time.

Paul: Yeah.

Andy: And really I think that it comes down to what is an appropriate experience for people who happen to use particular devices, or browsers. And today I don't really think about browser issues any differently than I think about responsive issues. And if I'm more than happy for somebody on a small screen like an iPhone 2, and there are other phones available. Then if I'm happy for people using those devices to get pretty much a kind of a linear layout with one or two things moving here and there. Then why can I not just use the same approach for somebody that's using a browser that three or four years out of date?

Why do we still think that everything has to look pretty much the same across all browsers? And there are plenty of ways in which we can use fallbacks for example, for something like CSS Grid. We can use the app supports property and feed alternatives for browsers that don't support it. But why? Why are you trying to give older browsers the same experience?

Marcus: I think what it comes down to is a bit dull. But it's really what browser is your client using? And if they are using something that doesn't support the kind of layout ideas that you've been discussing, then we have to have a discussion with them and say that, "We can do this in these areas. We can't do it over there." And some clients are accepting of that, and others aren't. And that's basically the issue that we're having at the moment. And as you say, Andy, we've been through this with … We've had our developers saying, "When are we gonna drop IE 7? When are we gonna drop IE 8?" And eventually it happens and then we can move into a new technology. I guess I'm just saying, is now the time to start using CSS Grid? 'Cause I don't really know. Or should we really be waiting a year or so before IE basically is dumped and it's gone?

Paul: No. It all comes down to numbers in my opinion. That although I accept what you were just saying about the politics of it, that if the client is using something that doesn't support Grid, then it's gonna be a harder sell. But in truth it'll come down to analytics. And this is a problem that we get caught up on so much as web designers. I'm a great believer that the web should be universally accessible to everybody no matter what the device or browser they're using. But I'm also a believer that you should design for the majority and not the minority. And this is where it goes back to Andy's point that, why does everybody need the same experience? If you adopted Grids today, you're not saying, "We're dropping IE 8." Or even IE 6. Right? All you're saying is that that will just get a basic accessible experience, right? With a single column layout and all of the rest of it.

Marcus: And I agree with that entirely, Paul.

Paul: So really if the majority, if you look at your analytics. And the vast majority of people 80% or whatever, are using browsers that can support CSS Grids, then you should be supporting it. Now what that percentage is, is entirely up to you. As to where … Or up to the client as to where they wanna draw the line. For example, if only 50% of users were using CSS Grids or could support CSS Grids, then I probably would be inclined not to move across to it.

If 75% were, then I would probably be inclined to do it. The other aspect of course of this as well is a budgetary one. If the client … You say to the client, "Sure, we can support these older browsers, but there's gonna be additional work involved in order to do a better and more extensive." You could for example reproduce the entire Grid layout in floats if you wanted to, in order to provide loads of backwards compatibility. But that's, it's all just dependent on what the client is willing to pay for. The truth is, CSS Grids are gonna be cheaper and faster. So are they willing to compromise the experience for a minority for a cheaper and faster website?

Andy: See, I'm amazed but I actually agree with Paul. It happens once in a while. But the one thing to sorta qualify that just a little bit, is that I'm learning this about business in general, is the fact that the majority of your clients, the 80% of your clients may be using modern browsers. However, that doesn't mean to say that the 20% are less important. In fact, if the 20% of your customers contribute most of your revenue.

Marcus: Yeah.

Andy: And this is something to look at, then just because 80% of your customers that were you only break even are using modern browsers. It doesn't mean to say that you should go ahead. So you need to look a little bit more-

Paul: Yeah.

Andy: … deeply at the analytics. I am reminded of a story though. When you talk about a client, Marcus. I'm reminded of a story that Christian [Heidelman 00:38:37] told me many years ago, which I love. And I've stolen this story multi … Or retold this story multiple times. But back in the dawn of time when Christian was working actually developing websites for clients. He encountered a client, or the boss of a client that basically said you know, "No. All of our headings must be using our corporate typeface."

Paul: Yeah.

Marcus: Yeah.

Andy: Now this is back in the day before we use web fonts or [Cufon 00:39:16], or [sifer 00:39:17], or all those-

Paul: Yeah. Yeah.

Andy: … things that only eight people now remember. And rather than having to explain to the client … There's always this kind of, "Oh, you've got to educate your client," thing. Rather than educate the client about the increased time it would take to develop the site and the accessibility issues, and all of that kinda stuff, Christian just said, "Yes, that will not be a problem." And what he did was, he just added the name of the corporate font to the beginning of the font stack. So-

Marcus: It appeared on all of their machines. Yeah.

Andy: Yeah. So image that the corporate typeface was Whitney, or something like that, which is not commonly installed on different browsers. He just put, "Whitney Helvetica Sans Serif." And then everybody in the organization saw Whitney for the headings, and nobody ever knew that outside in the real world they just saw Helvetica, and everybody was happy.

Paul: I mean that's like the story of people that have targeted certain people's IP addresses when they hit a website knowing that, giving them a slightly different experience, because you know who they are.

Andy: Yeah.

Paul: Yeah. I-

Marcus: [crosstalk 00:40:39].

Paul: I'm not so keen on that.

Marcus: You wouldn't get away with it these day with internal web teams knowing a bit more about what they're talking about. But yeah. Yeah. What it really comes down to, the point I'm trying to make is, what do we call a modern browser? That's what it is. And-

Paul: I don't know. But I disagree with the premise of that question. Sorry to sound like Jeremy Keith there.

Marcus: You did very much so there.

Paul: Yeah. I know.

Andy: You did sound and awful lot like Jeremy Keith there.

Paul: But I don't think it's anything to do with a modern … That we only support modern browsers or any of that. What you still are not getting through head Marcus-

Marcus: I am getting it through my head.

Paul: … if I may [crosstalk 00:41:17]-

Marcus: You're missing my point.

Paul: Okay. Well perhaps it that way round. But why does it matter what a modern browser is or not if you accept that different browsers will provide different experiences?

Marcus: Yeah. It comes back to the very first thing I said. It's about … Assuming that clients aren't kind of maybe as … They're more up to date with their thinking now than they were 10 years ago. So they kind of do understand quite a lot of what we're talking about. But the internal browser is let's say, IE 11. And everyone's using that. And it's what they're gonna be sharing all the work of this wonderful new website that's being built for them. If that doesn't support certain things, then you've got a discussion to have. That's [crosstalk 00:42:04]-

Andy: You have got a discussion.

Paul: Yeah. Absolutely.

Andy: You have a discussion to have. And-

Marcus: And you might choose to take a different view because of the response that you get after that discussion.

Paul: [crosstalk 00:42:14] And that's all fine.

Andy: Yeah. It is fine. And how many of those clients are edge cases these days, Marcus?

Paul: Not that many actually.

Marcus: No. Sadly not.

Paul: But it depends on the sector you work in, you see Andy? You work … The kind of word you do is with hip, trendy, cool organizations.

Andy: Oh, yeah. Exactly.

Paul: Or at least that's what I imagine in my head. While Headscape works with boring public sector kind of institutional monoliths. So as a result the upgrade process, the browsers is really slow within the organization. The IT department often is under-resourced, which means that upgrading is difficult. Blah, blah, blah, blah. Now, you're right, Marcus. You're spot on. It needs to be a conversation. And if the client thinks it's gonna be too hard a sell internally, then they get IE 11 and you don't use CSS Grids. And that's fine. But that doesn't meant you shouldn't have the conversation I'm guessing.

Andy: Yeah. And-

Paul: And also … Sorry to interrupt you, Andy. Also when you have that conversation with them, you gotta talk not just about, if you've turned around to them and say, "Well, if we build it with CSS Grids, it's not gonna work in IE 11." Then they're gonna go, "Well, we use IE 11. So we can't use CSS Grids." But you've gotta sell it in. You've gotta say, "Look, we wanna design your site so it's future proof. So it's gonna last into the future. So it's gonna be flexible. So it's gonna accommodate responsive design better. So it's gonna use less code so the performance is better." Et cetera, et cetera, et cetera. And then say, "Do you want that? Because if you want that, then this is the trade off." So sell it, man. Sell it.

Andy: Well-

Marcus: Okay, Paul.

Andy: … here's a secret, right. And yeah, I can disclose this because there only me, you and Marcus actually listening to this, right?

Paul: Well, of course.

Andy: But I work for a company where we;er in the financial services sector. And our browser support matrix, call it whatever, includes IE 11. That's a first fact.

Paul: Yeah.

Andy: The second fact is that I work with a lot of very well-informed and very ambitious developers who would love to do everything with CSS Grid. And they know all of this stuff. And the project managers and the CTO and whatever would all love to use CSS Grid. But the fact of the matter is, is that the product that we make has a big audience that uses IE 11. So it would be commercial suicide for us-

Paul: Yeah.

Andy: … to make something which … And that's about appropriateness. However one of the things that we are doing is all of our internal stuff, all of the documentation for the design language and the patent library, and all of our internal communications, and everything that we make for each other to consume is all CSS Grid. And you know, that's okay. Because we get all the advantages of using it for our internal stuff. And then yes, Marcus, a year down the line there may be a decision that we'll adopt it for certain parts of the product or whatever. So it is about choosing the right tools and the right technology for the right job. And I've spent years just beating people over the head for being not very ambitious with this stuff. But I still think that it's important that things that we do are appropriate.

Marcus: By the way, I-

Paul: Let's talk.

Marcus: … don't like being Eeyore very much. I like being mister positive. But I felt that this is required in this [crosstalk 00:46:13]-

Paul: Yeah.

Andy: Yeah. [crosstalk 00:46:14], well somebody has to be.

Marcus: I am definitely more of a Tigger. Yeah.

Paul: You're just channeling Chris. That's who.

Marcus: Yes. Bless him.

Paul: Chris is definitely Eeyore.

Marcus: He is Eeyore. "It's all gonna go wrong. Everything."

Paul: I do wanna come back in a minute to actually the process of learning CSS Grid. But before we do that, let's just talk about our second sponsor.

Andy: Oh, is it Fullstory?

Paul: You can read. Well done. Yes, it is Fullstory. Session recorders. I absolutely love them. I think they're a really valuable tool. And Fullstory is the best session recorder out there. So a session recorder is somebody … It basically records a session that a user is having, and provides you with a video where you can watch it back. Obviously it's all anonymized. You don't know who it is. You can hear what they're saying or what they're thinking, or anything else. You literally see their cursor moving around the screen. But that is incredibly useful for understanding a little bit more about their behavior. And if you're not running a session recorder already, I would really encourage you to do so.

Analytics are great. Google Analytics are wonderful, but they don't tell the whole story. They don't give you that nuance of user behavior as they move around a page, why they pause, how long they scroll for, all that kind of stuff. So analytics are great, but they don't give you enough detail. Usability testing is also great and incredible, but the only downside of them is that people don't behave entirely naturally, because they know they're being watched. So session recorders kind of fit in a sweet spot between those two. So it gives much of the insights of usability testing by any means. But it also gives you the numbers and the volume 'cause that's the other problem with usability testing is you can't test that many people.

So it gives you a lot of data to work with, a lot of numbers to work with. Now, don't get me wrong I'm not suggesting that session recorders replace analytics or replace usability testing. But there's something else that should be a part of your testing approach, and it's really valuable. So if you wanna give session recorders a go free of charge, you can go along to fullstory.com/boag. And you can sign up today and you'll get a free month of the Pro account absolutely free of charge, or one month is a free trial. Whatever. You get a month for free. You don't have to enter any credit cards or anything like that. And at the end of that month you can continue to use Fullstory, it'll just limit you to a 1000 session per month. But in most situations, that is pretty damn good.

So I wanted to circle back to this idea of learning CSS Grids. Because I always select a bit of reading material. And obviously a podcast is not the place to teach people CSS Grids. But Andy, I wanted to hear your experience of how did you learn it? How did you find it? Was it an easy transition to make?

Andy: I'm still learning.

Paul: Right.

Andy: And I'll let you into a little secret. One of the biggest factors in me really sitting down and trying to figure this stuff out was that I got an offer from a well known web-publication.

Marcus: Yeah.

Andy: Right? Smashing. To write an article about CSS Grid. And I did what I have done for the last 20 years when somebody says, "Oh, can you do this?" Is I go, "Yes, of course." And then I actually sit and figure it out. So I have tinkered with Grid before. And I've watched various tutorials, and read different articles. And it never really clicked for me until I sat down and started to write code myself. And I think that's the biggest thing that people should focus on at the very beginning is, get a basic understanding of the concepts. And then do what we used to do in the dark ages, which is to actually write html and CSS and figure out what works and what doesn't work, and how things behave.

And it's totally eye-opening. And one of the interesting things about Grid is that there are several different ways in which you can make a layout. And the podcast is not the best way to show you. An article probably is. But there are a couple different ways you can do it. First of all you can say, "Right. I'm going to define my grid." And what that means is, you tell the browser how many columns you want. Or you tell the browser to repeat a number of columns so many times. And you tell the browser how wide you want either all of those columns or some of those columns to be.

And there's some brilliant new properties in Grid that we can use for defining the width of those columns. So for example, there's a new thing called the fraction unit, which is brilliant. It's the FR. And if you say, let's imagine you've got two columns. And you put 1FR, 1FR in your grid template columns. That will create two columns, 'cause you've made two declarations that are both taking up the same amount of space that's available. 1FR ,1FR.

Paul: Yeah.

Andy: If you change it around and you go, "I'm gonna put 1FR 2FR," then the 2FR column is going to take up twice as much of the available space as the one that's got 1FR.

Paul: Oh, that's so nice, isn't it?

Andy: It's very clever. Now, a couple of other properties that you can use, you can use m's, and can use percentages, you can use pixel values and all of those are important. You might choose m's if you want your layout to be in proportion with the text size. That's a really important thing. You might have pixel if you just want a certain amount of margin either side for example. Or you've got some known quantities. The other thing that you can do with CSS Grid, and this is awesome. It's called the min-max property. And what you do is, you put min-max and then some parenthesis. And then you have what is the minimum value, let's say 200 pixels, and then a comma. And then what you want the max value to be. And the max value can be auto.

Paul: Right.

Andy: So basically never get below 200 pixels and then expand to whatever you need it to be.

Paul: Nice.

Andy: And this awesome. So one of the ways in which you can make a column layout is to say, "Right. I want to repeat 12 columns of 1FR." That will give you the basic bootstrap grid.

Paul: Yeah.

Andy: And you can also use the grid gap property to define what the gutters are going to be. So you no longer have to worry about box sizing, or padding, or margins. You know the stupid thing where you always put margin-right on everything, and then you had to zero out the margin on the right-hand column? You know?

Marcus: Mm-hmm (affirmative).

Andy: All of that is just gone. And what you can do when you've defined your grid, and bearing in mind that you can define some … Very easily, you can define some fabulous different grids. My website, have a look at stuffandnonsense.co.uk. My grid is a symmetrical grid. But the column layout is 2FR 1FR, 1FR 2FR, 2FR 1FR, 1FR 2FR. So I've got this mixture of wide and skinny columns. And it took me 45 seconds to actually write that bit of code.

Paul: Yeah.

Andy: Now, when it comes to actually then arranging, 'cause what you gotta remember with Grid is that you define the grid. And then you can apply the grid to various different properties. So you might apply it to the body, you might apply it to a header or a container, or something like that. Then you can say, "Right, inside that container, I've got," for example, "I've got main content. And then I've got a side," or sidebar, or nav, or whatever. And you can say, "Right, I want my main content to start on column row two. And I want it to end on column row eight. And then I want my sidebar to fill in the gaps."

You could do it that way. Or you could say, "I want my main content to start on column row 2=two, and span four columns." Right? Number of different ways you can do it. And that's great, and that's the way that I learnt first of all. And to be honest, it's a complete ball-ache. It's not the best and most visual way of kind of laying things out on the grid. And the article that I'm writing right now is about the other way in which you can do it. Which is to use this thing called, grid template areas. Now this-

Paul: All right.

Andy: … this is genius. Whoever came up with this needs a Nobel Prize.

Paul: Yeah. Okay. Go on.

Andy: Nobel Web Prize. Now, what you do is, you define your grid in exactly the same way. So let's imagine that we've got … We've defined a four column grid let's say. And they're all even. So you've got one, two, three, four going across the page. Now, all of these things I'm talking about you can do with rows as well. So imagine you've defined a four column grid with a three row grid, yeah? You got four columns, three rows.

Paul: Yeah.

Andy: So think about that for a second. You've got, dot, dot, dot, dot in the first row. Dot, dot, dot, dot for the second row and for the third row. That's your grid basically. That's your wireframe, your skeleton. Your kind of ASCII Tetris outline, right? Then here's the brilliant thing. What you do is, you use grid template areas and then for each row, wait for this, you use dots. And you separate the dots with a period … Sorry, with a space, right?

Paul: Yeah.

Andy: And each one of those dots represents the space created by the intersection of the columns and rows. In old school Mark Bolton terms about grid design, we call them spacial zones, or modules, right? And-

Paul: This is doing my head in, Andy.

Andy: Right. Okay. So wait for this one. And then imagine you got two bits of content. Imagine you've got two bits of content, one of them is called Paul and one of them is called Marcus.

Paul: Yeah.

Andy: You can just say, "Dot Marcus, grid area." And then you give it a name. And then what you do is, you take that name and then you put that name, and you replace the dot with it.

Paul: Oh, okay.

Andy: So you then have, "Dot Marcus grid area," I don't know. Let's just say we're gonna call it, I don't know, "Breaking Bad." And then you put that word to replace the dot. And then the content from that div, or that nav or whatever will go into that space. And if you use the same name to replace two dots, and those two dots join onto each other, then you create this spacial zone. Which is completely unlike anything we can do with floats. 'Cause we can leave these areas empty. Or we can have things that kind of pull out into the columns or whatever. And it's just brilliant. And the best thing is-

Paul: So-

Andy: … right? The best thing is, if you all you need to do is you wanna change the layout based on available space. All you have to do is just change the grid. You don't have to change the grid area names. You don't have to change anything. Just change the layout of the grid with those dots and you're done. It's genius.

Paul: So Andy seems to be having some kind of episode right now. We'll leave him doing that. No, Andy thank you for that. I mean, basically this is all … If your brain is melting as much as mine is right now, all of this is stuff that you need to go and read, and see.

Andy: Yes.

Paul: It makes it so much easier when you read and see it. And the definitive source as Andy said earlier, is Rachel Andrew when it comes to this kinda stuff. She's written some great stuff. And there's some great resources. So there's three that you're gonna wanna check out. The first is gridbyexample.com. All right? So that is a site that Rachel manages. And it's got loads of, as the name implies, examples of grids that you can go and have a play with and see how they work. There's also video tutorials on there. It really is an amazing, amazing site that you definitely wanna check out.

The next one that you might also wanna check out, again, all by Rachel Andrew this time is boag.world/learngrids. And I'm just going on that myself, because I can't remember what it was. All I remember was it's really good. Yes. So it's not working. There's a link. Of, that's 'cause I put, "Grid," rather than, "Grids." Sorry about this, guys. I am a professional, honestly.

Andy: [crosstalk 01:01:25].

Paul: I know. Leave me alone. Yeah. So it's an article on Rachel Andrew's site which is kind of an introduction to learning grids and grid layout. She gives loads of examples in there. It's a really good starting point to learn. And then the final one is a presentation by Rachel looking at Grid. So if you preferred to watch a video presentation, introduction you can do that too by going to boag.world/gridvideo. Absolutely superb. Definitely check them out. [crosstalk 01:01:57].

Andy: I have one more to add.

Paul: Go on then, Andy.

Andy: No, I've learnt about this today. It's 25 videos by [Wess Boss 01:02:07].

Paul: Yeah.

Andy: Wess Boss, it sounds like an amplifier brand. Or maybe some toilet cleaner. But apparently it's this really good guy in Canada. And he's actually put 25 videos together which are all free, sponsored by Mozilla. And you can find them at cssgrid.io.

Paul: Cssgrid.io. Okay, cssgrid.io. I'm writing it in the show notes so that I include it. All right. So I would really recommend you start off by checking out list above. Start having a play. Start experimenting. Start trying to create stuff yourself. And then over time look at for a low priority, small scale project you can apply it to and go from there. Marcus, do you have a joke for us?

Marcus: Yes. We've been going on for ages, so I'll make it very quick. Little Tim Vine joke. "I had a dream last night that I was cutting carrots with the Grim Reaper. I was dicing with death."

Paul: Great. Thanks.

Andy: Yeah. That was not your best, Marcus.

Marcus: It wasn't mine. Not mine. You know.

Paul: Yeah.

Marcus: [crosstalk 01:03:21].

Paul: But you're the one that picks them and then tells them.

Andy: Can I tell one?

Paul: There you go.

Andy: Can I tell?

Paul: Go on then.

Andy: Why did the two melons have to … Sorry. Start again. Edit this out, 'cause I'm not a comedian.

Marcus: No.

Andy: Why did the two melons have to get married?

Marcus: Go on.

Andy: 'Cause they can't elope.

Paul: Now see, that's awful. That's worse than mine.

Marcus: That is worse.

Andy: [crosstalk 01:03:48] actually [crosstalk 01:03:49] waiting for, was it?

Paul: No. And do you know the thing that every minute of this podcast costs me a dollar in transcription fees. So that joke cost me a dollar. I paid money to listen to shit joke. Anyway, and then probably another dollar just me ranting about it, so there you go. So thank you very much for listening to this week's show. Andy, thank you for coming and joining us. As always it's a pleasure. And next week we're gonna be looking at how to build a better design system. So join us then when we come back. But for now, thank you very much and goodbye.

Andy: Bye.

Marcus: Bye.

Encouraging Clicks Masterclass

Preorder my self-learning video course for $100 off!

Boagworks

Boagworld