A huge thanks to MediaTemple.net for their support of this weeks podcast.
For years, Media Temple’s Grid service has been the web hosting choice of more designers, developers, and creative professionals than any other platform. That’s because a single Grid account can host anything from your portfolio site to 100 different client projects. And the Grid is ready for anything — hundreds of servers work together in the cloud to keep your sites online, even if you suddenly hit the front page of Reddit.
- Also, check out their New WordPress Hosting product as well as their launching of Google Apps for Work.
- Virtual Private Server solutions are also available with their DV and DV Developer hosting plans.
- Cotton Bureau
- CNN container queries
- What comes next is the future
- Jonathan Snook - SMACS
- The URL is the Thing
Justin Avery: Hey, everyone, and welcome to this week's edition of the Responsive Design podcast. This is episode 38. My name is Justin Avery and I'm your host and curator of the Responsive Design Weekly newsletter. Just right off the top, I just want to thank everyone of the listeners. Thank you very much for voting. We're very, very fortunate to make the short list for the Net Awards this year. There are some really great other podcasts in there. Just to be nominated and make that shortlist with those other ones there like Codepen Radio and The Web Ahead show, just really great stuff. I feel very proud and humbled to be in that crowd. Thank you very much for voting.
This week, I've got a super exciting guests joining. I've been in touch with this guest for the last couple of years but it's the first time we've actually spoke in real life but before I introduced him, I just wanted to do a sponsor mention at the top of the show. This week's sponsor is Media Temple. If you go mediatemple.net, you can check out all they have to offer. They're a web hosting company and they provide hosting for the Responsive Design Weekly site which is pretty cool.
They've got whole bunch of different ranges of levels that you can get it on. If you are just getting started, you can sign up for like a self-hosted, not a self-hosted, but a hosted WordPress hosting facility. It's super cheap and it takes all of the difficulty away from you. You don't have to install Apache or NginX. You don't have to install WordPress. You don't have to configure your firewalls. It just looks after everything for you. You just start writing articles and banging in plugins or whatever you want to do in your WordPress site.
They've also got other different tiers. I run one which is a dedicated server and so I can run as many different instances and use a host out for friends or for clients and things like that. Wherever you're coming in, they probably have ... Or they do have something for you as well. I can't recommend them highly enough. They are very, very good at what they do. Now, if you use the code RD25, you get 25% off your web hosting and also it goes to show that people listen to the show and it will help with future sponsors. You should definitely go and enter RD25 into mediatemple.net and sign up for some hosting today.
Thank you for sponsoring this show, Media Temple, and let's get to this week's guest. Welcome, Mr. Matt Griffin. Hello.
Matt Griffin: Hey, how are you doing today?
Justin Avery: I'm very well. The weather has been a little bit humid and hot in London but otherwise, it has been very well. How are you?
Matt Griffin: Great. We've had weird weather in Pittsburgh, not that I'm sure anyone is interested, but it's been exceptionally rainy and it's like 65 degrees this morning for the middle of July which is super weird. There is no problem, I'm sure. I'm sure everything is fine.
Justin Avery: It's [inaudible 00:03:24].
Matt Griffin: Keep burning petroleum. It's fine.
Justin Avery: Yeah. I've got a tire fire around the backyard. It's cold usually here. I'm from a good place called Darwin in Australia. I don't know if you've ever been to Australia.
Matt Griffin: I have, actually. I spent two months in Australia when I was 16.
Justin Avery: Whereabouts?
Matt Griffin: We went to ... My dad is a mechanical engineer and at that time, he was teaching at Carnegie Mellon University. He specializes in turbine jet engine blades and the dynamics of those things like torsional vibrations or the twisting vibrations of turbine engine blades. He was hired by ... Gosh, now, you're going to hate this, but I can't remember if it's Qantas or Ansett. I think it was Qantas. [crosstalk 00:04:08]
Justin Avery: How long ago was it? Because Ansett closed down in the 80's, I want to say.
Matt Griffin: This would have been early 90's.
Justin Avery: Maybe they were just around then.
Matt Griffin: Maybe like '93 or something like that. Probably '92, '93. Maybe a little later, maybe '94, who knows. I don't know how old I am anymore. But they hired him to go over there and worked on some stuff. Let's say it's Qantas just for fun, although I do still remember, because Qantas had never had a plane crash. Ansett have had one, I think, at that point. The tag line of the people is 'Chance It With Ansett' which I thought was pretty great. They had one plane crash, right?
We went over there for this whole summer. We spent two months in Australia and two weeks in New Zealand. We were in ... Oh, god, now, I'm going to look like a jerk because I can't remember city names. It's been a long time.
Justin Avery: I'm sorry. Melbourne, Sydney?
Matt Griffin: Melbourne. Thank you. We're mostly in Melbourne. We're in Sydney for a little bit and we did a little bit of traveling. We went and saw the Great Barrier Reef. Then, we went to New Zealand and went to Auckland and Christchurch and traveled around a bit. It's actually informative summer for me. There you go. [crosstalk 00:05:14]. Thanks, Australia.
Justin Avery: Yeah. Well done, Australia. Well, up near the Barrier Reef is an area called Cairns that you might have gone to.
Matt Griffin: Yeah.
Justin Avery: That is kind of, if you went due west from Cairns, you would hit a place called Darwin which is at the top middle of Australia. That's where I'm from and it's really hot there all the time, similar to what it would have been like in Cairns. Now, I live in London. I mean, it's summer now but jeez, I'm not used to the cold weather, but it's nice. It's fun to dress up in these coats in many layers and learn how to not get frostbite.
Matt Griffin: You would love Pittsburgh then.
Justin Avery: Oh really?
Matt Griffin: The wide variation. We've got all the fun stuff, like hot summers and freezing winters. It's wonderful.
Justin Avery: I only ever made the West Coast of the States and only for a short period of time. I do want to get back and [crosstalk 00:06:07] have a look around.
Matt Griffin: I'm all for the warm weather mostly because maybe it's all men but I think we look bad in shorts, man. Our legs, there's nothing that you'd want to see there. It's great when we can just put on pants. I'm all for cold weather.
Justin Avery: Yeah, definitely. I think it's like, if you've got a good tanned leg, it's fine. [crosstalk 00:06:35].
Matt Griffin: Maybe your legs are okay.
Justin Avery: [crosstalk 00:06:35] If it hasn't seen the sun for a while, it's never a pretty sight. When you went to Australia, the internet was around, in '92 or '93. Not really, just ...
Matt Griffin: Yeah, a little bit.
Justin Avery: What were you doing at school as you were leaving school before you entered these. Did you get in at such an early stage?
Matt Griffin: I really wasn't ... No, that was the ninth grade for me. Well, okay, so high school. This is '92, ninth grade. I didn't do much with the web. I do remember one of my friends there, so we had friends in Australia. One of them works for some software company. He's a little older. He got me a copy of the XCOM video game that had just come out on floppy disk, like he gave me a tarball copy of that. I spent a lot of time in Australia playing computer games. It's sad because I could have just done that when I was at home, but 16, that's what happened.
Justin Avery: Yeah. You just do that at that age, right?
Matt Griffin: Yeah. I got into the web ... When did I get into web? I mean, I recall ... I was in lots of weird music in high school and college. When I first ... I left high school a year early to go to the University of Pittsburgh for a little while which was here as you might imagine in Pittsburgh. That's when I really got major exposure to the web and the internet, a little bit before at friend's houses. I was on BBS'es in middle school and stuff but the web-web, I really got into more, like that year '96. I remember particularly finding websites for bands that I didn't think anybody else was into. It was really exciting. First of all, to see pictures of the bands because they didn't have pictures in their record covers, their line or notes, but also just to realize that there were people like me who had very weird interests, things I thought that I didn't figure to share with other people.
I think that first exposure to the web is really informative for me because it painted the web as this place where the nerds of the world, the people who felt sort of marginalized or different than the people that they're around in their local region could go and connect with other people and feel less alone. That early period of the web is really meaningful to me. It wasn't long after that, that I started getting into teaching myself HTML by looking at view source like most of us did in getting at GeoCities websites and putting animated gifs of flames on. I had music-related websites. Of course, I was in The Sunset Strip, I don't know about you.
I remember being so excited about the web at that point because it just seemed wide open. You could do whatever you wanted with it. The things I put on the web seemed just as viable. They had just as much reason to be there as anything anybody else put on the web. That was really, I don't know. It opened a lot of doors for me, I think. It wasn't until much later that I became professionally involved with the web, but for years, I was a musician. I played drums in bands, that I'd be the guy in the band that made the band's websites. I knew enough to be dangerous and made a bunch of band websites. It wasn't until much later ... Do you want to hear my weird college origin story? [crosstalk 00:10:05]
Justin Avery: Everyone wants to hear a weird college origin story.
Matt Griffin: Okay. I went to school, Indiana University, at a normalish time for audio recording in music school. I played in bands and I thought the next best thing to go into school for being in a rock band was to learn how to record your band's albums. I did that for a while and the university had very good music program. I was learning there and I got a semester short of graduating and then I realized that two things happened. One is I realized that recording music that I didn't like and trying to make it sound good was my idea of hell. I didn't want to keep doing that and inevitably, you're not going to like most of the bands you have to record if it's a job. You're going to record bands all day. You're going to hate a lot of it.
I didn't want to do that. I like recording my music but I didn't want to record anybody else's particularly. That seemed like a bad thing to complete. Then, my college band got famous in Japan. We got on a record label in Japan. We're like touring over there and stuff. I was like, "This is it. I'm just ... Forget school. I'm just going to drop out and play, being in a rock band. We'll be Radiohead or something someday." It turns out that's not what happened and that getting on a record label in Japan when you're 21 does not mean a lifetime legendary music career. In hindsight, that seems obvious, but at that time, it seemed like a good time than any to drop out of school.
I dropped out of school and I spent the next five years playing on various bands. I lived in Chicago for a little while and moved back to Bloomington, Indiana for a little while where Indiana University is and had a good old time doing it. As I got further into my 20's and started to feel the pain of sleeping on floors and sleeping four hours a night and driving to the next town to do a thing, it started to feel like maybe I needed a different career choice that had healthcare, for instance. That might be a good thing.
I decided I was going to look into going back to school. I was still living in Bloomington. I had been there for most of the previous 10 years and this may be 2006 or 2005 or something like that. I've been making websites and I thought, "Well, actually, this is pretty creative and interesting. It seems like there are jobs. I'll go be a designer." I looked into going back to school and I checked with registration and as it turns out, because I dropped out of school instead of finishing my degree like my parents really had pushed me to do, I was considered to be re-enrolling if I went back to school which meant they're going to backdate me to 1996 rates on the tuition.
Now, I've been living in Indiana for 10 years so I was in-state. I actually went back to school in, whatever, 2000 or whatever, for $5,000 a year. Once I figured that out, I was like, "I'm going to go back to school for something." Design seemed like fun. It seemed like putting together design stuff, felt like making albums and then you start with the germ of an idea and build it out and then you end up with the thing but someone would actually pay you to do it.
I'm back to school for traditional graphic design and by the time I get out of it, at that time, the web was in the heyday of, I mean, we just finished up tables based layouts and where Flash was going nuts. I hated Flash. It just felt really wrong to me. It didn't excite me the way that early web did, so I stayed away from the web and I got really into letterpress, really high into print stuff. That's where I was trying to go when I came out of school. Then, it turned out that all the work was in web and my boss at my first job convinced me to pursue web stuff.
There was a guy I worked with there who was reading A List Apart and into separation of style and content and using CSS. He started showing me all the stuff and I was like, "This makes sense to me. This is almost more like laying out type on a press bed with letterpress." It makes sense that you have content and it's structured in a way and then you have CSS to make it look a certain way. I could build things like this. This feels more like the web to me. At that point, I got really into the web and then it wasn't long before I'm doing what I'm doing now, I guess.
Justin Avery: That's an awesome transition from [part to part 00:14:04].
Matt Griffin: There are a lot of different things in there. I remember telling my boss at the first job that I felt really behind. I think, at that point, I was maybe 30 or 31 and just getting into professional design. All the kids I graduated with, they were also getting entry-level design jobs were like, whatever 22. I felt like, "Man, I've wasted my life on music. I'm so behind now." I remember telling her, "If I could just drum a website into existence, then I would be great at this." But I've invested in the wrong skills. I don't know, eventually, I got good at it, I guess.
Justin Avery: You need some kind of like Guitar Hero that builds a website.
Matt Griffin: Great, exactly. To roll down some HTML tags.
Justin Avery: Exactly. You punch in a different combinations of it and then, bam, there's a header, bam, [crosstalk 00:14:56].
Matt Griffin: Bam, carousel. That's what the world needs. Bam, carousel.
Justin Avery: Oh, terrible. Because I'm sure there are many people that are moving into the web even today at 31, 35, 40. You think they're well behind the curve. What advantages do you think you had over those 22-year-olds coming out of design school?
Matt Griffin: A lot. You don't know anything when you're 22. You don't know what you're doing. Not to make 22-year-olds feel bad, I mean, you know how to do ... There are things that you know how to do but your perspective is very limited. I mean, I know when I was 22, god, I had no idea what the heck I was doing. Your perspective is ... I think the biggest thing is your perspective is very different. The more time you get under your belt on this planet, the less specific things bother you because you have the perspective to see that there's always another thing. I think you learn how to pace yourself a little bit more, how to focus when you need to, how to pull back perspective when you need to. At least that's the hope, as you get some sort of wisdom.
I think the life experience that I had, it was less useful when I was a designer at a company. I was at the bottom of the design food chain. I had people telling me what to do all day, but once I started my own thing, when I started Bearded in 2008, it seemed like my only route to get back up the chain a little bit, instead of being in level with the 22-year-olds is well, I tried to get hired at places that I admired and no one is returning my calls. I thought, "Okay, well, the only way I'm going to make this work is just doing my own thing." I'm the only one who will give myself a chance.
I should just give it a shot. What have I to lose, right? I hadn't had a child yet. I felt like now is the time to take risks. I got a teaching gig, an adjunct gig, at Carnegie Mellon at the time doing some production design teaching. I had a little bit of dependable income and started off with a friend who is a developer and we just started doing stuff. I think all of that time spent playing in bands, was actually really useful.
For a long time, I resented it and I felt angry at myself for wasting all this time playing music. As I did things longer, I realized that I had developed skills were really helpful. For one thing, creating an album is a monumental task that feels a lot like project management juggling. You've got to get from writing and perfecting material to laying tracks down and mixing and editing. I was in recording so I was actually working in Pro Tools. There's a lot of analogies, I think, between something like Pro Tools and Photoshop, is how you manipulate sound versus how you manipulate. I mean, really, when you think about music, is just organizing sound into structures that mean something to a person, and design is organizing color and form and type into structures that mean something to a person. They're very similar.
The other side of it, when you're running a business is that running a band or being in a band is one of the most stressful and nuanced interpersonal endeavors one can enter into. When you basically have a bunch of creative people that care a hell of a lot about what they're doing and have different ideas and may or may not be very good at communicating their thoughts to each other; add to that, that they're all underpaid and underslept and underfed and you've got a recipe for ... I mean, there's a reason bands have horror stories and breakup stories.
If you can learn how to like keep a band together well enough to put out some albums and go on tours and survive and not hate each other, then you can definitely run a design business where people are at least getting paychecks and things happen.
Justin Avery: They have a bed and a roof.
Matt Griffin: Right. They're being reasonably compensated for what they do. It's not like their sole reason for doing it isn't just a pure love for a thing that they may or may not even understand very well.
Justin Avery: How did it go from what you're doing ... You were talking about becoming a sound engineer and recording music for bands and people might not necessarily like the music in putting that on. Have you found similar challenges when working as a designer with clients, maybe before and after you started Bearded?
Matt Griffin: Yeah. I mean, it's a different thing in that regard. With music, I feel like, and I think this is maybe the crux that I was getting in before with the band analogy, is with music, you're doing it ... at least with these guys, I was doing indie rock music. No one is expecting to get paid. Your only motivation is creating something you love. You really, really care if the thing at the end of the day is the thing you personally love or don't love.
With design, it's a much more functional thing. You're trying to create something that is effective at the goals of the thing. If you're making a poster for an event, then maybe the goal of that poster is to get people to notice the poster and the event and then go to that event. If a poster does that well, it doesn't really matter if you like it or not, it's a good poster objectively. It got people to event, it sold tickets, it's a good poster. You may think it looks like shit, it doesn't really matter. It did its job.
I had a teacher in design school, a professor that someone once said something about one of the students in class that said, "It really feels like you have a style with your work, like I see there's a consistency in the look of the work you're doing. It's neat that you have the style." She interrupted and she said, "You're not artists, you're designers. You don't have a style. Your style is whatever solves the problem at hand." I was like, "That's awesome." I love it, because that's true. Who cares if you like it or not.
We flat out tell everyone of our clients. It's in a document that we hand out at the very beginning of projects and often in proposals. It doesn't matter if you like the work or not. It doesn't matter if I like the work or not. That's irrelevant. Every piece of design everyone produces, somebody's going to like it, somebody's going to not like it. What matters is, does this meet the requirements of the project? Is it effective at its goals? If we decide that it's going to do these things and we decide that it needs to meet this criteria, is it doing that?
With design, that tends to come down to three things. You have what you're trying to communicate. You have the audience you're communicating back to, and then you have the style that you're going to say it, how effectively you're saying that. What is the content? Who are we talking to? How do we communicate that content to those people in a way that they're best going to receive it from us? What's the tone, really audience content tone?
Justin Avery: If you're working with the client, because generally, one of the biggest problems is that you show what you believe is an awesome design and, well, an awesome way of conveying the message and the purpose of the website.
Matt Griffin: Yeah, which is design.
Justin Avery: Yeah, which is design, to the customers that are going to be using the site but when you show it to the client, they are less impressed. They have a particular style that they have in mind. How do go about proving to or helping lead the client down the path of realizing that what you have produced is in fact better than what they have in their mind?
Matt Griffin: That's an interesting way of framing it because that's sort of presupposes that what we have created is good or correct. I tried to go in with an open mind about it being maybe not the correct solution and I want them to do the same thing. When we first sit down to talk about it, they might say something, the classic, make the logo bigger, make it blue, move them over here, like that's very prescriptive response. I would say, "Okay, that's fine. Let's suggest that," and keeping in mind that most clients don't have a formal design education. They don't know how to talk about design. They don't know how to give good feedback. They're just trying to be helpful. Their goal is to have a good product, so is yours. You're not immediately at odds.
My first questions tend to be like a therapist, really. It's, "That's interesting that you want to make that logo bigger. Why do you think the logo needs to be bigger? Well, that's neat that you want that to be blue. What is it about the blueness that seems right to you? What's not right about the color that it is right now?" We try to steer it back towards things that we set out before we start getting visuals. We don't just like turn on the screen and just start doing stuff and then hope it's right. We don't do stuff until we're like, "I like it," and then show it to our client.
We start with a lot of research. One of the things we tried to define in terms of look and feel is what are the qualities that we want to communicate for the brand or for the product. We might have a list of adjectives. It's like it needs to be like ... I mean, the ones you hear all the time were like friendly and clean and whatever, open.
Justin Avery: Inclusive.
Matt Griffin: Inclusive. That's a good one. But most of the time, you end up with these tight roadblock things where it's like, it needs to be high quality but not snobby or high class but not expensive, like these tight roadblock things which is actually reasonable. It's not contradictory, it's explaining to you that there is a balance to be had between two extremes. The real question is like where do you put the fulcrum on that extreme and how far. Are you mostly high ends? Are you like Apple where you're trying to look really high end? Or not too expensive but maybe a little expensive? Or are we trying to look cheap, like cheap to buy but still of reasonable quality? Maybe something more like a Fitbit or something like that where it's this plastic rubber thing. It's probably not going to fall apart today but it's $40 or something, whatever. I don't know what Fitbit costs, I don't really know anymore. I probably shouldn't quote the prices of products in podcasts that I don't have no idea about.
Anyhow, you get the point. There is an objective set of criteria that we're trying to make like some products do want to be friendly. Some products don't want to be friendly. Some products want to be authoritative and that's a different criteria that you're going for. When we have those conversations, we'd go back to those list and we say, "Okay, at the outset of the project we said, we wanted to be these things. Are we achieving that right now, and if we're not, are we too much something or not enough something else?"
We're trying to steer them away from the prescriptive results because that's my job. I'm a designer. I'm supposed to figure out how to solve your design problem, but what I need from you is whether or not I'm solving that problem well with your knowledge of your audience and your business and everything. If I'm not solving it well, let's go to the root of how I'm not solving it well. Yeah, I said friendly but this theme is too friendly. It's almost silly. It's almost flippant, like that's too far. We need to pull it back. We need a little more sober than that.
I guess when I said friendly, I didn't mean playful. I meant inviting. It's just a little too energetic. It's not calm enough. We wanted it to be like warm and friendly and reassuring, not like fun and playful and friendly. Oh, okay. Got you. I misunderstood. Then, maybe these colors are a little too bright, a little too vibrant. Maybe they needed to be warm but a little more like subdued, like maybe like deeper oranges and reds are better than these pinks and purples we've got going, whatever it is.
I think if you can tie it back to an objective criteria about something you're starting to achieve, you can look at almost any aesthetic decision in terms of what it evokes in people. I think color is very clear like that. We all know red, like fire engine red, is going to feel like alert and aggression and fire and blood all of these. It's going to get your attention but it may not be positive. Blues are going to be more calming and soothing.
Similarly, with typography, if you're going to choose something like Garamond, so that's obviously going to feel more scholarly and bookish than if you've picked something very pedestrian and functional like Helvetica. I firmly believe that every choice we make in design has those sorts of components and you can create good design by looking at the effects that each little choice has on a person and collectively, they make a more nuanced and interesting thing.
Justin Avery: When you're showing your client these things and presenting to them where they can see whether it's too playful or whimsical or too bookish in the typography that you've chosen, everyone, I think, these days has their own way of approaching a project. Some people dive straight into design program like Sketch or Photoshop. Other people are wireframing and sketching. Everyone has their own way of approaching it. How do you do it at Bearded, approach it with the client?
Matt Griffin: I'm really in the process. I really like figuring out processes that help us get to solutions that are good, more often than not, but also processes that help us communicate with our client in a most efficient way as possible. If you think of it from a client perspective, we've designed websites all the time. That's our job. We're designing websites day in and day out and we know what to expect and we know that at the end of the project, it's probably going to be pretty okay because it always ends up pretty okay.
From a client side, it's like what, every four years if they're lucky that they're starting a website redesign. Potentially for them, it's fraught with anxiety and at the very least, unknowns. They don't know what's going to happen next. They don't know what to expect. They don't know what's expected of them and a lot is probably on the line for them. They've been tasked probably by a superior to have this website redesign happen and if it tanks, then it's their job probably.
There are lots of reasons why they're going to be very anxious during this process potentially. I like to come up with a process that helps out a lot. I think the best thing for both of their sanity and for us to hit the mark on the design and for situations like Responsive Design that are more complex, it involves breaking down the deliverables into smaller tighter deliverables, that we can do more quickly and discuss more readily.
For instance, when we start, we like to do whiteboard and paper sketches to get in wireframe stuff, to get in information design at layout information architecture. We'll use those to start talking about things like page layout or even element level layout, a modular layout. We'll do really quick Photoshop comps usually for things like Dan Mall [inaudible 00:29:49] element collage or Samantha Warren Style Tiles, that sort of approach to getting look and feel really early. We can spend like 10 or 12 hours hammering out a look and feel direction that doesn't show a page layout. We're not going to be arguing about move the logo over here, I don't know if this thing should be on top or that thing should be on top. Instead, it's just, gut level, does this feel right? Does this feel like it's going towards your website. If not, I was at wrong. Is it too much of this or not enough in that?
We'll sort of tackle look and feel in this little Photoshop thing and we'll start tackling information design in Sketches. If we have more complicated user workflows, for instance, we were doing a medical site recently where people had to contact their doctor about something. It could be any number of things, or making appointment with the doctor's office. Those can be pretty complex workflows. How do you get through the process of selecting which doctor you want, selecting the location you want to be at, choosing the date and time of your appointment. These actually turned into fairly complex processes. For that, we might want to use a workflow diagram that a user can do certain steps and make certain choices that diverge their path and we can describe that process through the workflow diagram. That's the fastest way to get to that.
Unless it's actually showing aesthetics, we're less concerned with it being a beautiful object than just the quickest path to communicating the idea. In getting in front of a client as quickly as possible, get their feedback on it and start iterating quickly. For information design also, once we do this paper sketches, we don't invest a lot of time in them. It's just to get the first idea out there. Once we talked to a client about it, instead of revising paper sketches which seems like a pretty stupid thing to do when you're building a website is we start getting into code, so like, "All right, we have agreed that this rough sketch is the right direction, let's take this and the comment you had on it and start writing HTML and start writing CSS and get some very wireframe-looking prototypes together.
Now, we've got a thing that's responsive so it better communicates the layout. We've got a thing we can click from link to link and click around the website. You start getting a better sense of workflow in your information architecture so it starts incorporating those user workflow diagrams we might have worked out earlier. Now, we've got the older deliverables fall away and now this prototype is the culmination of deliverables. Eventually, we can bring in look and feel and turn this into fully functional design comps.
What's really nice too is that because they're prototypes, because they're interactive, we can run user testing on them very early. Especially since we use a starter kit, we've got this thing called Stubble which is how we start every project ever at Bearded. It's on GitHub so people can look at it and use it or just reference it, whatever they want from it, critic it and give us a hard time about it. That's fine too. Make a pull request if you so wish.
Justin Avery: Or just create loads of issues.
Matt Griffin: Yes, or just make really funny issues. I'm okay with that too. I like the jokes. We've got this very quick start to getting wireframing a prototype because all wireframes look the same as far as we're concerned. It saves us a lot of time getting that up and running. Every point in that process, the whole goal is to get a thing that more accurately represents the final product and if possible, makes progress towards finishing the final product like if were writing HTML, let's hope that's the final production of HTML ultimately once we have refactored [in the launch 00:33:11] and then get in front of the client and make sure it's good and then start rolling the revisions into the next iteration of the process.
If they give us feedback on wireframes, we're going to roll those into design comps which are built on the wireframes. They give us feedback to Sketches. We roll that into the wireframe prototypes. I think that just making things efficient and iterative when you have these big complex problems is the key.
Justin Avery: Rather than a giant big reveal after a month of ...
Matt Griffin: Yes. I think we all know that's fraught with peril and that's how we used to do it, like we disappear for a month or two or three and design these elaborate Photoshop comps and then like like print them out, paste them to Boards LOL and then like messenger it to your client or whatever. That's what we were all doing early on. It's really dumb. It wasn't making the web. It wasn't making websites. It's making pictures of websites which aren't the same thing.
Justin Avery: You've written quite a bit recently ... I think it's funny, you were talking about when you're working with someone back when you're just getting started and now, that were reading A List Apart, like, "Oh, what's that? Oh, separation of content," and then you're writing for A List Apart. How cool is that? [crosstalk 00:34:50] That's just like a big tick. I made this [crosstalk 00:34:55].
Matt Griffin: That blew my mind, honestly. Several people asked me like, "How did you start writing at A List Apart?" I mean, the honest to god answer is I went on the website and clicked the link for submit and read the guidelines and started submitting stuff. I've been writing blog posts for 1-1/2 years for about the Bearded blog. It was just like a Tumblr we had and then I just thought, "You know, it would be so cool to get published on A List Apart."
I had one blog post. It was a blog post, it was kind of what I was saying earlier about like pictures of websites. It was the moment we decided, "Okay, Responsive Design means we need to be in code faster. We're not going to make Photoshop comps anymore. We're doing everything writing code." We made a firm decision. We were only like five or six people so it's easy to just decide that one and do it.
I wrote this blog post and I was like, "I need to get this happen now. This feels like the right moment to say this." I said, "Here's why we're making the switch," and finally, I'm so happy about it because finally it feels like we were designing websites instead of pictures of website and that feels great. I put that out there and I got a huge amount of attraction for one of our blog post. I forget what the traffic was, but it was a lot more than we're used to. Even, I had people from Australia contact me and were like, "That was a great blog post," and like, "Neat, Australia. That's cool."
I went to the first Build Right. What was it called then? The Sparkbox, build responsibly. Pittsburgh was in their first round of cities, their first tour anyway. They came to Pittsburgh and Ben then contacted me. He had known about me from something, that blog post probably. He asked me to be on a panel with some of the other folks around here, Jay Fanelli, from at that point United Pixelworkers, now Cotton Bureau; Val Head, who people know from the books she has written on animations. She's in animationer. She's speaking at A List Apart now but at that time, we're all a little more undercover than that.
We all went into this panel and I remember somebody coming out to me at that thing and we're just chatting, whatever. He was like, "Yeah, I read this really great blog post that was about designing in the browser and how it's really important to design websites and not pictures of websites." I was like, "That was my blog post." He was like, "Oh, really? That's weird," like, "Yeah, dude. You think it's weird. That's weird for me."
Anyhow, I think that was the point where I was like, okay, like people are reading this and care about something I've written. Maybe I should try something like A List Apart. Wouldn't that be cool? It was just the best place I could think of publishing, like where can I publish ... If I could publish A List Apart that would be crazy. I started submitting there. I also started submitting in Net Magazine which I appreciated a lot. My cycle was just I would write a blog post, I would submit it to everybody, I would wait a few weeks and if nobody got back to me, I'd publish it on my blog.
I did that a bunch of times to A List Apart, maybe three times or something. I didn't hear anything initially with my first submissions, just no response. I found out later actually they were sort of like in transition with editors and I think things just got ... Normally, they're good about responding but it was silence at that point and someone was on the way out, whatever. Then, one day, I'm in this client meeting and I came out and I had this email on my phone and it said, it was from Jeffrey Zeldman and it said like, "A List Apart hearts you," or something like that. It was like the nicest thing and I opened it up and it was exactly what you thought it was going to be.
We love your article. We want to publish it in two weeks. Here's some information for you about that. Here's how it works. Are you okay with that? Of course, I'm like, "Oh, my God." Jeffrey Zeldman from A List Apart. Can't wait. This is it. This is my moment and wrote him back. We actually had a long email exchange. It turns out he went to high school in Pittsburgh and then he went to Indiana University when I went to school and also played bands there like I did. It was just like we did a lot of similar things about ten years apart. We had a really great conversation and the whole time, I'm like about to pee my pants because it's Jeffrey Zeldman.
I can't believe that I'm getting this article published, and so they did and then after that, they knew who I was and they're just much more receptive. I would send them an article and they would respond instead of just saying like yes or no. At that point, they'd say like, "Okay, we know you like your writing." Jeffrey said really nice things like we really like your writing style, or whatever. They would write me back and they'd say, "Well, we like some things about this article but it's not quite ready yet for us. We think it should be more in this direction." This would usually be like Sara Wachter-Boettcher, I think.
Justin Avery: Yeah.
Matt Griffin: It's how you say it? [crosstalk 00:39:36].
Justin Avery: I can't pronounce it either, but yes.
Matt Griffin: She's told me before and I know I butchered it. I should know it by now, but anyway, sorry Sara.
Justin Avery: Sara [crosstalk 00:39:46].
Matt Griffin: Sara [Bunch of Letters 00:39:49] is one of her pseudonyms also. Sara would respond to me at that point and say like, "We like this. We don't like that. What if you try this direction?" By the way, I know that's a big thing to ask of you. If you don't want to change it, that's fine but then we're going to pass on it. Of course, what, like I'm going to pass that? Sure, no, I don't really feel up to it, Sara. You're right. I'm really going to stick with this original idea. You guys should pass. I'm not going to do that."
I worked on it and that first big article I had with them which was, what was it, it was like getting signed off without comps or something like that. It's basically my designing in a browser article. It took me like two months, I think, to get that editing finished, because Sara, she was just merciless in a really great way, as she would keep coming back and saying, "You haven't quite got it yet." I think I rewrote 90% of that article by the time it was finished. We really just tore it apart again.
I remember it over Christmas, actually, visiting my mother-in-law's house with my family and just like writing. Sara is going to be so embarrassed to hear this but like writing through Christmas, trying to get it right and get it back to her. But finally, it did. It was finally good enough and then it was a whole lot better than when we started. She's an amazing editor and then it got published and then I did that again and it was a little easier the next time. It felt like I wasn't getting the right [inaudible 00:41:12] as much but really, I was just learning to be a better writer and self-edit a lot better.
She was just kept doing that and then at a certain point, I was leaving on vacation with my family for something. We're driving away. We stopped for gas and I was waiting for the gas and being unable to disconnect from the world at that point, I've checked my email while the gas was filling. I saw this letter from Rose Weisburd who was one of the other editors I worked with at A List Apart. She was a wonderful editor, and she said, "We love your new article but we're thinking that you'd be a really good candidate for this new thing we have called columnists. We would like to give you a call on A List Apart and you would write every month or two. You would write something for us on a subject of your choosing. Think about what you want the subject to be and if that's something you're interested in, we'd like you to do it." That was actually the next moment where I was like, "Oh, my God. That's it," like holy cow. They want me to do this, like they really like me.
Justin Avery: It's a family thing now.
Matt Griffin: Yeah. Now, it's like not job to job or article to article, waiting to see if they're into it. They're just saying they like what I'm saying and want me to do it all the time. That was hugely, I mean, it was like very validating but also very humbling like, wow, like I really looked up to A List Apart since I started being a professional web person. Now, I get to be part of it. That's a big ...
Justin Avery: That is very gold. [crosstalk 00:42:41]
Matt Griffin: It's like being part of your heroes in a weird way but also a lot of pressure that like, "I better get good at this because ..."
Justin Avery: It can cause [inaudible 00:42:48].
Matt Griffin: I don't want to ruin A List Apart. Not that I have the room to do that but like you want it to be at least up to par. I mean, like John Allsopp of A Dao of Web Design and Ethan Marcotte's Responsive Design article. These are like [crosstalk 00:43:03]. Yeah. These are things that changes the web and I don't think I'd ever going to do that. Now, in some small way, I'm a part of that institution. That was just very exciting for me.
Justin Avery: If anyone that's listening wants to get in on this, if you go to alistapart.com/about/contribute or in the menu at the top. He's got articles, columns, blog events, topics, and write for us. They are very receptive. I submitted an article last year. One of my things I wanted to do is write for A List Apart and it didn't happen but I did submitted an article idea and the same thing happened. They didn't get back to me immediately but they did come back and say, "Look, your way of targeting is too narrow. Could you try and open it up a little bit, how this affect this," because I just had a child and I wanted to write about how difficult it was to stay so involved with the web when all of the sudden another responsibility is thrust upon you. But of course, this was only targeting new parents and it wasn't why, and that's not the majority of the audience. It had to be opened up.
I never went back and opened it up. I will look at it one day but yeah, they are great. They do feedback on everything. They do take some time sometimes but then I imagine they get a few submissions. If anyone is keen on writing for them too, just send [crosstalk 00:44:30].
Matt Griffin: Absolutely. You just jump on it and just ... I mean, if I had waited until I felt like I was good enough to be published on A List Apart, just made to A List Apart, I never would have done it. Honestly, I wasn't good enough to be published on A List Apart until their editors worked me over for a while.
Justin Avery: Yeah, and over Christmas. Well done, Sara.
Matt Griffin: Yeah, right. That wasn't Sara. That was all me deciding to do it over Christmas. I had many months of time that I could it but I'm a much better writer because of those people. I've learned an intense amount. Now, I mean, when I submit my columns, Rose does a much lighter touch and I just could have learned the ropes. I know how to write a tighter article now.
Justin Avery: It is. I've read your columns that comes through all the time. They are great. One of the ones that I really did enjoy was the readable wearable stuff.
Matt Griffin: That was a fun one.
Justin Avery: Yeah. Seeing this is rare, like this is timely. How weird is this? This is a Responsive Design podcast. You are talking about designing for watches or small faces. Actually, I wanted to raise this anyway is that last week, during the Environment for Humans CSS Summit, I used one of your approaches to writing SASS with the mix-in, the heading mix in which I saw you talked about [crosstalk 00:45:46] last year. I was like, "That's such a great idea."
You've got it in this article as well but I know it's difficult for people to hear an article but what were the type of things that you were looking at when it comes to designing for watches or designing for small screens?
Matt Griffin: I think it's worth mentioning too that heading thing isn't exactly something I came out of my brain. Certainly, I adapted but I'm pretty sure, my recollection is that a developer was working with us at the time. He was our first hire, Dominic Dagradi, who then went to Heroku and now, has actually started his own service called linebreak.co. He's a very talented fellow and he instituted that heading thing.
I remember him explaining it to me the way I explained in the article which is, "This might seem a little overwrought at first, but bear with me. You're going to see why it's awesome in a minute." I told him this recently when I was visiting him in San Francisco that that was his thing and he said, "I have absolutely no memory of doing that." One of us is wrong but I'm going to try and throw some credit his way anyway. I'm sure he was involved in it in some way. But the idea ... You want me to describe the heading thing?
Justin Avery: Yeah, I mean, the article that eventually, if you go to alistapart.com, the link will be in the show notes but it's about readable wearables and how you design for wearable devices so that you can read the content, just some of the things that you touched on and like your thoughts around designing for this whole new wave of device.
Matt Griffin: Much like when I wrote that blog post about it's time to start designing a browser, basically. I had that similar built-up feeling where it was like this feels like the right time for this article. This feels like time to start addressing wearables. There have been enough background chatter in my life that I thought, "Okay, it's time." I went on Amazon, did a little research, looking around various articles to figure out which wearables had browsers on them where I could actually pull up a site and found the Samsung Gear S which had a couple of browser options, sort of. [inaudible 00:47:48] I had this like I think it was the GearWeb or something that someone made it just basically a plain text browser. Then, the Moto 360 which also has a whole browser on it.
It was fascinating. It was so much fun. It was the most fun I'd had writing an article in a while because I got them all setup, strapped those watches to my wrist and just started playing with the Bearded website which right now is a very simple website. It's just two pages and not a lot to it. It is a nice, simple problem to tackle in a very new environment. The first thing I did is just pull up the site on my watches and see how bad they looked.
The first response I had was like, "It's actually not that bad. Hooray, responsive data line; hurray, fluid layouts and hurray, progressive enhancement." It's not bad which is what Brad Frost said when he pulled up TechCrunch like, "Well, it's okay." It could be worst for a thing we didn't know existed when we built these sites. I started playing with them and my first reaction is we've been starting too large. That when we're resizing our browser while we're designing things, I was starting at a width that was too wide. My idea of small wasn't small enough.
We were starting at, I don't know, around like 350 or something like that. There are noticeable things that happened when you get smaller than that like our headings were too big. The headings just took up way too much size. They're too much for the screen so like our headline for the site went off the screen. The whole sentence didn't fit on and the first word, informed, with a big margin on the left did actually bled off the screen. I'm like, "Okay, the word doesn't fit. That's kind of a problem." Maybe we could do at some smaller headlines.
But I also noticed was that our smallest types stuff that was set at 1em also felt too small. The big stuffs felt too big, the small stuff felt too small. I thought, "That's weird. Why is that? Why would the small things feel too small?" What I realized wearing the watch for a day and looking at websites, was that with a phone, the key difference between a watch and a phone, my first statement was a watch is attached to your wrist. That's not exactly the problem. The phone is in your hand which really isn't that much different distance wise from your face. But the phone is held in your palm and most folks strap their watch through the outside of their wrist. There's a big difference if you have the face on the inside of your wrist. I think a lot of folks have their face in the outside of their wrist.
When you're doing that on the outside of your wrist, the action to look at a watch screen is to, you can try this at home, you hold up your hand like you're checking the time and you're going to tend to hold your arms straight out from your body and then bend your elbow at 90 degrees and then look at your watch. It's about, I don't know, eight inches from your face or something like that or 10 inches, whatever. That posture, if you hold your arm there for maybe one or two minutes, the time to read a web page, you're going to notice that if you're anything like me, your arm starts getting tired pretty quickly, that your biceps are, that's about the end of my knowledge of anatomy, sorry ... Start getting tired. I know one muscle.
If you have your phone in your hand and you flip that arm over, you'll notice that the first thing that happens is while you flip your arm over, your elbow goes down into a down position and that your bicep stops hurting. In fact, if there's a table in front of you, your elbow sits very nicely on the table while you're phone is at eyeball height. What you find is when you're looking at a screen on a watch for more than a moment, you're going to flip it down. You're going to lower that elbow down to the table or down to the lower height where your arm doesn't hurt and that's going to bring the watch face away from your face. Even though it's a smaller screen, if it's for any length of time, you're going to be holding it further away from your face in the phone which means the small type gets smaller. It's further away from you.
That was really a fascinating thing for me to realize is that that very physical user experience and body positioning of the device changes how you operate it and changes what your type size is further away from your face, smaller. What we ended up doing was normalizing size. I had this recollection at that point of my first design job and my boss telling me about doing work in 80's where she was specifically designing for Xerox copiers. It was some special copier where you could do a little bit of formatting. But all she had at her disposal for design was a little bit of type size, bold, italic, caps, no caps, maybe that was it. That's how she had to format a document. Those serious constraints were really ... It was a fun problem to deal with, right? Like how do you break up a large complex document with no color, caps, bold, italic. That's all you got.
This reminded of me that problem. I thought, okay, type size is gone. I have a little bit but I think maybe I have from like I can't do 1em anymore so my minimum size is maybe 1.1ems and my top size is, I don't know, maybe 2.5 or 2ems? Let's say something like that. I have a pretty limited type dynamic range for my size. I can only go so big and so small. What else do I got? I've got bold. I've got italic. I've got color. I've got caps. I've got small caps even though it went pretty junky most of the time in a web browser and just start to like iterating on that like what do I have left if I lose size for headings? Then try to come up with a decent visual type hierarchy ranging from H1 to H6 or at least on H5 because I really use H6 with that limited dynamic range where you could still tell the headings apart and the smallest headings were still clearly headings above a paragraph size.
That was like a really fun exercise and so what I ended up doing was having these more limited base level heading styles and then building up from there. I put media queries in the heading styles that set it back to my standard sizes where I could get really big and get a little smaller. That was a really neat realization and because I used that heading trick that you were talking about where basically, all my heading styles come from heading base mix-ins that I then roll into the headings and into other things which is nice because it means, if you want to make an H5 look like an H3 or an H3 look like an H5, you can do that. You just throw the mix-in on it that styles it like the other heading.
It's all coming from one centralized place. Because I've done that very centralized mix-in Sass-based thing, it was really easy to go add those media queries into them and add the base level styles to them and suddenly, my site just worked. Wherever I told something that looked like an H4, now it looked like the new H4 on tiny, tiny screens.
Justin Avery: Yeah, that's really cool.
Matt Griffin: It came down to primarily the typography thing but there are some other things that I started playing with too. A spacing was a thing. Grid layout was a thing. We started with a three-column layout on our profile images of the people that worked there and that three-column looked real bad on a tiny screen. It looked like 200 pixel or 180 pixels but the names are all broken like the pictures were just dots. I thought, okay, I guess I got to start a two-column grid, little stuff like that.
Justin Avery: Pump them up a little bit. Because the ... Well, usually, when we're building typography over CSS, we always go the mobile-first approach or you'll declare styles which you then build upon as your viewport increases but we usually start with, like you said, the body styles is 1em. All the font size is 1em because you have to go smaller than that for this. Do you then set like a max-width media query for things under a certain thing and so it go against the grain on that? Or do you just declare a slightly larger one for the next minimum query?
Matt Griffin: I think I misunderstood what the question was there.
Justin Avery: Usually, we would set the body size to 100% and then we would set paragraphs and stuffs to 1em. That would pretty much be stable between from an iPhone through to a super, super 4K display. We wouldn't change it too much. We might change the body but with the watches, we're actually going smaller and like really specific sizes for the headings and stuff which probably wouldn't naturally grow as you're going larger and larger.
Matt Griffin: Right, got you. Yeah, what I do is I don't mess with the body font size at all. Well, actually, I do. As I said, I just scrolled to the part of the article where I said that I'd do that. That's hilarious. Yes, that is it. I haven't read my article in a while. One thing that I suggest in here, I didn't know I did this. This is like me and Dominic, right? [Crosstalk 00:57:06] published in an article that I started with saying HTML font size 110% and then at breakpoints small which is going to be around 290, I think, which is what I said on this one, which is not device based. It's arbitrary ... Well, it's not arbitrary but it's based on where things started to look okay, instead of reset it back to 100%.
That was one way to go, to just get everything a little larger and that way, I don't have to go about ... Oh, now, I remember why I did it, that you don't have to go about saying paragraph 1.1em until breakpoint is small and make it 1em and then do the same thing for lists and definition lists and then every other weird thing because you're going to forget some ... Like you're going to forget definition list and then at someone point, if someone is going to add a definition list and you're going to be like, "Fuck, it's too small." Right? Like you might as well just fix the base level font size. Then, the headings are more specific. Man, you've read my article more recently than I have. I don't remember any of these.
Justin Avery: No, I didn't even scroll down that file. I was just thinking [crosstalk 00:58:08]
Matt Griffin: You're just guessing.
Justin Avery: How would that actually work? What would you do [crosstalk 00:58:12]
Matt Griffin: That's great. That's the part you have to know the answer already.
Justin Avery: No, I didn't know the answer but the thing is you've forgotten the question had already been asked and that you've answered it. That's the weird thing.
Matt Griffin: Oh, I should have prepped for this interview.
Justin Avery: Me too. This is bad.
Matt Griffin: Thank you for asking that question and reminding me of how I did it. I'll make sure to do it correctly on the next site we build. The reason for that is that ... I mean, this is something that I found in general with the web is the more flexible and broad reaching your solutions can be, the less likely you are to get bit by it later. If you're going around and making like font size 110% until breakpoint is 100% on paragraphs and then you do it again on ul's and ol's and dl's. At some point, that's going to go wrong either because you're like forking that rule and you're going to change paragraphs and forget to change the lists or because you left something out of that rule and it's going to get messed.
Justin Avery: I supposed it's a great thing about having that thing called ... Oh, jeez, my words today. Great thing about having Stubble there. You say you have that base all the time. You don't have to think about what you're doing. It's just sort of there and already set out for you.
Matt Griffin: You fix it once and forget about it. If you fix it once, fix it everywhere. How many website have we all made? I mean, there are just so many times and that's why we came out with a starter kit because we were doing the same thing over and over and over again like how many times had we implemented the hamburger menu that you click on and a drop-down menu falls down and like, "Oh, god, we have to go do that again." Just throw it in Stubble, guys. Come on. Let's never think about that again.
Justin Avery: It's just going to be how we do it forever and ever.
Matt Griffin: Right and then maybe, occasionally, we change it or there may be a point where you realize, "Oh, that was really stupid. Let's stop doing that," like the point where we realize like just the hamburger icon is maybe not a good idea. Maybe you should put the word 'menu' in there. That's more understandable to people. Then we just change it in Stubble and now, every website. Their default is there and if we want to deviate, that's fine but like let's make our frequent decisions lasting.
Justin Avery: No, that's a good motto.
Matt Griffin: I'm glad you like it. We make a T-shirt at Cotton Bureau now.
Justin Avery: Yeah, I love Cotton Bureau. I'm glad you mentioned that. They're really cool. You do have a really good Bearded T-shirt. Actually, I'll put that in the show notes as well. I like the Bearded T-shirt from Cotton Bureau.
Matt Griffin: Thanks. Yeah, that's [Matt Brown's 01:01:00] handy work, our designer here. He makes pretty things.
Justin Avery: Yeah. People always tell you that I put a Responsive Design shirt up there which I like but people like [crosstalk 01:01:11]. Yeah, they're like, "I love the design." I'm like, "Thanks. I didn't do it."
Matt Griffin: Yeah, right. [crosstalk 01:01:11]
Justin Avery: Someone did the design for me, they say, "No, it's good." [crosstalk 01:01:18]
Matt Griffin: I'm in the same boat.
Justin Avery: Yeah, I'm glad that ... I'll put a link to because I can't think of a name at the moment. The last time we talked was over email and it was back 2012 when you did a Responsive Design interview series for me because I was going on holiday every Christmas.
Matt Griffin: Yes, a book.
Justin Avery: Yes and it ended up releasing as a PDF and everyone was really nice and said, "Yes, absolutely. Put me in there and you can charge for it." I was going to give it away for free and people encourage me to charge for it which was wonderful.
Matt Griffin: Yeah, you get paid for your time.
Justin Avery: Thank you for everyone. Shoot, I didn't pay any of the people that did the interview.
Matt Griffin: I think you probably had ... Knowing being on the other side of things like that, I think you had more work than they did.
Justin Avery: Oh, man, I only get to a point on that too. Now, what we did talk about though is you came over a couple of your favorite RWD sites which was Polygon and another one from Lorenzo Verzini?
Matt Griffin: Verzini, that guy is amazing.
Justin Avery: We also talked about what you wanted to see like what was missing. Of course, it was 2013 and we didn't have responsive images and that was the thing that we needed and we're 2015 and what have we got?
Matt Griffin: We've got responsive images.
Justin Avery: Hooray.
Matt Griffin: Yeah, thanks to Mat Marquis and everybody else and the responsive images and now, Responsive Issues Community Group. Good job, guys.
Justin Avery: Awesome, Eric Portis. How do you think it went? Are you happy with the solution?
Matt Griffin: Yeah, I mean, I wasn't part of that effort in any way so I did not experience any of the drama firsthand of that process. I've heard lots about it especially over the course of making the film I'm working on but yeah, I'm certainly not the person to comment on the process but with the result? Yes, I think, what's interesting is ... I've been talking to a lot of people making this movie and this issue has come up many times. It's a great representative issues of the developer community talking to the standards community about how to make the future web together and have developer input.
I think there were plenty of hot drama in there but at the end of the day, I think everyone is happier with what they ended up with than what either of them proposed. I think if Mat and Dave Rupert and everyone else who was involved in these early proposals, Filament and all those folks got exactly their thing. I think they know now that that's less good than what we have. Likewise, when you talk to people on the browser end and the standards end, I haven't directly touched people who was pushing for Source Net but I think everyone agrees when I've asked, "What do you think about what Source Net people think?" I think everyone would agree that what we got is more effective than what we started with even though we might have gotten a little hurt in the middle there.
Justin Avery: I think it's a great solution. I think people are doing very well and Picturefill 3 is coming out. They're working on it at the moment. I noticed a couple of weeks ago that Edge, the Microsoft's new browser have incorporated the W descriptor and the sizes descriptor to fully support a source set implementation so it's so good to see. Do you think anything is missing still now?
Matt Griffin: I mean, I think images are in good shape. I'm in many ways happy with Picturefill. We've been using that for years now.
Justin Avery: I mean, in terms of all of [crosstalk 01:04:45] in terms of building the web to that.
Matt Griffin: I think the most obvious thing I think the Responsive Issues Community Group is now campaigning for is container queries which came out of the idea of element queries. Element queries was the idea that, I'll give you basic use case in case you will. First of all, go to A List Apart. Read Mat Marquis' article that's there right now about container queries. It's a great article. But element queries was the idea that, okay, most common use case you're going to hear from anybody describe this problem. You've got some thing that you're laying out with media queries and you know that it goes to say like two columns at some widths and then three columns at another widths and it starts at one column on mobile or smaller, whatever.
That's great and you want to design modularly so you've got this modular thing that behaves in a certain way based on its width. The problem is that it starts at one column. It goes to two columns and then it gets wider but now, it's in a main content area and you're trying to sidebar next to it. The main content area just got smaller even though the viewport got wider, if you're hanging with me on this. Now, you want to go to three columns because your viewport is wider but your containing element is actually smaller so you have to go back down to one or two columns and then wait until it gets even bigger and now, finally, the main content area is bigger than it was before you had the sidebar and now, you've got three columns.
Your CSS for this ends up being nutty because it's like you start at one column, media query to two columns, media query to three columns, media query back to two columns, media query back to three columns. That's a big hot mess-up stuff that really what you want to describe is when this thing gets to the right width, make it in an appropriate number of columns in this layout. The element query was the first proposal for this. Problem with element query was that it described itself by the size of the element. When my element is so wide, do these things.
Problem with that is if you say, this is a great example of developers and browser and standard folks working together. If you were to say, "When the thing is wide enough, make it less wide." If you said, "When the thing is 600 pixels wide, change the width to 400 pixels. Now, you have an infinite loop of rules to keep saying, "Make it smaller, make it bigger. Make it smaller, make it bigger." That was the immediate response from the standard community was, "You can't do that because if you do that, then no browser will know what to do with that. Try again." They were like, "Oh, wow, that's actually super reasonable and we haven't thought of that."
In that case, switch it to the container queries which says, "When my parent is this big, do this." They can do whatever you want. You can say, "When the parent is 600 pixels, make me 400 pixels," and that's perfectly valid thing to say. I'm hoping container queries, it seems like it's on track and I think that's the next thing to solve. When we have that, then we can do truly modular designs and truly modular CSS where we say, "These are the rules for this module. Throw it wherever you want, it will do the right thing." That's going to be a beautiful thing.
Justin Avery: Yeah, that will be nice. One day.
I think, it's okay. I mean, there are sites right now that are live, big sites that are using effectively element queries or container queries. I'm pretty sure CNN is using them on their website.
Justin Avery: Really?
Matt Griffin: Yeah, no kidding. I was shocked too. I know that websites that were built that we helped out a little bit with Sparkbox working on a very large consumer product suite of websites that we used element queries on together. That's out in the world.
Justin Avery: Wow, that's very cool.
Matt Griffin: I'm not sure about nondisclosure stuff so I don't want to identify who it is.
Justin Avery: Yeah, maybe we'll check that and if it's in the show notes, then you can go check it out. Our lawyers will run [crosstalk 01:09:12]
Matt Griffin: We'll ask [inaudible 01:09:14] if that's okay.
Justin Avery: Yeah, that's really good. I mean, you've mentioned the video a couple of times. You ran that through Kickstarter?
Matt Griffin: Yeah. We started making a movie, a documentary film called What Comes Next is the Future. It turns out making movies is rather hard so it's taking me a lot longer than I thought it would, which is a shame but it is going to be, I think, a good film. To me, that's more important. We started it. I started it because three things, I was on the schedule to do a lot of speaking in that year and I was on the bill with people that I really admired a lot that I thought have a lot of great things to say. Two, was that is just felt like a time when things were happening. It felt like a lot of excitement in the air with web design because of noble responsive, the burgeoning in and out of things just felt like a watershed moment that I wanted to capture. I felt like I was capturing it. I thought if nobody else was, I might as well do it. Three was, I'd just gotten a high definition digital SLR film camera so I could record things.
I just started carting around the light little set of gear and recording interviews with people and just asking them what seemed to be interesting questions and see what their answers were and I didn't have a big plan for it. I got a bunch of these interviews traveling around and because I've been traveling around and recording these interviews and getting people's thoughts and people are so receptive to it. Nobody gave me a hard time about it. I really interacted a person with like Jeffrey Zeldman or Ethan Marcotte, who were quite happy to sit down and talk about the web with me in front of the camera.
It started to seem like I was making a documentary about the web. I went about as far as I could without any funding and in between client work. I was able to put together a trailer for it and threw it on Kickstart and said, "Hey, web world, do you want this movie? If so, I'm willing to make it but I needed a little money so that I can devote time and buy a bunch of stuff." People agreed. We got a bit of funding and now, we're making like a low-budget documentary about the web. It's been amazing for me. The experiences I've had in the 1-1/2 year talking to people that I probably never would have had access to otherwise and getting a really diverse range of very experienced and interesting perspectives on the web, and what the web is, and what it needs to be and what it can be in, and what it was, it has been really eye-opening for me. It has really changed how I think about the web.
I was lucky enough a few months ago to go to San Francisco and talked to some of the greats of UX Design like people like Irene Au who started the UX Groups of both Yahoo and Google. Indi Young and Peter Merholz who were founders of Adaptive Path and Kelly Goto who's the founder of Gotomedia and basically wrote the book on waterfall process. That was huge. I happened to just bump into Jonathan Snook at a conference while I was there and we ended up going out to dinner and then doing an interview which is Jonathan Snook of SMACCS fame, now who recently got Shopify. Before that, he was in charge of Yahoo mail design [inaudible 01:12:41] SMACCS to help keep all those developers on the same page, lots of other developers.
Then the crowning achievement was getting to talk to folks from standards. I got to talk to Tantek Celik who was involved to some of the original CSS spec. He came up with the micro formats. He's Indie Web Camp guy like amazing guy, intelligent guy. I got to talk to him. Then, ultimately, Tim Berners-Lee, who we all know is that guy who created the web was like mind bending for me. To be able to sit down in realm with Sir Tim and asked him about the web and have him answer me on camera. Now, like that's going to be in our movie.
Justin Avery: That's awesome.
Matt Griffin: I know. I still don't believe it. I actually don't remember the interview at all. I was so anxious about it that I just sat there and like read the questions and just kept checking to make the sure the microphone and everything [crosstalk 01:13:44]. I had no recollection of the experience other than like sweating profusely and watching the red light. I didn't hear any of his answers. I just asked him the questions and let him answer and then go, "Oh, that was great." Then asked him another question.
Justin Avery: Without spoiling any of the movies, they've been like an overarching opinion of the web that you've received for everyone?
Matt Griffin: Well, I don't know if I received it from everyone but it's certainly been formulated for me. I think, when you come down to understand and I don't want to give anything away either but I think when you really start to get in to understand what is the value of the web, what's the history of the web and where has the web gone wrong in the past and what do we need to do to ensure the web goes right in the future and can deal with all these big problems we have. I think there are two big sets of problems the web is going to be dealing with. One is technical problems like the mobile devices and the things. How do we accommodate these crazy changing technological world.
Also, how do we continue to serve on a social level really well? How do we make sure that people who don't have access to information under other circumstances have access to this information that people like me when they're young or underserved can find other people like themselves. That this all comes down to really one thing for me, fundamentally, and that's the URL. That that's what makes the web incredible. It's the killer feature of the web. Anybody can go hit that URL and get information that they need. Any machine can go and hit that URL too regardless of it's operating system or browser or whatever. It doesn't need to be a browser like things can go hit a URL and pull that information and that's the big power of the web.
I think we forget that a lot because we live in an era where the web is much like a utility. It's very invisible. But one of the things that prompted Tim Berners-Lee to make the web is the fact that file formats were not exchangeable or operating systems didn't talk to each other. He had a NeXT computer. Other people at CERN had Apple and other people had PC's and they couldn't exchange files. This was a way to exchange information amongst everyone at CERN. The first thing he solved was the telephone directory at CERN. That's how he got the project to go.
Justin Avery: He built an internet.
Matt Griffin: Right. Nobody wanted a web but like we all wanted a phone book so he's like, "Okay, I'm going to build this phone book that's also the web." That's where it begins. That was a monumental thing that some of these computers could talk to each other and that what's fascinating to me is we're entering an era of the web or we have entered an era of the web that I think is actually really well exemplified by an article that Karen McGrane twitted about last night that I saw about a fellow who spent six years and he was a blogger in Iran that spent six years in Iranian prison and then came out and was appalled at what happened to the web while he was gone. He was writing about extolling the virtues of the open web basically.
But this era that we're in now of walled gardens and semi open systems where the walled garden of say, Apple's app store or made applications in general let's say Instagram. It's this world that talks to itself without utilizing URLs in a particular way. You're in the app looking at stuff in the app and not breaking through that wall. Or semi-close systems like Facebook where people are putting in information that ultimately is controlled by Facebook. You have to login. Then you have to be connected to people to see their stuff. I mean, privacy is important but also so is the nature of the web as this independent open entity.
When you take that away, you can't just go hit a URL and get the information people are wanting to share with you that you hit the URL that says, "Go download this thing for this app store," or whatever it is. You lose a lot of the power of the web both for people to be able to access things and for all these for all these future machines that we're cranking out to access them as well. The URL system is a really powerful universal system for solving a lot of our problems and it's funny that we have to suddenly have to retain that. I think that's becoming the central narrative of this film that we're making and it's really quite fascinating to me.
Justin Avery: Have you come across that wonderful [inaudible 01:18:39] the URL as the thing?
Matt Griffin: No.
Justin Avery: Right. I'll send you a link to it and it will be in the share notes as well. I talked at the Webby's which is something that Craig Lockwood put together in Cardiff and the guy's name escapes me. Anyway, it will come to me. It will be in the show notes. It's a wonderful, wonderful drawing and it's free and you can download it. We had it printed up size A1 and put on the wall at work. It's fantastic. It's really good. But there'll be a link here.
One thing that I quite enjoy and it's more of a selfish and it's a limited thing but this movie is about and these people are looking at the web as a whole and who has access to it and focuses on everyone that consumes the web. One of the things I love about it is the people who work on the web. That's more of a finite number but I think because we work on this thing which is so inherently open and we create that. Anyone that works on it somehow, I don't think that we start off that way. I think we are molded. Maybe we do start off that way but everyone I talked to is incredibly open like yourself coming on giving up an hour and a half to speak to me.
On this room we've had just email conversations and there are so many people that have been part of this podcast that have donated so much time to just have a chat and share their ideas and experiences when if I brought you into a corporation, people would be charging hundreds of pounds an hour or thousands of pounds a day and things like that. But when it comes to sharing information with other common people, it's just automatically, "Yes, of course, I'll do it." That I think is amazing. Yeah, it is really amazing.
Matt Griffin: I think that that originals [group 01:20:37] from Tim Berners-Lee and CERN to create the web and then to decree that it was copyright free and available for everyone to use forever. Set that tone for all of us to create this beautiful culture of let's solve these problems together. If I figure something out, I'm going to tell you how I did it. If you figure out something out, you tell me because otherwise, we're never going to do this. It's just building cooperation and noncompetitiveness there. That's why I'm still here with web design. It's a wonderful place to be.
Justin Avery: It is awesome. I think we'll wrap it up there because we're getting close to the time. Now, I've got these two things which I've got ... Actually, it's a couple of things but each week I ask a question of a current guest to ask of a future guest. We've got a question from Nick Schaden who was the front-end developer for Get Pocket and his question was, has responsive web design change the workflow within your company?
Matt Griffin: God, yes. It changed everything. I've got a little story for you on this one. One of my favorite things about this story is when I interviewed Ethan Marcotte, I got to tell him this story and see his reaction to it. But when Ethan's book came out, we bought it right away as one does with A Book Apart book and it arrived and former employer of Bearded employee number one, Dominic Dagradi, took the book home overnight. He came back the next day and he walked in and I said, "Well, what do you think, Dom? Is this something we want to try out? Is this something worth doing?" He said, "Oh, no. this is just how we make websites now." I said, "Really?" And he said, "Yep." And I said, "Okay."
I took the book home the next night and read it in an hour or two because it's a short book and I put down the book and I said, "It's just how we make websites now." Went into work and we all talked about it and said, "Stop everything. This is just what we're doing. Whatever we're working on right now, we're doing this now. We immediately started working on ... Well, we have been working on the new Bearded site for two years or something. We just like kept changing it and not launching it and then getting distracted with client projects, those distractions the things that pay the bills and that you actually do for a living.
We kept not doing it. We had all those Photoshop comps that's like desktop [useless 01:23:09] thing and we're like, "Forget it, Dom, just do it. Just make it up like make up to what it looks like on small screens and everything in between." He goes, "Okay." Dom was always game so he said, "Sure, yeah. Why not?" He just meet up with the rest of us like [gave our 01:23:23] Photoshop comps and at the same time we're building this website for a real estate development company where we just decided, "All right, we're going to use media queries doing mobile view. What the heck." It was already underway as a desktop site. But let's flip it and do desktop down and just have mobile view, desktop view and let's go market that or whatever. Let's just try it out. It's better than nothing.
We did those at the same time and it was like we were just never going to go back. I saw so many tweets one time, responsive web design is the most fun puzzle ever and it totally is. Here we were getting super boring making elaborate Photoshop comps and desktop sites and then having to go and do it all over again in CSS and HTML. I was sick of that and I was super excited when responsive came along and made us rethink literally everything about what we did.
Justin Avery: I love that story.
Matt Griffin: Funny, a follow-up to that ... Oh, I got to tell that to Ethan, of course, as soon as ... I love the footage of it because I'd get to the part where Dom says, "That's just how we make websites now." Ethan just loses it. He seems like both amazed and slightly embarrassed that he's had an impact on anyone.
Justin Avery: He's such a humble guy.
Matt Griffin: Which says a lot about Ethan. I mean, he's just an incredibly wonderful and of course, he's the guy that gave us responsive web design. He's such a generous fellow. Interesting story, then we were doing that stuff and we're trying to desperately finish the Bearded responsive site for a pitch for the Children's Museum of Pittsburgh which would have been our first really commercial for a responsive site. At that point, nobody really knew about responsive design, at least in our area. There were very few commercial sites. I mean, there was the Globe. We went in for this pitch and it was a super weird pitch because they actually invited everybody who was on the pitch into one room to ask their questions.
We were like interviewing with the other agencies. It has never happened to me before. It's nuts. It was super awkward because the whole time I'm thinking, nobody else in this room knows who responsive web design is. I'm the only person here who knows what that is and that's what I'm going to offer them but I can't tell them about it. They're going to go look it up. It's like the only time in my life it's going to be a competitive advantage. We'd never done anything that big. We were still very small and we had good results with our projects but this would have been a big lead for us. We got through that interview and then I came back.
We got called back. Luckily, I made a decent approach and we got called back I said, "Okay, guys, here's what I want to show you and we had just slapped together the responsive Bearded site." I threw it up on their projector screen and I said, "This is the new Bearded website." They said, "Okay." Then I grabbed the edge of the browser and squished it down and the whole room gasped. I said, "This is called responsive web design and this is what we're going to do for the Children's Museum of Pittsburgh. Like that was it. I had the client. That was it. It was over. It was a beautiful thing because that's never going to happen again, of course. It never happened again I know you think after that but you knew that was about all.
It was so much fun to go in and do that and they loved it the whole way three. We made a calendar for them. I think it was one of the first commercial responsive calendars where we made it a list view on mobile and then expand it into a calendar layout. It doesn't use tables which almost every calendars are tables. We did these articles in sections and just laid it out like a calendar when it hit a large enough screen size. That was like, it felt like the wild west again. It felt right.
Justin Avery: Yeah, back in the days.
Matt Griffin: GeoCities again in a weird day and I feel like it's been like that ever since. Since things got weird with mobile, it's put us back to a truer place that's really about the medium. It's what the web ... Somebody recently said, "The web's response [inaudible 01:27:14]. It's our job not to fuck it up. I think Jeremy Keith might have said that at a conference. It's true like I hated tables layout. I hated flash layout and now, we're back where we should have been like we got off track and now, we're back and man, that's a lot of fun.
Justin Avery: Yeah, thank, Ethan, you did well.
Matt Griffin: Thanks, Ethan, for fixing the web for us. Like I wouldn't have lasted much longer. I think I would have gone and done something else within two years pretty sure because I was getting really bored and Ethan and mobile really shoot things up for us and it has been fun ever since.
Justin Avery: It seems to be in the interviews that you've had so far, have people likened from the movement from tables to CSS or is it bigger than that?
Matt Griffin: It's interesting, I think there's a recurring pattern throughout the history of web design where we don't have the tools we need to do the thing we need to do so we've just figured it out. We've come up with a thing. Life finds a way, Jurassic Park. It's that thing. The web people find a way and I think table-based layout David Siegel's approach to creating killer websites was like that. I think flash was like that. I think M-Dot sites were like that. There have been lots of points where we needed a thing and we didn't have what we needed so we came up with something.
I think what's interesting is when those approaches like shims and those polyfills, those different approaches, when they get it right and when they don't and what the underlying themes are there. I don't want to talk about it too much more because that's the movie I'm making.
Justin Avery: Spoiler alert.
Matt Griffin: Yes, spoiler alert but I think when we make things the right way before we have them, it leads the way to better standards, better web. We go the wrong way, it creates fragmentation and problems down the line. Flash being a good example of that.
Justin Avery: It's good. Good point. Matt, you have the opportunity of asking a question of our next guest which is a lot of pressure on the spot, but if you don't have one ready to mind, you can always email it through at a later date.
Matt Griffin: I think I've got for you.
Justin Avery: Yeah, excellent.
Matt Griffin: What's the first moment that you feel in love with the web?
Justin Avery: Oh, that's lovely. I like that.
Matt Griffin: Because I think we all have at some point and it's really fun to hear for different people when that happens.
Justin Avery: Yes, I'm going to answer that now but ...
Matt Griffin: Oh, yeah, please.
Justin Avery: It was really, really early like I'm sure it was GeoCities site. I think there were two bits. One is we really liked Army of Darkness. Remember the Evil Dead Three? We made an Army of Darkness fan site reaping off another Army of Darkness fan site for all their images and hotlinked it to the site and put a hit counter at the bottom and just watched it soar like 20,000, 30,000, 50,000 [crosstalk 01:30:30] yeah. I think it was just potent. I think it was just an animated gif that keeps on counting to a million. Yeah, that was really excited.
Then there was another time shortly after that where I go to Notepad on the PC and just looked up, "How to write HTML" and wrote Header 1 and Header 2 and Header 3 and a paragraph and a list and then I made a link and I included an image and then I saved it and I had this thing which linked from bit to bit and it was programming but it was really easy and just so exciting. That was it. I think that would have been '97, '98 it would have been and that was it. Caught.
Matt Griffin: Yeah, I remember that stuff. It was great.
Justin Avery: Yeah, I loved it.
Matt Griffin: I mean, I still do. I mean that's lots of fun it's like that Readable Wearable article. When I was doing that, that felt just like that. It's like discovering the web again.
Justin Avery: Just playing around.
Matt Griffin: Through a different lens and that's what so fun about the web is whenever we start getting bored, the web gets weird and you have to look at it all over again.
Justin Avery: The last three days, I've been playing around with the other responsive design site to get it running on HTTPS through CloudFlare and that's just been so much fun.
Matt Griffin: There's always something.
Justin Avery: It is. It's just a challenge like I want that to be a green padlock. Why is it not green? [inaudible 01:32:03] the form isn't secure and then you have to find another solution for that and no, so much fun.
Matt Griffin: I mean, that's the beautiful thing. It's like where there used to be a world of webmasters and that can't exist anymore. The web is too complicated for one master and there's always a choice of like what do you want to focus on next? What do you want to get good at? Are you going to work on your command line skills and you're getting really good at it yet? Or what? Are you going to still working on CSS animations? What's your thing going to be this week?
Justin Avery: The most wonderful thing is that everyone who walks down that path has written about it and had written about their problems and how they overcame them and that's how you learn from those people who have already tried that.
Matt Griffin: Yeah, I totally agree. That was one of the best pieces of advice I took from Jason Free [inaudible 01:32:52] in one of his books was if you've got something to say, write it down. Just always write it down. If it helped you, write it down because it's probably going to help somebody else.
Justin Avery: Yeah, definitely. I always say this as well to [inaudible 01:33:07] that even if you've read an article about like you've got this one on wearable devices. I have no doubt when I get a wearable device, I'm going to write one not because I'll cover anything different from you because there's a very finite, very, very small chance that someone will read one of my articles [crosstalk 01:33:25] rather than a list of that article and they won't know the list of that article was there but because mine was there, they found the answer that they needed. I'm all for people to rehash the same thing because you have a slightly different take on the same problem.
Matt Griffin: The act of writing out something out requires that you figure out your thoughts that are in your head and organize your thoughts and that's incredibly valuable. I mean, teaching is the same way. Teaching people something makes you understand it better. I went to read Anna Debenham's article about working at the Moto 360 that came out before my article. It was really helpful. I think probably hopefully I linked to it at some point. But it's just yeah, everybody has got a slightly different take on things and there's a lot to learn or maybe I saw it right after I published that, I remember. But it was neat. She talks a lot about that round screen. It's a son of a gun, that round screen, man. You can only read the whole line of text that's right in the middle of the watch basically.
Justin Avery: Really? Over right to the other areas?
Matt Griffin: Yeah, it just cuts off the corners. One Screen makes a good watch, not so much a web browser.
Justin Avery: I'm reading here. I wonder if we get the CSS areas then?
Matt Griffin: What would I want? I want screen-type round and then just like threw us some margins on the sides.
Justin Avery: Well, sure you could mind, what if you make the buck ... No, let's not get into that.
Matt Griffin: Let's stop right there.
Justin Avery: Let's cut it there. Matt, that is a great question. Thank you very much for that. Thank you very much for joining me this evening. I know we've gone way, way over time but it's been great. It has been really good.
Matt Griffin: Thanks. I really enjoyed it. It's really great finally talking to you.
Justin Avery: Yeah, and you. Now, if people want to read more about what you've been doing, follow you on Twitter, do you have any projects, movies or anything that you're doing that you want to tell people about?
Matt Griffin: Sure. You can always about Bearded at bearded.com. You can learn about the movie futureisnext.com. We have @futureisnext on Twitter. We have @beardedstudio on Twitter and my Twitter is @elefontpress, long story. Letter press thing, don't worry about it. I think that's all the links.
Justin Avery: Awesome. All right, well, thank you very much again. Thank you for all the listeners for tuning in. I'm sure you enjoyed that as much as I did. Write this up to five stars if you feel the need to. That will be awesome if you could. We'll see you again next week. Thanks again, Matt, and we'll talk to you soon.
Matt Griffin: Thanks, Justin. It was great.
Justin Avery: Cheers all, bye.
Matt Griffin: Bye-bye.
comments powered by Disqus