Dealing with Our Multi-Device World - Brad Frost

Treehouse Friends 0:03 Welcome to another episode of Treehouse Friends. 0:19 I'm Randy Hoyt, and today I'm joined by designer Brad Frost. 0:21 Thanks for joining us, Brad. 0:23 Thanks for having me, Randy. 0:25 Would you mind telling us a little bit about your background, what you do, 0:26 how long you've been working on the web. 0:29 [Brad Frost, Mobile Web Strategist, Designer] 0:30 Sure--I've been working on the web since 2007 and got my start 0:33 doing real estate websites right as the bubble burst, so that was fun. 0:37 Then I moved to New York City and worked at an ecommerce shop 0:44 and then worked at a large agency called RGA, and I was actually there for 0:47 a few years and then actually just recently set out on my own, 0:54 so now I'm self-employed, so-- 0:58 Excellent. 1:00 --lots of fun. 1:01 That going well so far? 1:02 It's busy (laughs). 1:03 >>That's to be expected though, I suppose. >>Absolutely. 1:06 But yeah, it's a whole lot of fun. 1:09 It's nice to be able to set your own agenda, for sure, so--yeah. 1:10 We're here at In Control in Orlando, and Brad's giving a talk. 1:16 Can you tell us a little bit about the talk that 1:19 you'll be giving here at the conference? 1:20 Yeah--it's sort of a broad topic, Mobile Web Best Practices, 1:21 so I actually made a site several years ago, actually, about sort of 1:25 tips and tricks and recommendations and considerations for creating things 1:31 for the mobile web. 1:35 At the time, it was really only sort of a handful of people that were actually 1:36 working in that area and sharing knowledge and stuff, 1:41 and I kept fielding the same questions over and over and over again 1:44 from my colleagues-- 1:48 "Hey, what do we do about forms?" 1:49 "How do we treat navigation?" 1:51 "How do we do--" this, that, or the other, 1:53 and so instead of writing the same email 50 times, 1:54 I decided to make a website about it. 1:58 So that's was sort of the genesis of that and so this talk is sort of a 2:00 broad overview of all the different considerations for dealing 2:05 with our multi-device world. 2:12 So--everything from strategy through design best practices and 2:14 development best practices and all sorts of stuff, so-- 2:18 What are a couple of things that you think people have really started to get right 2:21 and what are things that people are still really doing wrong? 2:24 One of the things that I'm really excited about is that 2:27 you no longer have to twist people's arms to get them 2:31 to pay attention to mobile. 2:34 It's here and you still have a few laggards that are saying, 2:36 "Oh, well, you know, it doesn't really matter that much." 2:41 Very, very few people are saying that, so I'm really excited that 2:44 I think that everybody understands that this is a fundamental change 2:49 and not just sort of a "nice to have" or an add-on, so I definitely say 2:53 that's one of the things I'm most excited about, but I still think that 2:58 people fall short a lot. 3:02 I think that you see sites with between 10% and 20% of traffic coming from 3:06 mobile devices and as a result, it gets 10% to 20% of the attention 3:13 and 10 to 20% of a budget and all that stuff, so that in the broadest 3:18 sense, I think, is my biggest concern--is that people still aren't 3:24 skating to where the puck is going. 3:28 They're sort of just looking right in front of their hand, so-- 3:32 And mobile and responsive design are big topics among developers 3:35 and designers, but among clients, what are clients asking for 3:40 in this area? 3:43 I know that they're thinking more about mobile. 3:45 What are they thinking or what are the things they're requesting? 3:47 Yeah, there's still, I think, a lot of confusion where as soon as you say 3:49 "mobile," they're like--app! 3:54 We need to have an app, and that just isn't the case really. 3:56 That's not to say that apps aren't valuable and stuff, but I do think that clients 3:59 have this sort of myopic view of what's available-- 4:04 what the toolkit available to them is, and as far as the web front goes, 4:09 I do think that responsive design has gained quite a bit of traction. 4:16 More people are talking about it. 4:20 I read a lot of news about responsive design and a lot of the sort of 4:22 "executive level" writeups on responsive design. 4:27 It makes me wince a little bit, and so I do think that there is a long way 4:31 to go to educate clients to basically what the web means in this 4:36 multi-device world, how they can put their stuff in front of more people, 4:42 why that matters, how people use devices, and how people sort of 4:47 seamlessly transition between devices to do a single task, for example. 4:52 I think that's all still very, very much in its infancy. 4:57 I think that you still get a lot of clients saying, "Well, mobile users only 5:01 want to do certain things," or "We'll add these 4 features and just 5:08 forget about the rest," so they're not really thinking holistically still, I think, 5:13 but I do think that they are acknowledging 5:18 they need to do something. 5:21 It's just a matter of how good they are at planning out into the future versus 5:22 "We need to do something in a very reactive manner." 5:31 Last fall before the election, you had written up a post for Smashing Magazine 5:35 comparing the 2 mobile strategies for the candidates--one being a responsive site, 5:42 and one being a separate mobile site. 5:48 Even though the election's gone, I still think we're at a place where 5:50 that's a good discussion to have. 5:53 What are your thoughts about that today, here, a few months after the election? 5:54 Yeah, responsive design won the election--no. 5:57 It's interesting and the reason why the subject and the topic was so 6:02 attractive and to put it into that lens is that very seldom-- 6:10 maybe this might be one of the only examples-- 6:14 is an example where 2 sites--2 different sites--are trying to accomplish 6:17 the exact same thing, reach the exact same audience, exact same goals, 6:25 exact same content, more or less. 6:30 Obviously, the differences between the candidates were apparent, 6:32 but at the same time, from a web strategy standpoint--very, very rarely 6:37 do you have this apples-to-apples comparison, and they took 6:45 2 different approaches, which is great because there are all these control 6:48 variables that aren't normally there because even if you look at, say, a hotel. 6:51 One hotel is going to pitch itself as being a little more luxury or more affordable 6:56 but also just the difference in time, right? 7:01 You know, the mobile landscape changes weekly. 7:05 You know what I mean? 7:08 It's nuts, so you can't even make a comparison of--like, "Oh, well, we did 7:09 have a separate mobile site and then we made a responsive site, 7:15 and here's the difference." 7:18 It's like--well, you're in a different time and place now. 7:18 So that what was so attractive about it and to really be able to put them 7:20 against each other, and they both had their pros and their cons, and 7:26 it really kind of came out to what really matters with a mobile web experience, 7:31 what goes into making a great experience, what are some of the 7:37 common pitfalls and stuff, so it was a lot of fun to explore, so-- 7:42 Which would you say users prefer to have--a separate mobile site 7:45 or a responsive site? 7:48 They don't care--they honestly don't care. 7:49 What they care about is, can I get the information I need? 7:52 Can I do what I came here to do--period. 7:56 It's sort of a tough pill to swallow. 7:59 You know, people say, "Oh, well, Brad's a responsive design man," whatever. 8:02 You can make a separate mobile web experience that achieves content parody, 8:07 meaning that the experience is optimized by--it's on an entirely separate 8:15 code base, an entirely separate template, and users aren't really going to know. 8:21 But the problem is in literally every single example of a separate mobile website, 8:26 is that it just opens the door for these issues wherever parody isn't achieved, 8:31 so that's sort of the biggest thing and certainly, Mitt Romney's separate 8:37 mobile website suffered from that. 8:42 Wherever certain things were available on the desktop site, but they were 8:45 nowhere to be found on the mobile version, so-- 8:50 What things would you consider when trying to decide between 8:54 a responsive site and a mobile website? 8:57 Is there one that's more often the best solution? 8:59 I would say for responsive by default, just in general again. 9:01 You don't have to maintain a separate code base. 9:06 You don't have to sort of do double duty. 9:09 I've seen separate sites so where the desktop site is advertising 9:12 Valentine's Day but the mobile site's still stuck on Christmas, stuff like that. 9:17 But at the same time, very often it's really not a matter of, I think, technical 9:22 consideration that determines what strategy you're going to do. 9:29 It's more organizational, so can you go into work on Monday and totally 9:34 bulldoze your site and put in place a new shiny website? 9:40 Is that just--from an organizational level, is that possible? 9:44 Very rarely, so you have sort of this mobile website, this separate thing 9:47 coming in to sort of stop the bleeding, so to speak or to react to 9:53 the rise of mobile, but at the same time, that doesn't 9:57 have to be to where you stop. 10:03 You could actually use that separate mobile website as sort of a 10:05 step in a responsive direction, so eventually--I call it "planting the seed" 10:09 towards a responsive future where you could say, you have this separate 10:14 experience; yes, it might be limited; yes, it might be lacking, 10:17 but at the same time, you're learning about how to build and design for mobile, 10:22 you're learning about your audience's behaviors on mobile, 10:27 you're learning a whole lot of stuff and just dealing with the pain of so much 10:31 diversity in that whenever the time comes to do a big redesign, 10:35 you have that. 10:40 It's better to do that, I think, than to just sit on your hands and wait 10:41 for that big redesign project to come through because it just rarely doesn't. 10:46 I went to a conference probably a year ago, and they had 2 sites: 10:51 a desktop and a mobile site. 10:54 The mobile site had a lot less content, very focused on schedule and speakers, 10:55 but then the desktop site was also responsive, so if you did want more 11:00 information and you were on your mobile device, you still went there and the site, 11:04 the full site, still worked well on the mobile device. 11:08 Yeah, and I think that what you're talking about, what you're describing is 11:12 sort of the difference between an app and a site. 11:16 I think that those two are often conflated. 11:20 I see a lot of--just even like news sites and blogs and stuff that try their 11:23 damnedst to be an app, and they shouldn't be really, but at the same time, 11:30 you can create a separate app experience that is a focused experience, 11:35 it shows you the schedule, it shows you the here-and-now, it focuses on a 11:40 few set core tasks, but then you still need the breadth of information that's 11:45 provided in a site. 11:50 For example--like, I use Artio as an example. 11:52 I was getting bombarded with all these emails from them. 11:57 "Here's what your friends are listening to," and stuff like that, and I'm like-- 12:01 "Man, these emails are getting annoying," and I go to--it said, 12:06 "Update your email preferences," so okay, did that, but I was on my phone, 12:10 and I go and I get blocked because they just want me to download the app. 12:14 Well, the app doesn't provide the "update your email preferences," 12:19 so I couldn't do anything until I got onto my desktop computer, so that's annoying, 12:24 so I do think that's there's a difference between providing a core app-like 12:29 experience and providing--like, all your legal information, your privacy policy, 12:34 or about your company, and all of that stuff. 12:40 That needs to live somewhere. 12:43 You're not going to cram it all into an app, so I do think that apps 12:45 are super valuable, but I don't like it whenever people try to 12:48 conflate the two. 12:52 Gotcha--you run a site called, "This is Responsive," which contains 12:53 responsive patterns. 12:57 Could you tell us a little bit about how that site came in to being, 12:58 and what its current status is? 13:00 Sure--the agency I was at--I played a very sort of unique role in that I sort of 13:02 floated around between accounts and saw sort of the direction 13:09 people were going in but also some of the things they were struggling with, 13:13 and 1 week everybody just seemed to be hitting their head against a wall, 13:16 trying to figure out responsive bread crumbs like navigation between 13:22 parent and child sort of elements, and what I found was that, you know, I said, 13:27 "Well, I could help solve their problems individually, or I can sort of create 13:33 sort of abstractive solutions to this problem," and so that's what I did. 13:39 I sort of set out and I made this sort of black and white, grayscale, 13:44 sort of neutral pattern library with--here's 3 different ways to sort of 13:48 treat bread crumbs. 13:55 Then I've also written about different navigation patterns for 13:56 responsive design as well as other things, and other people have written 14:02 about layout patterns and other things and stuff, so basically what I did 14:05 was I sort of took all that stuff and abstracted them and created this library 14:10 of these responsive patterns and encouraged other people 14:15 to contribute theirs as well, and so basically, where it's at now is that 14:20 basically anybody can contribute to this thing. 14:26 If they've created a whole new solution to deal with say, a carousel 14:28 or to deal with accordions or tabs or whatever, they can contribute 14:33 a pattern to the library, which is great because it helps everybody else 14:39 that's dealing with the exact same problem, so that's sort of why it came into 14:43 existence and that's why it continues to be useful, so it's great. 14:47 I love it whenever people submit patterns--it's just, you know, 14:52 here's a novel way to do this, that, or the other, so it's great, so. 14:55 And that's on GitHub, is that right? 14:59 Uh-hunh (affirmative), yep, yep--so anybody can contribute. 15:01 I need to make it easier because--the GitHub thing is great, but it's ultimately-- 15:03 I'm just using CodePen and other sort of tools like that, 15:11 and people are free to use whatever as long as it's just sort of 15:14 an abstracted pattern. 15:18 It could be self-hosted or whatever. 15:19 Basically, all I need is a link to it, so-- 15:21 But yeah, it's all totally open source, but I need to work on it to make it 15:24 a little more apparent that you can contribute to it, so that's--like, Phase 2. 15:28 And is that managed with source control? 15:34 People submit pull requests for the new patterns? 15:35 Yeah, they can, but they could just as easily email me or tweet me a link 15:38 or something, so--I'm pretty good at--especially with--like, with a new pattern 15:42 but it also has like a big resource center on it, so if you want 17 articles 15:46 about how to do responsive data tables or if you want sort of more 15:54 big picture stuff--like, "Well, where do I go to learn 101 stuff about 15:59 responsive design," I basically have just a whole page there, so that stuff, 16:03 again, anybody can contribute a link to it, which is great, so-- 16:08 Excellent--1 thing I've seen you write about a lot recently is about Photoshop 16:12 and the role of Photoshop in design now that we're designing 16:15 for mobile and responsive. 16:19 What are your thoughts on that? 16:21 Is designing in the browser something you do exclusively now or 16:22 where do you stand on that process? 16:25 I mean, it really depends. 16:27 If it's a personal project, and it's just me working on something, 16:29 I'll design in the browser because I have that luxury, but obviously, whenever 16:33 you get into a client situation or something, that's a much different story. 16:37 I do think that we need to evolve the design process beyond the days of 16:41 creating full Photoshop comps and presenting them to clients, hanging them 16:50 on the walls like paintings and getting them to sign off on it. 16:55 It's not true to the web. 16:59 You're not signing off on a website. 17:03 You're signing off of a picture of a website, and now what you're seeing-- 17:06 what responsive design in just this multi-device world, 17:10 what you're seeing with it is, now you're seeing people mock up the Sumo display 17:13 version, and the iPad display version, and the iPhone version, and they 17:19 sort of tilt them, but it's all still a comp--it's still an abstraction. 17:24 It's just an entirely false way of presenting what a website is going 17:28 to ultimately be. 17:34 So it's not about designing in the browser, but it's about being smarter 17:36 about how you use a tool like Photoshop, so I still think that Photoshop 17:41 is really valuable for what Andy Clark calls, "creating the design atmosphere," 17:47 so your colors, your textures, your sort of typography, your just basic 17:53 sort of rhythm and look and feel, but it doesn't make sense that 17:57 just because you're doing that in Photoshop, it doesn't mean that you have 18:01 to see that all the way through and then end moving things around 2 pixels 18:06 to the right or 2 pixels to the left. 18:11 That's just, I think, a fool's error in this day and age. 18:13 I don't think it make the best use out of really talented designers' time. 18:16 One story I have is--a client came back. 18:20 It was a mobile site, and it was all in comps, and the client requested that 18:26 all of the body copy be bumped up a point size, and so she had to go 18:33 through 60, 70 different PSDs and update every single instance 18:40 of text fields to represent this client request. 18:47 It was just nonsense. 18:52 She now works at Apple. 18:54 You know, this isn't a production artist, somebody like an intern or something. 18:56 This is an art director with a lot of experience using her time 19:02 extremely poorly, and so I do think--my friend, Dan Ball, sort of wrote 19:06 a followup post to mine about really how it comes down to setting expectations. 19:11 It's about helping the clients understand that getting things into the final 19:16 environment is a better representation of what they're going to be seeing, 19:22 being able to sort of feel things on their actual phones, on their personal 19:26 device--they're able to get a much better sense of what their 19:31 website's going to be a lot sooner, but you have tools like 19:36 Style Tiles, you have tools like, again, Dan Ball, created element collages 19:40 where it's--like, he'll give sort of like a taste of a part of the website, 19:45 so if it's an article or something, he'll show the headline, the author, 19:50 the body copy, so you still get a sense of the visual rhythm of all the 19:55 typography, of just sort of how things flow, how things look, but 20:02 he's not going through and designing the entire header, the entire footer, 20:05 every single item in the side bar. 20:11 It's not that comprehensive, but he's still giving them a visual direction, 20:14 and then whenever they're sold off on that general direction, 20:19 that's when everyone will switch gears and go into the browser and sort of 20:23 finesse things from there. 20:28 So there's still an important role in Photoshop, but I think it's about being 20:30 smarter about how we actually use it, so-- 20:37 And what tools or software do you use for designing in the browser? 20:40 It doesn't matter. (laughs) 20:44 It's Text Editor and I did make the jump over to SASS, so that's something 20:45 that's a tool in my tookit now, but ultimately it's just--I get asked that a lot, 20:57 and I'm always leery about--because I haven't tested every single tool 21:03 out there and stuff 21:08 I use what works for me, but that's when turf wars happen as people say, 21:09 "No, this tool is better, " "This tool is--", 21:14 It's all HTML, it's all CSS, it's all Javascript, but SASS certainly 21:16 makes things easier, so-- 21:20 Excellent--well, thank you so much for your time, Brad. 21:22 If people want to follow you to keep up with the mobile responsive-- 21:25 I know you tweet a lot of content about your blog. 21:28 That's one of the ways I keep up with what's going on with responsive. 21:30 Where can they follow you? 21:33 I'm on Twitter at brad_frost, and my website is bradfrostweb.com, and those 21:34 are really the 2 areas that I spend a lot of time in, so--yeah. 21:42 Great--well, thanks a lot. 21:46 Yeah--thanks for having me--yeah. 21:48 This has been another episode of Treehouse Friends. 21:49 Join us next time. 21:52 Treehouse Friends 21:53