Steve Fisher talks with Jen Simmons about her work with Mozilla, the future of web layout, and visiting Vancouver.
Video Transcript
Steve Fisher: Hi and we’re back for another interview for the Designing Content Conference. And today I’m very excited to be chatting with Jen Simmons. Jen, why don’t you introduce yourself to the DCC crowd and tell them a little bit about what is it that you do?
Jen Simmons: Hello. I’m Jen Simmons and I’m on the Developer Relations team at Mozilla. I’m a Designer Advocate there and so these days I spend most of my time travelling to conferences and presenting and doing the Web Ahead podcast and writing blog posts, making screencasts, and making demos actually of technology, which is really cool. And then letting Mozilla know what it is that you want and what you need, taking that information back to help shape decisions around Firefox and what the future of Firefox will be.
Steve Fisher: Oh, that’s so great. I can’t believe you are already on episode 114; I guess not already, you have been doing the Web Ahead for a long time now.
Jen Simmons: Yeah, like four years. So, 115 I should be getting…I should get out of the door soon. But, yeah, it's cool, it’s fun. It’s a good show to do. I wish I did it more often. I should do it more often.
Steve Fisher: Yeah and it’s a great show. So, I will make sure there is a link to it in the notes from this so that people can check it out. Now, you’re giving both a talk and a workshop at the conference this summer and your talk is around like art direction for the web. Maybe you can just tell people a little bit about what they could expect from that.
Jen Simmons: Yeah. So, a lot of people have spent a long time trying to do interesting artistic things on the web. When the web…you know, back in the mid-90s a lot of people came over from print design, they were in just…print had just gone digital so people who had just learnt how to do digital desktop publishing—what we called it then, then started to get on the web. People were like, "Oh, cool. I want to do this. I want to do that. I have this idea of where I can put stuff on the page. I will do this graphic design."
But we didn’t have any tools to be able to do anything with that. So, we hacked up HTML and did tables for layout in these horrible – right, then then we all realized, "Oh, that’s terrible. We really need to separate our content from our design. We should have our structure and the actual semantics of the content be whole and be re-usable no matter what the design is and then we will layer the design on top of that using CSS."
But CSS had a very few number of tools that we could use to put things in different places on the page. Several of them don’t really work so well, but we’ve been using as floats. But using a float to do an entire page layout is actually really hard and there are a lot of ideas that people had that didn’t work so well. A lot of ideas we had to just stop having. So it’s been ten/fifteen years of not even thinking about possibilities that we’ve might have thought of before then because it’s not possible to do it in CSS with floats.
And then we figured out a couple of different layouts like a big header and a little sidebar and a big content container and – and we just have been doing the same layout over and over, over. All of that is about to change and/or has actually already changed where you can use this inline block, you can use box sizing border box - box sizing border box which I can never remember the syntax of because it’s just on the top; it's like you just put that on every single solitary, use a star selector and put it everywhere.
It's in every style sheet that I use. It gets rid of a lot of the bugs that floats tend to have, but more exciting is flexbox and alignment and CSS grid and eventually, we will have things like round, there is a spec called round, there is a whole bunch of specs coming out one after another. Some are here already. Some are coming very soon. Some are coming further off in the distance and they are going to give us real tools to do layout-intuitive graphic design.
So, I’ve been speaking about these things for the last two years because I feel like one step is, "Hey, you should learn about the new technology" and we should learn how to write it, we should learn the code for it, but the harder challenge beyond that is to think about what kind of design we want to do; to notice the assumptions that we have been making for ten years and the habits we’ve had for ten years and the fact that every time we start to do a project you just open up a template that has twelve columns that are all the same size and you start drawing boxes at the top of the page, we don’t have to do that anymore.
You can have eleven columns, you can have eight columns or seven; you can use odd numbers. The columns could be ratios of each other and not just all the same width. With the CSS grid, we can then design rows. We could have a grid of rows and put items instead of shoving everything up at the top of the page, we can like place items further down the page and use white space. We are going to be able to do things that we have literally stopped thinking of and we have been telling each other to never think about for the last decade.
So, that’s what I am going to be talking about is what do we do – art direction, ah, graphic design, oh history, you know a century of layout design in mediums other than the web - what could we learn from those mediums? What is it exactly that’s possible? What are some examples of web pages now that we can do now that we couldn’t do before? What’s coming in the future? So, yeah, the one hour talk will be you know a quick look at what’s possible, quick ideas around our direction in graphic design for the web, and then the all day workshop will be a deeper dive into really looking at the code, learning what’s possible with flexbox, learning possibly with grid, having a chance to try out some of the things right there that day.
Steve Fisher: Yeah, I know it’s exciting to, I guess in some ways be coming back to a place where we are trying to think of, "Oh okay, what is a creative solution to what we are doing rather than—here’s another box." And so, we are super excited that you are coming to do that at the conference. I think that the people coming to your workshop are really going to benefit from that and then the whole crowd when they hear you talk as well. It's nice to have that pairing.
Jen Simmons: Yeah!
Steve Fisher: So, I didn’t ask this before, but have you been to Vancouver before?
Jen Simmons: I been to the Vancouver airport, but I don’t count airports; so, no.
Steve Fisher: Yeah, although it’s the number 1 airport in North America six years in a row.
Jen Simmons: I just feel like it’s going to be gorgeous and I want a chance to go on a hike somewhere while I am there and I love the north of North America, both on the east and west coasts and I just was in Seattle not that long ago and it was just so beautiful. I feel like Vancouver is probably even more beautiful. So…
Steve Fisher: Yes, shhhhh….don't tell them that.
Jen Simmons: [Laughter] But oh, the people from Seattle should come check it out. I just…I feel like Vancouver is a…like if I had to find a new city to live that Vancouver might be a good one and it will be nice to just visit and see what it’s like to be there in the woods; anytime there is woods and water and mountains, like that’s good.
Steve Fisher: Yeah. It is…it is spectacular, especially in the summer which is why we want to have the event then and we can definitely get you out for a hike. We do that every day here. So….
Jen Simmons: Nice.
Steve Fisher: Well, thanks for taking time today Jen to chat with us and we are really looking forward to having you out this summer.
Jen Simmons: Cool.