Looking at the next generation of CSS with Jen Simmons

Paul Boag

This week on the Boagworld Show we talk about advanced CSS techniques with Jen Simmons.

Skip to the interview (18:36) or this week’s links.

The transcription for this week’s show has been kindly provided by the team at Template Monster. Awwwards are responsible for Marcus’ joke, but don’t hold that against them! Support the show

Paul: Hello. Welcome to boagworld.com, the podcast for those who are involved in designing, developing, and running websites on a daily basis. My name is Paul, joining me today is Marcus and Leigh again.

Marcus: Hello.

Leigh: Hello.

Marcus: It’s amazing.

Paul: Yes.

Leigh: Two in a row.

Paul: It’s almost like we recorded them back to back.

Leigh: It is, isn’t it? What I forgot to mention in my earlier poorly state –

Paul: Right.

Leigh: I even –

Paul: Are you sure you are feeling better now, because you’ve had a whole week to recover?

Leigh: I do feel a little bit better. I had a little wander around Winchester and went and looked at the Cathedral which is lovely but no, I need to bring up the music.

Paul: Oh yeah, you’re a bit bitter about this aren’t you? One criticism from you then.

Marcus: Oh, I just remember I was meant to do “Yee-ha!” right at the beginning, as the fading hillbilly music goes.

Leigh: I’ve got to say that I probably had more luck for this one than I did the last one.

Marcus: Excellent.

Leigh: There you go.

Paul: I think it’s lovely, actually. My only problem – I have a consistent problem – with all of your music that you’ve ever produced.

Leigh: There’s too much of it.

Paul: Yes.

Leigh: There are too many notes.

[Laughter]

Paul: It’s basically, back me up here Leigh. If you listen to a podcast, week in and week out, what’s the most annoying thing? It’s hearing the same intro and having to wait for it to end.

Leigh: Oh I was going to say the adverts, but obviously that’s not the right thing to say. Yes, it’s the music.

Marcus: Which do you hate more when you’re watching a television program on a commercial station, the music or the adverts?

Paul: I tell you. You ought to listen to my son because he’s got into Star Trek and all these old sci-fi programs. And every bloody episode he goes, “Oh, this intro’s going on forever. Oh, it’s so annoying! Because of course modern programmes have really short intros, don’t they? If you think about “Lost” or anything like that, it flashes the logo up and then you’re done. But something like “Deep Space Nine” it goes on for half an hour!

Marcus: That’s good for him to start appreciating things that last longer because a good intro sequence is a lovely thing, can be.

Leigh: Yes, I’m thinking of a couple of Netflix series like “The Killing” and “House of Cards” with the intro sequences.

Marcus: Oh, “True Detective”, Ohhh!

Leigh: Ahh, I’m not sure I’ve seen that one but..

Marcus: Fantastic! It’s a lot to do with the music, kinda really deep sounds.

Leigh: Yes, I would say they’re some of the intro sequences are the best bits!

Marcus: [Laughs] There we go.

Leigh: Really?

Marcus: Yes. So there you go. I think we’ve gone in full circle there, Paul?

Leigh: But anyway, the intro music is very happy and very jolly but yes maybe a little bit shorter, yeah. But when you’ve written it, the temptation is there.

Marcus: And also it’s got a kind of twelve bar blues in there. So it’s kinda like I’d rather just keep on the same chord all the way through. Yes, I’ll just do that – boom, done.

Paul: You’re using words I don’t understand. Can we move onto a much more important subject?

Marcus: What, like CSS?

[Snores]

Paul: It’s no, no, no, no, not CSS.

[Laughter]

Paul: No, much more important than that. This is my last trip into the office –

Marcus: Bollocks is it!

Paul: – as a Headscape employee.

Marcus: All right, yeah. [Laughs]

Paul: And you’re going to miss me.

Marcus: It’s all kind of semantics, but you’re still the Headscape Director.

Paul: No. Yes, but that don’t count for anything.

Marcus: Course it does.

Paul: It’s not that. I’m not going to do anything. You don’t expect me to do stuff for you.

Leigh: Loads Paul, you’ll be amazed.

Paul: So what I wanted to concentrate on is what the two of you are going to miss most about not having me around?

[Ponderings…]

Marcus: Umm…

Paul: Any time?

Marcus: Umm…

Leigh: You were never here when I came down anyway.

Paul: No, that’s true. So basically we’re saying this is –

Marcus: I’ll tell you what I’ll miss most about it, is it takes twice as long to edit the podcast.

[Laughter]

Marcus: There you go.

Paul: Fair enough. I’m glad that my presence is that important to you.

** Marcus:** I will miss the fact that we nearly always go out to lunch…

Paul: That’s true.

** Marcus:** …on the few occasions that you do come down.

Leigh: That’s why I always wanted you to be in because that would mean a lunch trip – possibly paid for?

[Laughter]

Paul: I see. I see. So I’m not the only one leaving Headscape at the moment? There is another person that we want to talk about, which is – Chris Sanderson’s leaving. He’s going off on his own – he’s doing his freelance-y thing. You got to check out his website because it’s very cool, isn’t it?

Leigh: It’s very nice.

Marcus: It’s very snappy.

Paul: It’s showing off which I suppose is what a website should be.

Leigh: Yes, showing your skills? Yes.

Paul: So chrissanderson.com and check out his website because he’s done a lovely job at it. He’s going to be doing design – well he doesn’t really know what he’s doing, does he? That’s the truth.

Marcus: Good sales pitch, doesn’t know what he’s doing!

[Laughter]

Paul: He doesn’t know what he wants to. He doesn’t know whether he wants to go and work for someone else, or contract or be a freelancer and that kind of stuff.

Leigh: Yeah, he’s trying to focus at the moment.

Paul: So give him a good job offer, he’s almost definitely going to go for it because he’s flailing around.

Leigh: He’s brilliant. He does everything. And he does it all really, really well.

Paul: How long have we worked with him?

Marcus: Thirteen years.

Paul: No, it’s longer than that.

Marcus: Oh, no right, well there was a bit – he’s worked for Headscape for 13 years.

Leigh: ’99, ’98?

Paul: It’s ‘98 I started working with him.

Marcus: Yeah and then we worked with him when he was about ten at Town Pages but then he left, didn’t he.

Paul: There was a gap, wasn’t there? For a little while. But basically since ’98.

Marcus: He joined Headscape February 2002.

Paul: That was incredible.

Leigh: And he was about ten wasn’t he but six foot.

Paul: And now he’s like seven foot and old.

[Laughter]

Paul: And grey, yes so – yes, I will miss Chris.

Leigh: But a very nice use on his website of lots of CSS and animations. Yes, so it ties in beautifully.

Paul: Ah see, Leigh is a professional.

Marcus: I’m so impressed.

Paul: What he doesn’t know is we’ve got to talk about the sponsor first but then – but there we go.

[Laughter]

Marcus: Oh wow, brilliant.

Leigh: Who is it this week?

Paul: You’re ruining this.

Leigh: What? They’re not going to pay you?

Paul: You’re undermining my money. They’re nice people as well.

[Heckling!]

Paul: Shut up! This is the last – they’ve been supporting us for five weeks – this the last time they’re doing it.

Marcus: Number 5.

Leigh: So perhaps really you can be as rude as you want?

[Laughter]

Paul: Okay, so this is Template Monster again.

Marcus: They do templates.

Paul: They do templates, right. Here’s my challenge. Do you remember last week I said there was going to be a game?

Marcus: Leigh loves templates.

Paul: Are you ready for the game? Are you ready for the game, children?

Leigh: Is there a game? Come on.

Paul: Name a type of website and we’ll see if they’ve got template for it.

Marcus: A type.

Leigh: Statamic.

Paul: A what?

Leigh: Statamic.

Paul: What’s Statamic?

Leigh: It’s a database-less…

Paul: No, no, no, no. I mean a business area like porn.

Leigh: Ah, see I thought you meant like wordpress or quadruple.

Marcus: So I can get Paul to put the word porn on his website?

Paul: They don’t have any porn sites.

Marcus: Yes!

Leigh: What kind of template site is that?

Paul: That was pretty – that was pretty impressive. Go on, Lee. You got to think of it now and it’s not allowed to be porn variation.

Leigh: Detective agencies.

Paul: Detective, oh. This game isn’t working out as I’d hoped. And yes, it has private investigators. Private investigators – How many results have we got here? We’ve got six results, six templates for private investigator – Try another one. Go on. Go on. Try another one.

Leigh: Ummm, umm, car wrapping services.

Paul: Car wrapping, that’s not a real business.

Leigh: It is.

Marcus: It is.

Paul: What’s that?

Marcus: I’ll tell you later – just have a look – car wrapping.

Paul: Car wrapping, right. Well I’ve got car dealers –

Leigh: No.

Paul: – car audio repair –

Leigh: No.

Paul: – car repair template –

Leigh: No.

Paul: – car tuning –

Leigh: No.

Marcus: No, no, no, no, no.

Paul: It’s got to be car wrapping, is it?

Marcus: Definitely, yes.

Paul: They’ve got everything, honestly.

Leigh: So, they haven’t gotten porn and they haven’t gotten car wrapping.

Paul: They don’t have car wrapping.

Paul: So they’re useless basically.

[Laughter]

Paul: Don’t use Template Monster because they don’t have porn and car wrapping. I’m sure you can combine that in some way but we won’t dwell on that. What’s car wrapping?

Marcus: You can go in and then basically get – if used like Chris – Chris Sanderson whom we were just talking about had his Gold Nissan 350Z basically wrapped in white plastic so it looked like a white car.

Leigh: Did he really?

Marcus: Yes.

[Silence]

Paul: That’s just silly.

Marcus: It’s basically like heat wrapping it with plastic effectually…

Paul: Shrink-wrapping your car?

Marcus: …so that it looks like paint.

Paul: I presume you don’t shrink wrap all of it. It’s not like the wheels and the windows just the paint-y bits?

Leigh: So you have a zebra skin car? If you’re really that stylish.

Paul: It’s almost like those big kinds of vinyl things that you can put up on walls with photographs stuff like that.

Marcus: Err, I don’t know what that is.

Paul: Yeah, yeah, yeah….. I expect they’ve got that on Template Monster too. So one other thing I’m going to try and claw it back and say something good about these people. Because I really like them, they’re really supportive you miserable sods! They do live demos of their website, of their templates.

So you can go into the template and you can see it to do the responsive thing like the Headscape website. In our case – oops, oops you’ve broken the mic – you know in our case study section, it goes in and it turns it round and shows you – well they do that as well.

Marcus: That is right, cool.

Paul: So they are cool because they’ve done something we’ve done.

Leigh: Oh, yes. I bet they did it before us as well.

Marcus: Probably. Who knows?

Paul: So anyway that’s enough for them. You two are useless.

Marcus: I was looking at a template the other day but I haven’t mentioned it because it’s probably not one of theirs.

Paul: Oh go on, let’s see.

Leigh: What template were you looking at?

Marcus: It’s the Avada template. It’s supposed to be THE number one WordPress template.

Paul: Avada, A-V-A-D-A?

Marcus: Yes. It’s very nice. Actually it does lots and lots of –

Paul: No, no – that’s not this kind of template. That’s a kind of more generic-y…yes, that’s not their kind of thing.

Marcus: Right. Let’s find it. Okay.

Paul: It’s a bad thing to bring up. Edit that out of the show.

Marcus: No. Sure.

Paul: [Laughs] Okay.

Marcus: You can.

Paul: Then what we will have to do then, instead is go on to our interview –

Leigh: Yes.

Paul: – with Jen Simmons? Now Jen Simmons is awesome. I went to – where did I first hear her speak? I can’t remember the conference now. They’re all blur together.

Marcus: Oh, talking of conferences, Paul….

[Laughter]

Paul: I nearly got there…

Marcus: I want to go to a conference this year and I want it to be a really –

Leigh: South by South-West?

Marcus: No, not that one.

Paul: You want it in UK?

Marcus: I want a really good one. Yes, it can be in Europe but UK, yes, fine.

Paul: And what kind of things do you want?

Marcus: I like things sort of inspirationally type talks. I don’t want to go along and listen to people talk about code.

Paul: Okay, and then –

Marcus: I’d like to go to one.

Paul: Then your best bet? I have to say your best bet is probably Deconstruct if you want inspirational stuff.

Marcus: It’s a little bit too high a ground I think for what I’m after.

Paul: Okay.

Marcus: It can be. It’s always a rubbish time of the year, Deconstruct.

Paul: What about Smashing magazine’s conference?

Marcus: Ooh, yes.

Paul: That’s quite nice mix.

Marcus: You’re talking at that this year?

Paul: I don’t know. They haven’t invited me.

Marcus: That was March –

Paul: I don’t know.

Marcus: – last year I think or April.

Paul: I don’t think I am doing it this year. No, they would have decided by now.

Marcus: Goes away and has a look…

Paul: But they have loads of conferences all over the world. So actually it’s interesting for the listener as well.

Marcus: Yes, because – it was in Oxford last year.

Paul: It was in Oxford last year. I know. I was there, Marcus. I remember it. But they’ve got them in New York – Los Angeles I think.

Marcus: Okay, all right. I’m not going to pay to go to Los Angeles, alright?

Paul: I know. I know.

Leigh: There’s a good one in Portugal but I can’t remember what it is.

Marcus: It’s the 17th and 18th of March in Oxford again.

Paul: Yes, so there you go.

Marcus: To the tickets? Get your ticket…

Paul: This isn’t – I feel like we’ve – This has stopped being…

Leigh: Those people clicking on their laptops –

Marcus: Oh.

Leigh: – and looking for things.

Paul: Can I talk about Jen now?

Marcus: Oh, that’s too bad. Yes, carry on. I found something interesting [sighs].

Paul: Right so what was very interesting about hearing Jen talk is she talked about – She didn’t just talk or she didn’t just give a talk about CSS techniques. She talked about some interesting ones, CSS Techniques I never heard of before. But what I really like – you would have liked her Leigh – what I really liked about is she talked as well about, “Oh, all of our websites are looking the same. They’ve all got two columns of colour, and the header and the footer. And don’t you remember the good old days of the Web where we did circular websites and stuff like that?

Leigh: Oh, she’s yeah, I’ve listened to her podcasts and perhaps that’s infiltrating my brain. It got me feeling a bit whiny and maybe –

Paul: What’s the name of her podcast again?

Marcus: Web Ahead,

Leigh: Web Ahead, yes.

Paul: Link in the show notes that?

Leigh: Very good.

Paul: She went back to some of those early day websites where everything was circular.

Marcus: Crazy ideas.

Paul: And you can build them now in CSS. And also, she kept talking about print design as well because there’s so much gorgeous typography in print design where the typography is on its side or doing a little dance or I don’t know, whatever. And we can do that kind of stuff now. So she talked about that. She’s really, really interesting and I thought I have to have her on the show.

Leigh: Excellent, when was that she was talking?

Paul: I can’t remember where or when, which somewhat undermines the whole point.

Leigh: But it was recently?

Paul: It was relatively recently. And she beat me to it and got me on her show first. But I have now returned the favour and I can guarantee that you will enjoy this one, Leigh.

Leigh: Cool.

Interview with Jen Simmons

Paul: Hi, Jen. Thank you very much for coming on the show. It is very much appreciated. How are you? You’re doing all right?

Jen: Hello. Yes, it’s freezing cold here in New York City today.

Paul: Is it really?

Jen: Yes.

Paul: You’ve got snow and stuff, have you not?

Jen: No, we had no snow yet this year.

Paul: Oh.

Jen: People who are further north and northeast of us have but not – we’re right on the water of course. It’s New York so, no.

Paul: Okay.

Jen: No snow yet. Hopefully, I root for snow.

Paul: Are you one of these people that really enjoy snow at Christmas and that kind of thing?

Jen: Yes, not because of Christmas but I just – yes, I really like the snow. It’s beautiful and much better than a grey rain that we have until it starts snowing.

Paul: Yes, the problem is mind, the snow’s great when it first falls and then it gets all dark and mushy and disgusting and all the rest of it.

Jen: Yes, yes.

Paul: Let me just send – Marcus is now messaging me which is just typical, interrupting me. Go away. Go away – shoo, shoo! He copped out of being in this interview. He felt that CSS was not his thing apparently which I think is just rude personally. If I was you, I’ll be deeply offended.

Jen: I’m not

[Laughs].

Paul: Oh, well never mind.

Jen: Sorry

[Laughs].

Paul: Yes, he concluded that the conversation might get a little technical for him to contribute much of value which is fair enough. We’ll forgive him. So Jen, this is the first time we’ve had you on the show, isn’t it?

Jen: Yes, it is.

Paul: See, that’s just wrong, wrong, wrong, wrong, wrong. I think we don’t do – because you do a podcast as well, the Web Ahead. That’s right, isn’t it? I’ve got it right?

Jen: Yes, yes, the Web Ahead.

Paul: And you do interviews every week?

Jen: Yes, well, sometimes not but –

Paul: Okay.

Jen: It’s when I do it. Yes, sometimes it’s weekly and I bang them out every week. And then sometimes it’s a little bit of a break.

Paul: Ah, yes we have seasons so we go for a while and then we have a little break for a while et cetera. But we don’t do interviews every time. So I’m very impressed.

Jen: Ah, yes it’s always an interview because the show really is about Web technology and the future of the Web. And I want to talk about a topic each week. One topic and I don’t want it to be everything that Jen knows. I want it to be all the stuff that I don’t know.

Paul: Well, exactly. That’s why it’s so cool.

Jen: I need a different expert each week to come and sometimes I know quite a bit about the topic and we explain it together. But frequently, either what I know is wrong, and they correct me – which I love, I think that’s awesome – or I just don’t know and I get to ask questions, questions, questions because I’m…sometimes it’s something I’m trying to understand that I can just grill the person on what it is they know.

Paul: It’s great, isn’t it? It’s like free consultancy.

Jen: Yes, it is [laughs]. Like Mark Boulton understands grids in a way that I just want to know. So I’ll have him on my show and I’ll get to ask him for 90 minutes [laughs], all my deepest and secret questions about, “Wait. What?”

Paul: You’ve just now exposed exactly what we’re doing on this season of the podcast because we’re recording a master class season. So we’re looking at subject areas where we know a little bit but perhaps not as much as we should do and so we’re getting different people on.

I wanted you on because I wanted to talk about CSS. Now I’ve got this problem, okay, which is that there are people in Headscape who are just incredible at CSS that will – are doing all the latest and greatest and stuff like that.

And then there’s me who used to do a lot of CSS but doesn’t get to do a lot anymore because I do other things instead. And I’m slowly becoming a little bit out of touch with things. So talking about free consultancy, I’ve got you on essentially to tell me what I need to pay attention to. Is that okay?

Jen: That’s fine.

Paul: All right.

Jen: Let’s do it.

Paul: Let’s do it. So Jen, I wouldn’t start with the kind of advancements that we’re seeing at the moment because there’s well – not advancements – a better support, new upcoming stuff that is still in draft and all of the rest of it. What is it that’s really exciting you at the moment out there?

Jen: I’m excited about CSS shapes and about other layout technologies.

Paul: Okay.

Jen: Because… and it’s interesting because I feel like it’s one of these times when I am pretty obsessed with something that feels like hardly anybody else is paying attention to. I mean of course there are several people who are. But in general, everyone right now is all excited about SVG. And they’re excited about I don’t know…web components. And I’m like, “I couldn’t care less about web components honestly.

And SVG is interesting but I don’t really do a lot of illustrations and I don’t do a lot of animations so animating SVGs is just like technically cool but I’m getting really obsessed with the layout and with…

There are several different new things in CSS that are going to make it much easier to do different kinds of layouts. And I think we can use CSS that’s been around for a decade to do better.

I think we can get away from some really bad habits that we’ve gotten into and to stop with the sidebars and stop with the… like, everything in one long column. Why does it have to be everything in one long column? It’s even like a column where it just has two sides with a column or just two straight lines that go the entire height of the page.

I’ve been working on this website for the Web Ahead. I’m building a brand new website. And I’m playing around with, “What if everything sort of –?” And in that site, a lot of things are in rectangular boxes still, but what about stacking the boxes on the page so that you’ve got these just different shapes being on the page the way you might do a magazine layout or everything doesn’t have to be in that one-single column.

Paul: It reminds me of almost the very early days of the Web where we were still finding our way. We first had slice and dice and tables and you use the slice and dice stuff up. And you get really weird designs for the websites like circular Web pages and things like that. We’ve got so boring in between. Do you know what I mean?

Jen: Yes, and I put together a presentation this year on CSS layout and the new technology. And a big chunk, not big but I do a little chunk of that presentation where I pull out all of these old screenshots of old websites and show people because there are so many people who weren’t there in 1996 when websites were circles.

Everything was in this circle. I miss circles. Why can’t we have circles again? Why can’t we have triangles? Why can’t we have diagonal lines on a page? Why is everything – Everything is in this blog shape that was pretty awesome when it came out.

It was an innovation when it started. But for some reason, we got stuck in that one shape from 2001, 2002. If you look around the Web these days, you see sites that are not blogs.

They’re completely different kinds of sites and they’re still in that exact, same 500 pixel wide column with one or two sidebars of junk. And everything on the entire page has to fit into those vertical columns, and there’s no deviation from that except for the header and except for the footer. “Why do we even have headers and footers in that same way every single time, every single time?”

Paul: It’s funny, isn’t it? It’s very easy to fall into these things. It’s like you start doing Y-framing. It works so – I’m in a meeting with a client and we’ve got to the point where we want to start talking about layouts. And so, I stand up. I open up a flipchart and I start drawing. And it’s very easy sometimes to just start putting your or his ahead of block. Here’s the footer yes, here’s left-column, the right-column, et cetera and not to challenge the reason behind doing those things.

Jen: Yes, the question becomes “What goes in the right column?” What goes in the footer? Instead of going, “What’s the content we want to put on this page? What’s the order in which we want to put that content on the page? What’s the hierarchy, the visual hierarchy of that content?”

This thing is really important so let’s – we’re going to put it halfway on the page but we’re going to make it big.

Paul: Yes.

Jen: And this thing is going to go up at the top but it’s a little like we can whisper it at people. People who want the date can find it; but otherwise, we can make it small or we can make it light tight. We can make it the type be lighter or thinner or quiet in some way. And that’s how I design things these days. I really focus on figuring out the content. And then writing HTML.

No CSS, just writing HTML. And if I’m not – I usually design in a prototype but even if I were designing in Photoshop or something, I would put all the concepts just like toss boxes and crap on the page and be like –

I will just put everything randomly on the page and get the order right, get the hierarchy right, get the – this is an H2, this is an H5, or this is a big headline, this is a small headline. And then start figuring out, “Where do we want to put these things on the page?”

Paul: Absolutely. How is CSS helping with that? I guess part of the reason why we ended up with a blog post shape was because it was easy to float a column to the right or to the left. You’re saying that there are new layout options available to it. Are we talking about things like Flexbox here or is there other stuff going on?

Jen: I think I’m contradicting myself because I think there are two different things at the same time. One of them is all about a human habit in getting stuck in a rut.

Paul: Yes.

Jen: And you’re right that in 2001, it was really hard to understand how to use floats for CSS and how to stop using tables. And so we needed everything to be fairly simple. And we needed to use the same layout every time because it was so hard to write CSS layouts especially – We’re talking about IE4, IE5. You just didn’t have time to learn more [laughs].

Paul: Absolutely.

Jen: But now a lot of people don’t even have to bother with IE7 or IE8. They can just skip over. But even if you are supporting IE6 still which many people need to especially internationally, IE6 is a really great browser compared to IE4 [laughs]…

Paul: Oh, yes.

Jen: …and Netscape 4. We can be much more daring with floats, with the CSS we’ve been using for ten years. And I do think it is about habits at that point. It’s just about people not realizing. They go, “Step 1 – Pull out 960 Grid GS VISO templates. Step 2 – Draw things in boxes inside three columns on a 960 grid.” I don’t know. It’s like getting up in the morning and getting in your car and driving to work and realizing, “Oh, right. I wasn’t going to work today. I was driving. I was supposed to drive somewhere else.” I don’t know.

But then at the same time, there are new. There is new. There is new technology out there that’s making it possible. So in a way, when I talk to people and I do presentations on all about the new technology; and then when I sit down at my desk to actually work on something, I’m realizing, “Oh I’m not using anything new. I just have a new way of thinking about things.”

Paul: You mentioned right at the very beginning of this, you mentioned CSS shapes.

Jen: Yes.

Paul: This is where things get a bit embarrassing. What are CSS shapes? I don’t really know.

Jen: So, CSS shape is – Okay so there are several – I should make sure I’d mention them all. There’s a bunch of new things coming out. CSS shapes one of them. And CSS shapes – So, imagining you have a photo and imagining you cut that – like it’s a photo of a person and you’re doing like a bio on a conference website.

Right, so you have this photo of the person. But you decide or maybe a website for your podcast called Web Ahead [laughs]. And then you decide you want to take that photo and you’re going to cut it into a circle. You don’t want it to be a square. You don’t want it to be a rectangle. You don’t want it to be a square. So you cut it into a circle. And then maybe you did that with CSS Border Radius or maybe you did that in Photoshop and you actually, literally made it a circle. Who cares? I don’t care.

The browser is still going to think of that image as a square but – and let’s say you float it to the left. Let’s say you have the photo and you have a big, three-paragraph bio, the bio. And you float the photo to the left, the biography is going to wrap around that photo. And when it wraps –

Paul: But it’s going to treat it as a square when it wraps around it?

Jen: Yes.

Paul: I’m with you.

Jen: It’s going to treat it like a square, right. So we want – let’s say, “Oh my gosh! We want the actual text to make a shape of a circle and cut around –” This is hard to do in audio.

Paul: I know what you mean, like you get your magazines where the text flows around the shape of the images.

Jen: Yes, and so your text could actually be like in a curve and your photo could sit there with your text wrapping around the photo. And so CSS shapes is a property that you apply to the object that’s been floated. It doesn’t have to be an image. But in this example, I’m using an image. But it could be anything. It could be an empty tube. It could be another – It could be a pole quote. It could be an ad. It could be anything. And then you apply shape outside – Wait. Let me pull up the – where is my – I should pull this up so I can see the current – apply this –

Paul: This is nice that even a CSS expert has to refer to stuff to remember how to do it. How terrible.

Jen: I totally have to look this up because it’s brand new.

Paul: Exactly.

Jen: It’s shape dash outside.

Paul: Right.

Jen: So you just – okay – image, flow column left, margin right, margin bottom, shape a dash outside the colon, circle, and they put like an open bracket and a closed bracket, the curved smooth parentheses bracket.

Paul: Yes, yes. So can you say – probably geometric shapes, could you have some kind of mask?

Jen: Both. So there are multiple things. You can do shape outside the circle, which makes the circle, which is just nice, clean, simple example to talk about in an audio podcast. But there’s ellipse.

There’s border box where it follows whatever the border of the shape, like the thing that’s been floated. It just follows the border of that box. So you could use shape outside circle. For example, the one I just described or I could put a border radius on the box; and then, it would follow the curve of the border radius facing the box.

And you can use a mask. So you can make an image that is a mask and it will put the text or whatever is getting floated. It might be something else besides text into the places that are white or black? I forget, but into part of the mask and then the other one, yes. There’s an example that Adobe did of like a beehive. And there’s all these bees flying around the beehive and then they have a poem. And they want the lines of the poem to sort of jot in between the bees.

And so they use the mask in that. There’s an example up on CodePen. Adobe has Adobe Web Platform user account on CodePen and they put this example in there. And they did that with the mask.

And then the thing that gets the most excitement, the thing that people are most excited about when I’ve done this presentation, like people – All these things I show to people and they’re like, “Oh that’s cool. Oh, that’s cool. Oh, that’s cool.” And then I show them the polygon property and this particular tool that is in Chrome and they just – their mouths just drop. They’re like, “What?” It’s fun to stand onstage and look at 50 people with their mouths hanging open.

It’s shaped outside polygon and then you put a list of numbers, coordinates basically. And it makes a polygon shape right there in the CSS. It’s not a mask. It’s not SVG. It’s just specified exactly by the CSS itself. And it takes that polygon and it just wraps everything around that polygon. And it’s complicated to make that polygon. Especially if you were trying to measure something in Illustrator, something you go back and forth, so there’s a –

Paul: There’s a tool, isn’t there?

Jen: There’s a tool. There’s a plug-in for Chrome. The CSS shapes editor which is this Chrome plug-in that you can use that – It gives you this little extra pointer thing in the Web inspector. And you clickety-click. And then basically it brings up exactly the kind of tool that you would have in illustrator in the Web browser itself on the webpage. And then you can just click and add a point. And then drag the point around and click and add another point and drag that point around. Until you like exactly how it looks and you can grab everything and drop it into your CSS.

Paul: I can understand why people’s mouth hang open at that point. It’s just brilliant, isn’t it? You just think because what we’re talking about here and the combination of that kind of stuff and the layout stuff, and the typography stuff in CSS, basically you can do anything you can do in print now, can’t you?

Jen: Almost, there are some – as I’ve dug deeper and deeper. I’ve realized, “Oh yes, you know what that –? I want to do that, but that and you need this other thing that doesn’t exist yet. So there are still limitations but the limitations have moved to a totally new place that people haven’t realized that they’re at yet. And they’re still moving. They’re not going to stay there much like a lot of the other things in HTML and CSS that we’ve seen over the last five years.

There was a log jam. Nothing changed forever. Bam! The logs moved. And now not only is there a lot of new stuff but there’s this unending progression of more new stuff. And I think that’s going to happen with layouts. Flexbox was the first thing that we got. It’s now completely ready to go. People should be using it, checking it out. It doesn’t do everything, right? It’s just got to do one set of stuff that’s really cool.

CSS Shapes – What I just described is shape outside, the shape outside property which is part of CSS Shapes One – the specification was several different things altogether and it was too big. So they split it up. And Shapes Level One is shipping, is now in Chrome and in Safari, including Safari on iOS. So that’s a lot of mobile because a lot of people use Chrome on an Android or Safarion iOS.

Paul: And I’m guessing it’s not the end of the world. Okay, so let’s imagine we’ve got some text flowing around an image. And it’s flowing around in a circle or polygon or however you want to do it. Now, if then that function I’m imagining, correct me if I’m wrong, but if that functionality is not working, it’s just going to flow around it as a square isn’t it rather than as a circle?

Jen: Yes.

Paul: So it’s still going to work perfectly, adequately.

Jen: Yes, and Firefox and IE have not implemented CSS shapes yet. And I’ve tracked down tickets discussing them and it doesn’t seem like either company is making it a priority. So I was trying to get people to go and like, lobby: “Go. Sign the ticket. Go and say they should –”

Because there are a couple of tickets out there that the people could add a comment to and say, “Hey this is important. Make this happen sooner” because that’s how this browser sometimes makes their decisions about which things to implement, is how many people are coming to their ticket system and complaining that it’s not implemented [chuckles].

Paul: Yes, and that’s I think we often think that we don’t have any power over stuff like that. But we really do, don’t we?

Jen: Yes, we do. We do. I did that with the Flexbox because Firefox had held back in implementing the wrap around property and it was really holding back the ability to use Flexbox to do anything except a single line of stuff. You could use it for navigation. No problem. But if you wanted to use it for a big grid of things on a page, you couldn’t. And it was odd. It was driving me crazy. And I was wondering about it. And I chalked it down and I commented on it. A bunch of other people commented on it. And next thing you know, it was shipping.

Paul: Yay! So I mean you say that Flexbox is ready now. What do you mean by that? How far back does the support go? Do you use it for everything now or you’re still picking and choosing where to use it?

Jen: Honestly, I still have not completely wrapped my head around it. There are certain use cases that I clearly understand that it would be great for and I totally use it for those use cases. It’s not supported in IE8 or 9. But we already usually send IE8 and IE9 their own layout CSS anyway.

Paul: Yes.

Jen: Right? Or at least IE6 and 7 for sure. So you just use great, progressive enhancement techniques. And if you need to support those browsers, you just figure out a way to support them.

Paul: There are things like – I remember you talking in a presentation I’ve watched of yours about things like menu bars where you want equally space elements that the individual options in a horizontal menu bar.

Jen: Yes.

Paul: That’s the kind of occasion where you could go, “Yes, Flexbox is great for that. If the browser doesn’t support it, that’s not the end of the world” kind of thing.

Jen: Right, exactly. I’ve had this situation where I was handed designs in a PDF and somehow magically, in the world that designer lives in, all of the content is exactly the same length and they want it –

Paul: Do you not know that that’s how – in the designer world, that’s what they see? Yes.

Jen: I know I don’t live in that world that’s why I like designing with the real content. So in that world, the world of some of these designers, they – yes, and then it’s like a box. They want it to be a box of shadow – dropped shadow around. There’s a border on each – There are units of content. They’re each in a box. The box is a dropped shadow on it. And they want the whole row of boxes to be exactly the same height no matter what the content; because in their design, in their drawing, their Photoshop, photograph of a wish of a website.

All the contents the same height so of course the boxes are magically – there are 10 rows of boxes and they’re all magically, exactly 400 pixels tall. They’re not thinking about responsive and they’re being really stupid, and I want to go strangle them.

And I used to push back. I used to push back and eventually was like, “Why am I even letting myself be a front end developer. I need to stop it.” I need to just be in the room when the design is happening and be the designer instead.

But in a way, Flexbox fixes that problem because you no longer have to complain about it. Now, you can just be like, “Okay” and you implement that layout, that grid of boxes with Flexbox, not with floats. And then everything will be exactly the same height. And as things change because it’s responsive, and here there’s two columns, and here there’s three columns, and here there’s four columns. And so you have no idea of what height anything is going to be. It just makes it work.

So in this row, all the boxes are this height because one of the boxes is the maximum height of that row. And this other row, those boxes are so much less so they’re just like all of the boxes in that row are shorter because they can be. And in this row, they all have to be tall. And so they’re all tall.

There’s a beauty and elegance using Flexbox that’s just – We used to try to hack especially before responsive when things were fixed with and before – I don’t know. You’d use the CMS. And you try to put a character cap on the – You cannot use more than 100 characters in this sentence about this photo because otherwise the entire page layout breaks. You don’t need to do any of that stuff anymore. Just use Flexbox.

Paul: In a scenario like that, you’re still going to have to – do you provide a float alternative for IE7, IE8, IE9, kind of thing?

Jen: That’s what I would do. For IE6, 7, 8, 9 – I would just write an old school float layout and deliver it with a separate IE style sheet. And then when the boxes – like then, what would happen is the shadow and the border would be around the content for each box.

And it would look weird. But you know what? Nobody’s going to notice because they’re all focused on QA4, whatever, Chrome. They all like QA and Chrome. They haven’t even pulled out a tablet and it’s…It’s like…

Paul: The other thing with it, and I’d like to be fair, is even they use this, they’re not going to notice. And IE7, IE8, IE9 user is not going to be opening it up alongside the latest Safari and going, “Oh that’s not exactly the same.”

Jen: Exactly, exactly. And you can make it not look broken. Don’t let it broken. Just pretend that it’s 2007 over there in IE world.

Paul: Yes. Is it not that people are just – people have this very black and white view when it comes to CSS either something is supported or it’s not but actually –

Jen: No, it’s just not true.

Paul: No. It’s not, is it?

Jen: No.

Paul: It’s actually a lot much more of a shade of grey kind of thing.

Jen: Yes.

Paul: So I guess that what people are going to say to this is, “Why? Hang on a minute.” So I’ve got great, two grid systems here – one for Flexbox and one for using floats for older browsers.

Jen: Yes, but you already have to do that with IE. You already have the right different layout CSS for IE. That’s the problem when supporting old versions of IE is that you already have to do all that work.

Paul: So how do you cope with that? How far back do you go?

Jen: I don’t support those browsers. How do I personally deal with that in 2014? I ignore those browsers. But that’s not always possible especially if you’re – it depends on who your audience is.

Paul: So do you completely ignore them? When you say you ignore them, there is ignore and there’s ignore. This is personal, okay? For your personal situation obviously with clients, it’s somewhat different but because they have certain requirements. It might be that they’re – Internally within the organization, everybody is still stuck on IE7. So you have to do a proper job for them. But in your personal situation, when you say you don’t support, let’s say IE7 for example, are you saying that it just breaks? Are you saying that you provide them with the basic typography style shape, or are you saying you just deliver the naked HTML? Do you know what I mean?

Jen: I do. I think it depends on the project. And I think it depends on the size of the team and the resources that are available. And I think the most important thing is to all of those write – all over the code, HTML CSS, Java Scripts and anything else that might be involved with a sense of – Like a layer cake. Let’s build the most important stuff in the most conservative, solid way. And then let’s layer on top of it round after round after round of stuff. And in some ways, you don’t need to –

I don’t even open IE until I’m…because I work on a Mac, I have a MacBook Air. I’m just opening virtual box to run IE emulators. It’s such a taxing problem. I keep wanting someone to give me a Windows machine and maybe someday I’ll buy one but – That prevents me for opening Internet Explorer. If there was an Internet Explorer for Mac, I would open it very early in the process. But frequently, you can get very, very, very, far writing really great code without opening devices and none of us own every device that’s out there.

Paul: No, of course not.

Jen: None of us have all the computers. Many of us have not even heard of the things that – Like here’s a quiz. What’s the most popular browser in China?

Paul: I have no idea. But probably should know because that’s going to be an enormous audience.

Jen: Yes. China is – I spent two months there leading a front-end development team in 2010 and it just completely blew my mind. I couldn’t understand. All I really learned is that I have no idea. China is just a whole other – It’s amazing.

Paul: It’s like a separate Worldwide Web, isn’t it really? Even down to –

Jen: It literally is.

Paul: Yes, because even down to the fact that a lot of people don’t have websites there, they have stores or shop fronts on these big portal sites, don’t they? So there’s even a different attitude. Apple don’t sell on their own website. They sell on some big portal website apparently. I don’t know whether you’ve heard of that.

Jen: No, I don’t know. By the way the answer to the question is the UC Browser.

Paul: UC Browser.

Jen: Yes, the UC Browser. The UC Browser reached – I’m reading that from Wikipedia – 500 million global users in March of 2014.

Paul: Do we know what it’s built on?

Jen: It’s a mobile browser, it runs on phones.

Paul: There you go. It’s just a –

Jen: It depends. It depends on what you’re doing. If you’re building some small, little website for your local restaurant, then no; of course, it doesn’t matter what’s happening in China. But if you’re building some kind of a startup that wants to have a global presence, then you should really hire some Chinese designers and some of those Chinese developers. Some people who live in China, who have recently lived in China or some who visited, who have an understanding of what’s happening in the Chinese market because it’s –

In part because of the firewall. People don’t use Google to search because it’s blocked so they use – oh, what it’s called? B-A-I, something – Ah, this is where I’m failing. Yes, Baidu – Baidu search. And Facebook is blocked. So there’s a Facebook competitor. And YouTube is blocked so there’s a YouTube competitor. And there’s a parallel of universe internet happening.

Then also of course because the Chinese language – like of many, many Asian languages that’s written in characters. And the characters can go right to left. They can go left to right. They can go top to bottom. They can go bottom that you can [laughs] – The idea of orientation and design on the page is so different. And because also the density of text, you can put much more meaning in a much tinier amount of space so design – And also training is design. It’s driving around China, it’s like being in Las Vegas. It was just like crazy, flashy things everywhere. A whole other culture understanding. So, I don’t know how we wandered around. It’s in here.

But it’s just – Oh, I guess I was saying, there are so many devices out there, and there are so many situations that people are in that you don’t even know about. And people’s internet connection is going in and out and fast and slow. And Java Script, sometimes it runs and sometimes it doesn’t run. And people are using all sorts of assistive technology. And people, they have low vision. And so they really zoomed in or someone else can’t use their mouse. So they’re just using their keyboard and somebody else is – You have no idea what’s going on in some ways.

So, I feel like when you start to write the code for a website, there is a very specific way to approach it knowing that it’s going to be possibly broken, definitely different for many, many, many different situations. And you can definitely test a lot of them and you should test a lot of them. And you should QA. You should have your QA team, if you’ve got one of those, testing on mobile devices. And you should be checking things out on old hardware as well as new hardware.

You should be looking at speed. You should be looking at all kinds of stuff. But I think even with a large team and a big budget and a lot of devices, you’re still going to only test for a fraction of the real world situations that your users are actually in. And so it matters that you’ve written really good code. And when people ask me things like, “Well, what do I do with CSS shapes when it’s not supported in Firefox? I can’t use it.” It’s like, “Oh if you don’t know the answers to that question then you have a much bigger problem.”

Paul: Yes, you’re kind of thinking about it in a wrong way really.

Jen: Yes. I don’t know. You listen to your computer science professors too much, and you think that this is some sort of a closed box perfect in engineering environment, that you’re going to be able to control every little dot. It’s not that.

Paul: Yes, it’s like people who talk about Java Script as being – oh its an essential part of the modern Web so you can presume that it’s there. Even if it supports Java Script, whatever device or browser you’re working with, it may be a really crap mobile device that struggles to process or run Java Script effectively. It may be that they’re on a rubbish connection which means that the Java Script doesn’t run. There are all kinds of reasons why suddenly that fundamental, what people are seeing is a fundamental building block at the Web might not work. Hell for that matter, your CSS might not render. And you have to make sure just the HTML works.

Jen: Yes or your content might get removed from your website and it may go, live somewhere else and the CSS doesn’t exist. I don’t mean people who are scraping your content and stealing it.

I mean somebody who uses Instapaper. They use Flipboard. You’ve seen it back when Flipboard, it was a thing, or they’re using reader, or they’re using an RSS feed, or they’re using – There’s a gazillion different apps and tools and things that – someone posted it to Facebook and so Facebook grabs the first 400 characters of the post and put it into their little Facebook display.

There are so many places where the content shows up. And if you’ve coded it in this way that you expect – it only works when Java Script runs but that’s okay because Java Script always runs. It’s like not inside of Facebook, your Java Script is not going to run inside of Facebook.

Paul: Doesn’t it make you just want to curl up in a ball and rock backwards and forwards. It’s kind of complete lack of control?

Jen: No. I think I love it. I think that’s what I love about it because there’s something about the chaos that makes art and design really shine or the way of craftsmanship. Great craftsmanship comes out of situations like that.

Paul: And also, there’s something very magical isn’t there about creating something that almost – this is going to say I’m really pretentious and arsy, but it’s almost organic and alive in the way that it adapts and moulds itself to whatever device, whatever is running this website. The website will adapt to it, not just in terms of responsive design and layout and that kind of thing but in terms of kind of which bits of the code run and which doesn’t and oh! It’s magical really.

Jen: I agree like the very essence of what that thing is. I mean we’re going to all die at some point. I’d like to think that something that I made at some point in my life lasts beyond my own lifetime. Some of the websites that I build especially maybe the ones that I really care about deeply are on archive.org 50 years from now. Are they going to have run the Java Scripts? Are they going to load the fonts from Typekit? No.

So [chuckles] how can the essence of the thing, the actual essay that someone wrote, or the photos that the person took, or the video that somebody made? How can that still get through even if some of this presentational stuff that we put on next week I thought that it looks pretty in 2015 falls off? There’s something specific –

Paul: Yes, there’s really a good example. Go on, sorry. I interrupted you.

Jen: No, there’s something to the quality of the medium that I think we don’t quite understand. And I don’t want to try to pretend like it’s small and I can control it all. It’s so much bigger than any of us that we can’t control it. I think that that’s because of the power of it, because of the way – OS Mac – Applications that people wrote for System 7 for the Mac in 1995 are not gonna run today. But websites that people made in 1995 are running today.

Paul: Yes, that’s quite incredible when you think of it like that. I’ve never considered that. And you’re right about archive.org. I’ve looked back at some old websites that I’ve built on archive.org. And my conclusion has often been, “Oh archive.org, that [expletive]. That website doesn’t look like I designed it – missing images or this isn’t working out for it, I’m viewing it the wrong way. My code was shit.

That’s what it is, well it is! It’s because I had built in such a way that it could survive outside of that beautiful – what in the days when I was building, this website is for IE only. And so it’s hardly surprising it looks shit these days because I didn’t code it in that kind of flexible way. But yes, it’s just a lovely way of looking at that. I like it.

Jen: Well I think people really, they get very, especially right now the folks who’d love Java Script and are totally in their Web components and they want to turn the Web into an application environment. And they’re like, “Oh thank God. Finally we have to stop. We can get rid of this weird Web thing. And we can just pretend that this is Java or – “I don’t know what C+ – I don’t know. I’m showing my age here.

Paul: Yes, whatever these cool kids use today.

Jen: What application environments do people write in now outside the Web –

Paul: SWIFT, isn’t it? That’s like the cool one?

Jen: Yes, I guess it’s SWIFT or – I’m just trying to think of completely away from the Web if you’re writing an application for military equipment or something. What is it that those things are getting written in? But that’s not what the Web is and it doesn’t – That’s the amazing, amazing thing about the Web and the reason that it succeeded when other things failed. HyperCard and Eastgates(?), whatever that was called – Hypertext, and Authoring Environment, and Gopher, and all of the other competitors of the Web. And they were many.

Even something like file maker or databases and that kind of graphic presentation of cards that you could create and making a database of an address book or something, the Web, beat every single one of those systems and the reason it did is because it runs on this crazy, crazy mishmash of devices – devices that you’ve never heard of, browsers that you’ve never heard of in countries you’ve never been to, on connections that you just cannot fathom.

Paul: Yes. It is magical, really is.

Jen: Yes.

Paul: Oh!

Jen: It’s our job.

Paul: You’ve made me all excited.

Jen: [Laughs] It’s our job to understand what to do with – These things only supported half of the browsers like “Yes, okay. We’ll write some code of – That’s big a bit, they’ll be fine.”

Paul: This whole idea of talking about the Web in terms of – every now and again, I hear quite say things like “Oh we need to stop thinking about the Web as pages and think of it as components and stuff which is fine and great and dandy with certain things. But you still got to consider the vast majority of the Web is actually content. Most websites are content heavy page-driven things.

And that I quite like that. I don’t have a problem with that. I think that’s the nature of the Web that it is this environment for communicating information and not necessarily just for running apps these days. And that’s what everybody – the apps stuff, the Web apps – that’s the trendy cool stuff. But it doesn’t really make up that much of the Web.

Jen: Yes. Of course there are handful of “Web apps” that I guess we use. Maybe if you really like booking airline tickets on Kayak and you go to kayak.com over and over, I guess that you call that a Web act. It’s a way to find. There’s a search engine and tool for finding and sorting and choosing airline flights. And if you travel a lot, maybe you use that site a lot. But you’re right. I feel like, “What do we do mostly on the web?” We read. That’s what we do.

We read. We read and read and read and read and read. And what are we reading? We’re reading articles and essays and newspaper reports. And some things are really long. Some things are medium. Some things are really short. Some things are really well-written. Some things are very just off the cuff, quickly-written.

I think that there are lots of times when people are talking about that stuff though. They’re talking about not so much getting away from content websites but getting away from – thinking of designing an individual layout or individual’s like, bespoke.

Paul: Yes, and that’s fair enough.

Jen: And instead you’re designing a system and you’re saying, “Okay let’s build a website for a newspaper company, all from scratch like who gets that privilege? But pretend we’re making a brand new media company and we’re doing a website from scratch. And what is it that we do? We need to break this down into – There are seven different kinds of articles and each one is good and when you add it to the content management system, these are the options that you’re given.

I’ve been thinking about that stuff again. Recently, I’m thinking about layouts because I’m advocating in this presentation that I’ve been given. I’m pitching this idea that people should look at magazines and start taking ideas from magazines because there’s a whole legacy of amazing graphic design that we could use in helping us get over this hump and get away from this one layout that we’ve been using too much. If I would to get to critique my own presentation because of course it’s only an hour long, I’d be like “Yes but that’s not –” I’m not going to – bespoke design a layout for each magazine article that we’re putting on our website. How is this going to work for…?

But I think there is definitely a way to create more – better art direction, more tools for our direction. If you want to build the system of CMS and give the person who’s adding the content – new article to the CMS, the option to say, “Okay. Yes, I do want to do one of those roundy circle things with the shapes. And yes, I do want to make this wrap around this in a certain way and I do want to –”

But in this article, we don’t want to do that. In this article, we want to use a different layout. There are ways I think to build that into this. But you got to systematize it. You can’t say, “Okay, let’s design eight layouts. We’ll make a dropdown many of the persons who’s adding the content, can pick which layout they want.”

And once they choose those eight layouts, each of them is going to have a certain level of flexibility. And each one of them is going to have a certain level of like, “No this is what you’d get. In design, this is not PageMaker. This is not –” You don’t get to put everything wherever you want. There’s going to be a system here. And you have to stick to that system.

Paul: Thank you so much, Jen. The thing that’s worked really well out in these interviews so far is I’ve come away from each of these different topics, thinking about things in a different way. And the same has happened with this. It’s that I’m going away thinking – to grasp the enormity and the lack of control that we have and to think of our websites more as this kind of organic, flexible entities that adapt to whatever environment that they run in. And I think that’s a really valuable way of starting to think about things; because it suddenly, you’d think that would make you feel really constrained that suddenly, “Oh there are so many different devices. And some of them are just so primitive. How can I do anything?”

But actually it has the opposite result. Instead of going oh well, “I can’t use Flexbox because IE7 doesn’t support it.” You start to go, “Well hell, there’s going to be shit loads of things that don’t support it. But if I build it in the right way, that doesn’t matter. It actually gives you the freedom to try things that maybe you dismissed previously. So it’s fascinating. Really, really useful way thinking about it.

Jen: Yes, thanks. No, it excites me. When I look at an empty, you just think about a browser page. It’s just an empty browser page. It’s a pretty exciting space. And we can do anything you want in it. And I don’t mean crazy applications and animations. I just mean presenting a newspaper article on the page with one or two beautiful photos and a bunch of words. You could do so many things with that. With some amazing typography that may or may not load [laughs], and you don’t know how big the screen is; it could literally be any size. But CSS is the place now where we can – I think we can do some amazing layouts that morph and change to different browsers and deal with legacy stuff and slow, old, weak stuff as much as the new stuff and really be creative and do some amazing things. And I hope that people do do that. I mean part of the problem is that people get overwhelmed. And when people get overwhelmed, they just default back to old habits because they know they’re going to work. And I don’t want to see just more of the same craptastic layouts. I want to start to see some really interesting stuff.

Paul: Okay, on craptastic layouts, we will –

Jen: We’re done already, huh.

Paul: Yes, yes. Unlike you, I don’t allow myself… When I came on your podcasting, it was an hour and a half, wasn’t it?

Jen: Yes, it’s always an hour and a half. I had Sara Soueidan on and we talked about CSS shapes for an hour just –

Paul: See now. That’s hard-core.

Jen: So people, if they want to know more, I’m going to jump in here and say –

Paul: Well now, I was about to ask. Where can people find out more about you and about the kind of stuff that we’ve talked about? So go for it.

Jen: Yes, people can follow me on Twitter, jensimmons or you can go to jensimmons.com which is my own personal website or go to the thewebahead.net and all the episodes are there. You can find different topics.

Rachel Anders has been doing some really great work around all the CSS layouts, new modules, and written and then rewrote a great book about it all. I’ve learned a ton from here as well. And so I had Rachel on the show. I had Sara Soueidan on the show. And yes, so there’s just more and more and more and more to dig into.

Paul: It’s a really worthwhile podcast to listen to. You just covered such a range of subjects and it’s all much more organized than we are. It’s all kind of split into these nice topic areas. It’s very easy to pick and choose which subjects you want to look at, which I love.

Jen: Cool, thanks. Yes.

Paul: So okay. So checkout Jen Simmons and all the stuff that she’s doing, especially check out The Web Ahead. But for now Jen, thank you so much for coming on the show and making me think differently about the subject. So it’s good stuff.

Jen: Thanks for having me.

[Music]

Marcus: So, Leigh?

[Laughter]

Paul: Okay. So immediately…. So dear listener, this is what has just happened. All right.

[Laughter]

Paul: I made a mistake in the last time I was saying, “Leigh you’re really going to enjoy this interview.” Of course, he hasn’t now listened to the interview because we’re going to put your interview in the middle, right?

So I just don’t want to do this long thing of explaining to Leigh what he should say and why he should say it based on the interview he haven’t heard. And then Marcus completely undermined it.

Leigh: I now I’ve forgotten everything you said anyway but –

[Laughter]

Leigh: – I’m expecting it to be hugely interesting when I listen to it later.

Paul: When it comes out, seriously, you’ve enjoyed it.

Leigh: Especially that day about the cost of progressive enhancement. Fascinating. That’s the one bit I remembered.

Paul: All right, okay that’s good. Well done.

Leigh: And the new CSS techniques and advancement –

Paul: Okay.

Leigh: – yes, that too.

Paul: Good. That’s good. I’m glad you enjoyed that interview you haven’t listened to yet. Oh so professional. It just scares me.

Marcus: Yes.

Paul: Right. Marcus is completely gone because he’s still looking at smashing contents.

Marcus: No, I realize that I need a job. A job?

[Laughter]

Marcus: It’s really funny. No. Okay that was my joke.

[Laughter]

Paul: Keep your joke, not job.

Marcus: Right. Especially seeing as we have a sponsor –

Paul: Right and while you’re doing that, I’m going to talk about the sponsor. Now we have to be nice about this sponsor. It’s a new one.

Marcus: Right.

Paul: So they’ll be listening. So we have to be sensible. Can we do this?

Leigh: Well, we can try.

Paul: We can do this. So the sponsor is Awards. So that’s – you must have come – have you not heard of Awards? That really surprises me.

** Leigh:** Umm. I’m not sure.

Paul: It’s awards with www. –

** Leigh:** Ah, I’ve seen their logo, yes.

Paul: Yes. They’re quite well known. And there are awards for design, creativity, innovation…

Marcus: That’s a-woo-woo-woo-rds.

Paul: A woo-woo-woords.

Marcus: Yes. If you’d said it like that I would have known what you meant.

Paul: There you go. See that was the mistake I made. So they basically do awards as you would expect for different kind of internet-related stuff but specifically they’re very much on the design, creative, and innovative side of things.

I’m one of the judges this year. Oh, yes. I’m so pro. There’s a really good line-up. They’ve got Paul Irish, Denise Jacobs, Brad Frost, Aarron Walter, Mike Kus, and Eric Meyer. See? Proper people.

Marcus: Eric is proper.

Paul: He is proper.

Marcus: Really proper.

Paul: He’s old school proper. But the others are Brad Frost. He is a cool, trendy kid.

Marcus: So you’re going to be a judge that has to go along and be a judge at a thing or just the stuff?

Paul: No, I see I really ballsed this one up, truth be told. Because they invited me to emcee this award ceremony in Barcelona.

Marcus: Idiot.

Paul: I know. I just couldn’t do it. They asked – Well I could do it but –

Marcus: Can we go to that instead? Let’s win an award, Paul, make it happen [laughs].

Paul: Okay, I’ll fix the entire thing so that we’ll win an award –

Marcus: Agency Of The Year?

[Laughter]

Paul: I don’t need any approval of that. I don’t think they’re allowed. They’re very cool people and I like them very much but I don’t think that’s a good idea. So yes, I missed out on going to the award ceremony in Barcelona because of my own stupidity. It was because they asked me but I was in the middle of that really gruelling year and I just couldn’t face anymore traveling and I’m a fool. I’m a fool. What are you showing now, Leigh? What are you doing? We’re in the middle of an important session.

Leigh: Conferences? Sorry, yes. Yes.

Paul: Okay. It’s really off putting if you do that. Please stay with me? I’m just trying to do the sponsor thing.

Lee: Sponsoring. Come on, let him go. Let him finish. Okay.

Paul: But I’m introducing a new developer –

Leigh: Ching!

[Laughter]

Leigh: I’ve not heard a podcast where the sponsor’s actually treated like this. This is appalling. I do apologize. Carry on. Be professional.

Paul: The Awards people are really nice. Anyway, they’re introducing a New Developer’s Award in collaboration with Internet Explorer. You can be as rude about Internet Explorer as you want.

But it’s a really good one because it’s the first time that they’re doing like the developery one because they normally kind of come more on the creative side. And so they got the special award focusing on development across multiple devices and doing really cool stuff there. So I’m quite excited to see who gets nominated for that one.

But you check out their website which you can go to at www.awwwards.com and they’ve got some really gorgeous nominees on there. It’s a lovely stuff. So if nothing else, it’s a really good place for inspiration.

Leigh: Yes, I think I’ve got this bookmarked. This is an inspirational task which I’ve heard that quite a lot.

Paul: They have some lovely stuff.

Leigh: Yes, really nice.

Paul: So it’s very cool. So there you go – that is www.awwwards.com. Again, they’ve got no fancy URL for you to go to. So, they’re just going to have to trust me that millions of people in there are looking at their website because of this podcast.

Marcus: So you do have millions of –

Paul: Millions.

Marcus: – listeners.

Paul: Do you know we have a media pack now?

Marcus: What?

Paul: Yes, it’s got a proper advertiser’s media pack.

Marcus: I know, right?

Paul: It’s like so grown up. Anyway, that’s beside the point.

Leigh: Wow.

Paul: Yes, thank you very to them. Marcus, if you’ve got your joke now or have you still been looking at conferenceds?

Marcus: No, I’ve got a joke here and it will probably annoy you, Paul and – [laughs] because you’ll see why. This is a joke –

Paul: Is that your entire aim now? Just annoying me with your jokes?

Marcus: No, no. It just happened to be one from this long list I’ve got that I quite like and I’d be putting it off because I thought “No, Paul won’t like that”. But I’ve got to the point now where I’ve got to say it. This is a Marcus Brigstocke joke.

Paul: Oh, I like Marcus Brigstocke. So it’s funny Marcus. Okay?

Paul: Yes, not you.

Marcus: I realized I was dyslexic when I went to a toga party dressed as a goat.

[Silence]

Paul: I don’t get it.

Leigh: Sorry that took a while –

Marcus: That’s fine.

Paul: No, I still haven’t got it.

Leigh: – to do the anagram.

[Laughter]

Marcus: Toga – Goat? No. Okay, toga, goat? Toga… goat?

Paul: No, the pressure. My brain has entirely shut down and I can’t think at all.

Marcus: I suspect some people would probably quite like that even though it was a bit, kind of tumble weed in here. So it was by a proper jokey person.

Leigh: They have to work out. Which some people still haven’t –

Marcus: Here’s another one though, from Stewart Francis, here’s another one –

Paul: To be honest, my brain has completely shut down. All I can think about is these thousands of people thinking, “Eeh, eeh.” You complete idiot Paul. Why haven’t you got this?

Leigh: They think that anyway.

Marcus: Here’s another one. Do you know who gives – Start again. See, I’ve been delivering them too well lately. Do you know who really gives kids a bad name? Posh and Becks.

[Silence]

Paul: Oh, that’s…. no, no, no….

Marcus: But that was supposed to be a funny one as well.

Paul: It’s the way you tell them, Marcus.

Marcus: It is. That’s the point.

Paul: So that’s it for this week’s show.

Marcus: Yes.

Paul: Ahh but we forget to say who was on this week, last week

Marcus: Who’s on next week.

Paul: Who’s on next week? Let’s find out. So what episode is this? This we’re doing now?

Marcus: This is number five.

Paul: This is number five. So we need episode number six. Oh, it’s going to be Gerry McGovern –

Marcus: Oh, that is a good one. Actually, yes.

Paul: – who talks very, very fast. Can I just say at this point to the transcriber?

[Laughter]

Paul: I’m really sorry for what you’re going to have to deal with next week.

Leigh: I can slow it down.

Marcus: He’s got a touch of an accent as well. I couldn’t quite place it off the show.

Paul: He’s Irish. Oh I see… I’m so slow to that.

[Laughter]

Paul: So you’re going to tell me, Leigh what this goat was. I still haven’t got it. What’s the goat?

Leigh: It’s an anagram of toga.

Paul: Toga! I like it.

[Laughter]

Marcus: Never mind.

Paul: Why did you think I wouldn’t like that?

Marcus: Because you don’t like dyslexic jokes.

Paul: Do I not?

Marcus: No, no.

Leigh: No. Do you? Why did I say no? I got no idea. Don’t you?

Marcus: Dyslexic man walks into a bra.

Paul: Yes, yes, absolutely. You’re right. I don’t like dyslexic jokes.

Marcus: Really?

Paul: Actually I just think it’s – I don’t like your joke. I think that’s what it is.

Marcus: Fair enough, I deserve that.

Paul: Right, there we go. Next season, long show as always so let’s go away and next week, you’ll get Gerry McGovern who is the user-experienced guru of all time being particularly ranty –

Marcus: Who’s great.

Paul: – which is awesome. So see you then. Bye-bye.

Marcus: Bye-bye.

Leigh: Bye.

Links mentioned in the show

Boagworks

Boagworld