- http://artequalswork.com/posts/web-design-power-tools/ - Nathans net mag article on web design tools (reposted on hist own site)
- http://alistapart.com/blog/post/content-out-layout-the-resources - A follow-up post with most of the foundation of what Nathan was talking about in the original A List Apart article
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.
Justin Avery: Hey, and welcome to Episode 34 of Responsive Design Podcast. My name is Justin Avery, and I’m your host and curator of the Responsive Design Weekly Newsletter, a weekly newsletter all about, you guessed it, responsive design. Before I get into introducing our guest for this week, I just wanted to have a quick shout out for our sponsor. Our sponsor is Media Temple. Media Temple, you can find them at MediaTemple.net. They’re a web hosting company. Incidentally, they are hosting the Responsive Design Weekly website as well.
We’re using them for years now. I use them for some personal projects, some friends’ sites, and also for business sites as well. They’ve got a range of different entry points that you can choose from. They’ve got a self-designer website tool as well called … I think it’s called “Virb” where you can go, and drag and drop components, and build one up yourself. They’ve got basic WordPress hosting, so you can host a single WordPress instance. They’ve got instances where you can host hundreds of WordPress instances for your clients as well. It just depends with what you need. They’ll be able to sort you out as well.
If you head over to MediaTemple.net, you can use the code “RD25”, and that will get you 25% of the cost of your hosting. Go check them out and thank them for supporting the weekly podcast chat. This week, speaking of WordPress, the Virb, and the ability to design websites, we have got Nathan Ford, a web designer, on. Welcome, Nathan.
Nathan Ford: Hello. Good to be here.
Justin Avery: Yeah, good to have you. Did I get web designer right, or am I way off?
Nathan Ford: I call myself a web designer first, but I’m also a product manager now.
Justin Avery: Stepping up in the world or stepping back?
Nathan Ford: I think it’s up because what I get to do now is make great products for fellow web designers to do their job better.
Justin Avery: Also, now I have some questions about some of those products that you’re working on now.
Nathan Ford: Cool.
Justin Avery: Before I get to those, maybe just bring people up to speed, list us up to speed with how you got involved from being a web designer or as a designer into being a product manager over the years?
Nathan Ford: Sure. Yeah. It’s been an odd trajectory, I guess, but not too odd. I went to school for graphic design, so I got my degree, my Bachelor of Fine Arts in Graphic Design, and went immediately to work for an ad agency. I had a really clued-in professor that told me, “Hey, you should probably learn this HTML/CSS stuff,” because I was interested in interactive. I ended doing that on the side. When I got my job in the ad agency, I was like the only guy that can build websites, so I got thrown all of those jobs. I got thrown big jobs, bigger jobs that I probably should have gotten with so little experience, but I got to cut my teeth on some really interesting projects and with some consequence, which is cool.
Slowly, I got better, and then I actually started moving into like real jobs in web design, focusing solely on that rather than … Because advertising really wasn’t my thing. It was a little too much flash as a technology and too much flash as in how you … The big idea and stuff like that, and I was more interested in making things work. Yeah. For the past few years, I’ve worked for a few different excellent web designer shops. Then recently, I was working for Mark Boulton Design, and we were acquired by Monotype.
Monotype makes … It’s a type foundry first, but it also makes really cool products like … Actually, the team that’s at Monotype has made cool stuff like Typecast, which you probably heard of. I had made Gridset while working at Mark Boulton Design. Now, that’s part of the Monotype thing. Slowly, but surely, I started just getting more interested in how to make the job of a web designer easier, and so that’s what I’ve been focusing on. Now, I’m a product manager.
Justin Avery: That’s awesome. There’s a couple of new tools that are out, neither the ones that you just mentioned, but I do want to ask you about those.
Nathan Ford: Sure.
Justin Avery: With the goal of making these things easier for web designers too, so remind me to get back and ask you about your thoughts on those specific tools.
Nathan Ford: Okay.
Justin Avery: With Monotype, you just mentioned they manage Gridset app, which was built previous, and you’re on that, so an application about making grids and taking the difficulty away from it which is good because I hate trying to make grids and that is very helpful. Typecast, which is more around the typography layouts from a hierarchical point of view or design point of view rather than the actual grid layouts. Can you explain a little bit about what each of the apps do and how they crossover or complement each other?
Nathan Ford: Sure. Of course. Yeah. I’ll start with Gridset because that’s my baby. That app was basically designed right at the beginning of the whole responsive design movement if you want to call it that. It was just because we were making a lot of prototypes, and quick little mockups, and stuff like that in HTML using Bootstrap … No, not Bootstrap, actually. Going back, way back to the 960 Grid System, and then … I can’t remember some of the … Basically, frameworks.
Justin Avery: Yeah.
Frameworks are great. I think they’re really good to get some ideas off the ground, but over time, you’re very limited by what you can do with that
Nathan Ford: Frameworks are great. I think they’re really good to get some ideas off the ground, but over time, you’re very limited by what you can do with that, and so we wanted something … First of all, like 960 Grid System wasn’t even responsive, so we wanted to build something that just spat out like 12 columns responsively, and then we decided … Mark actually had quite a lot of background in graphic design, of course, and I do too.
I remember the days learning about the different grid systems and stuff that people would use classically. We thought, “What if we could just push it? Since it’s programmatic, we can make it do all sorts of crazy stuff.” We built something that allows you to make it your own framework, your own grid system completely accustomed, so completely tailored to what the content is for your site.
That’s the whole idea behind Gridset. It’s just to make … Basically, make it easy to make responsive grid systems that are completely tailored for your content. That’s Gridset. You asked about Typecast as well. Now, Typecast, I don’t have as much to do with as how it’s created and everything. That was the team out in Belfast that used to be Design By Front, then they became Typecast and became solely that, and then they’ve been acquired by Monotype as well a couple years back.
Typecast is a great product. I’ve used it a lot. In fact, I had the pleasure of getting to work with those guys on quite a few new features right after the … We were acquired back in April of last year. I think Typecast is a great thing because it’s very difficult to work with web fonts right now, even right now, even how many years later. I think it’s been about five, six years since they’ve been really widely adopted. It’s hard to go find what you need and test it with your content. I think Typecast does a great job of solving those problems.
Justin Avery: Yeah. I’ve used Typecast a little bit with … I think I did that when I was looking for a job like a resume site and a portfolio site. That was good because I could just import all of the content that I had, and then just start playing around because I’m a terrible designer. Tools like that makes it quite a bit easier. With Gridset, does Gridset also … Are you able to put your content directly within the app itself and work out what kind of grid layouts work well with that?
Nathan Ford: No. No, not at the moment. It’s something that I’m looking at adding as a feature, so I still … Actually, we’re on good sets, so that’s just … It’s my side project. It’s not something that gets a lot of attention within Monotype, so I can do what I want to with it, which is fine. As far as like how it works, the whole concept was really just to generate what is essentially a framework or what people think of a framework, but basically, a grid system. It’s not going to decide your button styles, and your heading size, and things like that, but just purely layout. It helps you generate grids for layout, and then you can take that.
Justin Avery: Perfect. The other benefit is that … You touched on a bit earlier as well is a gain for people. I know when something looks nice, but I don’t actually know how to get to that point. You have a whole set of well-predefined grids like well-known grids that work or have been known to work in the past?
Nathan Ford: Yeah. Yeah. We did adapt a few templates that you can jump right into that are based on historic grids like the Gerstner, which is based on his … Karl Gerstner’s design for Capital Magazine, the grid that he designed for them and … Back in the ‘60s, and things like that. I’ve never actually been super convinced about how many people are like, “Yeah, the Gerstner grid,” but like at the same time, what we try to do is adapt them to make them very useful in a responsive environment and give you a lot of options, but not too many options.
That’s the balance we try to strike with a grid is to have just enough options to get the job done for your content, but not too many because then when you start extrapolating this system and sharing it with others, people are going to abuse it and stops … The whole thing falls apart. That’s why I’m not a big proponent of like 12-column grids or more than that because I think the less grids, the better because it provides clarity for your content.
Justin Avery: Like restrictions, right?
Nathan Ford: Exactly. Yeah. Yeah, there’s less … Basically, the more options there are on the page for layout, then the less that the actual layout itself is going to feel like your site. Yeah. Really, the more restrictions you put on it, the more guidelines or I guess less guidelines you give it, the better.
Justin Avery: Yeah. Where does it fit in from a … As a product owner, where does it fit in to a responsive design workflow or a redesign of a site if I was going to rebuild a site or a large company is going to rebuild a site? Where does the Gridset part of that fit in from your design approach?
Nathan Ford: We’ve designed it to work at many different points of a workflow. Sorry. Are you still there?
Justin Avery: Yeah, yeah.
Nathan Ford: Sorry. My Skype just gave me this little notification that I was away. [I wasn’t switched 00:11:50], so I know I’m still here.
Justin Avery: No, we’re still here. We’re still [logged into 00:11:53] Skype.
Nathan Ford: Okay. Sorry. Yeah. Basically, yeah. We designed Gridset to work at many different points of a workflow. The idea would be that you come in and say, maybe just throw together a very simple grid just to start getting an idea together for a prototype or whatever. You could throw that together, start working directly at HTML like a lot of us like to do these days, and put together a simple gray box prototype right in the browser. Gridset gives you the guidelines for that. It gives you the overlay for your site, so that you can actually see what you’re doing and what columns you’re using.
Then over time, you can revisit your grid and keep saving out new versions of it, so that … Or basically republishing new versions of it that start fitting more closely to what your content needs, and you know that. You feel it as you’re going, especially as you start increasing the fidelity of whatever you’re designing or building, and you start realizing that, “Oh, these images are just way too small. This needs to be a big image site,” or, “This measure on this chunk of typography here is just too short. We need it longer.” Things like that.
You just start noticing all these little problems, and then you can start tweaking the grid to fit that. From there, you can also see where the whole layout is breaking down as you’re resizing your browser, and you can go ahead and start new grids for those different sizes and block off where those grids lie within the different viewport sizes.
Justin Avery: Cool.
Nathan Ford: It’s definitely a … It’s a process. It’s something that you’re supposed to work through, and it’s just there. You dip in and out of it as you go through your process, and that’s how I use it.
Justin Avery: If those are … Taking it from someone in the backend and stuff that wanted to incorporate it as part of build process of their … Does spit out just flat CSS? Could you hook it up to a build process like global grunt? Does it have … Is it a Sass-based thing or a Less?
Also, if you need it for some sort of … Basically, what we consider, the real production phase. After you’re past the prototyping and you’re on to building out the site in an optimized manner, then we have a Sass output that you can use. When you’re in the prototyping, you can use a CSS link that we just host for you. As you’re making changes, it happens immediately on your site, but for this … When you’re at that point, when you want to optimize because we basically give you everything in kitchen sink upfront.
We don’t advise that you actually use that in production, so you have the Sass output that you can just put in. It’s a bunch of mix-ins and functions that you can … I think are pretty easy to use. A lot of people tell me they’re pretty easy to use, so you can just then spit out what you need from the grid.
Justin Avery: That’s cool. As a product designer of a web app, a couple of the CIOs lucky enough to … I caught up with MailChimp and talked about … I get to use MailChimp in a weekly basis. I love it. I just really enjoy the interface. It’s a nice web app to use, especially how often I actually have to get in there and do things. One of the nice things is that it is very responsive, right? From the largest screen to the smallest, it just does some neat stuff and it just … It stacks appropriately, and it moves things around, and it’s just a … It’s a well-thought-out app.
I was having a look at Gridset and … Do tell me if I’m wrong, but when I was looking at Gridset and Typecast, Gridset looked like it was predominantly built for the desktop, and Typecast has a couple of responsive sprinkles in there, but it’s still very desktop-y. The reason I asked that is because a lot of people do ask, write in, or ping me tweets and say, “I’m building a web app. Should I build it responsively, or should I build a native version of it instead?” I just wondered if there’s like a thought process that went into the design and the target devices that you’re looking at, and your thoughts around that whole what is a web app and should you make it native, or a desktop version, or responsive? There’s a lot in that question. I do [inaudible 00:17:01].
Nathan Ford: Yeah.
Justin Avery: Go.
Nathan Ford: I think the jest of it is … Yeah. Do web apps have to be responsive? I definitely subscribe to the Jeremy Keith line of thinking that it depends. Right? I think what we need to do is basically look at what your user is trying to do and say, “Are they going to be … Is it going to be useful in all these different environments?” With Gridset, we didn’t feel like it would be. Designing a grid for … Or a grid system, you have to incorporate grids for desktop and all the way down to mobile. Sorry, responsive grid system that is.
Trying to design an 18-column grid, which is the maximum for Gridset, on a mobile device would be really, really difficult and probably more frustrating than its worth, so … Just because of the screen real estate that you need to even … Being able to grab it with your thumbs. It’d be ridiculous, right?
Justin Avery: Yeah, totally.
Nathan Ford: We figured that Gridset for the most part would be a desktop experience. You could probably get away with it on mobile … I’m sorry, a tablet, but mobile is a bit too small to actually get the job done. Typecast on the other hand, I think there’s quite a few things you can do with selecting type and trying type in a mobile environment. I think they’ve done a decent job of that. I don’t know. I think that basically, you just have to look at what your users are trying to do and make the decision from there.
Justin Avery: Good answer. It’s well-rounded. “It depends” is always such a good answer for these things too, isn’t it?
Nathan Ford: Yeah, because I think one of the problems, I think, in the web industry that I’ve seen in the last … I don’t know. I’ve been in it about eight years, is that too many people beat their drums about one specific thing, and they get really adamant about, “You have to do this. You should do this.” There’s a lot of “should’s”. People hear a lot of “should’s” when they’re learning web design. I don’t know. Design should be more about finding the right solution for the problem, not “Am I meeting everybody else’s expectations?”
Justin Avery: Yeah. Over the year, the last … Talking about when you first started, it was at Foundation that you were first working? When you first started, you were saying it wasn’t quite Bootstrap, it wasn’t quite 960. Was it Foundation, or was it something else?
Nathan Ford: I think it was 960. Yeah.
Justin Avery: Yeah.
Nathan Ford: It was 960. Yeah.
Justin Avery: When these guys started releasing all of these foundations, and Bootstrap, and stuff, it was … They were trying to release modules or design modules, and you have the atomic design stuff that Brad is doing as well. Do you have any thoughts around that as a web designer and someone who designs responsive layouts and responsive sites? What are your thoughts around this whole approach of modular design rather than designing from the outside in, they do it from the inside out?
I believe totally that the web is completely suited for modularity, which makes it a very interesting design problem
Nathan Ford: Yeah. I actually wrote an article for A List Apart last year about content-out layout, which is a term that was coined by Mark Boulton who I used to work with or I still work with actually. Sorry. I just recently moved back to Dallas. I’m not in the same office with him every day, but yeah. We still work together. Yeah. The whole idea of the article was, “Yeah. How do you start with the elements of your design, the content itself, and how do you build out from there?” I believe totally that the web is completely suited for modularity, which makes it a very interesting design problem because designers have always had … Not always, I guess, but at least from my experience.
In print design, you have very set dimensions, which is pretty comfortable, and you can figure out how to carve up the space in unique ways and functional ways. With the web, that’s always changing. It’s actually the advent of responsive design. You have to start thinking about a new way of approaching a canvas, and that was Mark’s whole idea was content-out. That’s what I think with grid systems actually, the way they fit in really well is that you can go both ways.
You can carve up the available space with a … What I call a “layout grid”, and you can carve up your content or you can create relationships within your content with what I call “content grids”. Like a content grid being the relationship of an image to a piece of text next to it. Should the image be twice the size of the piece of text? Should it be maybe ratio-based on … The golden ratio, something like that? That’s basically what you would call a module, so it’s like a small modular grid.
Justin Avery: It’s looking at it like an item of news, and then otherwise, long list of news items. Right? A little image that goes with the title description?
Nathan Ford: Right, exactly. You can build like a small grid that will handle all of your use cases for that type of content, and then place that within a larger grid that can handle what to do with the available space.
Justin Avery: Cool. Is the ideas and thoughts based upon …? I don’t suppose it is based upon the technology that’s becoming available, right? I’m thinking more in terms of in the upcoming specs that are around. We’re looking at Flexbox?
Nathan Ford: Mm-hmm (affirmative). Yes.
Justin Avery: Then also, there’s the grids, layouts as well, specifications.
Nathan Ford: Yeah.
Justin Avery: Is that along the … Do you the spec writers have gone, “Well, that’s probably the best way to approach it,” or do you think people are looking at specs and going, “Well, this is probably the best way to approach it from a design point of view.”?
Nathan Ford: I honestly don’t know. Actually, I think one of the reasons I’ve been so attracted to product management is that it’s more about building and testing, and then seeing what happens. That’s how I’ve always approached things on the web as well. That’s why I think the Standards Movement was a great thing, but that was standardizing stuff that was already there, which is always, I think, a good thing. It’s simplification. It helps people learn. People are able to get up to speed a lot faster on what to do on the web.
Now, we’re at a point where we’re writing solutions for things that haven’t really been well-tested yet. We don’t know the problems yet. I think that’s a problem that we’re seeing with layouts. Flexbox is really interesting, and I think it’s great. That’s something I think is more closer to the fabric of what the web is built off; whereas the grid layout module seems to be more, I guess, focused on what print designers would expect to be on the web. It’s not really … To me, it doesn’t seem as flexible or as new and interesting. It doesn’t create as many new possibilities for what the web needs. It’s just like, “Here’s the way to do grids.”
Justin Avery: Do you think it’s … Are we trying to put a spec around something which we think should be there rather than it being helpful?
Nathan Ford: Exactly. I think it’s instead of being born of need from saying, “This is how the web works. I keep coming into these problems, and I’m trying … I need to solve this problem with something that’s not there yet,” it’s more saying, “Okay. What will people have a problem with? Let’s try to think about that, and then try and create a solution for imagined problems,” or at least they’re not imagined. It’s definitely more practical than that, but it’s … I just feel like we haven’t quite understood the problems well enough yet to write a spec that’s going to solve it all.
Justin Avery: Is it like, “These are the problems we had from the print era. Let’s apply the same thinking to a solution that we perhaps might need in the web era.”?
Nathan Ford: Yeah, something … Yeah, like that. I guess what I’ve always seen is that there’s been that hangover in web design from print where it’s like, “This doesn’t work like print. Let’s make it work like print,” which doesn’t excite me. I think that there’s … The web is such an interesting new medium that we need to really explore, and really understand the nature of, and start just embracing. I think that’s what the whole responsive design thing was.
As people realizing, “Holy cow, we can actually make designs that adapt to their environment,” and then it’s gone crazy from there. There’s all sorts of weird solutions and stuff popping up, but that’s exciting. That’s what’s a lot more fun. Trying to standardize it at this point is almost like putting a cap on it.
Justin Avery: Yeah. Let’s just say we had the power. We fired XE, and we fired [Tabakens 00:26:09]. Although, they do, do a very good work, so we wouldn’t actually do that, but … And then you’re the product manager of the web.
Nathan Ford: Okay.
Justin Avery: You’ve got the CSS specs and HTML specs in your hand. How would you approach it?
Nathan Ford: That’s a gigantic question.
Justin Avery: It is massive, isn’t it? Sorry about that, Nathan.
Nathan Ford: Yeah. I feel like even answering it is a big self-aggrandizement, but … No, I …
Justin Avery: You walk away from the job.
Nathan Ford: Yeah. Actually, in many ways, yes, I would. I’d just leave it in the hands. I think that that’s what’s so interesting about the web is there is no one central control. You just let it bubble up. The anarchy of it is what makes it work so well, and so trying to control it, I think, is a problem. I guess that’s where my renaissance with standards comes from. I’d rather see things really … Let me them be messy for a while and let them play out, and then start trying to standardized when we have really good understand … When we understand the problems really well and we have a pretty good understanding of what the solution would look like.
Justin Avery: Yeah, good. I was wondering if I gave you enough rope, whether or not you’d make a nice noose, but no. That was nice. That’s good. Sorry about that.
Nathan Ford: That’s all right.
Justin Avery: Matt Griffin recently wrote an A List Apart article as well, and he was talking about his experiences designing with a new form factor. It’s probably not new, but the Apple Watches come out now. Do you see that affecting the industry and designers in the same way that the release of this like the iPhone or the tablet has affected as well? Do you think there’d be a change in approach, or is it as big as what people are building them up to be?
Nathan Ford: I think in many ways it’s a pretty big shift, and this is just my personal opinion. I’m not an expert on any of this though, but I think … I’m interested to see how … Every time something like this comes out, I’d go, “No, I would never use that,” but I’ve started learning in my 30’s now, I’m getting so old and wise, that I shouldn’t be so quick to react. Just let it play out, and I think it’s … So I’m pretty sure my gut reaction is like, “I’m never going to use a smartwatch,” but who knows?
There will be that one or two features that come out, and I’ll be like, “Oh, now I need one.” The same thing happened with the iPhone and everything else or smartphones. I think there are ways that this is going to play out that are going to be very interesting. Now, I’m not sure right off the bat though that it’s going to have a web browser. Is it, the app? Last I heard …
Justin Avery: Yeah. I think it will. I want to say it will because I’m very sure. When Matt was running through his testing, he had … He called up to see how something would look across it. Maybe I’m wrong.
I think the smaller the screen, the less you had to concern yourself with layout. You had to use other tools, so color, and type, and typography are going to be basically all we have to work with.
Nathan Ford: Yeah. I’m not sure. Now, readability on something that size is going to be a really big challenge for typographers, which again, challenges are interesting. Right? I think that’s where the real challenge lies is, how do we create something readable? I think the smaller the screen, the less you had to concern yourself with layout. You had to use other tools, so color, and type, and typography are going to be basically all we have to work with.
Justin Avery: Yeah. I think you’re right. I don’t think it has a browser.
Nathan Ford: It will eventually though.
Justin Avery: Yeah.
Nathan Ford: Everything that you can put a browser on will have a browser eventually.
Justin Avery: I’m actually surprised that it doesn’t have one, at least a very basic one included.
Nathan Ford: Yeah. I think there’s just all sorts of usability issues there when it comes to browsing the web as it is now.
Justin Avery: Yeah, but it’s Apple. Surely, they would have come up with new ways to double-tap, quick move with a brand new approach to swiping through websites.
Nathan Ford: Yeah. I think some of the other smartwatches have attempted it at least. I’m not sure how successful they’ve been.
Justin Avery: Maybe not very successful if Apple have chosen to leave it off.
Nathan Ford: Yeah, yeah. It’s definitely one of those things where you can go to market. It’s not a crucial feature, so you can go to market with something that’s still going to be very … It’s still internet connected. It still got all of your information in the cloud coming down whenever you need it in a very accessible interface. It’s just not going to have the web.
Justin Avery: Yeah. Hey. You recently spent a lot of time putting together the Gridset App Report for Responsive Design from last year. Thank you very much in behalf of the community in the internet for doing that. Before I do, I want to ask a couple of questions around the findings of that and stuff. We met building products to help designers be able to create responsive designs a bit easier with things like Macaw, and Webflow, and Web DO, and … What else is there? There’s FROONT. A whole bunch of systems that are there or new tools and stuff. Have you checked them out? Have you tried them out? Do you think they’re on the right path, or are we still missing a few key things to make the process easier?
Nathan Ford: It’s a good question. I have strong opinions on this, but that’s only because I’m in the space and I’ve been working on apps here. Yeah. I actually wrote an article awhile back for Net Mag a couple years ago like back … Right around the time we launched Gridset, and I was hailing the idea of small tools that get like one simple job done, and Typecast being one of them. At the same time, about the same time, BrowserStack came out, and that was a really cool little tool to get one thing done well. It’s just solving a real need.
I feel like sometimes like the reason Adobe hasn’t been able to crack the one web design tool to rule them all. Some of these other guys are doing a valiant job out of it, but they’re not quite getting there. The reason is, is because they’re trying to do too much. Working responsively has just cracked this wide open. Web design involves so many different moving parts, so many components, and is quite a complicated workflow when compared to like traditional design just because there’s so many different stakeholders involved and so many different expertise that need to be known to get the job done properly.
I just think that this kind of idea of one big app to do it is not the right way to go, but that’s just my opinion. I’m not going to step on anybody and say, “Oh, they’re doing it wrong,” because that’s silly. I’m glad to see people are out there. I’m downloading every new app that comes out, and trying it, and really excited about it, but I think that so far, I think finding these little gap tools that help you like … A lot of web designers already know how to write code, so they can do that. A lot of web designers already know how to use Photoshop, or Fireworks, or Sketch, or something like that. I think what we really need are these little connective pieces, things that help us do these difficult parts better.
Justin Avery: One thing that I do like within … I think it was FROONT. Have you seen that one, the FROONT, F-R-O-O-N-T?
Nathan Ford: I get a lot of emails from the, so I’m guessing I’ve used it at some point in time.
Justin Avery: Probably, yeah. One of the things that I do like about their approach is that it was an interesting approach from like a … It’s probably more of a mantra again. You’re talking about it earlier is that he … They wanted it to be a toolkit for people to be able to create really nice modules, and then put that back up for other designers to learn from and reuse. Almost like a free marketplace of, “This has worked really well for me. You could also use this.”
I like the idea of that like … I think of it like an OmniGraffle which I use for wireframing and stuff. You could download like a sketch sheet, and you could just drag and drop elements on the page to test them out and wireframe something back when we’re doing static wireframes. The ability to do that to put together a proof of concept, maybe not a final design.
Nathan Ford: Yeah.
Justin Avery: I like that idea.
Nathan Ford: Yeah. I think that’s a cool idea. There’s only so many ways you can put an image next to a text with a headline. There are very established patterns, and I’ve always … I guess I need to go back and check out that in more depth because I’ve always thought that’s a missing tool, some way to share modules, or patterns, or whatever you want to call them because yeah, there’s only so many ways you can do it right.
Justin Avery: Yeah. Yeah. I don’t know how well it’s been executed. Like you, I get a lot of emails from a lot of different things, but yeah. That was just one thing that stood out from those guys. Yeah. The other thing that I’ve got, which popped up a couple of days ago actually as I was chatting on a forum with a couple of friends, and they were finding it difficult or they were working as a designer, freelancing for a company who wanted to do agile web design, or agile design, or design in an agile environment as well. Have you ever looked at the processes or workflows around how that’s accomplished?
Nathan Ford: What? Agile?
Justin Avery: Yeah, from a … But more from like a web design point of view. Building or designing things within sprints rather than … Because the traditional thing is you come up with your wireframes, you design based upon those and the content that you have, and then someone develops it and builds it, and then it’s shipped out just because you needed those signoff points, right, from clients.
Nathan Ford: Right.
Justin Avery: Have you seen that change a lot in the recent years, and how are you … Because you worked with Mark Boulton Design before? Also, did client work as well, not just internal apps and stuff?
Nathan Ford: Right.
Justin Avery: How did you find that process, or did that process change for you at all, or was it always waterfall?
Nathan Ford: No. I’m pretty sure that Mark Boulton and I, we popularized the idea of working agile in design. I know Mark talks about it a ton, and it’s something that I learned, I picked up when I first got there. Between him and the other people that worked there, we’ve really refined it down to something that worked really well for us.
Yeah. Like you explained, working in sprints with design actually was quite nice, so we would start with … Basically, we took a lot of what worked about agile, what we liked, and pieced it back together into a design process. Giving some space for design to work because that’s one of the problems with combine … Just mashing together agile and design would be … Design has to turn on a dime. Sometimes, it doesn’t get that opportunity for inspiration, or to grow, or for the designers to really think about a problem.
The other thing is we wouldn’t start until we had content which really makes a difference as well.
What we’d do is … I think some of the key things that we did that worked and actually that we’re still doing that works, only from Monotype, would be … We’d write up a bunch of user stories with the client, so we understood the full breath of what needs to be done. That was always a very enlightening process, but it usually took a lot of time. Then, we actually knew what was on the table, and then we’d pick up pieces of that every sprint. We’d be very clear about what we’re going to do each time. We’d work in prototypes, so live prototypes that work. Basically, grey box websites in HTML and CSS, and we just build everything out.
The other thing is we wouldn’t start until we had content which really makes a difference as well. From there, we just start increasing the fidelity as we went. We’d do some design explorations in parallel with the production of the … Or with the … Yeah, the production of these prototypes that define the information architecture, the layout, the hierarchy of information, what content we absolutely need, and the tone of that.
All of that was progressing in one line, and off to the side, we’d pick up these comps and work either in Style Tiles or full comps, depending on the comfort level of the client, and progress what would be the design language, and then inject that back into the prototype to increase the fidelity of retirement till we had a product at the end. That really worked well for us. I think that was a way that we found to adapt the ever-changing needs of a project because some of our projects lasted for three years. A lot of changes in three years.
Justin Avery: Yeah. I remember Mark not being a huge fan of atomic design because the idea of designing such a small element without seeing how it fits within a hole didn’t make sense.
Nathan Ford: Yeah.
Justin Avery: If you’re running the sprints, do you sprint as try and get the entire website laid out before you start detailing like the functionality of a news page or a news listing? Otherwise, I could imagine getting into that same problem of, if one sprint is all about … I don’t know, doing the news and the blog section that you designed for those, but then lose sight of what the homepage is going to look like or all the other areas.
Nathan Ford: Yeah, that’s always a problem. What I just described in just a couple of minutes sounded pretty encapsulated and easy, but actually, it was a big mess all the time, right? We were always running around from one … Jumping from one discipline to another to make sure that what came together as a whole made sense. Yeah. I completely agree. You can’t just design a very … There’s a level of detail that you’re just too small to design anything, really. You really do have to find that right balance somewhere in the middle where you’ve got enough information to piece together something that’s cohesive, but then also, you have the broader picture of how everything is going to come together in the end. It’s always a balance.
Justin Avery: Yeah. You almost need someone … You always have someone running the project, right, but someone who has that vision, right, the way through that can bring everything together at the end?
Nathan Ford: Yeah. Each of us, the way we run things, every designer had full reign of what they were doing. I was Creative Director at Mark Boulton Design, so I would jump in and just help people here and there when they get stuck. Same with Mark, that was also something he really enjoyed with jumping in and helping us get past points where we couldn’t really see what the next step was. Yeah. I think everyone of us learned over time how to pull it all together, and it was really just because created an environment where we didn’t have a lot of signoffs.
What we said is every … “For two weeks, we’re going to work really hard on this. What we have at the end of that time is … It doesn’t have to be final either.” It’s just we’re going to go move the ball forward. It was never about, “You’re going to get 100 pages with a high-level of design in 50 days.” It was never something like that. It’s more like, “Your problem will be solved over time.”
Justin Avery: I imagine a lot of this is solved by being upfront with clients and …
Nathan Ford: Yeah.
Justin Avery: I suppose making them aware of how you’re working, and how the web works, and how a responsive project is run like having a good client understanding is probably 90% of the issues asserted.
Nathan Ford: Yeah, and we were so lucky to have some excellent clients that just … Basically, our whole philosophy was to get embedded. Basically, become part of their team. That’s what we did. We were like a whole functioning team, half us, half them. We would work our problems that way, and it works so much better.
Justin Avery: That’s such a good approach. Thank you for that. That was just off the cuff. I just wanted to know myself, so hopefully it’s okay to find out as well.
Nathan Ford: I do think it’s very important for responsive design because it has completely destroyed our workflows and our traditional ways of working with design. It’s important that we all share and talk about these things because it’s not the really exciting stuff. It’s the nuts and bolts stuff that actually helps us get the job done.
Justin Avery: Yeah, and it’s supposed to like … You could design three widths, right? Go desktop, tablet, and mobile, and you could have them in full comp and get them all signed off, but I’ve not seen a single project which has done that, end up when you actually built it on those devices go … Actually, that doesn’t work at all.
Nathan Ford: Yeah.
Justin Avery: Let’s change this around. Yeah.
it’s always going to look good full width in your desktop and on your mobile, but you just get to those random little awkward places and just see what happens because usually, it just falls apart.
Nathan Ford: One thing I love to do is to go … Anytime there’s like a big, new responsive redesign like go to the site, go about halfway down, pull your browser to some random size, and just see what happens because it’s always going to look good at the top of the page and it’s always going to look good full width in your desktop and on your mobile, but you just get to those random little awkward places and just see what happens because usually, it just falls apart.
Justin Avery: An afterthought, just get it live. Just get it live. Deal with it afterwards.
Nathan Ford: Yeah. Ship it, ship it.
Justin Avery: Shipping is good.
Nathan Ford: Yeah.
Justin Avery: Iterations, that’s the best thing about websites, and the best thing about working on a project, I think, is that if you can get the client to buy in on this as well. It’s not a final product. When you release it, when you go live, that’s the first iteration of it. You change it many, many times.
Nathan Ford: I agree.
Justin Avery: Now, you recently spent a lot of time putting together this Responsive Report on Responsive Design from last year?
Nathan Ford: Yes.
Justin Avery: Can you just give us a bit of background to what the report is and what you guys or you have been trying to accomplish with that?
Nathan Ford: Sure, of course. It started in 2012 actually. Mark put out a survey to help him get some background on a presentation that he was doing, and so he basically just put it aside, and then he did it again for another presentation about a year later. We had this like wealth of data in like … I think it’s like something like 400 people answered the first, and 500 answered the next one, and we were just like, “This is very useful.” Especially, building a … I’m sorry. This survey was specifically focused on responsive design and workflow problems, things like that.
I was very interested to look at it just because it happened to … We built Gridset for that, so it is really a good bit of data for us to look at. Then, we just took that and said, “Okay. Well, other people might find this useful too.” I think one of the main things is when you’re going through something difficult, to know that other people are going through the same thing really helps, right?
Justin Avery: Yeah.
Nathan Ford: That was the story of the first report. When we dug through the thousand responses over two years … Sorry. It didn’t take us two years. It took us a couple of days, but responses came in over two years. We merely saw this story of people being stressed out, really excited about this sea change within the industry and the way we’re doing things, but frustrated, lonely like all these negative emotions. We decided to put together this report and share it with everybody, and to see if it’s useful for people. It got a really good response.
The whole theme of the 2013 report was this agitation and frustration, just to commiserate with others, fellow designers going through this. Because it had a really good response, it got us in talking with Ethan Marcotte, and you, and a lot of other people that were interested in how responsive design is progressing as a bigger idea, and so we decided to go ahead and do it again. We put out a survey in October. Thanks to you, and Vitally at Smashing Mag, and Net Mag, and a few others, and of course, Ethan getting the word out, we got a tremendous response.
We doubled our response rate this year, and then we put together a report this year, and this year has … The whole design and theme of the report is more about leveling up, being a lot happier with what we’re doing because we’re getting to a better place. Now, we’re just seeing the proliferation of responsive thinking in new areas, which is pretty exciting.
Justin Avery: That’s really cool. It does seem like it from the report, people are feeling better about responsive design as a whole. What do you think has changed over the three years?
Nathan Ford: Really, we’ve worked out processes, so I think one of the main problems we saw in 2012, 2013 was workflow. A lot of people didn’t know how to work responsively, and a lot of great ideas have been put out about that, and a lot of people have shifted their mindset, and they’ve probably … I don’t know if anybody is subscribing to one idea or another, but they’ve taken piecemeal and pieced together their own workflows that worked for their teams. I think that’s what the main difference has been.
I think there have been some great tools that have come out as well, but I think mainly, it’s just people finding what works for them. Like with any change, it takes a little time to get comfortable and used to it, and then, you’re back to doing your day-to-day work. It’s not as much of a grind.
Justin Avery: Yeah, that’s very true. I was going to say big thanks to you and to everyone that has written articles about workflow as well because that’s how we learn. Right? We make mistakes. We blog about how badly we’ve done in a particular thing and how we would have done it better the next time. Then when something is successful, we tell everyone about it, and we all learn. That’s too fun and amazing that we do that. Although, we’re the only industry that does that.
Nathan Ford: Yeah. I think we are. A lot of industries are very guarded, but the web started as a free thing for everybody to quote Tim Berners-Lee. I think you’re doing it wrong. This is the only time I’ll say you’re doing it wrong. If you’re trying to keep all that stuff bottled up to yourself, [you’d be sharing 00:50:16].
Justin Avery: Yeah, yeah. Totally. I just cannot think of like a sponsor or a builder just going, “You know what? I found the best, cheapest, most awesome way to do this house. I’m going to tell all my builder friends how to do that.”
Nathan Ford: Yeah. It’s unfortunate like that other industries can’t work that way. We are very fortunate that ours works through sharing.
Justin Avery: [Inaudible 00:50:41]. Is the speed of the industry that we’re working in moving forward so quickly because of the whole Morse Law thing and we’re working in technology, or because of the fact that we are sharing so much?
Nathan Ford: If I were to pick, I would say probably because we’re sharing so much. I think we just can … We can build upon things. I was actually reading a really good book on this called “Where Good Ideas Come From”. The whole concept behind it is … I can’t remember what his background was, but it’s this guy who wrote … Was really investigating how good ideas happen in the world.
when you have these environments where ideas can combine very loosely, then you see innovation and things progress much faster.
The whole idea was basically that when you have these environments where ideas can combine very loosely, then you see innovation and things progress much faster. Actually, and he took it all the way down to like the scientific level like evolutionarily, but all the way in the back into like the design process and things like that. It’s a really good book, “Where Good Ideas Come From”. Great book.
Justin Avery: Shoot us a link to that. I’ll add it to the show notes as well.
Nathan Ford: Yeah, will do. Yeah. That’s what’s happening with our industry is that we have this loose connection between people where we can just share it as freely. There’s not too much control or anybody telling us how to do it, and so we’re coming up with all sorts of crazy stuff, and we’re progressing very fast because of it.
Justin Avery: Yeah, it’s cool. As part of the findings of the report … And everyone should go and check that out, by the way. What’s the URL again?
Nathan Ford: It’s 2014.report.gridsetapp.com.
Justin Avery: There you go, so go check that out and have a look at Gridset while you’re there as well, but that link will be in the show notes. As part of the report, you mentioned or you’re looking at the forecasting for next year, and you pit out two elements, which was speed and business. Now, a friend of mine, Chris, has asked a question about speed, but could you go into a little bit more detail about what you mean by “business-ing” with regards to the Responsive Report?
Nathan Ford: I think one of the most interesting trends … So what we try to do is provide the report … Let me back up. Emma Boulton, Mark’s wife, her whole background is research. She used to be a researcher for the BBC. She understands how to do research. She brought that to our team, and it’s been tremendously helpful. She helps us with this every year. She’s basically taught us, “Present a report without a lot of thought in it like …” Sorry, that sounds terrible. No. Present a report that is very neutral.
Here’s exactly what we saw an objective, and then let people drive their own whatever, conclusions from that. We don’t harp on the trend that we put in there, but we do try to isolate a couple of things that, “Hey. If you hadn’t been looking for it, here’s something that’s interesting.” I do think that what we’ve seen in this latest iteration of the survey and the report is that more people within organizations are paying attention to responsive design, and these people are project managers, business owners. They’re the ones that are starting to worry about this kind of stuff.
They’ve heard about it. They’ve learned about it. They’ve read about it somewhere, and they’re asking the designers about it, or on the agency side, the higher-ups in the chain are selling this now to clients and things like that. It’s becoming a very … Or they’re finding out that, “Hey, we can’t do this as fast as we used to because of this thing called the ‘responsive design’.” There’s so many more people that are involved in it now that we need to understand it. It’s not just going to be the developer and designer thing anymore. Really, developers owned it for quite a while, and designers have tried to adapt to it from what we’ve read in the surveys. Now, we’re going to have all sorts of people we have to explain these ideas to.
Justin Avery: Yeah. For a question for any freelancers or people looking to get … Start a business on their own, what advice would you give to anyone starting out on their own or getting into freelancing based on what you found in the survey to give them a leg up?
Nathan Ford: Let’s see.
Justin Avery: Like things to focus on or areas which are in most need.
Nathan Ford: I think actually what … It pains me to say it because I’m a designer that does frontend development as well, and I always have and I’ve always felt this. The best way to be a web designer is to do both, to be this hybrid, but there’s really a growing need for frontend developers that know all of these stuff inside and out, and that’s where I think … Right now, if you will look at the trends on the report you can actually click through and see how things have grown over time in the audience that’s been answering this survey, and we break it down by role. We break it down by organization.
You can see that frontend developers are … That role has been growing more and more each year, and everything else has been shrinking, and we’re adding a few new things at the end. I would say really know yourself on the frontend because there’s not always going to be a design job opened up. I’ve seen this in my career. Designing is not always … Or the design role is not always opened up quite as often as frontend development like there’s … Somebody always needs something coded. Right?
Justin Avery: Yeah.
Nathan Ford: Or marked up, I should say. I say make sure you really know that, and then you can learn design. The principles of design are not really difficult. It’s just doing it over, and over, and over again, and learning from that. That takes time, but frontend development, you can pick that up, and you can be immediately very useful both to your client and to a team if you decided to work it out somewhere.
Justin Avery: Yeah. I think one of the things as well is that even frontend designers can design, right? It might be bad design, but some design.
Nathan Ford: Yeah.
Nathan Ford: Yeah, yeah. Yeah, definitely. Markup is a wall for a lot of designers. If you can get over that, then you’re in good shape.
Justin Avery: Yeah. I always try to encourage the designers that I’ve worked with in the past and will continue to as well to just like learn a little bit of HTML and a little bit of CSS. Just having that understanding, I think, will make the better designers. Although, it’d be essentially what your thoughts are. I saw it with a designer who flatly refused. His reasoning was that if he understands limitations of it, he’ll be less of a designer because of that.
Nathan Ford: Absolutely not. You have to know your medium. When I was in school, we learned how ink lays down on paper. There’s just no reason to not understand. To be ignorant of it is just … It’s just trying to make your job easier while making somebody else’s harder, and I don’t agree with that.
Justin Avery: Good.
You can still be imaginative, you can still come up with excellent solutions, but they have to be grounded in reality.
Nathan Ford: You can still be imaginative, you can still come up with excellent solutions, but they have to be grounded in reality.
Justin Avery: It’s the good solutions. The layout, and the interactivity, and the way the data was displayed in the report is responsive and also very good. Was that your design chops on that one?
Nathan Ford: Yes, that was me. Yeah.
Justin Avery: Did you code that as well?
Justin Avery: Yeah.
Nathan Ford: That’s just how things go. I rely on the people I work with to do a lot of design. They do a great job, but every now and then, I just want to take something and do the best I can with it. It was a lot of fun.
Justin Avery: That’s awesome. It is. It is lovely, and so everyone should go and check that out. The link will be in the show notes as well. Nathan, it’s come just on the hour, so I’ll wrap things up. I do have one more question for you, and in turn, I’ll get you to ask a question as well. Each week, I get the guest to ask a question of the upcoming guest. Last week, we had two guests on from Airbnb. They had two questions, so lucky you. The first question was, will Microsoft ever have a chance to enter the mobile device market successfully?
Nathan Ford: I have no idea. They’re Microsoft. I’m sure they’ll find a way. They haven’t really been held down for too long in any area, so sure.
Justin Avery: Yeah, and they bought Nokia, didn’t they?
Nathan Ford: Right. Yeah, that’s right.
Justin Avery: Yeah, so surely. Nokia know a thing or two about mobile devices as well.
Nathan Ford: Yeah, I’ve actually … I spent a week using a Windows 7 phone.
Justin Avery: How was it?
Nathan Ford: The Nokia one that came out … Jesus, couple weeks …
Justin Avery: The Lumias?
Nathan Ford: Yeah, yeah. I think it’s the first Lumia or something like that. It’s just the first Nokia Windows 7 phone, and it was amazing. I really actually liked it. The form factor of the phone was excellent. The feel of the OS was great. I’m surprised it hasn’t taken off, actually.
Justin Avery: Yeah, yeah.
Nathan Ford: Whatever. I don’t predict things.
Justin Avery: Are you normally an iOS or an Android?
Nathan Ford: I’ve used all of them, actually. I was on Android for a few years, and I’m on iOS now mainly because that’s what work gives me, but I like them all. I find it interesting just to see different takes on how things are built. Yeah, so I’m not much a picky.
Justin Avery: And always good for testing as well if you have a few other devices lying around.
Nathan Ford: Totally. Yeah.
Justin Avery: The other question that … So the first one was from Fiona Tay, and the other one was from Mike Fowler. He was asking … He had [Tabakens 01:02:04] come and do a talk. He talked about movements to make CSS more pluggable, so you can in the same way that web component is trying to allow you to write your own custom components that you can plug in as HTML that you can write your own custom CSS that you can plug into CSS. He asks, have you read any of the latest CSS specifications? If you have or haven’t, what are your thoughts about this direction that we’re heading in that aspect?
as a typography nerd over the past eight years I’ve been in the web industry, I’ve been very frustrated by the lack of finer typographic controls ... so I’ve written something recently or complied this into something I’ve been calling “Type JS”, and it’s at TypeJS.org
Justin Avery: That’s really cool. I like the site. I got something to do for the rest of the afternoon now.
Nathan Ford: Yeah. I’m really advocating people to hop on there, and then go to the GitHub project, and throw some issues at me, throw some ideas at me because I want to try to start building all of these little things that people are not able to do in typography right now on the web and try to make it into something that little useful. What I like about it is it can start showing and testing ways that we can solve these problems, so that we can write a smarter spec later.
Justin Avery: Yeah, that’s a great idea. That aspect should be written, right, like take what is missing, play with it, find out what everyone likes to use, and then make that the specification?
Nathan Ford: That’s what I think. Yeah.
Justin Avery: Good start with the TypeJS.org. Thank you very much. That was wonderful. I learned tons, and that’s why I do this. I’m sure the rest of the listeners will learn lots as well. Apart from TypeJS.org, you have a blog. Do you have a Twitter where people can learn more and read more about what you’re doing?
Nathan Ford: Sure. Yeah. I’ve got my blog is ArtEqualsWork.com. “Equals” is spelled out. My Twitter handle is “nathan_ford”. The guy who has “Nathan Ford” is not very happy with me because apparently, he gets a lot of my tweets. Please make sure you get the underscore in there.
Justin Avery: Surely. If he is getting sick of it, you could just hand it over.
Nathan Ford: No. We’ve had that conversation. It’s adamant, but that’s okay. I understand. It’s cool.
Justin Avery: That’s fair enough.
Nathan Ford: He got there first.
Justin Avery: Is he a webdev?
Nathan Ford: I don’t know. I think he’s a designer. I don’t know. I try to pick up what I can from his Twitter bio. That’s about it.
Justin Avery: I’ll make sure I tweet him and thank him for coming on the podcast.
Nathan Ford: Yeah, please do.
Justin Avery: Thank you very much for coming to podcast. Is there anything else that you … I caught you at a talk, actually. Was it late last year? At The Web is conference in Wales?
Nathan Ford: Correct.
Justin Avery: That was awesome, by the way. If anyone is keen to see Nathan speaking, if you go to BeSquare.me, all of those videos are up there, and you should check out Nathan’s talk on … It was content grids as well, wasn’t it?
Nathan Ford: I had a bit of that mixed in there too. It’s basically how to design for a responsive environment without going crazy or something like that. [That’s all 01:06:15]
Justin Avery: Yeah. I think I’ve got a list of the couple of videos that they need to add as links on to the site as well, so I might just check that up after this as well. Yeah. You should definitely go and check that out. Are you doing any more talks, or you’re settling into Dallas?
Nathan Ford: Yeah. With the big move and everything, I made no plans for the year. Yeah, no talks this year. I’m mostly focused in on my new role at Monotype and making really making cool stuff.
Justin Avery: Cool. If anyone has feedback for different products?
Nathan Ford: Yeah. They can hit me up on Twitter or email me at firstname.lastname@example.org. I’m always open for feedback.
Justin Avery: Awesome. Thank you very much again for putting aside an afternoon to have a chat. Yeah. Thank you everyone for joining in and listening. You can find some of the older podcasts on ResponsiveDesign.is/podcast if you want to go back through the old archives. If you liked today’s show, which I’m sure you all have, go into iTunes and rate up five stars. That would be awesome. Thank you again, Nathan. Thanks everyone for tuning in.
Nathan Ford: Yeah. Thanks, Justin. This has been fun.
Justin Avery: Cheers, all. Bye.
comments powered by Disqus