So whenever I get approached about environmental design, the 0:02 first thing people go to is responsive design plus. 0:06 And it's not quite that. 0:10 Responsive design is gonna make things work on any screen size. 0:12 And obviously it's more than just break points. 0:16 There's a lot of stuff that's in responsive 0:18 design, could you, different interactions at different screen widths. 0:20 There's touch detection. 0:26 There's similar similar concepts in progressive enhancement. 0:28 Or you familiar with progressive enhancement? 0:33 Well, okay, good. 0:35 So, in response of design in the progressive enhance stock, it's gonna 0:36 fix somewhere in here, where is heavy presentation, a little bit of behavior. 0:42 So, the response of JavaScript is gonna be in the behavior, but 0:46 it's primarily lives in CSS is where, you know where it should land. 0:50 When we folded environmental design, it more looks more like this, where 0:54 it's heavy behavior, a lot of JavaScript, and a little bit of presentation. 1:00 So we might change, some things in about the way an application looks. 1:05 But primarily, we're gonna be dealing with how it acts. 1:08 And then it's often to the ethernet and things that I haven't thought of yet. 1:11 So to boil it down Environmental Design makes things work in any situation. 1:17 It's not just different screen sizes, but it's it's aware of, of what you're doing. 1:22 It's, if you're outside, if you're inside, if you're 1:28 at the beach or if you're in a hotel. 1:31 If you're moving, you're sitting around, all these are different 1:35 environments that your design and your experience can mold around. 1:38 You could say that it's, a bit of situational design. 1:43 Now a handful of years ago, decades maybe, I had my aha moment 1:45 with really user experience in general, but environmental design specifically. 1:54 I was living in LA at the time, and nobody in LA reads books. 2:00 It's true. 2:05 Anyone from L.A. here? 2:05 Good. 2:08 Okay. 2:09 Nobody there reads books. 2:10 And I was no exception to this. 2:11 I really didn't read that much, you know, I would stick to 2:12 the trade articles, smashing magazines [UNKNOWN] That stuff, you know, we read, 2:14 but to that point in my life, I had really never read 2:19 the book and then saw the movie for anything, in that order. 2:24 I'd seen the movie separately and read the book for things. 2:28 So this is around the time that True Grit came out, the Jeff Bridges version. 2:31 Anybody see it? 2:34 It was really good. 2:36 So I decided that True Grit was gonna be the very 2:38 first time that I read the book and then saw the movie. 2:40 Because I had never had that experience ruined for me. 2:44 Cuz the book is always so much better than the movie. 2:46 So I wanted to do this to myself. 2:48 And so I started reading the book. 2:50 It was this amazing story about this this young 2:51 girl, I think she was 14, avenging her father's death. 2:55 It was an incredible story. 2:58 But I read the book and the Jeff Bridges version hadn't come out yet. 3:00 So I decided I wanted to see the John Wayne version. 3:05 But I think it was 1960, late 60s. 3:07 It's a terrible movie. 3:10 But it was on Amazon's Instant Watch. 3:12 So I, I ordered it. 3:16 And in the beginning, they have this option, do you 3:17 want the standard version, or do you want the HD version? 3:19 Now this is the first time I had done book movie, so 3:22 I'm gonna splurge the extra dollar and I'm gonna get the HD version. 3:24 It's, you know, it's, I work hard for my money. 3:27 So, I get the HD version and I start watching and immediately it starts 3:30 buffering and skipping and pausing and getting 3:35 pixelated, and it was just really bad. 3:38 And then this message pops up, it says I notice 3:40 you're having trouble with your connection, would you like to 3:42 switch to the standard version and I'm like absolutely not 3:44 I spent a dollar on this, I want my HD version. 3:47 So, I say absolutely not, take my HD version and I continue watching. 3:50 Less than five minutes later, choppy again. 3:55 Pixelated buffering. 3:58 Really bad experience. 3:59 And I'm just waiting for this message to pop back up. 4:01 I'm like I hope I didn't waste $4. 4:03 And I, maybe 20 minutes later the message pops back up. 4:05 And it says, do you wanna switch to the standard version? 4:09 I say, absolutely. 4:12 Give me the standard version. 4:13 I can't deal with this crap anymore. 4:14 So I watched the rest of the movie. 4:16 It was terrible, not for any reason really, I mean the story's great but 4:18 John Wayne, let's face it, plays John 4:22 Wayne in every movie regardless of the character. 4:24 So, the movie wasn't great but the experience watching the standard 4:27 version of the movie was so much better than watching the HD 4:30 version and that's when I realized, that these really big graphics 4:34 you know, gorgeous photography do not always equate to a better experience. 4:41 Sometimes they can be a worse experience. 4:46 And, whoever thought to put the cinderblock of the web of 4:48 video, a giant video, slow moving, at the top of every page. 4:53 It's ridiculous. 4:58 It's the heaviest thing you can do, but we're putting him up there. 4:59 They don't really improve the experience, they improve the design, but this is 5:02 when I realized that the design and UX world are different things completely. 5:06 So in that, I, I came up with these general rules of environmental design. 5:13 The the real world exists and we can't control it. 5:18 And that's fine, cuz the web is a really chaotic place. 5:22 There's a lot of stuff going on. 5:26 You can try and control it I don't know how many times 5:28 I've had conversations with people where they tried to overwrite browser defaults. 5:32 To implement a different experience. 5:37 And you're just fighting stuff tooth and nail. 5:39 It increases QA time. 5:41 The length of the project, everything it's just not worth it. 5:43 So you have to let some of this stuff go, 5:46 and embrace all these variable factors when you're building something. 5:48 Am sure a lot of people have seen this, this is do 5:56 websites need to look exactly the same in every browser dot com? 5:58 And I would say that do web sites need to act the same in every situation? 6:03 No, they don't. 6:08 If I'm, if somebody is on top of a mountain. 6:09 And for some reason the need to read a medium article. 6:13 And they have one bar of service, I don't know why 6:17 they have one bar of service on top of a mountain. 6:19 Maybe there's one like T-Mobile tower and they're roaming. 6:20 but, maybe you don't serve them those really heavy fonts and 6:24 that big image across the top, because that's gonna degrade their experience. 6:27 Maybe you just serve them the content, so they can, they can deal with it like that. 6:31 And it would be a better experience for them specifically. 6:35 It's really about making your content accessible to everyone in any situation. 6:39 You know, that the environments of being on a mountaintop, reading medium, 6:46 is completely different than being in a dark alley in Manhattan reading medium. 6:49 I don't know why, either one of those situations would happen but. 6:55 You never know. 6:59 They're totally different. 6:59 And we're kinda treating them the same right now. 7:00 What's really frustrating for me is that, you know, connecting 7:04 the world to my phone and the phone to my browser. 7:08 They're kinda disconnected right now. 7:10 I can communicate to my phone. 7:13 My phone really can't communicate to my browser much. 7:15 A little bit, and we'll get in to it later. 7:20 But the environment really can't communicate through the phone either. 7:22 So, there's all these things that are really close 7:27 to each other but, they're not quite connected yet. 7:29 I think it's a little ridiculous that for my 7:33 phone to realize that it's raining outside, it has to 7:36 go off and hit a Yahoo weather API and come 7:38 back instead of you know, water droplets on the phone. 7:41 And so you're like, hey, I think it's raining right now. 7:45 And the key to doing this stuff is building smarter applications 7:49 using, using APIs that are available to us to do this stuff. 7:52 We're already seeing a lot of this. 7:57 In 2002, 2004, when I was in college. 8:00 I, I went to college for more than 2 years, but that span of time I was working 8:04 in a dining hall, really brutal, like, full on fast food hair net stuff. 8:08 It was, yeah, I know, right? 8:15 [LAUGH] There was this thermometer in the dining hall. 8:16 That when it got cold outside, it would, it would start blowing heat. 8:23 It was terrible because you would be like sweating all 8:29 the time cuz it had no sense of actual temperature. 8:31 But it would react to the outside, so it was a little bit of envi, designing up 8:35 for the environment around Yeah, we're seeing this in other places. 8:40 There's the auto-brightness setting on your phone, that I, I know 8:45 I disabled it, because I hate it but it is in there. 8:48 And there's a little light sensor next to your camera 8:50 that measures lumens that will soften and brighten the display. 8:54 To react to wherever you are. 9:00 So if you're in a dark alley in New York. 9:01 And your trying to read medium, it's not gonna 9:03 be super bright, it's gonna dim it a little bit. 9:05 So it's a little better experience for your 9:07 eyes so that it doesn't burn your retinas. 9:09 When I go to the gym, once every six months 9:11 and I watch Netflix, it degrades the quality of the video. 9:15 So it's a little pixelated, but it's better for me because I can be on 9:20 the treadmill and ignore, I don't know, how boring it is to be on a treadmill. 9:24 It's like the worst. 9:30 We're seeing proximity sensors on cars. 9:33 You seen the, the commercials where a ball bounces 9:35 in front of a car and the car stops itself? 9:39 Because it's surrounded with proximity sensors. 9:41 So it's being it's being aware of the situation that it's in. 9:43 And on a related note, there are proximity sensors in your phone, too. 9:46 And we can access them through an API. 9:50 Right now, they're really just used for when you take 9:53 a call, you know, the screen, Siri just turned on. 9:55 [SOUND] [LAUGH] It's like the fourth time that's happened giving this talk. 9:58 It's really strange, I haven't learned yet. 10:02 But it turns the phone off, like the 10:04 screen off to, to prevent against incidental touches. 10:06 That's what it does right now. 10:11 But we can do a lot of other stuff with it, 10:12 we can be able to transfer data, though not pretty soon. 10:14 Right now, we're looking at the web through 10:17 this, this little, the world through this little pinhole. 10:19 And whether that pinhole is the phone or the 10:22 browser, it doesn't really matter but it's really small. 10:25 This is the pinhole. 10:28 It's a lot bigger on the screen. 10:29 That's actually pretty big But, you know, we're looking 10:31 at the world through this, right now, and what we're 10:35 trying to do with environmental design is open that, that 10:38 hole, a bit, a little bit, stick our head through. 10:40 And look around and say, you know, we're not 10:44 like, we might be like this when we're using something, 10:46 but there's a lot of stuff going on around us 10:49 that we can take into account and modify the experience. 10:52 Environmental Design is not a new concept. 10:57 It's been around since the ancient Greeks used to use it. 11:00 And when they would do construction projects. 11:05 In the 40s it got formalized as 11:09 environmental design, it's the same thing it's 11:12 just taking things to account, taking things 11:15 into account that are in your environment. 11:16 Including regulations, we have a regulatory body on 11:18 the web, W3C, anyone from the W3C here? 11:22 W3C is awful. 11:24 [LAUGH] They're not awful. 11:27 [LAUGH] But how do we get there on the web? 11:30 We have to use what I'm calling local APIs. 11:33 Because APIs are gonna connect us to the world. 11:36 There are a lot of APIs out there already, a lot of them are external. 11:40 There's you know, JSON services, there's XML APIs. 11:43 Talked about the Yahoo weather, which is a really popular one. 11:47 I think the iPhone uses it. 11:50 But the the native JavaScript APIs that are being 11:53 exposed to us since HTML5 started being put together. 11:56 You know, we've already seen them. 12:01 The very first one, that I saw was geolocation, years ago. 12:03 This was like right when HTML5 came out. 12:07 Everyone's like, oh wow we have this geolocation. 12:10 But it kinda got lost in the mix. 12:12 Because of the, you know, the new elements and all the other cool HTML5 stuff. 12:14 The video element and the you know, 12:18 section headers and all the new document objects. 12:21 But it kinda got lost but that's okay 12:24 because we're starting to see em come back around. 12:26 [SOUND] And of course there's more than 12:27 this, anyone familiar with this monster drama? 12:31 This source set, has anybody experienced this yet? 12:36 >> [INAUDIBLE]. 12:39 >> Yeah, responsive images. 12:41 So picture fill is a poly fill that 12:43 lets us do responsive images based on screen size. 12:47 It's pretty good. 12:50 It took off in the community quite a bit, 12:52 and because we all wanted the picture element so bad. 12:54 It was so good, that the W3C came up with this instead. 12:57 That nobody wanted, and everybody like freaked out about it. 13:02 But it eventually, it essentially lets you create a list of 13:05 images to use in different contexts, 13:10 different screen sizes and different resolutions. 13:12 This is what it looks like, and now you can see a couple properties in here. 13:16 Big.jpg at 1x, and big-hd at 2x. 13:22 And what I wanted to talk about here that, 13:24 relates to environmental design is that 1x and 2x. 13:28 What's happening there, and it's really buried in the specification, but the, the 13:30 1x and 2x tells the browser, that this is my normal image, this is my 2 to 1 pixel 13:36 ratio image but the browser will look at that and there's a user setting that's 13:43 buried in the browser that says don't feed me HD images if I'm on a 3G connection. 13:48 And it's in the browser. 13:56 So, if i'm on my WiFi right now, if I wasn't on 13:56 my WiFi, the browser would say okay you have a retina device. 14:01 I know you can handle this really big image physically, 14:05 but you don't have the bandwidth to really take it. 14:09 So I am not gonna give you that, that really high res image. 14:12 I'm gonna give you the 1x, cuz I know that you can't handle it. 14:15 And this is the, one of the first 14:18 actual implementations of bandwidth testing on the web. 14:21 It's really buried in the specification but I'm, it's, it's really cool. 14:25 And I'm really excited. 14:29 It's implemented in Chrome. 14:30 I don't know if the user settings' there but source set is supported in Chrome. 14:33 And it's currently being worked on in Firefox. 14:37 No word from Internet Explorer. 14:41 Also no surprise. 14:43 So this is any, this is something for the browser to do. 14:46 But what about us? 14:49 For us, we have the combination of a Mozilla project called Boot to Gecko. 14:53 And the W3C. 14:59 Has anyone had any experience with Boot to Gecko? 15:00 At all, good. 15:03 So what it is, it's a, it's a 15:07 web based operating system that Mozilla came up with. 15:09 All the applications are built with HTML CSS and JavaScript. 15:13 Firefox came out with a phone. 15:16 It has Boot to Gecko on it, it's called Firefox OS officially, I think. 15:19 And what was cool about this was, unlike when Google 15:22 did it with Chrome OS, and they kept all their APIs internal, Mozilla 15:28 decided to work the W3C on these APIs to make them a standard. 15:33 Which is really cool, cuz we actually get to use them. 15:38 They have a huge list of API's that help you access the device, 15:41 device directly, and a lot of them are, are getting standardized pretty well. 15:47 I really think performance is, is the experience gateway. 15:54 Working at a user experience design agency, 15:56 we do a lot of user flows, experience 15:59 mapping prototypes just anything you can think 16:02 of that has to do with user experience. 16:08 But in the end, if the application 16:10 doesn't load or doesn't load quickly, they're worthless. 16:12 So if we can't get pass this. 16:17 Then there's nothing. 16:19 So let's see how we can use some of these APIs 16:22 that Boot To Gecko is exposing to us, to help the experience. 16:24 Let's go back to that guy on the mountain for a little bit. 16:28 And in the, in the spirit of developing a persona, let's pick a random name. 16:33 I don't know, we'll call him, Carl. 16:37 Carl, random guy [LAUGH] is on a mountain top. 16:42 What does he care about in his experience? 16:46 He's probably been hiking up there all day. 16:48 So his battery is probably drained. 16:51 He probably has really poor bandwidth. 16:53 So when he's up there reading that Medium article, we're not 16:55 going to give him that giant image, all that JavaScript to do. 17:00 Parallaxing, that just doesn't add a whole lot 17:04 to the experience, but that's a whole other issue. 17:07 And we probably, maybe we'll pull back some of 17:09 the fonts, or load them more responsible, at least. 17:11 So he's gonna have a different experience. 17:15 And this is more of a small pipe experience. 17:17 It's really not much, but he needs to accomplish his 17:18 goal of getting the content so we'll let him do that. 17:22 What we have available. 17:24 There's a bit of a history besi, behind bandwidth testing. 17:28 The very first type of bandwidth testing that we saw 17:32 is a JavaScript object in Firefox and Chrome, it's called Online. 17:35 It's navagator.online. 17:40 And it returns true or false if you're online or offline. 17:42 Which is great, if they worked the same in both browsers. 17:45 They do not. 17:47 And in Chrome, it acts as, what you'd expect when I 17:49 go up and shut my WiFi off, it triggers an event. 17:51 Okay. 17:54 You're offline. 17:54 In Firefox. 17:56 It stays true, so it looks like you're 17:58 online until you actually explicit go, explicitly go 18:00 and select Browse and Offline mode, which no 18:03 one does, I don't even know where it is. 18:06 So they act totally differently so, we can't really use it reliably. 18:08 Next, there was the Network Information API, which came out of 18:13 Boot to Gecko, which was the coolest API I have ever seen. 18:17 It gave you everything you needed to, to do bandwidth test. 18:21 It gave you what type of connection you are on. 18:24 If you are on 3G, WiFi, if 2G is a thing, I don't know. 18:25 But anything you needed. 18:30 And they'll give you signal strength also. 18:31 It was really cool. 18:33 But if you Google, network information API W3C, you'll find that 18:34 says, we stopped working on this because it was too hard. 18:39 That's where we are with this. 18:44 So, what we landed on is MobileConnection. 18:46 So MobileConnection API that's in Boot to Gecko right now, only Boot 18:51 to Gecko right now, and you need to be a certified Mozilla application to use it. 18:56 It does give us all the information that we need. 19:02 Hopefully, this will its way through the W3C and then eventually 19:04 into our normal browsers, so we can do proper bandwidth testing. 19:08 But you'll get things like, is the person roaming? 19:11 Yes or no? 19:15 There is a data cap on the plan? 19:17 Yes or no? 19:18 What's the signal strength you get in decimal milliwatts, whatever 19:20 that is, but you get a 0 to 100 numbers. 19:24 So you can pick, and pick and choose, if you don't have much bandwidth 19:27 maybe you'll throttle back some of the 19:30 assets and create a better experience overall. 19:31 But this is really cool. 19:35 I hope it goes through. 19:37 Unfortunately this is like the 4th iteration 19:38 of bandwidth testing that we've tried to do. 19:40 Hopefully this one will stick. 19:42 One of the other things that Carl on 19:45 the mountaintop is concerned with, is his battery. 19:46 We have a battery API now. 19:50 It's currently in draft form, with the W3C which is actually pretty far 19:52 along from now, even though they've been working on it since like 2009. 19:56 But it's, it's getting pretty close finally. 20:01 And you can get everything you would ever need out 20:04 of a battery for information in this API, it's incredible. 20:07 You get the level, battery level, what, how much 20:11 battery I have right now, which is like 10%. 20:14 You can get is it charging, is the device charging? 20:17 Is it discharging? 20:20 The, you can calculate the rate that its discharging at. 20:23 So you can see if your application is burning too much battery. 20:26 Then dial it back. 20:30 You can get the actual event when the, when the battery changes. 20:32 So if it's plugged in and it goes up a level, it will fire an event off. 20:36 If it goes down a level, if it will another event off. 20:39 And you can constantly get that value. 20:41 It's very cool. 20:43 And you can see this in Firefox now if you go in 20:44 the console and just navigate adopt battery the whole object will show up. 20:49 And this is a very cool one. 20:54 It's a contrast Carl on top of a mountain, we have another persona. 20:58 This person is. 21:02 Say we're in Manhattan. 21:05 And for the sake of creating a persona, let's make up another person. 21:07 Let's call him, Luke. 21:11 Random guy, another random guy. 21:15 So what are Luke's expectations? 21:18 And what is his, what's he concerned with? 21:20 Being in the city, he's probably not 21:22 concerned with bandwidth cuz he's in the city. 21:24 There might be some issues, but certainly not as much as Carl. 21:26 Is he concerned with battery life? 21:31 Maybe, he might be draining a little low. 21:33 But he's probably has pretty good access to electricity at some point. 21:35 So he may not be concerned with that. 21:41 He could be concerned with the amount of light, maybe it's night time, 21:44 or if it's day time, and he can't read his phone very well. 21:48 Or whatever device he's on. 21:52 He could be carrying an iMac around with him, I don't know how Luke acts. 21:53 But he could also be in a high distraction environment. 21:58 So, we could be concerned with that. 22:02 From, that's a sort of both ends, his concern and our concern as the developers. 22:03 And this is a, a large pipe experience that would be completely different 22:07 from the small pipe experience that Carl might be experiencing on the mountain. 22:12 To deal with this, we have some, we have something called the IdleObserver. 22:17 This is in Firefox right now. 22:23 And what it can do tell if you an user is idle or not. 22:26 Basically, if they're paying attention. 22:29 You can set a timer on it. 22:31 You can say if Luke hasn't done anything in five 22:32 seconds I know he's not paying attention there any more. 22:36 So I'm gonna stop firing Ajax requests. 22:39 At him. 22:41 808 saves, it saves our servers because we don't have to keep firing requests. 22:42 It saves his battery because he's not constantly receiving requests, and when he 22:47 comes back there an event fires that says oh, he's not idle any more. 22:51 Let's start the, the pipe up again. 22:54 So that's the way we could help. 22:55 We help a high-distraction environment. 22:58 There's also the device light API. 23:01 This is actually a really cool one, I mean I think there 23:05 all a really cool or else it wouldn't be in the presentation. 23:07 But this will measure the amount of light in the room. 23:10 So let's say, Luke is reading a medium mark, will maybe the same one as Carl. 23:14 And he is huddled in a dark alley way for some reason. 23:18 So he's sitting behind a box, hiding from a mugger and the screen's really bright. 23:21 And he doesn't want that because he's hiding from a mugger 23:26 and he wants to read this medium article so bad [LAUGH] 23:28 So we can see that there's, there's not 23:33 much light in his environment so we can dim 23:35 the interface a little bit to save his 23:38 life from the mugger potentially so we're saving lives. 23:40 Is what it comes down to. 23:43 And this is the only one that does it. 23:44 What it will do is return a the lux 23:46 value of how much available light is in the room. 23:50 And then you can do whatever you want with that number. 23:52 And I do have a demo that we put together. 23:55 This is what I used to look like. 23:59 Let's see if I can play it. 24:03 >> Right, we're here at [UNKNOWN]. 24:04 >> All right, well. 24:10 I'll describe what's going on. 24:12 This is Dmitri. 24:14 We built a demo on Android device running Firefox, 24:15 and it's testing the, the lux value, see it's changing. 24:19 With the amount of available light in the room and Dimitry is gonna 24:24 go into this secret room that we have at, at, in the office. 24:27 I am telling when it's secret. 24:33 But he is gonna go into the room and when the [UNKNOWN] value hits a certain point. 24:34 You can't hear it but it plays a Barry White song. 24:40 We'll be measuring the [CROSSTALK]. 24:43 >> When it gets dark. 24:44 >> [CROSSTALK] Telling you what it is. 24:44 So right now it's 1000 [CROSSTALK]. 24:46 >> And the market for this incredible. 24:47 You wouldn't, you wouldn't believe it. 24:48 Picture yourself as a teenager in the basement with your boyfriend 24:51 or girlfriend and, you know, things are getting a little heavy. 24:54 You're playing some Barry White on your Android device, and then, and then 24:59 Dad busts in the door and the light shines and the song shuts off. 25:02 Automatically. 25:06 That's the market for this, and I think it's pretty good. 25:07 But so this is the demo. 25:12 I could send it out later, but so you 25:14 can hear it, but basically he's going back and forth. 25:17 He's really impressed with himself. 25:19 >> You come out to the light and then, there it is. 25:22 >> Yeah, so, it's more likely that instead of those 25:26 clean experiences, you're gonna get something that's a little different. 25:30 Like the city on the mountain top. 25:34 But the the point is that through the partnership in, you 25:37 know, Mozilla and the W3C, and a lot of other things. 25:42 You know, so geolocation is still really, really nice for, for environmental design. 25:45 But they're, they're exposing these APIs to us so 25:52 we can help develop a better experience for the users. 25:57 And that's what it comes down to, you know, 26:01 we're developing an experience and in the UX process. 26:03 As we start doing these things that don't fit into Photoshop, 26:09 developers are becoming more and more important to the design process. 26:14 I think it's really great. 26:18 Now I dare somebody to try and, try and put into Photoshop 26:19 something that plays a Barry White song when the, the lights go down. 26:24 It's really difficult. 26:28 You know, we need to start doing more prototyping in this thing. 26:30 And, and Steve is giving a talk tomorrow on prototyping. 26:34 Which is, is gonna be really good if you're interested in that. 26:37 So, I don't think it would be responsible to, talk about 26:41 the future without talking about a way to actually get there. 26:47 You know, we can say, here are all these cool APIs and, cool concepts, but part of 26:51 bringing Environmental Design to the web, is bringing it into your process as well. 26:59 To do that, we actually need to change the way we work together as teams. 27:09 I've been development director at Fresh Tilled Soil for a while now. 27:14 And we made a lot of changes, just in the way we work together. 27:19 [SOUND] Starting with, you know, really simple stuff, like the way we sit. 27:22 Does anybody experience something like this, where developers sit in 27:27 a certain area, and designers sit in a certain area. 27:31 Then you have culture in the middle. 27:34 Ping Pong tables or whatever. 27:38 Has anyone experienced that? 27:39 This needs to stop. 27:41 This absolutely needs to stop. 27:43 There's some benefits to it. 27:45 Certainly from the way it's been explained to 27:47 me, at least is that there's professional development 27:50 opportunities when you sit with other designers, or 27:57 you sit with other developers, you're gonna talk shop. 28:00 But you're gonna talk shop regardless. 28:03 So, you know, at what, what, what is the cost of that 28:06 professional development is a worse product in the end, I think, personally. 28:10 I think we need more conversations earlier on in the process. 28:14 Where designers and developers or whatever you're gonna call yourself as a title. 28:19 I've heard that titles are bad, earlier today. 28:23 Whatever that process is it's, it's gotta be more fluid. 28:28 And everyone needs to be involved and the 28:34 only thing this produces, is a really crappy process. 28:35 So we have time. 28:40 Project management over the entire course of the project. 28:43 Fairly typical. 28:46 UX and design is lumped in the beginning and then development at the end. 28:48 Has anyone experience at this? 28:53 This is a safe place. 28:54 This, this needs to step too. 28:57 This is horrible. 28:59 And this small overlap here is what, is the, that can't be done conversation. 29:01 Between developers and designers. 29:07 So what happens is, the design in UX teams go off and they design this, 29:09 this fantastic experience without ever having a conversation 29:14 with the people who have to build it. 29:18 So they don't know you know, if there might be 29:20 some technological constraint that we just can't do a certain thing. 29:22 So, this little overlap happens. 29:26 The developer gets this stereotype of being 29:29 somebody who always says no, because of this. 29:34 Designers have to go back again and redo everything and if 29:38 you've ever had a conversation with a client where they've signed 29:41 off on design and then something's been handed to a developer 29:44 and the developer says no we can't actually do this stuff. 29:47 You have to go back to the client, and say like, oh we screwed up. 29:50 We have to design this over again. 29:53 And it makes everybody look bad because of this. 29:54 And the only reason I could think of that something 29:57 like this was every conceived, [SOUND] you know, not having your 30:00 entire team on a project the entire time, is I'm 30:04 assuming someone's trying to jam development of a previous project here. 30:07 And design for the next project over there. 30:11 And what they're just doing is wasting everybody's time and money, 30:14 because we have to go back over the same stuff again. 30:17 So this has to stop, and it needs to look more like this. 30:22 We're all part of the same team. 30:26 We're all having conversations. 30:28 Up front we're prototyping more to communicate these experiences. 30:29 [BLANK_AUDIO] 30:37 And it really comes down to your skinny jeans needing my neck beard. 30:43 These are, the designer developer relationships that we have. 30:46 These new API's aren't gonna do anything by themselves. 30:52 If people don't know about them. 30:55 So, if you're in the beginning of the process and you say hey, 30:57 there's this, API I think that could help this experience a great deal. 31:00 Unless that's communicated, that's never gonna get 31:05 in there and then you have to jam 31:07 it into your workflow in that little 31:08 time that you've allocated to develop the project. 31:10 And that's not how we're gonna advance any of this stuff to make better experiences. 31:13 Scope and resources need to shift in that direction as well so 31:19 whoever, whomever's scoping the project needs to be aware of this stuff. 31:23 So it's all about communicating to the whole team. 31:27 And I really think that often times, the 31:33 best designer on the project is the developer. 31:36 We're developing these experiences, I don't think I've ever 31:41 been on a project that didn't need to be built. 31:45 I don't know whether that, that happens. 31:48 But ultimately, and I came up with this 31:50 artist's rendering of what I think this new age. 31:53 Let's call him a unicorn, or her, a unicorn. 31:57 Looks like as you can see our, our unicorn has a very 32:01 prominent neck beard, let me see if I can do this thing. 32:06 Here's our neckbeard here. 32:14 And then some impossibly tight jeans. 32:16 I didn't mean to circle his crotch. 32:20 [LAUGH] Am trying to circle his jeans. 32:22 It's not an exact science. 32:23 Just very, very thick glasses, and huge earphones, and apparently giant nipples. 32:27 >> [LAUGH] >> I don't know why he has giant nipples. 32:35 [LAUGH] But this, you know, this is the, no, this is the developer 32:37 being a designer on your project, I guess this is the represent, the representative. 32:43 And the greatest project I have really ever 32:47 worked on, has been those projects where development 32:49 and design is right there in the same 32:51 room sketching on a white board, spitting out ideas. 32:54 We're all talking to each other. 32:58 By the time something's presented to a client or a product 33:00 owner, everyone's on the same page, everyone knows it could be executed. 33:03 And we all, we all are really happy with the experience. 33:08 [SOUND] Jeffery Zeldman, semi-famously tweeted 33:11 a while ago, that content precedes design. 33:17 Design in the absence of content is not design, it's decoration. 33:22 I completely agree with this. 33:25 I would also add that context precedes design and 33:26 design in the absence of context is just decoration. 33:32 So this is very important. 33:36 I think in experienced design, context is really king. 33:37 Design doesn't look like this any more. 33:43 This is really pretty, but it really is decoration. 33:45 This is something you can, you can create in Photoshop, but web design is changing, 33:50 pretty rapidly, and we're moving out of Photoshop or sketch. 33:56 For you hipsters. 34:02 [LAUGH] Sorry. 34:03 Design looks more like this now, but it feels like something completely different. 34:08 It's it's very aware of your surroundings, your location and your needs. 34:13 It's not just design anymore. 34:19 It's an experience. 34:21 [BLANK_AUDIO] 34:22 And that's all I have. 34:27 >> [SOUND] 34:28