Episode 115
Predicting the future with Rachel Andrew, Eric Meyer, and Jeffrey Zeldman
April 29, 2016
The landscape of what's possible in web page layout is changing. Jen has a theory that this change will be a big one — perhaps the biggest change to graphic design on the web in over 15 years. Rachel, Jeffrey, and Eric join her to debate if that's true or not, and to surmise what the future might bring. This special episode was recorded live at An Event Apart Nashville.
You can't layout blobs.
Transcript
- Jen
-
This is The Web Ahead. A weekly conversation about changing technologies and the future of the web. I'm your host, Jen Simmons, and this is episode number 115. I first want to say thank you so much to today's sponsors, An Event Apart, Image Engine, and Casper. I'll talk more about them later in the show. So, today, it's funny, I can hear myself echoing in this giant room. I've never done the podcast in a giant room. I'm here At Event Apart with a live audience. Hello live audience!
[Audience claps and cheers]
- Jen
- That's amazing! Totally amazing. And we're going to have three people on the show with my today, Jeffrey Zeldman, Rachel Andrew, and Eric Meyer, all of whom have been on the show before. Rachel and I have both just presented today, we both spoke about layouts. Jeffrey also spoke earlier. He started out the day and talked a lot about web standards and the origins of web standards and how everything is the same. Including things like how we're going to approach layout. So I wanted today to talk about the future of web design and to talk about it specifically thinking about layout and thinking about… I've had this theory, I think, for the last year or so. Two years. That the new things that are coming in layout are really really really, really big, and it's going to fundamentally change web design in a way that we have not seen in over a decade. I think it's bigger than the change to responsive, I think it's more in line with the changes that happened when we switched from table based layouts to float based layouts. In a way, that's the whole theme of the show. I want to hear from the three of you, I want us to have a discussion about, "Is that over stating it?" "Is that real?" "What do we think is going to happen?" "Could we perhaps predict the future of what's going to happen in the next three to five years?" So. Jeffrey, what do you think about all this transition?
- Jeffrey
- Ok, well. There's two things about the new stuff, right? One thing is we're free right now, as Rachel was talking, to use
grid
and experiment, and you showed last year some really wildly experimental layouts. I think we're free to try those things, and they're really exciting. You also talked about in your presentation, not worrying if they work for everybody, which is basically progressive enhancement. So first, make a basic layout that works for everybody, and then do these enhancements. But I also think, and I really like this in your presentation, that you were talking about art direction today. I think that's the most important thing. For us to advance in what we can do in layout it means that some people are going to make some crazy layouts and do some experimental stuff, and that's fine. It's like, years ago when Eric was making an entire page revolve and revolve and revolve, because he could. And things came out of that like subtle CSS animations today, right, on something on my phone. It just makes the site seems more alive. So I think it's great that there are going to be people doing some crazy stuff. I'm really happy about that. But I'm even happier about the possibility of using art direction to help the story. Doing editorial design, right? Doing that on the web, resources permitting. There was a site years ago, because nothing is new, called fray.com, by Darrick Polasick, so they were amateur stories, they were first person narrative written by people, Jason Kotke, Paul Ford, people who are now known as writers, but were at the time just kids, experimenting. And then Darrick Plasick, or someone else, would art direct, would just art direct the crap out of them. So one I remember in particular, it was a theatrical story, and it was set in a theater, and in order to, it used iframes, remember those guys? and you would drag the curtains and reveal the next scene, and drag the curtains and reveal the next scene. So kind of a gimmick, kind of over done, but also it was very tastefully done. But also, it helped give a feeling, a mood to the story, that I think we all agree has been lacking for some time on the web because we've all professionalized so much and we've gotten so good at… What we used to say was, if I could only have two columns and a header and a footer, if I could only have two columns and a header and a footer, one was going to be liquid and the other was going to be fixed. You were talking about the holy grail with three columns. We obsessed about that, and then we finally figured out how to do it with a bunch of hacks, and then, we finally, finally were able to do it without the hacks, because finally browsers supported standards. We were so excited. We did that. And then we faced the same challenge with responsive, and we came up with two or three things that everybody does, so I think it's really time to shake things up and I'm really excited about that, but I'm really excited about stuff coming right out of the concept. - Jen
- So why did we stop innovating? Why? I think we played around, we experimented so much, we did that in the days of Flash especially as well, we've talked about them on the show before, all these bad things, but rather than repeating all the things that we all keep saying, I wonder if we can get at the question, "Why really did we stop experimenting?
- Rachel
- I think because it got really hard and we had a lot to do! You know? I run a business. I love playing with this stuff. The CSS stuff I do is kinda like a weird hobby, because my day job is running a business and I have a product to ship, and I have customers that I need to make sure that they are happy, and they have clients who are using our software and I've got it make sure it doesn't break in their terrible version of IE. I think we just got really busy. This because more. When I started, all the playing around and experimenting, I can remember the first destructed rollover I saw, you know roll over one thing on the page and something else moved, and that was like magic, and I just wanted to know how to do it. And we were learning like that and teaching each other and saying, "Look what I figured out how to do!" And it's so exciting. And all the work you were doing at the time, the complex spiral stuff, it was just part of that, this is so exciting and seeing new come along and then we figured out how to do it. And layout kinda stopped changing. We all stopped around 2005, we've got our floats and we do all these different things, and so we figured out how to formalize it because it's actually really hard to do layout with the old techniques because they are just hacks. So we settled down, saying, "Well, I can ship a site for my business now quite quickly because I'll use this framework and it'll sort everything out," or "I know how to build a layout that looks like this and it won't take very long. I'll just fit things into those boxes." So I think that's kind of where we ended up. And People have looked at things like typography, and there's quite a lot of people talking about that. And there's other things that are happening. Animation. There's loads of stuff about animation and CSS, but I think we just sort of figured, "Well, this is how we do layout and we've worked it out, and we'll just fit some kind of cool stuff into these layouts," and that's where it stopped.
- Jeffrey
- It's technology, but it's also culture. The culture changed. I think you hit on both things in your answer. I think we learned how to do things, and the browsers delivered enough support that we could do those things, and like you said we all got busy. I think we professionalized, and in professionalizing, we lost some of that original underground joie de vivre. It used to be underground and cool to do this stuff. Josh Davis had a, what was it called, Dreamless.
- Eric
- Yeah, it was a bunch of stuff, yeah
- Jeffrey
- It was a community where people could talk about flash or whatever and they were really excited. And we grew up and we professionalized. Maybe the generation that did this got families, needed to make a living.
- Eric
- I'm going to blame bootstrap, just because that's what we did today, apparently. I actually, I don't mean bootstrap exactly, but frameworks and templates, right? Because basically, when we were making stuff up, all the time, and doing the Josh Davis craziness, one of the things about Flash was that you could design whatever. And as long as someone had the right version of Flash, I don't want to reflate the standards horse, but, eventually settled on floats in CSS, like templates and frameworks started up optimized for what floats could do. And Wordpress came with these templates, frameworks pushed people in certain directions and I honestly think that that's a lot of it. Because there wasn't anywhere else you could go with the technology, it ossified a little bit.
- Jen
- So, it's both a cultural thing that happened and a technological thing that happened, and now the technology is changing, and we don't need starter kits and frameworks, we don't all need to use the basically same theme for all of our websites. Will the culture change? Can we change the culture, or is it too late?
- Rachel
- I think it's really hard because there's a whole generation of people who've grown up thinking, "This how you do websites." And I've been told that. This is the best way to get started is to take a wordpress template and just edit that. Start with that, rather than starting with a blank page, which is what I did. I started with nothing. How do I make an html document? I think it's quite a shift, and people are quite scared when I'm showing people grid layout, "well just play around with it." And they don't actually ever play around with nothing. They don't ever start with a page that has a few html elements on it and no css and start playing around. They always start with something. They say, "What's your starting point? Do you use normalize? Do you use a framework? Have you got some sass mixins?" And what they're really saying is, "Please give me a starting point for this experimentation." And that was why I put all these examples online. Here's a starting point. Just have a look at these things, here. Because a lot of people now who've never had that blank page experience that was the web for people of my generation when I first started, when there was nothing. So that's going to be a big shift because they're used to starting with something.
- Eric
- Yeah, I think there's going to be a lot of difficulty because we're used to what we see all the time.
- Jen
- On the web.
- Eric
- Right, exactly.
- Jen
- We ignore what we see every time everywhere else, and we focus on what we see on the web.
- Eric
- Right, that's what I mean in terms of layouts what we're used to. So right now, I don't think you had this slide this year, but you had this slide last year about how we're stuck and all our layouts look the same. It doesn't matter what you're creating, it's always, here's the content and maybe it has two columns and maybe it doesn't, and there's a side rail, and the side rail is not equal height with the main content because that was almost impossible to do with floats, right? And that's what we're used to, we're totally, we have this whole thing, if there's a sidebar, of course it's not gonna have a background because it couldn't be full height, and of course it has some white space that separates it from the rest of the design. Those are patterns that we've so internationalized. Everyone in this room, I'd imagine, that's going to be hard to break out of. I suspect that if it's going to happen, it's going to take some Josh Davis types and some David Shea of Zen Garden kind of thing, where it's a, "Here's the same content, but it's designed 16 different ways with grid and flexbox," whatever, and they're completely different, for people to say, "Wait, this wacky thing now is easy to do. This works."
- Jen
- I've already bought the domain, but…
- Eric
- Great!
- Jen
- I have built that site. It's coming
- Eric
- Which I think is a great thing! And the Jazz at Lincoln Center design which you showed today was fantastic. Which needs to be on there. Because it was an example of a completely unfamiliar layout, in terms of web. It's very print familiar, but it's very web unfamiliar. And the way that it was not completely different, but it was significantly different between grid and not grid. Those kinds of examples where people can say, "Wait a minute, we can do all this stuff." I think to move that design culture needle, is going to take those kinds of efforts, and from a lot of different people.
- Jen
- For those people who are listening, I'll put a link in the show notes. I've been looking at a lot of grid books and one of them had this great poster, I think from the 2007 New York Jazz at Lincoln Center festival, so I took that exact poster, which I normally don't recommend, but it looked cool. I took that exact poster, and made a webpage out of it. Basically, it's a whole bunch of squares floating around, and the logo for the poster is actually down in the bottom corner, oh my gosh, and a big title for the whole festival is not at the top of the page. It's part way down the page with some other content above it.
Again, we're so used to, well of course the top of the page has to be the name of the site, the navigation, and a horizontal bar. So just looking at it and seeing, "Is this going to, oh wow, this actually did work" And yeah, so people can go check that out, that example.
- Jeffrey
- I think there are imaginative people in this room, and I think there always will be imaginative people. I think people need their imagination to get a jumpstart. That's what Dave Shae's CSS Zen Garden was so great at doing. People who hadn't really cared about CSS. And it wasn't even Dave's layouts, it was once a few other people had created very different layouts, then people suddenly went, "Oh my gosh, this could be anything! I could make a new Attack of the Mole Men"
- Eric
- Yeah.
- Jeffrey
- And make that work. People need a push. I think one of the problems is, how can I say this without sounding like an ass. The people who did it when nobody was doing it, folks like us who did this early on, we did it because no one was doing it, and we didn't care, we just wanted to be left alone and come up with our own cool stuff because that's the kind of weird little nerds that we were. I was a little kid that used to draw in my room. That made me happy. My parents who wanted to torture me said, "Go play ball with the other kids." I'd be like, "No, I'm drawing." Right? But most people aren't like that. That's not normal. So now, we have a mature profession. There are hundreds of thousands of people in the profession, there's nothing wrong with their minds, they're very smart. In order to do this job you have to be very skilled, but they're not necessarily the kind of weird nerds that want to do something just weird just to see what happens. If there was such a person as Frank Zappa or Captain Beefheart, they wouldn't get a record contract. And people like that aren't going into the music business right now. Maybe they are. Maybe St. Vincent. I don't know. But you know what I mean? Something begins to mature and a different kind of person takes over. I think we have to find a way to reach out to those people with examples and get those few people who will respond to that. but I don't think the medium as a whole, this is the other part of it: When we started with our weird, I had green nuns on purple nuns just tiling, just horrible bad taste, but there were no examples of what a website should be. The first stuff we did, we didn't know the rules. The kids, the new people are growing up, they've seen so many examples of much better looking sites than what we created that it's sort of intimidating and they want to imitate what they see. I can do something as good as that. I can make a big picture here, and then have that floating stuff happen, and then three columns, they want to imitate, so…
- Jen
- It seems like the stakes are higher.
- Rachel
- Yeah.
- Jen
- In the past, everything was so handmade or rough, that you made something handmade and rough and it was cool, and now it feels like, yeah, it has to be professional and commercial.
- Rachel
- Yeah.
- Jeffrey
- We went through a period of making stuff look handmade, right? The Wicked Warren look.
- Jen
- Yeah.
- Jeffrey
- And we've gone through this long period of no, remove all the shadows and everything, make it look as clean as possible. In fact, Material design was, "We can put one drop shadow in the flat design. And we'll call it Material design." Like, "Oh. May we? May we use one drop shadow? Thank you." People like to imitate, and it's safe.
- Jen
- I do think there's going to be a progression. There's going to be this cutting edge, then there's going to be some experimental, the punk rock people, then the people who are more moderate will follow, then eventually the companies who are more conservative will follow. That seems pretty natural. I feel like in a way what makes me so excited is I that I want to say to all the punk rock people, "this is a great time to kick ass. You can become so amazing and get amazing jobs. You can do a backflip with your career right now, if you want to." And that opportunity doesn't come along very often.
- Rachel
- [00:21:08] I think that's true, just thinking about this. There's something of… the stakes being higher, it's not just that the stakes are higher and we're all professional and we're all doing this as a serious business now, and we're engineers, not just front end developers or whatever. It is actually an awfully lot more complicated. When we started, we weren't really thinking about very much. We were starting to think about accessibility with the early standards movement, but we weren't worrying about how fast things rendered, most of us didn't have a clue, and we weren't thinking about all the things that now we're very concerned about. We didn't have multiple devices. I was dreaming of a time, I had my little 640x480 screen, and I knew people who had slightly bigger screens than that, but people would say, "Ah, there's going to be a future when everyone has enormous screens and high bandwidth." And just as it looked like it was about to happen, everyone got phones. And we're like, "Ah, right." We've got all this other stuff that we have to think about now, and I think that there's a huge amount of developer bandwidth, as it were, that is just burned up by thinking, "Is this performing ok? How is this going to be in all these browsers. How will it be on mobile? What about those people who are using Opera Mini on low bandwidth connections. We're thinking about all this stuff, and we're told it's important. And we've got to learn SASS, and we've got to learn Node, and we've got to learn this whole stack to build websites and we haven't got time to be creative.
- Jen
- My concern, I'm not to concerned about it personally taking time, or that it being one group after another, I am more concerned that somehow the commercialism and the concern about budgets and the avercity to risk is going to keep us from really letting the web become what the web has been destined to become all along. And it will somehow stay in the world of of header sidebar footer. And I don't know if that's real or not. In a way I think, "Oh, that's a crazy thought," because as soon as I actually touch the code and as soon as I actually make something, and then I show it to people and then people are completely blown away. I'm like, "That's not about me, that's about the stuff that's powerful and it's super exciting, and I think once people actually do touch it, it will turn into it's own destiny. But I don't know. I wonder about these things.
- Rachel
- We need to let people play, because it was play. It wasn't work. A lot of us were earning a living out of this, but we were also just having fun with it.
- Jeffrey
- I wonder if that's selective memory.
- Rachel
- Sometimes.
- Jeffrey
- When we were young and poor, everything was so good. It was so good. I think it might be rose colored glasses, because I was concerned about bandwidth on day 1. I didn't know, I couldn't do what Jake Archibald could do, where he knows scientifically, the DOM tree and the different parts of it, but I knew if I used too big of a background pattern, it's going to change the way it renders and we experimented with if I make it wide but short, then it takes longer. We did all that stuff. And we worried about other browsers, we might have fun playing on our macs or whatever, but at the end of the day, if it didn't work, when we were earning a living, our client wasn't using the same computer or browser we were, right? I think as it's gotten more difficult with more devices, I do think that does stamp some of the joy out of it, and it's kind of like, maybe you used to play guitar when you were twenty, and now that you're a working parent, you just want to watch TV for half an hour and fall asleep on a couch. You're too tired to play the guitar, and maybe it's like that. The working designer/developer now has so much to do to satisfy all these constituencies.
- Rachel
- Yeah, I think maybe it is a lot of us have gotten older, we do need to have younger people coming through who are, who want to play with this stuff and come up with things that aren't what we're thinking about because we have all this baggage of what came before.
- Jeffrey
- But they don't want to play.
- Rachel
- No.
- Jeffrey
- That's the problem.
- Rachel
- And how do we coach that.
- Jeffrey
- I meet twenty year olds and they're awesome and they're super talented and they describe themselves as full stack developers, and I'm like, "I would never put those words together" I mean, it's awesome, but you're coming from a completely different place than where any of us came from.
- Rachel
- Yeah.
- Jeffrey
- I think if someone young and fresh is coming to it from a place of design, maybe that would…
- Rachel
- Maybe that's it. I think a lot of the interest is in development, and I'm a developer, I'm not a designer. There's lots of interesting stuff happening on the development side, lots of incredibly clever stuff being built, a lot of interesting stuff being put together, we've got a lot of interesting tools to play with. But there doesn't seem to be that stuff that I open up and think, "Wow, how did they do that? How did they think of that?" I don't look at stuff and think it's amazing.
- Jeffrey
- I do want to say one super quick thing, if I may, I think we used to compete with each other as to who can make the coolest site or the most innovative design, and now I think people who are in their early part of their career compete by how many frameworks they know, how many tools they use, how many sass mixins they use, and all that, and I think they're competing on mastery of technology, whereas we competed on trying to be cool. If that makes any sense.
- Eric
- It's funny, when we started out, we were all full stack developers, but the stack was about this tall, and now the stack is taller than this room, basically, there's so many things that you can stack on top of each other. It used to be if you knew HTML and how to do an image program. That was the stack.
- Jeffrey
- I know H, T, M, and L.
- Eric
- Sorry, I was wrong. The stack was HTML, and image program, and an FTP client. That was the stack.
- Jen
- And knowing how to get a domain name, which was not easy.
- Eric
- See, I was thinking geocities forward.
- Jeffrey
- If you were a professional, knowing how to get your client's site ranked on Yahoo.
- Jen
- Right!
- Eric
- If you could get them listed…
- Jeffrey
- Or Yahoo homepage, you were worth hundreds.
- Jen
- You had to know who to email to make that happen. We have good questions coming in from the audience, so I want to ask some of them: What do you think will be necessary to stop people from using grid to make more of the sort of bootstrapy sites?
- Jeffrey
- Oh, I don't think you can stop them.
- Rachel
- Yeah, that's going to happen. I think we will see, like we see with the flexbox frameworks, we're going to see the grid frameworks. We will absolutely see that.
- Eric
- Yeah, I don't think it's a question of stopping people from doing that, so much as it's a question of encouraging people to work outside of that. Those are going to happen.
- Rachel
- Yeah.
- Eric
- Like Rachel has, we already have flexbox grid frameworks. There's going to be bootstrap grid.
- Rachel
- Oh, absolutely.
- Eric
- Because people are going to recreate what they know. Which, ok, there will be advantages there, there will be efficiencies, but the CSS Zen Garden, because we all keep going back to that, it was such a turning point in the field, it didn't try to tell people that they shouldn't do it any other way, it was just, "Here are these possibilities."
- Jen
- Right, look at how awesome this is.
- Eric
- And Dave's first five designs were completely different to each other. He really worked very hard to make this one's very sedate and it's very organized, and this one looks like a mid 80s punk zine. And this one…
- Jen
- Right.
- Eric
- His first few designs were very intentionally completely different. And then as more people came in… But he had set that tone. If he had done three subtle variants, the first submissions would also have been subtle variants, and instead people just went crazy!
- Rachel
- That was the selling point of CSS rather than tables. You can make your site look different. And lots of us had those style switchers on our websites, like "Look, you can have this theme and this shape," because that was the cool thing, you weren't tied to your layout being in your markup.
- Jen
- Yeah, I realized last night, I need a new, modern version, a 2016 version of a style switcher.
- Jeffrey
- Go to Jeremy Keith's website. He's got one
- Jen
- Yeah. He's got one.
- Eric
- He still has one.
- Rachel
- It's the last holdout.
- Jen
- So here are two questions that are interesting and related. Do you see this new grid spec being the gateway drug to getting more print designers into the web, and how do you think the challenges in layout on the web affect print? Do you think the web will ever drive the print medium?
- Rachel
- I think it's slightly been the other way around. I think this layout stuff is come from people wanting to use web stuff in print and in things like ebooks, which is another subject I can get very nerdy about. I know for where I first came across the grid spec was listening to Burt Boss in France, he was speaking in French. I kind of know French, if it's written down, I can't really if it's spoken, but he demos were so compelling, and they were of early grid stuff and other things, and they were all driven by his work with people who were interested in this stuff for print. They were from the publishing community. That was the first time I saw anything like grid and it was the early template layout stuff that he was showing. And then a little while after that, IE implemented their grid, and it was the line based stuff. But it was actually from him talking about that in the context of print that got me interested. And what he was saying was that, well this is where it's coming from. This is where the driving force is. It isn't web designers, they don't seem to care. It's people who want to do ebooks, and putting stuff together for print, because a lot of the print in industry is going to CSS, rather than anything else. That was kind of interesting to be that web designers weren't stamping their feet for this stuff and people who are publishing books were.
- Jeffrey
- Editorial designers are losing their jobs so they have to come onto the web, and people aren't buying printed magazines as much, but I think everyone knows print design has driven a lot of web design, and I think the question that's interesting is will it ever be the reverse. It's hard to imagine because the media are so different, we don't have any fixed dimensions to the web. It's a screen that's endless or really small. It's different for everybody. It's hard to imagine something like responsive design come into play… it could as a novelty in print design, I can imagine making a print book where you could pull on tabs like a mad fold in and change something, and that could be an interesting experiment, but for the beauty of the web, which we haven't really figured out yet, to be so compelling that print designers go, "I want some of that", I'd love to see that. That's something that I think we should aspire to. If all of us work very hard, maybe some of us will achieve something so uniquely webby that print designers will start killing themselves to try to imitate it the way we've been killing ourselves to try to imitate a simple newspaper layout.
- Eric
- Yeah, although the first question, do you think it will start to draw in more print designers. I think that's a possibility, though I suspect at this point any print designers who had any interest in coming to the web probably already have, and the ones who are left probably have no interest, even if we'll be able to recreate it. I think there's that possibility and I think what it's more likely to do is people who are studying graphic design now will feel more at home on the web than they ever have.
- Jen
- Right, that they might not decide to try their best to really stay in print only, but they might be excited about doing both, or doing the web.
- Eric
- Yeah, and they'll be able to to, grid is a perfect example, like, "I get this. This is what I did when I was learning to layout posters."
- Jen
- Right.
- Eric
- The same concepts are here and so, there were whole conferences, there may still be, I don't know, but there were whole conferences that were devoted to, "So you're a print designer and you want to do this web thing, which is totally different, so come to the conference and try to understand."
- Jeffrey
- I wrote that book! Taking your Talent to the Web.
- Eric
- Right. That barrier will be much lowered, I think.
- Jen
- So let me jump in here with our next sponsor today, Image Engine. Performance is incredibly important. It's one of the themes of the show, The Web Ahead that we talk about all the time. How can you make your website faster. one of the ways that your website is slow, is all the images that you have. Images are awesome, but also, they're a bunch of files with a bunch of kilobits. kilobytes, and it can get really out of control really quickly, you end up with a bunch of data that has to be downloaded. So Image Engine is a way that you can reduce that image payload by like 60% with minimal visual loss of quality. Basically, the images look the same, but they're 60% smaller. And Image Engine is actually free of charge. The only thing you've got to do, the only required thing is for you to register. There is a commercial version available for web sites that have an incredible amount of traffic, or that are behind a paywall, like subscribers pay to access your site, but for everybody else, you can use Image Engine without paying anything at all. It's pretty easy to use, you're going to prefix your image URLs with the unique hostname that you get after registering, like example.com/image.jpg becomes token.imageengine.in/example.com/image.jpg. Ugh. That's way to nerdy to have read out loud on a podcast, but basically you just take their image url and jam it in front of your image URL to hook up your images. If you're using wordpress, there's a wordpress plugin to make all this go, and basically what Image Engine does is it has a bunch of tools, the robots determine the best size, compression and format of a given image, so it could swap out different formats, maybe a jpg, maybe a webp if the browser that's asking for the image supports webp. It also will compress the images to make them as small as possible without losing any quality, and then it's going to figure out what's the best size. If you're using a small screen, if your user has a small screen, you don't need a big image. If they've got a big screen, then yeah, they will need a big image. If they're using a browser like Chrome 46 and up, that supports client hints, it will use client hints to determine what kind of size the image should be. And if you're using a responsive image solution on the client side, in the HTML, that a browser is reading, then you can hook up Image Engine with responsive images. It works with responsive images, it also works if you don't use responsive images in the HTML. Both work, which I think is cool. Because responsive images is a great way to go, but this is, you might think, if I'm using responsive images, why do I need Image Engine? Because Image Engine is going to optimize all the things that can be optimized on the server side, including a CDN, it can distribute those images around the globe to get them closer to your users, and cache them, and do all the things that a good CDN would do to make delivery of those images faster. It will support HTTP2, if you're using https. There's a bunch of nerdy details about how exactly this technology is working. You should check them out, you can go to scientiamobile.com/webahead that's scientia, so s c i e n, the beginning of the word science, but just the scien, and the tia, t i a mobile.com/webahead. You can also go to the show notes for this show, thewebahead.net/115, and the link will be there to go check them out. Like I said, the Image Engine lite is a free option. So go check them out, all the details exactly about how it works, why it's free, what the deal is, what the license is, it's kinda like the license to Google Maps. And see if it's a good solution for you. You can check them out without a lot of risk, see if you like it. If it really does help speed up your website. And if so, go all in with them. So thank you so much to Image Engine for supporting The Web Ahead.
- Rachel
- Maybe there will be some kind of cross fertilization, maybe there are people who otherwise would have said, look, this is all just so baffling, all this weird stuff you've got to learn to do to put stuff on the web, why can't they just line things up? That's what people ask. Why can I center that thing? The fact that that isn't a sticking point anymore, then maybe we are going to see people who have got great design talent, starting to bring that to the web because they haven't got this hurdle of this baffling set of things that they have to understand that are based on ways of doing layout that were never designed to do layout that we've hacked around. Hopefully, it's going to bring some of those more talented, creative people, that we say we'd like to see working here, and will actually feel like they can come and work without having to understand a horrendous stack. It also is one reason why I don't like the over-complication of things. I think it puts people off who aren't massively technical. And I say that as a very technical person who really isn't a designer. But I think that we can be very off-putting who do not want to learn a million frameworks, who don't want to learn javascript.
- Jeffrey
- And they don't need to.
- Rachel
- They don't need to. No. But we make it look like they do
- Jeffrey
- And they don't need to. That's the problem. When someone says they're a full stack developer, that's cool on a resume if I want to be an implementer for someone else. I want to get a job, and I'm a full stack developer, and that's cool. But if I want to make stuff, I don't have to be a full stack developer. I have to know HTML, CSS, and a little javascript, just enough to get by.
- Jen
- I'm a big believer that if you require people to use the command line to design a website, then you're doing it wrong. If somebody wants to use the command line, cool, but you shouldn't have to use the command line to design.
- Jeffrey
- If that's there process. Right. If someone benefits from using sass and mixins, that's great.
- Jen
- Or use sass, but use it with code kit.
- Jeffrey
- Some of the best developers that I work with still don't know that stuff. And I would not take them for someone else. They're great. They're great at what they do. And it's ok with me if they start with a blank page. I also think, we did have a big influx in 2007 or so, when I started working with people like Rob Weychert and Jason Santa Maria, Kevin Cornell, there was this whole graduation class, just from one school in Philadelphia, Kunztown University, where these kids who had been trained in graphic design, classically trained in graphic design, and were all about the web and were doing really interesting stuff with it. Right, Rob Weychert made Virtual Stan this animation, and Jason Santa Maria redid his website every two months, and the one everybody loved looked like a book, but it was also liquid, it was a liquid book.
- Jen
- Deconstructed book.
- Jeffrey
- I went, "Oh my god, these people really studied graphic design" There's new kids in town and I'd better become more managerial. I'd better get strategic fast. Becasue they're going to kick my ass in terms of graphic design, which they did.
- Eric
- Remember when Jason Archer art directed every post for a while? Every time he published a blog post, it was totally new art direction just for that one post.
- Jeffrey
- Like fray.com in 1995.
- Eric
- Kinda, kinda yeah.
- Rachel
- Yeah. I think, it's why.
- Jeffrey
- We've had this, these are cycles,a nd I think these new tools will probably bring new people from the world of graphic design. Not necessarily print, I think, some graphic designers make less of a distinction about that. Like there's one school of graphic designers that ended up going into UX and interaction design, and really being about experience, and there's another set of designers that I think, they just see the web as part of their toolkit. When it was just Georgia, there were definitely some designers who were like, meh. But once typekit was out there and all the other webfonts, all the other stuff. Webtype.com. Hoeffler, anything you want to use is out there. And you can do a fixed width design if you really want to. It's probably not a good idea in most circumstances, but if you had some important aesthetic thing you wanted to do, with a print mentality, you still could do that.
- Jen
- And now I think with grid you'd be able to make certain parts of the page fixed while other parts are flexible in a way that's just too hard to think about right now.
- Rachel
- yeah.
- Jen
- But with grid, it will become more natural.
- Jeffrey
- The thing you were doing where you had… Last year you were showing where there was a picture of the brilliant woman from computing.
- Jen
- Grace Hopper.
- Jeffrey
- Grace Hopper on one side and text on the other, the text vertically and horizontally centered. Looked really nice, it's like a print layout, but it's also responsive and webby, but at a certain point it breaks apart and now with gird it's conceivable that you could actually do that. You could have some of the tools that graphic designers have taken for granted, but we could have them in a webby way. I think that's great, and it's very exciting to me.
- Rachel
- The other thing is that certainly grid is going to make it an awful lot easier for visual design tools to do good stuff. Back in the day I did quite a lot with Dreamweaver, and I think even though everyone loved to hate Dreamweaver, it did allow people who weren't really technical and didn't want to learn to code, it let them build stuff and play around with stuff. And quite often I would encourage designers who weren't developers to build their designs with Dreamweaver with just the drag and drop stuff and all of that. Give it to me, and I'd recode it. But it freed them up to design, rather than worrying about HTML and CSS. And I think the same is true with, I think Adobe is doing fantastic work with tools which can be used for prototyping. People get a bit snobby, they're like, "Oh, the markup that comes out is terrible." Well, that's fine! It's a prototype. Make the worst possible markup you want, and then give it to someone who builds it properly. But be creative with the stuff.
- Jeffrey
- As long as they don't skip that step.
- Rachel
- Yeah, yes yeah.
- Jeffrey
- That's what I was talking about this morning. If people want to use Bootstrap or anything, as long as you don't release it to the public that way.
- Jen
- As an aside, for those who are just listening, there was three times, or back to back presenters today who talked about how we feel like people should really stop using Bootstrap, and you were saying Jeffrey that it's great for prototypes, and I've heard lots of people say that, I've heard Karen McGrane say that on the show not that long ago, "Oh, Bootstrap's great for prototypes," but I disagree with that. I feel like it's true that Bootstrap can be too much code. It's true that you're mixing your markup with you design, you visuals, it might be slow and all these reasons, but even more than that, I mean, that's the argument, well use it for prototype and then later change it to make it better. But I feel that if you use it as a prototype, then you've just right from the first brush stroke, set yourself up to stay within a very small box. It used to be a very small box inside of a just slightly larger box, but now it's a very small box that's about to get really huge. And I want to be in the rest of the box.
- Jeffrey
- If someone used Dreamweaver, or if someone is using keynote because they don't have CSS technical implementation, but they're going to say, this is what happens, instead of getting designers to think in terms of time, three dimensions, here's a picture, we used to use Photoshop and just make pictures.
- Jen
- We used to use Flash for prototypes.
- Jeffrey
- But even Flash…
- Jen
- Why not? It won't be responsive but at least you can draw something and have it animate, you could put things on the page any way you want. Just to sketch an idea.
- Jeffrey
- I think people are going to use those tools to get something up and fast. I think that's ok. You don't want to say to someone, oh it works, and it speeds up your job so don't use it, because that would be wrong. The minister in The Scarlet Letter. You don't want to be a Calvinist and really against joy, you want to let people have fun.
- Jen
- Experiment.
- Eric
- Oh, I do. I really do.
- Jen
- It is true, we have so many rules now. Do it this way, don't do it that way. This is better. Do this. Do that. Those are good rules, but it does make it scarier to go outside the box. It's scary to take a risk and do something crazy.
- Jeffrey
- I think that hurts the creativity. And then we wonder why people aren't experimenting. We just told them, "That's not accessible," "Don't do that."
- Jen
- Well that markup isn't proper, you're not supposed to use figcaption like that.
- Jeffrey
- I think something interesting that arose today, again. yeah, blockquote,
- Jen
- Oh, you didn't use cite the way you're supposed to!
- Jeffrey
- We actually, the way we, the way this brilliant developer first laid out A List Apart in the recent redesign, when I entered a blockquote, and something wasn't displaying at all, he said, "You didn't use figcaption." So there's not a rule in case a person just put the blockquote instead of 82 lines of html5, which you prefer? If you just use blockquote it won't display?
- Jen
- Maybe we have to find ways to give each other a break and open the space back up to break the rules and see what happens.
- Rachel
- And not to jump on people's experiments, because there's a huge difference between someone's personal site where they're trying out something cool that they think is really great, or they just put something together to say, "Hey, look at this," there's a big difference between that and a website that's for a hospital or a school. Or something that's really got to be up and there and robust and working everything. Those are two different things, and I see sometimes people put up something that is experimental and fun, and then the internet jumps on them and tells them that they're wrong and it won't perform well and how could they do this. That just stops the fun, it stops us playing and creating.
- Jen
- The jazz poster I made yesterday, I felt kind of embarrassed because if you make the viewport really narrow, it doesn't do well. I need to make it better and better responsive.
- Rachel
- Yeah, exactly.
- Jen
- That wasn't [inaudible 00:48:31]. Let me ask another question, a good one here. Will people, users, be willing to adopt the new possibility with grid with layout, or do you think user's expectations stifle creativity.
- Jeffrey
- User, what user? The end user of the website?
- Jen
- Yeah, will we go and change the design patterns, you go and you don't put the logo in the upper left hand corner and you move the navigation over to the side where it's never been since 2003, are we going to screw up the usability of the web, how are we going to figure out how to change things without…
- Jeffrey
- For a while Jacob Nielsen was saying, "you can't, you have to use blue underline links. If you don't have blue underline links then nobody will know that that's a link." And the young designers were like, "Well, we're not even going to put underlines or colors on it, right?"
- Rachel
- And it's all black.
- Eric
- Right.
- Jeffrey
- And it's all light grey text on grey background, and like 9 point Arial.
- Rachel
- You just walked in your [inaudible 00:49:27]
- Jeffrey
- Remember that? So there was this immaturity on both sides of that, but eventually we realized you have to make it usable and make sure everyone knows what a link looks like, but it doesn't have to be blue. And it doesn't necessarily have to be underlined. And I think it's the same thing. If you do like that layout you were showing, the print layout where the headline is at the bottom. In a magazine, in a fashion magazine, I go "Oh how dare it." and on a website initially I might be confused if I went to amazon and I couldn't find their logo. I might think something was broken. But eventually you'll get it out. When we did the 5.0 version of A List Apart and Mike Bic cropped in on the logo so that it was bleeding off the edge, and we still get letters saying, "you know, there's something wrong with your CSS. You cropped in on the type. Was it deliberate?" And I'm like, "You guys, do you ever look at magazines?" Nobody looks at People Magazine with Brad Pitt's head covering the E and the O and goes, "Gasp, there's a misprint, there's a layer missing." No, everyone knows it's art direction. But when we do it, we get in trouble. I don't know.
- Jen
- Yeah,
- Eric
- Well, actually, I was curious. Rachel, you have users in a software environment, but you have a lot of experince with what uses expect and how that can constrain or not constrain.
- Rachel
- Yeah, I think what it is is that there are times and places to get experimental, I think that there are patterns that we know work pretty well. And I think that the whole accessibility conversation that I mentioned in my talk, the concern that we need to be having, how we make sure that we have all this fun and we build cool stuff, but it's also still usable and accessible, but I think that we need to have experimental stuff that those will let out of the water a little bit just to see what is possible. We're not talking about putting that into important sites. I have a CMS, the admin side of that has to work down to IE8 because a lot of our customers have clients who still use IE8. That's the reality for me everyday. We're doing a UI rebuild at the moment and having to work out how to use modern stuff but still make it work for those people, but then there are places that we can play more. The website for instance, pretty much everyone who comes to our website is a web designer, they've got great browsers, that if I was working with a designer, we could do something really interesting there because we can. It's not just about throwing everything in the air, it's about saying, "Well here is a place, I've got a band website to build, there's maybe something cool you could do with it, it's not for the school or the hospital." These are different places and it is figuring out where to do this stuff.
- Eric
- I have a, I don't know if it's a thought experiment, but imagine if Medium just decides to kick out the jams, design wise. To bleed the logo off the top of the page, and do some of the stuff you were showing today where the title is over here and the logo is over there and the copy kind of goes between them andis staggered, a site like medium which a ton of people go to, could do that sort of thing, and then once that happens, then some of those patterns would start to mutate outwards so that some of the hospital websites might start doing stuff a little more interesting. They're not going to push all the way to making it look like a punk scene from the 80s, but they might, "hey, we're going to do an irregular clipping of the carousel photo on the top."
- Jeffrey
- You see the carousel.
- Eric
- I know. Everything will be a little slanted. And maybe just a little off kilter so that it's a little bit more… organic. He said in a hospital context. Sorry. I think that's how it's going to happen. A place like Medium, or Twitter, Facebook. Those kinds of sites.
- Jen
- Yeah, it is funny, we almost many times act like a lot of, especially more conservative clients, act like the patterns are already all set, we need to pick from the patterns that already exist.
- Eric
- Right.
- Jen
- We don't want to be doing something too risky. And maybe they're saying that because of usability and user experience design, frequently they're not, they just want to do something that's going to make money and they want to do that by copying the people who are making money.
- Jeffrey
- They're fearful.
- Rachel
- Yeah.
- Jen
- Yeah, and they don't want to lose their jobs.
- Rachel
- This works for other people. This is a tested pattern. It's interesting, when I started doing this, designers were giving me designs that were completely unimplementable because they had slanted edges, and they had all these things that were really hard to use because they weren't being designed by people who weren't from the web. "Why can't you line that text up against that triangular shape?" "Well, the web's not like that, the web's boxes, that's how it is!" And we've almost gone the other way now, where people are thinking, "Well, the web's boxes, that's how it is, here's a box"
- Jen
- Right, we have to un-train everybody.
- Rachel
- Yeah.
- Eric
- I saw somebody…
- Jen
- It feels like a site like Facebook will… If you think about the design of the Facebook feed, and the layout of the Facebook feed and you get on archive.org and you look at the wayback machine and you look at how that Facebook feed evolved, it settled down and it's been pretty much the same for a while now, but there were many years in there where it changed radically, one little step at a time. And it felt like, I remember in 2010, I think I three completely separate clients hire me to bascially build them Facebook in their thing. They were a such and such and they wanted a social media marketing website, and they wanted it to be exactly like Facebook. And they would give me these drawings, and I would say these are static, I need some more information, I don't know, just do it however Facebook did it.
- Jeffrey
- The problem there is that they don't know what their problem is. They don't know what their business problem is, they haven't articulated a business objective, they're looking at somebody successful and saying, "Let's imitate what that successful person is doing,"
- Jen
- And none of those projects succeeded.
- Jeffrey
- They're successful for other reasons and not necessarily because… right. So you go back to them and say, "That's great! I like Facebook too, it's very innovative, let's talk about what we're trying to achieve. Let's go back to your goals. What are your business goals. Do you want to grow? Are there things on your site that people aren't using. Are there services you want to offer? What are people saying their pain points are? What are your customer service reps telling you? Is everyone calling five times a day about the same problem on the site? Let's fix those things." There's a way to guide them towards, they don't go to client school.
- Jen
- Right, right.
- Jeffrey
- They're really good at making shoes, or they're really good at selling, whatever they're good at. They're much better at that then I'll ever be. So I respect their intelligence, but they don't obsess over this stuff. We do.
- Jen
- So here's a question related to this. We love forward thinking and web design, but often convincing clients is the challenge. Are there any tips on how to get them on board?
- Jeffrey
- Data. Data. Every client wants something that's never been done before. And they want to make sure it's worked for at least three other competitors. Right? Data. I used to argue for passion. I used to argue about accessibility from passion, "But it's the right thing to do!" Nobody cares, that's ridiculous. Right? There are some people who care, obviously, but most people don't care. It's a business decision, it's bottom line. So give them numbers. It's costing us this much. Or, Luke Wroblewsky is great if you just go to lukew.com and look over some of the data he's compiled on mobile and [inaudible 00:57:18] and all that stuff. He's really great at compiling data that your boss would actually care about. Like, there was a period where not that many people were using smart phones. And then there was a period where people were using them, but not for most of their heavy duty stuff. And then there was this period called the Mobile Moment where suddenly people were doing everything on their phone that they could do on a desktop, and if they didn't, it was your fault, because they expected to, and then people were actually using their phone more, they spend more hours on their phone than they do on a beautiful, luxurious big, monitor desktop. So you bring charts like that to your boss, and say here's why. Or Luke Wroblewsky had another chart and he didn't invent this one, but it showed all the different Android layouts, and it was like, if you can't convince someone to get on board with responsive design and they really wanted everything to line up with the fold on their machine, and you say, "OK" and they say, we want it to work on a phone and we want it pixel perfect, and you say, "Great, which of these 375 Android layouts should I comp in Photoshop. You pay me by the hour, right?" You don't do that because that's rude and arrogant. You do it tactfully. But you say, "Gee boss, can you help me prioritize these? It seems like there's a lot… I don't know." That's manipulative, too. I don't know. But you have to know your boss and know how to talk to them. But you give them data. That's my biggest thing.
- Jen
- I bet too, with this it really is about allowing ourselves to experiment and make things that might not work and then it's about doing user testing and also about collecting data as we go, and when we can take the risk because the risk is lower, then go for it, and when we need to make sure it's going to work before we push it to production because the risk is high and the expense is high, and the possibility of failure would be very expensive, then we spend more time testing it. I also think there's an opportunity cost possibility, though too, as well. Businesses will have a chance to jump way out in front if they use layout to great success.
- Jeffrey
- If you have a visionary boss, you can make that case.
- Jen
- Yeah, and you can make that case. Someone is going to come along and build a much better Facebook style feed with the new layout tools, and when they do, everybody is going to copy it. And maybe it's going to be Facebook that does that, and maybe it's going to be somebody who comes along and eats Facebook for lunch, and that's the reason that they were able to beat Facebook when it seems like no one at this point could beat Facebook. I don't know. I think there are opportunities there that being hesitant will also cost you. It might cost you more than taking a risk.
- Jeffrey
- [01:05:17] I'm just going to say MySpace, and AOL.
- Jen
- Yeah. Friendster
- Jeffrey
- I don't wish harm to Facebook or my friends who work there, but we work in sand, we're Ozymandius, and everything that gets built digitally has a short lifecycle.
- Rachel
- Yeah, but I think right now it's not so much about, grid is behind a flag still, we can't use grid in production at the moment, but the advice now isn't so much about convincing clients, it's about convincing us that we should start experimenting with this and we should learn it. And we should start figuring out what will be possible, because yeah, it's not going to be tomorrow, and it may be later this year that grid actually ships properly, and if you're very lucky and you've got the sort of sites that only have newer browsers, you might be able to start using it, or you could start using it as an enhancement. But the job of convincing at the moment is convincing us that we should start experimenting with this stuff so that when it hits, when it's there in browsers, when there's 50%, 60% support and we can start says, "let's build sites uisng this for real' and let the layout not be as good in those older browsers, we already know what to do, we've already got ideas and we're itching to get started with it. Because it's going to save us all a huge amount of time in the future.
- Jeffrey
- I totally agree with your advice, and I just want to say, people listening to this who do that will be perceived as geniuses. It's like people who were doing mobile because they could see it was the future. And most of us were ignoring mobile. And then finally, mobile hit a point where no one could ignore it anymore and then those people looked like forward thinking visionaries. How did they know? They knew because they were looking. And so everyone listening to this, and everyone in this room knows. This stuff is coming. And if you master it now, you're going to have job skills. People will be afraid of you. In a good way.
- Jen
- Yep, you can walk away from the boss and the client who are being a pain because you've got 17 other offers and opportunities.
- Jeffrey
- Well, 16, let's not over-promise.
- Jen
- Another good question. Advertising drives a lot of sites and in many ways affects their design. What kind of work needs to be done in order to make ads more native-like in magazines that can be greater than 50% ads. What do you mean by advertising?
- Eric
- Man, if I had a solution for advertising, I'd already be retired, basically. I'd have so much money. I wish I had an answer to that.
- Jeffrey
- Sponsorship is a good idea. I think it doesn't work for everyone obviously, but if a sponsor can sponsor certain content, bring you something, Typekit brings you this article on typography, being the most obvious example I can think of, but you know, Betty Crocker brings you these recipes from your local newspaper. I mgith be better where the publication is trying desperately to do responsive design and the publication developers are trying desperately to lower the bandwidth, and yet the advertisers have these big, heavy scripts and these fixed width ads, I don't see that having a very happy ending. Also, I think sponsorship is something where it can be less intrusive, but more impactful, right? If you're the only sponsor of this content, there's no other ads distracting the reader actually appreciates that and feels good about your brand. Not everybody is going to buy into that, obviously. And if you're selling used cars, and you do classified ads, it's not going to work for you. But if you're a brand, right, if you're a fragrance, or a beverage, or something and you're sponsoring and you're creating all this white space and letting people just actually read the content they came to read.
- Rachel
- Yeah, here's the thing though, what about, if you've got all these new tools, a lot of the really cool creative stuff that happens in other mediums is created by advertisers. What about all those TV commercials that everybody wants to watch even tough they never ever watch adverts, and yet at Christmas time, certainly in the UK, "There's the advert from John Lewis or whatever" and everyone says, "Oh, have you seen it yet? It's really cool." Maybe we can start to see that sort of stuff on the web, stuff which is essentially sponsored content, but can be freed from needing to be anything in particular, because it is just something for us to look and and say, "that's really cool!" And ok, maybe it comes from a brand that is just wanting us to look at their thing or their perfume or whatever that is.
- Jeffrey
- I used to be in advertising, and i have to say this is me being fearful, TV advertising hits you over the head, it grabs your attention, it's really over the top comical and stuff. It has to, because they know that you're getting up to go to the bathroom when the commercial comes on, so they've got to stop you. And I accept that on television because it's free. I'm watching the show, and if it's a funny commercial. But I don't want that if I'm trying to read a news article about a serious topic. I don't want a funny ad for it.
- Rachel
- No. I wasn't really thinking of that experience, I was really thinking more about them sponsoring the kind of stuff that people just want to look at. That is interesting enough, because advertising is somewhere there can be that playfulness, certainly advertising in the UK there's quite a lot of that happens that's interesting.
- Jen
- The whole question of advertising on the web is very deep and it's a whole nother episode, but if we think about layout, I do wonder… For one, one of the things that's happening right now, especially if you're on a phone, is that you're reading an article, and then right in the middle of the article, there's an ad. And then you're reading more, and there's another ad right in the middle of the article. For one, it's annoying because it's hard to scroll without touching the ad, which they're doing on purpose, and the other is that I know, because I know, that they jacked up the source order and that the ads are injected into the middle of the source order, which is going to break them for the future, for screen readers, for all these different situations. And grid and these other technologies will let us not break the source order in that way. And at least have that article be a whole thing contained, and the ads be in the source later and then put the ads up where they need to go. And I wonder, as I think about that, what that means for layout of the page, especially on a bigger screen where you have more space. Where the ads can maybe be a bit less intrusive but still present, support the business model without being quite as obnoxious. Or we have a lot of ads that take over the page, right? And the especially take over the page with really badly written bloated javascript, and they make it impossible to use the website, and hafl the time you're just like, "I'm outta here. Screw it. I don't need to read that article." But maybe there are ways that the javascript isn't needed as much so that the experience gets improved and the advertising isn't so disruptive while still beings something that's perhaps more creative, or more beautiful, or more of a pleasant experience instead of an annoying experience. And I hope people who are involved with advertising and figuring out this question can look at it again with fresh eyes, with these tools in mind and say, "Ok, now that we've got better tools, how can we actually make this a situation that's going to be better?
- Jeffrey
- As far as on screen takeovers go and popups and all that, I'm discovered I created something that I call the Pinterest test, and basically, I try to save the image to Pinterest, and if Pinterest says they couldn't find any image to post, that means there's so much nonsensical scripting and barriers going on, and it's like, that's not acceptable. And it's not just advertising, it's when I want to see a photograph and I want to look at it in more detail, and instead of being taken to a new page to look at a bigger version of it, which is what should happen, they load it in this popup and there's all this stuff. You know that there's some developer thinking it's cool. Like, a new developer. I remember being young at this stuff and wanting to show off, right, and wanting everyone to know how clever I was, "Look at all the flashing and scripts and all this movement!" It was terrible. Itw as bad design, and that's what's happening now.
- Rachel
- So, this is the last question so far: Content. How can we stress the importance of content to support amazing design?
- Jeffrey
- I think that once we have this big experimental period, and we just blow it all out and it's crazy, and then we mature and we learn from that, and we can design better stuff that better suits the content and tells the story like you were talking about in your presentation today. And then I think that's how we'll do that. If you have the resources to do the art direction for content now, I think that boosts the value of the content.
- Jen
- Yeah, I feel like I don't know how to do any… There's something about the systems that we've been using, the habits that we've built up that are kind of a tether. They're this thing you hold on to in the middle of the storm, but you know where you are because you've got one hand on a pole and you're holding onto it. And somehow, all these possibilities untether me and I'm just blowing around in the waves and I have no sense of where the ground is, but the thing that ends up being the new thing to grab onto is the content. And so as I'm looking at something and I'm trying to come up with a new design, it feels like, "if I don't have the content, then I don't have anything to hold on to." I did print design for many many years, the first thing I always needed to do was go get the content. Oh, I got to make a postcard for this concert that we're having in a month and a half. Where's the press release, where's the press kit, where's the… I need the bio. Did we get the photo from the artist yet, the first thing I needed. And I'd have to write a lot of it, because nobody else was writing it. So I'd sit down and write it and pass that around and get it, not approved but proofread, and then I'd start laying out the postcard and laying out the poster. i don't know how I would have ever just opened up Quark Expresss and been like, we don't have any of the bio, and I don't have any photos, and I know the name of the artist who is coming, but I have no idea what the title of our event is going to be, I'm not even sure if it's going to be one day or two, let me design the postcard. That would make no sense, it would just be, pushing around empty boxes with nothing. And I feel like there's something about if you know the layout is going to be a header, a logo in the upper left corner and a line of navigation, and then a big hero graphic and then three columns of stuff, then you could put lorem ipsum in there and then you can chose, do I want to make it 18pt in my headlines of three columns of content, or do I want to make it 21 point. I don't know, this time maybe I'll make it 24. But as soon as you get rid of that design and you start saying, "Ok, what am I going to do for a layout on this page, what am I going to do for typography on this page, for real typography. What am I going to do for the feeling of this new website, I need content. I think, in any situation where the process is not going to allow that, that those people are not on board yet, or even hired the writer, whatever it is, much in the same way that responsive web design didn't actually turn out to be about media queries, it turned out to be about turning entire businesses inside out and restructuring divisions, because people couldn't work together in the old ways and make responsive websites, I feel like that's what's happening with layout and content. We've got to change, if you have a bad content system, and bad way that people work together around the content is screwed up, you're not going to be able to do great layout. And you've got to fix that problem before you do something brand new.
- Rachel
- yeah, I think there's a whole lot of stuff around content, I have a content management system. From the start, we built Perch so that people could use templates, the could markup their content correctly and yet, an awful lot of our customers still plomp a WYSWYG editor on the page and let the client play designer with the content. The only reason they can do that is because we had demand for the WYSIWYG editor, so we allowed them to do it. But at it's heart, Perch is about structured content, and storing this content, and it makes me so sad, because then they come in the next time, they've got the big blob of HTML all messed around, the client's been poking images into, and then they come in to support and they say, "Oh, we'd like to reuse that image that's here in the middle of this content," and I'm like, "If you'd built it with a template, you could, but if it's stuff in the middle of content, we don't know what it is. It's just a big blog of HTML."
- Jen
- You can't layout blobs.
- Rachel
- No. And so, that as well is a huge education for people who are used to being handed this… Most CMSs now have some method of having custom fields, so WordPress has addons, Drupal you can do it, you can do it in expression engine in craft, we're not the only ones, it's a way of working, but typically, you will see people go, "Oh, my client wanted something that looked a bit like Word because they want to design this stuff." The minute you've gone down that line, you have lost control of that content and you can't design for that content. You've got a nasty old block of HTML, that might as well have come out of Word.
- Jen
- You can adjust how wide the column is going to be.
- Rachel
- Yeah, that's about it. Yeah, that's about it. It's going to be a mess. So that's a huge education because people are still thinking, oh, my client says they want something like word to edit their website, and if you're editing your website in word, it's going to be a terrible, terrible website. Whether that's really in word, or if it's a WYSIWYG that's pretending to be word. it's not going to be good. So you need to wrest that back and show the content editors it actually makes it if they don't have to worry about the design. They can just worry about content and worry about getting the images into the system or whatever and let then let the templates that someone understands how the site should be put together. Let those dictate the design. And also, that means you can change it in the future. If stuff's getting into the templates, you can change the templates. If it gets into the content, you're screwed.
- Jen
- I've realized that I used to be a bit more in the sense of, "Look, I'm going to design a system, there's going to be a content entry form, and there's going to be a bunch of fields, and you're going to fill out these fields. Here's where you put the date, here's where you put the subtitle, here's where you put the teaser text, here's where you put the whatever." And now I feel like that, yes, that's the baseline, but maybe also, here's where you can upload images and a headline, and you get a little dropdown you can pick one of four layouts, and that's going to give you four options for different templates or layouts of that unit of content, wherever it shows up on the website. So that we could start designing tools for content authors, for people who are putting content into the system to be manipulate it, but not give them a WYSIWYG editor. Not give them a chance to make it purple and big, but to say, "I want the…" and then use semantic names for these so that they can be redesigned later.
- Rachel
- Yeah. That's what we do at Perch with blocks. I think there's similar sort of things in other things. But it's about grouping stuff based on what it is, rather than how it looks.
- Jen
- Yes, I think there some very interesting work going on a The New York Times, where they're actually getting web designers and putting them in the editorial room to design individual newspaper articles, but they're not doing that, like just lighting money on fire, they're doing that with a sense of, "We're going to build up a library of reusable templates."
- Rachel
- Yes.
- Jen
- And then over time, we're going to have this… These two articles were very different, but they were similar enough that we're going to be able to slowly build this system. Yes, I think we're out of time, but I want to say thank you to everyone in the audiences for all the great questions and for coming.
- Jeffrey
-
Yeah! Thank you! Thanks so much
[Audience claps]
- Jen
- And thank you to our sponsors, An Event Apart, and Image Engine, the show notes for this show are at thewebahead.net/115. We'll have links to the things that we were talking about today. You can follow the show on twitter @thewebahead and also go to the page for the show and you can see all the links to all the twitter feeds and all the websites and all the blogs of all the guests that were on the show today rather than saying them all right now. People know how to find you. So thank you all. This was actually really fun.
- Eric
- Yeah! This was good, thanks Jen! Woo Jen!