[BLANK_AUDIO] 0:00 Often people when I talk to them about this, 0:01 I talk to all the clients I work with. 0:03 This is something I do on every single project now. 0:05 I can't even imagine not going atomic. 0:07 You know? 0:09 When we think about responsive or just web design, you know, we think 0:10 about how our content is gonna start to live across all these devices. 0:14 Well, that's a bit about what I'm gonna talk about today. 0:19 also, I'm Canadian, so I'm going to say about, and 0:21 I'm gonna say process cuz that's the way it's spelled. 0:25 >> [LAUGH] 0:28 >> I was mean making fun of America basically just so you know. 0:29 >> [LAUGH] 0:31 >> [LAUGH] this is probably a safe city to do that in, right? 0:32 Anyways, I am now at the Republic of Quality. 0:35 I left, the that company I was at over the last three years, I 0:37 was User Experience Director at a place called Yellow Pencil, they do great work. 0:40 But I started to do this type of work, more,more 0:44 and more until I still work with them and other companies. 0:46 But this is just a user experience and content strategy duo, its 0:50 my wife and I helping to make the web a better place. 0:53 So, this is me. 0:56 I forgot to bring my on brand tie. 0:58 But, you can find me on Twitter. 1:00 Twitter is by far the best way to get a hold of me at any time, honestly. 1:01 Just reach out to me. 1:06 If, if, for some reason, I don't follow you back right away, 1:07 just send me a really angry message, and that will work, for real. 1:09 Okay, so, first thing you should know is, I'm a great designer. 1:13 Yeah, that's funny. 1:17 no, but I am not good at this. 1:18 [LAUGH] Now it just gets better. 1:20 [LAUGH] And my daughter, we just bought this for her. 1:24 This is the first thing she did. 1:26 Hey. 1:28 [SOUND] Yeah. 1:28 >> Go! 1:32 >> It was, it was kinda this moment of huh, you know what? 1:32 And often we forget that the clients, the people 1:38 that we're working with if you're here as a 1:40 web designer, developer, agency, or maybe you are someone 1:42 that's looking to hire a web designer, developer, or agency. 1:46 That it's not always easy to just do these things, you know. 1:50 It doesn't always just make sense. 1:53 Sometimes we have to go through these things together. 1:55 I'm a big believer in collaboration and collaborative processes. 1:57 Cause that's a bit what we can talk about. 2:01 You need to know a little bit about me in case you don't. 2:02 This is my wife Shannon, she's the other half of Public with Quality. 2:06 She's fantastic, and she's got a great personality. 2:09 This is my daughter. 2:13 I occasionally put her to work as well. 2:14 That's not legal, but I do it. 2:16 She also has a fantastic personality. 2:18 She, she was just one of the photographers at the Dare Conference in 2:20 London, because one of the photographers said, here's a camera, and she loved it. 2:24 That was her first connection to a conference in the digital industry. 2:29 I also have a dog that comes to work with me. 2:33 This is how I wake up to her in the morning. 2:35 She's a puppy still. 2:37 She looks like a deer basically, and she also 2:38 has a personality of her own as well [LAUGH]. 2:40 This is where I live and work. 2:45 So if you look, there's kinda this building with a 2:46 weird top on it way over there in the right. 2:49 That's really close to my office. 2:52 This is Vancouver, British Columbia. 2:53 It is a beautiful, beautiful place. 2:56 We can go snowboarding and skiing, hiking, you know, this is what it 2:58 looked like as I was looking for my home there two years ago. 3:03 I loved it, and then I moved there. 3:05 >> [LAUGH] >> Yeah. 3:06 It's actually in a rain forest. 3:08 It's in the Pacific Northwest, there. 3:10 But I, I love it. 3:11 I love to cycle camp. 3:13 I had very serious commuter bike that became a 3:14 bit more of a hipster commuter bike that became 3:17 a little bit more And then it became this 3:19 and I take very dangerous photos while I cycle. 3:22 I've never dropped my iPhone. 3:25 I was hit by an SUV once though, so I don't necessarily recommend that. 3:27 But, I love Vancouver so much that I created a website just for you. 3:32 So, it's haveaproblem.com. 3:37 Please visit it on your own time here. 3:38 but, enough about me. 3:40 Let's get back to work. 3:41 So, why, why are we here? 3:43 Like what, what is this thing, this atomic content? 3:46 Well, this past year, I had a conversation with Brad Frost at 3:49 South by Southwest, and later he wrote this piece on atomic web design. 3:53 I don't know if you've read it or not. 3:58 If you haven't, this is the URL. 3:59 It's really easy to find if you look up atomic design. 4:00 First you get kind of the technical atomic design like as in nuclear 4:03 but then you get his article [LAUGH], which 4:10 I thought was an interesting contrast but it's great. 4:11 He talks about all these pieces. 4:13 How we start with the smallest and work our 4:14 way up and, and the process that goes through there. 4:16 But there's this little bit of a problem that I have, not with his article, it's 4:20 great, but if I did a search for connection or humanity or heart or people 4:24 or anything like that, those terms don't exist in his blog post anywhere, right. 4:31 This is about the system, and that's great, but do you know what? 4:36 This is not the web. 4:38 The web is not machines. 4:39 Now technically that's where is hosted, but the web is us connecting with people. 4:41 The web is with people connecting to people. 4:46 So we need to remember that. 4:49 So when we start to think about web design, and thinking 4:51 about a multi device world, what, what does that actually mean, right? 4:55 How many of you are in the process 5:01 of redoing your sites so that it'll be responsive? 5:04 You just raise your hands real high. 5:06 I totally can't see you anyways. 5:08 How many of you are want do that but not quite there yet? 5:10 How many of you, your site is responsive, and you 5:15 feel like it's, like, exactly what you wish it could be. 5:17 Yeah, you're hadn went down after [UNKNOWN]. 5:19 [LAUGH] You know, there's so 5:23 many complicated issues around responsive design. 5:24 How many of you don't care about responsive 5:28 at all, and are just in the wrong room? 5:29 No, that was another awkward Canadian joke. 5:32 Okay. 5:34 Well, I think that the problem is sometimes is we just jump 5:36 into these projects thinking about technology, 5:39 and we forget about the people. 5:41 The why, the why are we doing this, the how are we gonna connect? 5:42 One of my favorite TED talks is, it was 5:47 actually a TEDx talk, in 2009, by Simon Sinek. 5:49 Has anyone here, listened to the Golden Circle by Simon Sinek? 5:52 Few people. 5:57 Not very many. 5:58 Well here. 6:00 Here's your opportunity to learn about it. 6:00 This is basically what I base a lot of my work on. 6:02 And I get hired to help people connect to people 6:06 really, even though I'm a user experience designer content strategist. 6:08 So you've got these three concentric circles, and the outside circle is a what? 6:12 Everybody knows what they do. 6:16 Someone shout out what you do. 6:19 Like, what's your job title? 6:20 >> Event producer. 6:21 >> Even producer, [LAUGH], thank you. 6:23 what, what do you do? 6:27 >> Special events coordinator. 6:28 >> Special events coordinator, wow. 6:30 Okay. 6:31 You guys are sitting together. 6:31 You know it's easy to say what we do. 6:33 That's very easy. 6:35 It's easy for me to say I am an experienced architect, right. 6:35 100% of us can say that. 6:39 How it gets a little fuzzier, right. 6:41 Because how many of you have been in 6:43 a meeting, I think someone else talked about this. 6:44 Where your listening to a client or someone 6:46 else on your team say we really need 6:48 to do this and you just kind of nod and say oh that's a great idea. 6:50 We'll definitely do that, and as you walk away from that meeting and go 6:52 home that night you're thinking oh shit I have to learn how to do that. 6:54 Yeah that's happened so many times to me. 6:58 We need to figure out the how. 7:00 The how is kind of this bit of a fuzzier thing but then 7:02 there's the why, the central core that is fuzzy for almost all of us. 7:04 You know, and Simon Xena gives us great example, he gives a lot of examples. 7:10 He's got a website and a book on this now, too. 7:13 But when we think about this, this inner core, this why of a computer company. 7:17 So if you compared like a PC computer company with Apple computers. 7:21 I'm not saying that because I use Apple computers, I use everything. 7:25 But, you have the PC company saying what are we gonna do? 7:31 We're gonna produce a computer so that people can use it, you know. 7:34 How are we gonna do that? 7:36 Well we're gonna source parts from wherever we can, they're the 7:37 best parts we can acquire, they're a great cost, all these things. 7:39 Maybe we'll have a manufacturing place of our own, or, we won't. 7:42 Why are you gonna do it? 7:45 So people can use our computers so we can make money, right? 7:47 That may not be the whole story, but that's a bit of a summary that he gives. 7:49 He talks about Apple computers, and whether 7:52 you believe this or not about Apple computers. 7:54 But, how they start off by saying, we want to think differently. 7:56 We want to change the world. 7:59 Right, just give me a little bit because I was just thinking about that. 8:01 And then the how. 8:04 Well we are gonna start, you know, really thinking about computing from the 8:05 human perspective, you know, how is this device going to work for people. 8:09 And why or what, these things there are all around us, you know. 8:13 What if the iPhone hadn't come out, I'm sure another phone was on its way and 8:18 there, there were, but there are devices like 8:21 that that they produce that change the world. 8:24 Right? 8:27 And all of a sudden you connect that vision of the why to that. 8:27 And I'm far more compelled, suddenly, to buy an 8:30 Apple computer, because I wanna be part of that. 8:33 Now it may never have been more obvious that the 8:36 why may be missing a little bit in the now. 8:37 But we need to focus on the why of all of 8:39 our projects, and then build out to the how and the what. 8:45 So what is a responsive site? 8:50 You know. 8:52 I think we need to see the web differently, okay? 8:53 We need to put on different lenses that allow us to see the human web. 8:56 So a zombie alert. 9:01 I'm gonna show a zombie clip, I always do this, I always show something there. 9:02 It it's a little graphic, but that's okay. 9:05 Have any of you ever watched or know of The Walking Dead, the show? 9:08 Yeah, even though I can't see your hands, I'm assuming a few are up. 9:13 My wife and I watch it, which means I watch it and tell her about it afterwards. 9:16 Cause she watched the first few episode and she was like, oh this is too gross. 9:20 But, we both love it. 9:23 But here, here's something that I love. 9:25 I love that zombie movies tell the same story every single time. 9:27 Just variations of it. 9:31 They tell it in there own way. 9:32 You know? 9:34 Someone. 9:34 So if you've never seen a zombie show, movie, 9:34 never heard anything about it, probably someone will wake up 9:37 in a hospital, you know, maybe let's say 28 days 9:40 later, and there'll be no one around on the streets. 9:43 They'll somehow have survived whatever apocolypse has happened 9:46 that it caused everyone to evacuate, they're all gone. 9:49 They'll start wandering the streets and 9:51 then they'll encounter the undead, the zombies. 9:52 And they won't know what to do but, for some freakish way, they'll 9:55 like knock off one of their heads, and if they're that's how I survived. 9:58 They'll meet up with some other humans, they'll make friends. 10:01 They'll be in this together, probably most of them will die. 10:04 The hero will survive, and we don't know exactly how it will end after that, right. 10:07 But this is popular. 10:10 It's the same story over and over and over. 10:11 But it's told just a little differently each time. 10:13 [MUSIC] 10:16 [MUSIC] 10:24 [MUSIC] 10:36 [MUSIC] 10:54 So that's an alternate opening, from Great Arts if you go to 11:07 that link on Vimeo just search for it you'll find it very easily. 11:10 But it's so easy for us to focus on this. 11:14 What is happening around them, right? 11:19 This zombie apocalypse, and, you know what, 11:21 this is true about any disaster, right. 11:23 As a kid, I lived through a horrific 11:27 tornado, in the city of Edmonton in Canada. 11:29 It was a class five tornado, if 11:33 you know much about tornadoes, that's insane, right? 11:34 It, threw these giant oil drums that were hundreds and hundreds of feet across. 11:37 We would just pick em up and throw em across the city. 11:40 And it was terrifying. 11:43 but, and it was easy to focus on the disasters 11:46 of it, the destruction, the horror, and the death, right? 11:48 But, what, we start to see in the zombie 11:54 genre, and then these disasters is not this, it's this. 11:55 This is what zombie movies are about. 12:01 Humanity, our reaction to the apocalypse. 12:03 This is why I think they're beautiful, 12:06 even though they're a little disgusting too,right. 12:08 Is it that we see how, as people, we 12:11 will react in these dire circumstances and come together. 12:15 You see that all over the world when disasters happen, not to say 12:18 that they aren't horrific and awful, but is about our human interactions, you know. 12:21 When we think about the web we to think about 12:26 the humanity the face that we're putting on it right? 12:28 So really, its all about rocks. 12:32 Not this guy though, but maybe this, sorta. 12:38 So I'm gonna do something that I've never done before. 12:46 And this is actually a new talk, so this is interesting for me. 12:50 But I'm gonna do a physical demonstration. 12:53 So we need to start with the right stuff. 12:55 So if we can get the camera on the table, that would be great. 12:56 hopefully, yeah, look at that. 12:59 Power pose. 13:02 'kay, [SOUND]. 13:03 Has anyone here read Steven Covey's book, 13:04 The Seven Habits of Highly Effective People? 13:09 You know I'm always surprised to how few people have read this book. 13:15 And it's not because I think that Steven Covey is a great, great author. 13:19 Or because, people must read this book. 13:23 But because of how impactful it was on my life. 13:26 And how whenever I interact with people that 13:29 are leading organizations and successful, they've read this book. 13:31 You know? 13:35 So he talks about, these four quadrants that are the I'm not about to 13:35 drink like a big cup of something here, this is, this is sand actually. 13:41 He talks about these four quadrants. 13:44 They are the urgent important, right? 13:46 And so, if this thing, if we don't do this thing someone will die, right? 13:49 The non urgent important. 13:53 See these are things in our life like 13:54 exercising, eating well, where they are really important 13:56 and they will transform us, but they don't 14:00 seem urgent because they don't transform us that day. 14:03 And then we've got the, urgent non-important, right. 14:06 So that may be you know, someone comes in 14:12 and says, hey there's doughnuts in the conference room. 14:14 Well its urgent, cuz those donuts will go bad, but I don't really need them. 14:16 And then the last quadrant is the non-urgent, non-important, right? 14:21 And that's probably wasting time on, like a television show, or something like that. 14:26 It's not to say that we shouldn't have things in all these 14:32 quadrants, but he talks about the 14:34 importance of focusing on the non-urgent, important. 14:36 The training ourselves, the taking care of ourselves. 14:40 So but there's this problem. 14:43 Right. 14:45 So let's say this pitcher is our web project okay. 14:46 And we're gonna put in, I think I'll even put in a little bit more sand. 14:49 I've got this giant Home Depot I was surprised 14:52 to find a Home Depot in Manhattan, that was awesome. 14:55 It wasn't fun carrying 10 pounds of sand around though. 14:57 So let's say we put the sand in first. 15:02 So maybe this is this is some of the RFP that's 15:03 come to us, you know, and all the features that might be 15:08 turned on on an Oracle site, and all these things that 15:10 aren't really all that important, but they start to take over, right? 15:13 And then we've got, maybe some smaller 15:18 colorful rocks that will go in here, right? 15:20 And so we've got other things that start to come up, you know, 15:22 different personalities, working their way out that allow us to start to think 15:25 about other features like the carousel on the homepage or how important the 15:31 homepage is to different people, even though 15:35 somehow we feel like it isn't important. 15:38 And then we get to slightly bigger rocks again. 15:39 Alright. 15:43 That's probably good enough. 15:44 Where, you know, these are the things that start to really matter. 15:47 You go, oh, okay. 15:50 Yeah, you know, we've got this messaging from 15:51 our marketing department but we also have this 15:53 messaging you know, for this core part of 15:55 our product that needs to make it out there. 15:58 oops, we gotta get those in there. 16:00 And then [SOUND], fresh from this street look who's here. 16:02 We've got our big rocks okay. 16:08 So these could be things like I don't know our content. 16:13 You know, our maybe it's actually how we're connecting to our users. 16:18 So we're gonna talk to our user research. 16:23 We decided to do testing at the end of the 16:25 project for some reason and forgot to do it all throughout. 16:26 You'd see my problem here, right. 16:28 I have run out of room for things in my web 16:30 project, and so somehow I need to reshuffle or maybe, maybe the 16:34 content needs to totally change, or maybe we don't talk to 16:39 our users at all, and we'll just leave that one over there. 16:41 It's a bit of bullshit, isn't it? 16:44 What if we took another jug, and instead of putting the sand in first, 16:47 [LAUGH] which I almost did, we'll grab some of the big rocks. 16:53 We think about our content, our message, and plop it in. 16:59 You know maybe this one is talking to our users 17:03 early and often, and for that a few different presentations. 17:04 What else, here we'll grab this one. 17:08 You know and maybe this is the vision of the project. 17:13 Alright, so we start to have these things and then 17:17 we can go back to our other rocks we say okay, 17:20 so we have our design principles our fundamentals that are coming 17:24 out of this, where we're trying to interact with people [SOUND]. 17:27 You can see what's starting to happen here. 17:31 Alright. 17:33 I'm going to put a few of these in, [SOUND] they start to fit their way 17:33 around, oops, these big rocks in here, and then we start to get some of the features. 17:38 Some of the other things that we know are gonna be important. 17:44 You know but we've dealt with the vision, the 17:47 content, the users, maybe revisiting some of the user testing. 17:49 [SOUND] I hope you can see this. 17:53 And again the level hasn't gone above the top, big row yet. 17:57 Not even once. 18:04 What if we were to take some of these other things now, these things that 18:07 we knew at the start somehow didn't feel 18:10 right when we're putting into our web project. 18:12 [SOUND] You know, let's pile a little bit more 18:14 of these features, and some scopes on some of the stuff that we want in our project. 18:20 But weren't sure could fit, but because we had 18:25 this strong vision, first, we talked to our users. 18:28 We talked to people, we made our project human. 18:32 Hell, let's not stop at the sand, is what makes everyone nervous. 18:35 Let's get right into the water now. 18:41 Read into all these other things, you know, 18:43 that we can start to enhance our project with. 18:45 I recently was working with the government in Canada. 18:48 I'll let that settle a little bit. 18:51 And their IT manager was on the stakeholder group. 18:56 I don't know if you've ever worked with an IT 18:58 manager but often they see things in a particular light. 19:01 They're thinking about the technology. 19:04 And we're going through this process of atomic content modeling, and he started to 19:06 kind of laugh at one meeting and I thought oh-oh, [LAUGH] this is going horribly. 19:11 And I believe in addressing things right away, within 19:15 the meeting, you know, not letting elephants sneak around. 19:18 And so we talked about it and said well, well, what's funny right now? 19:20 And he looked at me, and no joke he was giggling like a little kid. 19:23 He said, I love this process so much. 19:26 My project suddenly makes sense to me, right? 19:29 And it was because he could see how people could connect to it. 19:31 So I could keep going here. 19:35 The water could keep sinking and settling in, and 19:36 it's because we started with the big rocks first. 19:39 I am not gonna leave, well, maybe I will. 19:43 Hopefully, I don't knock any of this over. 19:44 We can go back to the slides, though, now. 19:47 Thank you for that. 19:51 That was seamless. 19:52 So this was really powerful for me the first time I read about it. 19:55 And then I saw it, and I wanted to share it with you because sometimes 19:57 when we see these things physically they stick in our head, and we don't forget. 20:00 Maybe you won't have time to read that book, but you have a 20:04 bit of an understanding of why we start with the first things first. 20:06 You start with the right stuff. 20:09 So for that same government, we're looking at 20:11 their site and, my work is often quite messy. 20:13 I'm a big believer in digital prototypes, designing in the browser all these things. 20:16 But I also am a big believer in this, in us being together, sketching. 20:21 That it is not my job to do all the sketching, either. 20:25 That is everyone's job on the team. 20:28 So this is that same municipalities. 20:30 See, they want it to be a web first organization that empowered [INAUDIBLE]. 20:31 right, but in the middle there, is a bit 20:36 of an example of a content model that failed. 20:38 And initially. 20:43 So, let's take a look at that one. 20:45 So this is loosely based off of 20:49 Starbucks when they relaunched their responsive site initially. 20:51 Right? 20:54 And so they had, if you haven't heard the 20:54 blob versus chunk argument from Karen McGreen please look that 20:56 up, but blobs are these giant blobs of HTML 20:58 content, where as junks are more discrete pieces of content. 21:02 And that's the way to go. 21:05 But let's say this is their initial site. 21:06 And we have a logo, site ID, navigation, you know, a 21:07 big blob of HTML content where their main body of stuff is. 21:11 What they call the sidebar, unless your using 21:16 WordPress please don't call that a sidebar though, footer. 21:18 And then they have this really important call-to-action, buy this product, right. 21:22 And it was right there. 21:26 And it's in a great spot for, a desktop or a large screen type like this, right. 21:27 But because they had these blobs of content, how do we thought about it. 21:33 Like how many of you use your phones when you're in Starbucks? 21:35 I see everyone that goes to Starbucks, we're on our phones. 21:38 So this what we call action, when I was 21:41 refactored, all of a sudden they have this giant 21:43 blobs, they haven't thought about pulling this out of 21:46 there, and so we've got this lost call of action. 21:49 It's so sad. 21:53 And then, what if we thought about it from chunks 21:58 instead of blobs, we still have our side idea logo. 22:00 Now were still over navigation, but maybe we've got 22:04 a title here, and maybe we've got a bit of 22:05 intro copy, clarity copy, debt copy, whatever you call it, 22:07 you know, maybe there is the rest of the body. 22:10 We've got this call to action, is a discreet piece of content, 22:12 but we have this secondary area and the reason why you shouldn't call 22:15 it a sidebar is because it won't live on the side on the 22:18 majority of devices accessing it because the majority of devices are now mobile. 22:21 And then we have this tertiary area, which is the footer. 22:26 If we refactor this, where the call action 22:29 was there, suddenly we can have this successful 22:31 call to action closer to the top, that allows us, I don't believe in the fold. 22:33 I think its just its so weird that we continue to use 22:39 terminology like that, although I get it, the sun doesn't rise and set. 22:41 you know that's old language but it makes sense to us now. 22:45 But we do see more conversions when we have this call 22:48 to action on the first screen if it's an important one. 22:51 You know so it's this happy moment. 22:54 This genuine surprise of how successful we can be. 22:55 So when I get in with a client, and then working on a project, this 22:59 is a, this is basically what the start of this atomic content molding process is. 23:02 Now I've done all the content audits, or someone has. 23:08 There's been inventories. 23:11 I know where the content lives. 23:12 We've actually talked through, at this point, the user experience 23:14 vision, or the vision for the project, we've designed principles established. 23:17 But when we get to here, we start to list out all the discrete pieces of content 23:22 that will live on every unique view, right, and 23:26 so, like this site had about 10,000 pages, right? 23:30 And we did not do this 10,000 times. 23:34 We did this 12 times, they had 12 unique 23:36 views that would handle the content across the entire site. 23:38 So we list out things like the navigation 23:41 the site ID, everything that was gonna be here. 23:43 Even if some of them, the related content thing, it got scratched off. 23:45 We realized, what, we don't need that, but we listed everything off. 23:48 Everything is then grouped, oops, you know what 23:52 I'm gonna come back to that, that's right. 23:54 Because often, I skipped a step here. 23:59 Often we think about what system is best for content like this. 24:01 I spent quite a few years working with Open Source Systems. 24:07 I helped work on some of the stuff for Drupal 7. 24:10 I, I loved working with Drupal. 24:14 So what system is best? 24:16 Well recently I saw this. 24:17 And and a client had forwarded it to me because 24:18 they said this is what I want where I work. 24:20 There's can't be anything 24:22 out there better than this. 24:28 [MUSIC] 24:35 [MUSIC] 24:38 [MUSIC] 24:57 [MUSIC] 25:12 [MUSIC] 25:27 >> So basically that's magic, right. 25:32 It's amazing, it looks great. 25:34 What about this? 25:35 If you thought about. 25:36 >> My name is John. 25:37 >> Web design and there's a zom, zombie. 25:38 >> Making what was once impossible. 25:40 >> My name is Anna, and this is my world. 25:41 >> Possible. 25:45 >> My name is Umico, and this is my world. 25:46 >> With technology advancing so rapidly today. 25:50 >> My name is Faye, and this is my world. 25:53 >> Imagine what our world would look like [SOUND] tomorrow. 25:55 [NOISE] [SOUND] 26:03 >> My name is Alice, and this is my world. 26:08 [MUSIC] 26:12 >> Okay. 26:26 No system is perfect. 26:27 That's all I'm saying. 26:27 [LAUGH] I'm actually not promoting nor saying you shouldn't use Squarespace. 26:29 I actually think it is a great system. 26:32 But, we need to know the limitations of our system, right? 26:34 And I have worked on so many projects where it's 26:38 brought in as an Oracle project, or a Drupal project. 26:40 And that's okay. 26:43 Those can still be successful. 26:43 But you know what the ones that inspire me are? 26:45 And they're usually a lot more successful? 26:47 Is when we start with the content. 26:51 Is when we start with the people, the humanity, and find what's going to 26:53 work with what messaging we need to get out there, how we're gonna connect. 26:56 So no system is perfect and we need 27:00 to understand how our content will live within it. 27:03 But many are great. 27:08 There are many great systems [INAUDIBLE] so if 27:10 you're not familiar with it, there is Squarespace. 27:11 You've probably seen this on Hulu, or something, as 27:13 a commercial You know, they've got really interesting commercials, Squarespace. 27:16 There's also Virt, you know, another similar type of, of system. 27:20 These are low cost, where you could do something on 27:23 WordPress.org, right, if you're doing a blog or something like that. 27:26 You could install your own version of 27:29 WordPress, and really customize and go with it. 27:31 You know, you can use Drupal. 27:34 I've worked on many enterprise, level client projects on Drupal. 27:35 A lot of your government sites here in the 27:40 United States run on Drupal, it's a great system. 27:41 You could also use Oracle. 27:44 They're sort of opposite of each other in philosophy but, you 27:47 know, Oracle like it or not is an incredibly powerful system. 27:51 And Iron Man uses it, so you know, that's pretty good. 27:55 But here's the thing. 28:00 A 28:02 website is a black hole without its content. 28:05 So I think that those people that build those system have one 28:07 of the hardest jobs out there cause they're trying to think of every 28:09 possible scenario, and they're trying to create an interface that would work for 28:12 you to build a new scenario even though they don't know your content. 28:15 And that's where this comes in, we're looking at the atomic piece. 28:19 So we're looking for that one piece that everything else will revolve around. 28:22 So on a food site, you know, that may be a recipe. 28:29 Sarah Waktabooker, really hope I got her name right, talks about this 28:33 in her book, and how there's this food site and they decided 28:37 that the recipe was for this central core piece of the content 28:41 modeling, and that everything else related to it, like the different ingredients. 28:43 So you could go to this food store to buy this ingredient, you go 28:47 to this recipe cause this or this 28:51 restaurant because this chef prepares this food. 28:53 And it became this community that's founded around recipes, not around 28:55 ingredients not around chef's that prepare these things, but the recipes themselves. 28:58 So we go back to this municipality and we zoom in a 29:02 little bit on this, we can see there's red and green stuff here. 29:05 So everyone on the project team at this point, 29:09 that's in this room, and there were six of us 29:11 had to prioritize everything into three different groups. 29:15 First group is essential, right. 29:18 The, this view can not exist without these things. 29:20 So we see things like navigation, you know, 29:22 the site ID, search falling into that group. 29:24 You know, but other things like audio, and social channels are not. 29:28 And then the second group is, this would be great to have. 29:33 This will enhance the experience This should be there if possible. 29:36 And the third group is, these are nice to haves, you know. 29:40 And we noticed that some of those get scratched off after a while, cause 29:42 we realize it's nice to have, but it actually takes away from the experience. 29:46 That's the easy part in putting those three groups up there. 29:49 Then everyone is forced to agree upon 29:52 the prioritization of everything within those groups. 29:55 So something in group number one is number one. 29:59 In this, where did they set it as? 30:02 Do we see it up there even? 30:04 it's, must be off the screen. 30:08 oh, set ID logo. 30:13 That's what they decided as a group there. 30:15 You know, but from that, we then start 30:18 to sketch out the possibilities within an interface. 30:20 Now, this is where I'm a huge believer that you 30:23 need to get into the browser as soon as possible. 30:26 If you can't do that on your own, team up with someone that can. 30:29 Because there's no way for me to fully represent in the, in sketches 30:31 like this, every scenario, because the site 30:35 responds at every different screen-size resolution, everything. 30:37 It's not just about the break points, right. 30:42 That's just where it totally breaks, and we need to 30:44 refactor to present our content properly and keep those priorities. 30:46 But, a good exercise to do is to just simply do 30:50 small screen and large screen, and start to think about those possibilities. 30:52 The amazing part is how this moves you into the next bit of your process. 30:56 So what we do is, we find this one piece of, for their site, for this 31:00 government site, it became the page title and 31:03 clarity copy was their atomic piece of content throughout. 31:06 Because people were looking for services. 31:11 You know, governments are, are service providers essentially. 31:13 They're connecting us to our services. 31:17 You think about a city and its website. 31:19 Like cities are content wide, and miles wide 31:21 and inch deep cuz they provide everything to everyone. 31:24 But you're coming to find that particular piece of content 31:27 you may be saying, I wanna find my dog laces. 31:30 Right? 31:32 And so, knowing that you're on the right page, the 31:32 right view, with a little bit of clarity copy became important. 31:35 So that all seems really great but how 31:38 does this help us fully on a responsive project. 31:41 Well it's interesting that Jacob mentioned this but this 31:43 is that Wikipedia page that he talked about in his. 31:46 So this is for just Android phones, this is actually from nine months ago now. 31:50 The first column is the name, second column is the 31:54 release date, then the Android version, then the screen size. 31:56 And so we're in HTC right now, if we start to scroll through this you can see 31:59 that every almost everyone is slightly different combination 32:04 of screen size and, and version of operating system. 32:08 Okay now we're in LG. 32:13 I don't know, can we see the scroll bar on the right? 32:13 See that's the problem If you look at the scroll bar, there's so much to this page. 32:16 We're in Motorola. 32:20 And, again, this is just Android. 32:21 Samsung devices, I'm using a Samsung phone today. 32:24 I love to use it when I travel. 32:27 Sony Ericsson, let's, we better get going really fast 32:29 here though, I don't wanna stay on this too long. 32:31 Let's get down further. 32:33 So we're getting into different kinds of devices and almost 32:35 now so e-readers netbooks, smart watch, future devices, oh interesting okay. 32:37 Future Android smart phones, tablets, rumored tablets. 32:44 Other future devices my favorite category of all of them. 32:48 You're like what do you do with this, right? 32:52 Can you start with a hm and you end up with a oh shit. 32:53 Because there are hundreds of android devices that have different options. 32:58 Right? 33:03 Different screen sizes, different versions of the operating system. 33:04 People could be using different browsers on those devices 33:07 if they wanted to, and that's just one platform. 33:09 Right. 33:12 What if we start to think about other things, where our content could live? 33:14 I've a couple other people were talking about 33:17 Google glass and different devices like that, you know. 33:19 We were caught off guard in 2007 when the iPhone came out, because we had started to 33:21 think about every year we'll get a little 33:26 bigger with our resolution, and it was like boom! 33:28 Totally changed. 33:31 You know, the real web is existing on smaller devices. 33:32 What about Google glass? 33:34 Or this even? 33:36 What would delivering your content to a 33:38 pebble watch, or something like that, smart watch. 33:39 Anything that's hooked up to your phone, or standalone device. 33:42 We don't know, we could be delivering our content 33:44 to a billboard, to a screen this size, right. 33:46 I was in a presentation and my site came up and 33:48 I got to see how it worked on a low resolution, projector. 33:51 Cause it needed to be responsive to work with that. 33:56 What if we are using a smart watch, which is too hard maybe 33:58 to read a lot of content on, but we have an audio device. 34:02 And so we can go, oh, I wanna hear that 34:06 email and we just have this little audio device, right here. 34:07 And so it reads our email to us and we can respond back and forth that way, right? 34:10 This is where we need to start to really document these models. 34:15 These are where these things start to help us. 34:19 If we understand what that discrete piece of content is, we can deliver it first. 34:20 We can prioritize it. 34:24 We can say, for them to understand this 34:25 particular view, we're gonna send out priority one, one. 34:28 And if we can, one, two, right. 34:31 These things start to get out there, they start to make sense. 34:33 So, how it helps you process, won't help you process though. 34:35 is, you could start to document these out this is 34:40 the notes that we took during that session for that 34:43 same city and I, I removed the city's name because 34:46 the project isn't done, they're okay with me sharing this. 34:48 I'm not like doing this without permission. 34:50 But these documented models become the annotations within 34:52 the wireframes, or at least some of them, right? 34:57 And we see these sketches, and we can start to build this system out, right? 34:59 And so there's in-browser wireframes. 35:03 I don't, I used OmniGraffle for years, and I have not touched it in two years. 35:05 I had to open it up at one point, it just 35:12 like, you know what, I can do this better in the browser. 35:14 So, this is that same government, that same municipality. 35:17 You know, representing their 35:21 there should be real content in here. 35:26 This is kind of the mistake with this 35:27 one, but their annotations, their content modeling is here. 35:28 They can start to see it and touch it and live with it and bring it up 35:31 on their phone, their tablet, you know, their computer, 35:34 whatever it happens to be, a movie theater screen. 35:37 They can see how it's going to respond. 35:39 Now the truth is only web designers stretch their screen back and forth. 35:43 right, cuz we think it's cool. 35:46 But, they can actually live with this and, and there's so many ah-hah moments that 35:48 I didn't experience doing things in a 35:53 static environment of Omnigraph or something like that. 35:55 So, these things begin to speed up my process because I spent more time 36:00 on the content and the Atomic Content 36:05 modeling at the start, and understanding it. 36:07 Everything else has gone faster for me. 36:09 I come in under budget on most things, allowed us 36:12 to do more, to fit more into our jug, right? 36:15 The big rocks went in first. 36:20 So what about the future? 36:21 Hm? 36:23 What is the future? 36:24 How does this impact our future? 36:25 This is great, this is practical, this is now actually. 36:26 And we've got this idea of this atomic content, 36:29 finding this nucleus that builds out everything else around it. 36:31 But then we also have this idea of heart, of humanity, of connection. 36:34 All right. 36:42 We wanna create this experience that goes beyond the technology, 36:42 beyond our content management systems, and connects with you and me. 36:47 [BLANK_AUDIO] 36:51 So what's the future of the web? 36:56 What are people wanting, needing, going to hear, was this atomic piece. 36:58 I think the future of the web is all of us 37:04 taking responsibility for the web, and building a whole hearted web. 37:05 I was just at another conference where they talked, or every speaker talked 37:09 in that way where they were talking about people as holistic Individuals, right? 37:14 Brune Brown does this great talk, which this phrase is from. 37:19 She talks about us being wholehearted. 37:22 But she also says that our stories, are data with a soul. 37:24 If you find all these databases, all these pieces 37:28 of content, all these things that live up there. 37:30 But they come out, and they tell the soul of who we are. 37:32 Alright? 37:35 That's why I get so excited about what I do, and why I 37:35 hope that you'll get really excited about doing some of what I do. 37:39 We start to connect people to people. 37:43 And we see the future of the web as being a wholehearted web. 37:45 Thanks. 37:47 [SOUND] 37:51