 All right, well, I think we'll get started. I'm sure there'll be a few people trickling in here and there, but that's quite all right. OK. Hello. Welcome to After Lunch. Hopefully this is far enough after the hangover that everybody's starting to focus a little bit. Got some food. Haven't fallen asleep yet. Hope we can stave that off a little bit. I'm happy that enough of you got past the title to still come and hear the talk, maybe being a little bit too clever. But I think that it's really important that given all of the things that are going on in web design, that we figure out what we don't know and what things we can count on. And that's really what this talk is about. So a little bit about me. I know there's at least one or two people who have seen me give a talk before. And again, I thank you for actually coming back. And I've been doing this kind of thing for a very long time. This is front end track. I think of myself primarily as a designer, but I've also done a lot of technology stuff over the years. I've been working with Drupal for a number of years and have built lots of large scale sites with it. But in the end, I think of it as much as another pencil in my toolbox rather than the be-all and the focus of what I do. So that really kind of informs my own perspective about how I think about design, what I use Drupal for, and whenever I come to a Drupal conference to talk, the things that I like to focus on are maybe not so directly related to Drupal, but hopefully for the crowd in this room, something that really helps you leverage Drupal to further what you want to do as a designer. And that is then getting to a bit of an assumption that there are actually a bunch of designers in the room. So let's find out. How many of you are primarily considering yourself a designer? That's a really small number. So I have nowhere to go but up by the end of this talk to get more of you to think of yourself as a designer. So how many people are primarily front end developers? Okay, we've got a bunch more. And then any other people that happen to wander in, I'm assuming developers, site owners, I know there's at least one. How many at this morning at breakfast? And developers, I assume? Great. And educators. And educators. Because we all know that we need more people that can actually do stuff with Drupal, so we need more people like Kay. So I'm gonna talk about responsive design a lot. I'm gonna talk about a lot of the things that have to go into doing responsive design before you can actually start to do that. But I wanna make it very clear. This isn't supposed to be a talk about responsive design. There's lots of people doing that. Lots of tools out there to help you do that. But I think that we have to consider that responsive approach versus an app-centric approach or a bespoke mobile theme because that's gonna kill you. I mean, there are over 400 Android devices on the market. There's about 20 different permutations of iOS and operating systems and devices. All of these things are only growing. And we have to come up with a way to think about design and think about what we're trying to accomplish and get it to the platform and get it to the user. So I wanna talk about what is the design that comes before you pick up something to do your design? And I think this is probably the most important homework you can do. So I've thought and spoken and written a lot about web strategy. And that's one of the talks that I give fairly regularly about what is the bit between design and technology in the client. And oftentimes, Drupal's a really good glue for that. And there's only one thing that I can say is the same, having been building websites since Mosaic and Netscape One is that something's gonna be changing every day. And because of that shifting landscape, it requires you to be very flexible in the way you think about design, what you think about the output is going to be of your design. So, the title. There are some things that we know for sure. Probably going to be true as well unless you live in perhaps a pirate bay, I don't know. But this third point is the one that is most germane. This is the thing that we have to accept that we don't know. We have to because you can't tell when you're sitting there designing or when you're managing the site, you don't know what's on the other end. And you can't know, not really. I mean, all the detection, all of that other stuff that we can try and build in is fallible, all of it, 100%. For the first, I don't know how many months of the existence of the iPad, it reported itself as an iPhone. So you couldn't even look at a user agent string and know that the screen was four times larger than the other device. So, those are tricks to get us by. What we have to do is actually think about what we're trying to accomplish as a designer and how to convey that in this shifting landscape. So we've got a lot of things that have been changing. We have a lot of new developments that have made web design a lot more fun. But we have this other aspect to deal with about how many different ways people can view stuff. That makes this a really big turning point. So, in the past year, we've started to see in a number of countries, and this has been true in some places longer, but we're starting to see it be true in many countries that there are more people accessing the web through a mobile device than a computer. So that really changes things. But we also know that you can buy a car that has apps in it. You can buy a TV that has apps in it. You can use the TV as the screen for your laptop and that gives you a 40-inch display on which to put content. How's your 960 grid gonna look on that? There's a lot of really significant questions that you have to think about. We got here through this litany of stuff that went from no tables and aligning graphics to tables to making graphics out of your text to being able to finally specify aerial instead of Verdana or anything else to actually using some real fonts. And in responsive design, it's sort of taken that even further. So we've got all of these tools that have been developing and all of those things mean we get to use tools like Coda, LES, and SAS and Compass. All of these great things that have come along that are cheap, easy to use, really prevalent, really easy to support. There's lots of ways for us to actually get this stuff on the web, either rolling it ourselves or using a service. And you have more power available to you as an individual, designer, or developer than just ever before thought possible. So I was involved in 2000 at a company in Boston building a site for the New England Patriots, a football team, an American football team. And that cost the company $500,000 to build and that was reusing code. It's shocking. Now flash forward 10 years and a team of two other developers and myself built the entire website for CBS Caremark, a Fortune 25 healthcare company built in Drupal. We did the front end development of that in five weeks. So you could never have done something like this prior to the advent of something like Drupal. And that really is something that's wonderful about where we are, but it also brings with it this question, this question that has never been answered and now it has more answers than it ever has before. So if you don't know any of these things and you can't really deal with that control that you want to impose in your design, what are the things that you have to do in order to get by and not just get by but actually excel at the process of designing a website and doing a website and helping a website do what it's supposed to do. That brings us to a very important paradigm shift in the design thinking process is that we're no longer designing a page because that page is not a static thing. It has to have structure. We have to think about a visual system of elements that are on that page, quote, unquote, but that system of hierarchy has to be something that we can preserve based on the fact that we can't count on that answer anymore. We never really could, but we sort of lied to ourselves and said that was okay for a while because that was our best guess and that's just not possible to think about it that way anymore. So we're not designing pages, we're designing meaning and I think this is a really critical concept for you to think about is that you are taking the notion of that page, deconstructing it, thinking about what are the most important elements on it, how do you need to guide somebody's eye through it to get them to the content to understand what this page or this site is supposed to convey. So that has to work under any circumstance. So if you pin everything to a 960 grid, that will kind of work, but not really because you have bigger screens and you have smaller ones and you have different ways of interacting. So we have to start thinking about decoupling our presentation of that from conceptually what is the most important thing we're trying to present? Start with semantics. There's lots of carrying on about the semantic web, the value of semantically constructed code and what that means to convey understanding. It's just as important for that to be there so a search engine knows it, but it also lets you think about conceptually what are the important things you wanna convey on a given device. So once you start planning that way and you start doing the kinds of things that help you make that list and prioritize it, here are the elements on the page and this is how I wanna lay them out because it's important that the user get them in this order. Then you can start to construct some ideas about how that might work when the screen is very small versus very large. So psychology is a very important factor in this and it's something that I think is critically absent in design education and so I think unless you understand what motivates people to do things, it's very hard to design things to get them to do it because color, shape, size, contrast, all of those things influence how people take in information. So understanding these things, I think it's really important. So reading books like Don't Make Me Think, like the design of Everyday Things, like NeuroWeb Design, it's actually a great little book about the psychology behind e-commerce websites. Those things all help inform you as a designer to think about the strategies you will use to get someone to the point on the page to do something. So once you understand those things, those motivators, the drivers to get people to take action, you can start to design for them. You can tailor that system of hierarchy that you're thinking about from your page and then transform that into something that works on a smaller or larger screen. I don't mean to make too many off-color jokes but it does make a good sound bite. It really does matter how big or little something is on the screen because we're drawn to that contrast. So attention is something that you need to grab. It's something that you need to take from that user because oftentimes they have the device in their hand while they're doing something else. It's very rare, actually, that you have someone's full attention. Usually there's a cup of coffee or two other windows or the work that they're supposed to be doing or the work that they'd rather be doing or the play that they'd rather be doing. So you're fighting for the attention of that user and when you consider that, that also means you have to expand the contrast of the things that you're presenting in order to help combat that divided attention. So you have to think about where your design is being seen and what's likely happening at that time. Know your competition. Your competition is not the other website, it's the other tasks. So it's the other things that are going on in that person's life when they're looking at your design. And that location drastically alters what those other things may be. So if you think about a desktop, it's usually at a desk. You probably have the most focus when somebody is sitting at a desktop because the likelihood is they have sat down very purposefully to do something on their computer and at the time that happens to be looking at the website that you designed. Laptops are gonna be anywhere. I mean, they're gonna be in a coffee shop, they're gonna be sitting outside on a bench. You don't really know how much attention you're gonna get there and whether or not it's really purposeful and directed or grazing, just kind of skimming across lots of things. It gets worse. So tablets, if you look at the usage and overall during the day of iPads or other tablet devices, big spike around seven, eight o'clock in the morning, nothing, big spike after five o'clock. So what can you infer from that information is that these things are on a couch. They're next to somebody when they're watching television. It's with them in bed. They might be reading some email or picking something up to read some news or something first thing in the morning or right before they go to bed. There's no usage during the day or very little. Certainly drops way off. Phones are everywhere in between. So you get tons of usage and tons of data that go through phones, but in very short periodic bursts. And so those short periodic bursts are when you're waiting in line, when you're stopped at a traffic light, when you are waiting to cross the street. So that's a very different usage pattern. So now you have to think about how big is the screen? How much attention do I have and what are the other things that that person is likely to be doing? Or what state of mind are they going to be in when they are using and engaging with that device and therefore your design? Tablets, I think you can infer a different state of mind because it's in that off hour time of day. Now that's maybe a dangerous assumption, but if you have to make some assumptions somewhere, then that's probably a reasonable one based on the data of the usage of the device. Phones, again, it's just a very different story. So because of all of those different factors and all of those different scenarios, you actually have to think very carefully about how much or how little of that person's attention do you have when you are going to be working on, getting them to do something. Because that's what all of our websites are about, is getting people to do something. It might be to read, it might be to engage, it might be to buy, or it might be to just simply change their opinion and you want to actually succeed in those tasks and they're coming to your site to perform a task as well. So that focus and attention should be driving your design decisions and those design decisions, some of them will be universal and some of them will be very tailored to the differing platforms where you know it will be consumed. And that reality is something that you can't escape and either you need to have a plan to do apps, a plan to do a separate mobile theme or work with a responsive design, that's up to you, but the reality is you've got to do it. So it's all relative and that is applicable sort of across the whole spectrum. Relative meaning you have more attention compared to something else or less, also it matters on the screen. This element is larger than the other one relative to everything else around it, that will assign a certain amount of importance. So that relationship, that scale relationship may change based on screen size, but the importance that's conveyed by this being slightly bigger or above or a different color has to translate, the size may change, you might use a different size type face when you're on a very small screen, actually you may use a larger one than you do on a larger screen, simply because you need to again expand the contrast when you have little attention. So that's why apps, that design is so successful when they've got these big fat buttons to push because there's few elements fighting for attention and you direct them to very focused tasks. This is more about toolbox. So as a designer or a front-end developer, you have to make choices about what is the thing going on the screen and how do you get that attention? How does something get more attention than something else? And you have various tools, you've got color, font variants, whether it's bold, whether it's italicized, and then you have different kinds of visual cues that you can assign to links. Are links a different color? Are they underlined? Do they have a dotted line or a solid one? What are the things that you can do to draw attention or assign prominence to something or take it away? Because that's also important too. Simple little thing where emphasizing and de-emphasizing is a really good, there's a really good sort of UI pattern that's evolved is saving or cancel. When you have a content management system, most of the time people wanna save. So that's a button. Rarely they wanna cancel, make that a link. So one has a larger hit state and a larger amount of prominence because it is the more likely course of action and you want to make the editing process smoother, but you don't wanna take away an important function to let people know they can back out of it. They still should be together, but one should be the more natural inclination. So you wanna support the intended task with the decisions you make and the design. So knowing those tools is really critical and then thinking about how those tools are gonna change and how you need to use them differently based on how much screen real estate you have to work with really does make a big difference. So again, it comes back to psychology. So we learn and we notice things by the contrast something has with its surroundings. The horn honked close by is going to get your attention more than the general city noise where you may hear lots of horns, but it's not the one that's about to clip you in the shin. So there are certain things about proximity, about size. These are the things that draw our eye. So when you get onto a page and there's a lot of sort of dark gray text and then there's a big green or blue button, that's going to catch your eye. So if you have the form to fill out, what's the one element that they need to see after they filled out the form? Well, it's the submit button. So you have to think about what are the ways you can draw person's eye to the completion point of that task and contrast is gonna be the way that you're going to do that. So that's why an H1 is going to be a little bigger than a paragraph because it has semantically more importance. It's the thing that tells you what a page is about, but visually you also need to support that importance in a way that people will understand. Conventions, so I think there's a lot to talk about here and unfortunately I only can give it about three lines, but there are a lot of conventions that have emerged on the web. Links are blue, visited links are purple. If you want to go forward with an action, you're gonna use an arrow and you're gonna use a blue or a green color. Usually those are the kind of the more positive motion colors and if you don't want somebody to do something you wanna slow them down before they take that action you're gonna make it red because in most cultures, and again it's most, admittedly that is a cultural specific thing, that color is a cautionary color. So someone's gonna click on it, they're gonna click on it, but they're gonna think about it, just that fraction of a second longer and that may be all you need to guide them into a different action. Or maybe that's exactly what you want. But those things can be good and they can be bad. So you can use them to reduce the mental load so that they can make a decision faster without thinking about it. The way you describe using an iPhone to most people is that you don't have to think because they have done everything they can to reduce that cognitive barrier to action. They have just made it simple. You think less about an Apple product, you can usually use it better. And I think that's true of most of the things they do and I think that's why their designs overall are so successful is that they've taken the time to understand how we think, how we learn, how we behave and tie into those conventions and use those to make the process of onboarding, of learning that new product so simple that a two or three year old is picking their parent's iPhone up and playing with them in a matter of seconds doing things that the parent didn't even know they could do. We can also defy them because that's another thing about contrast is that if you're always doing what's expected, it's still gonna end up boring. It's when you follow those things to make an easy to use interface and then have these things that suddenly pop up that are unexpected that you can achieve some real delight. You can really engage people in a way that they weren't expecting and make them remember something more by using something slightly out of context, using something that is slightly different than the expected way of doing things. So think about things you don't think about. I know that's kind of a mouthful, it's hard to kind of take that in but if you think about how you engage with a website and all of the tasks that you accomplish from going and paying your bills online to going and buying music to going to your favorite website to read up on some news, what are the tasks that you do there that you're not thinking about why you're doing or how you're doing them? And you can start to decode what the conventions are that you could use to support those courses of action or where you might want to redirect by doing things just a little bit differently. So I mentioned tasks earlier and this is another thing that I think is really important about thinking about where your design is consumed, what are the UI controls available and the conventions for their use and knowing that we have access to media queries that will tell us the screen size so we can make some pretty solid assumptions about the device that it's being viewed on based on those resolution ranges that we can think about the tasks that somebody is going to need to accomplish based on that context of use. Now, you can't really go too far down that road because you can't really know what somebody is trying to do on your website just because of their screen resolution but you can make some inferences about how they'll interact with it. So a list of utility links along the top of the screen might at a smaller size turn into an overlay with very large icons. So if utility links are things that people are supposed to access frequently and easily, how are you going to accomplish that on a very small screen? You can't leave them as a little list of links because that's going to be too small for people to access and read. These are things that are meant to be very quick action and this is why apps are so successful is that they can narrow that focus of attention and center the people on those particular tasks. You can do that with HTML very easily tapping to bring a layer down that has using, it's the exact same markup just applying different classes, different backgrounds, different scale, different positioning based on the media query. So you can think about that difference in UI based on the available real estate and mode of input. That's really important. So there's always a place for things like utility links. That place is just going to move. And again, that's also going to be relative to the importance of the tasks at hand. And I think that's where you want to think about the intended use of the site and the intended use based on the device in which you're viewing it. So Josh Clark, I don't know if any of you have seen Josh Clark talk, but he wrote a book called Tapworthy. He's really, it's all about what makes a great iPad or iPhone app. But one of the things that he said that I really sort of resonated for me was that anytime somebody is interacting with your site on a mobile device, what that's really saying is they have a little attention to spend. They've made a decision to go to this website and they have some time either standing in line or they're sitting on the couch and they want to do something with this website. But you have to think about how. So Luke Rubluski had this great way of describing it in designing for mobile first. One eye and one thumb. You have at most half of someone's attention and one digit with which they're interacting with your site. So they're walking around and they're doing this and exactly what I'm doing and using this. So that's my method of interaction and this has very little of my attention right now. So thankfully Apple was good enough with this app that I don't need to do anything more than that but swipe my thumb across. I'm not really sure where the quote came from but roughly speaking it paraphrases to there is no mobile user. There is only a mobile device. The user is just a user. They happen to have a device that is small that they're carrying with them but that doesn't mean that you can make assumptions about what they want to do on your website. Because roughly speaking 50% of internet access on a phone is still done from a couch. So they're watching TV and there's an ad so they pick up their phone and they're looking at mail, looking at Twitter, looking at Facebook. So it's these interstitial spaces that actually have a lot of focus. They may read and it's very common for people to actually read whole articles on phones because they have this captive attention span and they're interested. So you can't make an assumption about how deep that attention will go based on the device but what you can assume is that it has to function in a way that is appropriate to the device so that you can present that content in a way that they can engage with it when they want to. So I kind of threw that in there with the whole fold bit because I just wanted to bring that up in terms of our design process. I know it's been talked to death a little bit but it's also important for us to be able to present data about this to our clients when clients ask about the fold. So there's no mobile user. There's not really a fold. There is kinda but not really. People scroll, people click on the links in the bottom of pages all the time. What you have to consider a little bit is the most common resolution and if you look at analytics you can figure that out if you use Google Analytics. What is the most common resolution that is viewed on this device or what are the several most common ones? Check out your website in those dimensions and tailor it so that there's always something halfway off the bottom of the screen. As long as people see that there's something there that draws them down. It could be the top half of the headline, all it takes. All it takes is to remove that clear barrier at the bottom of a photo so that they know that there's more content. It's just a little down arrow. I mean that's really what it functions as cognitively so that people understand that there's more. So there are a few tricks to it. I don't completely discount the fact that having something on the screen first is important but it's not only. So it's not to exclude everything else and cram it all up into this one little space. And I was talking about these tasks. I think you want to consider the why. Are they accomplished? Are they here to do these tasks? And how are they going to accomplish them based on media queries devices using Modernizer to know if the browser supports touch or not? There are lots of little tricks that we can fall back on here to inform what we do in these circumstances. So let's look at some examples. A restaurant website when you're on your phone. The most common things you're gonna do with a restaurant website on your phone, I think, are going to be what can I eat and how do I get there and can I make a reservation? Those are the three top most used functions on any restaurant's website. And then come photos, then come reviews, then comes the other stuff about it but you can be sure that with the smallest amount of attention, the most important tasks rise to the top. And those are the ones that they're immediately trying to act on. So those are the things you want to bring to the fore at the smallest screen size. But a non-profit site on a desktop or laptop, well there's a whole different mindset in engaging with that site when you have more time to spend and a larger screen in which to view it. It's much more likely that you're going to that website on that size screen to do some research and decide if you want to give to them or see if they're for real or find out if they might be someone who can benefit a circumstance that you're in. So there's a very different usage pattern instead of goals based on the mode of interaction. And it's not to exclude and you don't want what you're doing to exclude those other usage patterns but you have this other circumstance in the middle where it really doesn't matter which way they're coming to it they're still just want to buy the Ferrari. I mean there's some weird statistic with eBay with the number of Ferraris that have been sold through their mobile app is astonishing. I mean that's just really weird. I wish that I were that guy or that woman, I'm not. So these contexts can usually coincide with things you can reasonably assume based on screen size and other factors but you don't want to exclude it and that's why I think responsive design is such a good answer is that you can accentuate the things that are important in that mode of interaction based on touch, based on resolution but you don't have to exclude things. You can still get to the whole website. You just want to bring the things to the fore that are most likely to be used in that use case. And these are all things that you can figure out based on doing a little user research, talk to some people who actually are customers or users of this website and ask them. I ask my kids all the time what do they use their school website for because that's a lot of the work that I do is building websites for schools. So I've got this great little test bed of all of these teenagers that go to this website and I know exactly what they need it for. So if we're designing a mobile way of thinking in how we build our responsive themes, I already know what a lot of the top things are that they want to do after school. So I can bring those tasks to the fore by using one of these tricks like the utility nav idea where you come into it and you tap on that and it kind of takes over the screen and looks more like an app. But they can still get to everything else. Totally burns me. The company that made the website for the school where my children attend forced you to the mobile website when you come to it from your iPhone. I've got a more capable device in my hand than most people have accessing it from their desk and I can't get to the rest of the website. That is one of the dumbest things I have ever seen. It kills me. And I know how much this company charges for this stuff and kills me, just kills me. So the medium is the web but you need to make sure that you're responding to how people get to that stuff and think about again, you know, now we're gonna talk a little bit about what are the UI conventions? What are the things that you're going to use? So hover on a desktop or laptop aids exploration. It helps people find out more about what the website can do and can bring to them. But that method of interaction is completely absent on a phone. You can't do it, you can but it sucks, so don't. You know, I mean, I think that's one of the things that you have to accept. So you have to think about how else can I present navigation to allow for that sense of browsing and exploring in a method that actually makes sense. So you can think about doing stuff that will take advantage of touching and swiping. And then also with this emerging iconography that we're all starting to understand about what means this will get me the menu. And there was a really interesting post from Jeremy Keith about that recently about just that question. What is that one icon? So we know a little house, right? You see a little house in the corner, if you're gonna click on that, you're gonna go to the homepage. Easy. You see a little envelope. It's probably gonna contact somebody via email. So there are these things that have emerged, again, conventions. One of the ones that seems to be emerging quickly is three horizontal lines. And that seems to be what a lot of people are gravitating to to indicate menu. So if you look at the Facebook app and the Facebook mobile site, they use the same one, and they tap into a really interesting UI pattern that I think is really worth exploring because it does get into that natural way of interacting on a phone. You tap that icon, the top layer slides to the side and reveals your navigation. Now if you coupled that with something like JQ Touch or JQuery Mobile, that navigation could be the top level of your UL in your menu system and then tap to slide to the right to explore. And you can give people that browsing metaphor that works really well on a phone only at that smallest screen size where it will really make sense. And you could do it on a tablet as well. So that way, just using CSS to show or hide or pull in different classes that are going to apply based on those media queries, then you could change your whole way of presenting navigation and then make it more appropriate to the device at the time. So what I'm getting at is we need to rethink how we think. We really need to sort of hit a reset button. Stop thinking about opening up Photoshop when we start our design process. Throw it out. You don't have to uninstall it. I won't go that far. But what you do need to do is buy some Sharpies. Buy some Sharpies, buy some graph paper, make yourself some templates of all different screen sizes and go to town. When you first start a project, make a bunch of those different screen size templates and you make this list of what are your important elements in that screen at the time? Your H1, your main text, your headlines, your extra news articles, whatever it is you're trying to design. Make that little widget list on the side. And when you start to design this, you look at those and you think, all right, well, if it's this size, what are the most important things that I need to convey? What is the job that this page has to do in this context? So a homepage will need to do a number of things based on the needs of that website. There's a hierarchy to that. So order your content accordingly. So what's the first thing they're gonna see? What's the next and what's the next? And so you can then sketch that out and say if I have this much screen space and I really want to get these jobs accomplished, what am I going to present first? Sketch that out. No more fidelity than you can do with a nice fat tip Sharpie. And then go on to the next and the next. And then you can look at them all together and see if across that spectrum, which elements are the ones that are really sort of staying the same and which ones are really changing? So that's how you can start to think about where are the breakpoints in your CSS? So it's not just about screen size, but also about hierarchy. So you might have media queries that are really dedicated to large layout changes. Do I have one sidebar, two or three? And you might have media queries that are actually tailored to more breakpoints in between so that on a Kindle fire, you present things one way because you only have 600 pixels across. But on an iPad in vertical orientation, you have about 768-ish. I mean, it is that, but the browser's gonna change that a little bit. So two tablets that are only 160 pixels apart in their width, look at them. It's a drastically different experience. They both have really high quality screens. They both have very fast responsive touch times to see a reaction. They're both nice devices. One sells for $200 and there are millions of them out there and it's really growing quickly. And then you've got the iPad, which costs two or three times as much. So those are very different realities, but they will fall generally in the same media query much of the time, but they are really very different. And when I bought one, because I really wanted to see the two together, and I was shocked, and it really changed the way we did the design for mobile stuff, and we actually ended up lumping the Kindle fire more in the phone camp than the tablet. So you've got these like six, seven inch tablets that actually have a very different mode of use than a more full-sized tablet like the iPad. So you have to see these things and touch them, and that's really gonna start to suggest how many of these templates do you need? Don't forget the bigger ones. I think that that's something that people are only now, now that we've done lots of responsive stuff where some of us have, you've gotten to that point where we can start thinking about what other direction does it go in? What about a blog that has the content, the comments to the right of the post instead of below? You can do that if you have a media query that's bigger. What about scrolling content sideways because we have media queries that can tell the height as well as the width? So the New York Times app has a great UI scrolls to the side in columns of text. Well, guess what? We have columns and we have media queries that can tell us the height in CSS3 supported on virtually every browser now. So we can do that. We don't need an app. We actually have native technologies that can support it. So we need to think about that direction too, and when we start to think about that, though that thought pattern, those processes, that's gonna apply on every job. So this is another thing that, trying to sort of drill into people is if you start thinking this way as a designer, it is not just for that one project. The first one you do is going to cost you more in thought and time and building, but if that becomes your normal, you now have a toolset and a way of thinking that is going to be completely natural on every subsequent project. And that's where you really start to win because it is a fact that 25% of internet access in the US is on a mobile device. In Japan, it has been fact for almost 10 years that there has been more mobile internet access than desktop. It's amazing, and it's really starting to hit that tipping point of more mobile than not worldwide. And within a couple of years, that's probably gonna be much more normal. So it's not mobile is coming should we come up with some ideas, maybe. It's already here and we're already behind because you have to deal with this huge variety of small screen to large capabilities that are very curtailed to then ones that are very expansive. So you have to start changing how you design. You have to start changing how you think because just downloading a theme is not going to get you all the way there. That is simply the mechanics of putting things on the screen. You still have to think about what are the things you want to put there and how are they gonna change? That's still up to you. You have to figure that hierarchy out, understand the interaction patterns and start to use those things to make appropriate design under all of these circumstances. So research, lots of it. It's more than ever important to browse. It's important to analyze your own internet usage. So if you have all these devices at home, which are the ones that you use and when do you use them? Analyze yourself, make some notes and start talking to more people and building that library and then go to websites like Patterntap. Patterntap's a great website and there are many more just to look up UI patterns for specific things. So how do people solve sidebar navigation? How do people solve portal links? How do people solve utility links? How do they solve for iconography? These things are all there. You can search it, you can see it, you can get lots of ideas. So you have to look at how sites are doing things now. So if you really like Omega or you really like the new Zen, you really like some theme that will enable you to do responsive design or if you wanna write your own, you have to look at how other people are doing it. Look at the Boston Globe and look at the BBC. Look at the Grammy website. Look at big websites and small and see how they're handling that change in hierarchy and that change in style and placement and flow and start to see what seems to work to you. So we have to think about the emerging trends in UI. So everybody knows when you're looking at Twitter on your phone that you pull down to refresh. Somebody thought of that and it was just some little trick that one guy built into one app and it has become, I think, lightning fast, one of the most strongly adopted conventions in the mobile web. So these things are coming along, the three little horizontal bars for a menu. It's another one that's starting to emerge. So you have to follow those things and start to build that library of ways of thinking and doing that are relevant to the platform at hand. Native apps really work. People spend tons of time using native apps and they do that for a number of reasons. Some is performance because they're fast and some is because it can store data. Sometimes it's just because it's a game but there are certain things that are true across all of them. Some of them are more successful than others. Think about the apps you love and then start to deconstruct why. Do you love using this app because it lets you get a job done or because it's fun or is it a combination? Does it make doing that job fun? That's important too. So a lot of those things are equally applicable when you're doing stuff on the web. One more, there we go. So you have to think about which ones apply best to your scenario and then think about can they be applied equally well in HTML as they can be in a native app. That just totally crapped out on me. All right, so this is a bit of a rant of mine at times. I think that if you are a web designer, you must know HTML and CSS. I don't think there's any excuse. I don't care. I don't care if you do it all the time but I think you have to understand it. Everybody trots out that architect doesn't know how to build a house. Well, actually that's not true. They know everything about building a house and they know every capability of every material that goes into making that house because they have to. You can't build a house out of materials that can't stay in the way. You can't build things that can't withstand normal weather patterns. I mean, an architect has to take into consideration more information than you would think possible to design something that can be built that is appropriate for the environment in which it is placed. So as a designer, if you don't understand how jQuery and HTML and CSS work, you're not really going to be able to leverage those things in your design process and you will continue to design pages. And that's not really gonna get you all that far when you're trying to think about behavior, when you're trying to support tasks. These are things that you have to know how that can be done in order to design something that can actually do it. See if I can actually get this to advance the slide again, maybe not. So there we go. There are a lot of ways to learn. You can talk to Kay. You can subscribe to Drupalize Me. You can buy any of the books they have for sale in the bookstore downstairs. You can go to camps and cons. There's so many ways that you can learn all of this stuff. There's just no excuse to not stretch to those adjacencies. So you're designing a website and you're maybe doing some of the theme to bring that to life, or at least you're building some HTML and CSS to support it and make a prototype. Why not start to learn how to put that into a theme? You get to know one of the starter themes that gives you a shortcut to actually being able to bring the HTML and CSS that you know into an environment that can actually be used on the site. Once you know that, you then need to be able to get stuff onto the page. So rather than just looking at a Drupal installation, you might want to then learn a little bit about how the views module works. So that way you can get the result set out onto the page to which you can apply your design. There's a lot of discrete little things, but I think too often we think in very regimented and segmented ways. I am a designer. I am a themeer. I am a developer. I am a site builder. I am an admin. Well, most of us are all of those things to a greater or lesser extent, and the sooner we accept that and figure out that that can actually support these other activities and inform them, they give us a direction. So we think about, well, I do A and B, and I could probably do A better if I understood a little bit about C. So if I want to be able to design for all of these widgets that are gonna be on the page, and I know that it would be a little bit better if I actually understood how to get the classes there, that's something that you really need to think about. And you can learn. You can do these things. So there's a distribution. There's an app. There's a module. There's a something that can support pretty much any designer and allow them to get into this whole world of not just working in Photoshop, not just working even in Photoshop and fireworks and whatever else, but actually coming across that spectrum to really be able to understand and follow through on that whole site. It's not going to be one size fits all. It's not going to be just a responsive theme, because like I said, that's gonna get you some mechanics, but it's not gonna get you all the way to supporting the behaviors in the best way possible. So that's where I think bringing in something like jQuery Mobile or JQ Touch makes a lot of sense on the very small end, but I wouldn't wanna build a whole website that way. So I think there are very controlled circumstances where that makes a lot of sense, bringing it in in a blended way so that you only pull it in when, for example, Touch is supported. Doesn't make sense to bring it in when it's not. HTML5 Boilerplate or Modernizer is gonna let you do that. So these are simple things out there that can help support doing these tests and knowing what you can present in various circumstances. The second that you decide to learn these things, you've started to get better. You've started to grow as a designer and you've started to kind of adapt so that you don't become the dinosaur. You don't become a print designer, for example. And this is someone who started as one, so. There's no excuse for aerial, nor is there an excuse for that plugin is not found or this website best viewed in this particular version and combination and you have to spin around three times and throw some salt over your shoulder. That should never happen. That's what web standards is about. That's what responsive design is about, is making sure that you've brought together progressive enhancement, all of these things that make that website work. I don't care if it's in a linear flow in IE6 because they're gonna get the job done. As much as I don't like it, I would rather give them something that's unadorned than something that's broken. So choose your cutoff point, whatever it is, and go to Andy Clark's website and get his basically, you know, F off this is your style sheet if you don't, you know, if you're below this level and they'll have something reasonable, it'll work. And then you can focus your efforts on the platforms where you get the biggest bang for your buck, really. So start, download one of these themes if you haven't already and start to play. Start to understand how it works and how you can configure it to do things that you wanna do. And start looking elsewhere around the web for the things that have grown up in the web design world that are creeping in like adaptive images like less and SaaS and Compass, HTML5 boilerplate and Modernizer, great ways to start building your own theme or modifying one that you're working with. All of those tools are going to help you address the 1 400th of a percent that you can cover with building a site in one way. So don't do this. Don't sit there designing something static and think that you know how that's going to live in the wild because you don't. Prototyping and static HTML will only get you so far. One of the things that we changed at Schoolyard was that we took our starter theme in Zen and that became our prototype engine. So we have the system already deployed for a school and we have this base theme that we put on there that's just kind of black, white and gray. And that is, and so when we build content types and start pulling this stuff out, it's like a living wireframe. So we do one or two page mockups and then we're directly going in and working with real HTML, real CSS that will just become the site. And it's also an amazing reaction you get from the client when they've been working in this sandbox that's unthemed to start getting their content together. And then all of a sudden they log in the next day and like 90% of the design is there. And it's like, wow, you've won so many points with them right in that moment. You have just like socked up so much goodwill with them. You could get them to agree to anything after that. I mean, this really, it's the psychology of handling the client too. It's really important. So, you know, the reality, that number, that was one school in three days it was already at that point and climbing for the amount of mobile access on that school's website. This stuff is not going away. You can at least in the US, I'm sure you can elsewhere, buy a car that has Pandora in it. That is just so weird. So, you know, you have a touch screen in a car that has a really fast reaction time and an internet connection. And you can, you know, pull up your apps and your email and stuff on that. Why, I don't know, but you can. So again, how's your design gonna hold up in a car touch screen? Who knows, you have to go buy a Toyota to find out. This is really out of date. The percentage of users that have a smartphone is skyrocketing. The percentage of users on which they have either a high-end Android device or one of these is likewise skyrocketing. That's about 50% of the market share for any kind of smartphone is one of those two devices. So, it's a huge amount of computing power, a lot of capabilities. That's getting to the point where you need to care a lot more about this than IE7. And pretty soon, it's gonna be a way bigger percentage than IE8. So, that's the best argument in the world. To go back to the client and say, well, you know, we could support this tiny percentage of users with IE8 or we have four times as many that use one of these devices. Where do you wanna spend your budget? I mean, if you wanna draw a line somewhere, that's where to draw it. Again, like I mentioned, the Kindle Fire, $200 for a really capable, beautifully put together device. I don't think it's the most polished UI, but it is the only screen I've seen on a tablet that rivals the iPad. It's really crisp. It's a nice screen. TVs as well. Like I said, you can get Facebook and an app on your Samsung TV, or you can use the Apple TV and just flick the display from your laptop over to that. That's a huge difference. It's a huge resolution. And it's really gonna change the way people interact with your site when they have such a big scale on which to view it. So that actually couples really nicely with retina displays. So incredibly high resolution, but not necessarily the biggest device or the fastest pipe. You can put a super high resolution photo on a retina display phone, but you've just used up four times as much bandwidth when I'm on edge. Who wants to browse on that? So you have to make a lot of decisions about the technologies you use and when you use them, but that's still, it's something that you've gotta think about. It's possible. It might not be smart. So figuring out what you don't know, figuring out how to adapt your design process, and figuring out how you can use these things to make your design more resilient, to make your meaning carry through and get the intent of the design to work no matter where people view it. That is why you have a few off files to edit and your responsive design kind of takes care of the rest or whatever strategy it is you're following. And that's the thing that will help guard against not knowing what's next. I don't care how many smartphones come out because I know I can design for something that fits in this range of resolution. And I know that they all have the capabilities of a modern Safari or Opera or Android-based browser, as long as you don't want a background image to stay in the same place on Android. Anybody else have fun with that? Background images will never stay fixed there. Not well, anyway. They will, they just don't now. There's a huge number of modules. We don't know what people are gonna make next. There's probably another 1,000 of them after this week. A lot of times, like I said, adapt your thinking, adapt your basic tool set when you're designing. It's not that much extra effort, but it is a huge payoff to be able to go to the client and say, no, it's not an option. It's not an add-on to make your site responsive. It's just the right way to do it. And this is your budget. And after you've done it a couple of times, you'll see that that budget doesn't have to be that different. Whether or not you want it to be is another question entirely. I think it has greater value, but the work required is not necessarily that much more than just doing a solid single resolution website. And then I haven't even talked about Drupal as the hub for the content for other things. You might have a website that has content that might be responsive, but it might also drive content to an app or a number of apps or a number of subscription feeds for things that go to other websites or even other Drupal websites. You don't know, but again, that Drupal glue in the middle and that responsive thinking on your part helps keep your markup and your content pure so that the content comes out of the system marked up correctly so that it can be intelligently represented wherever it lands. I think that's really important. So if it's being subscribed to elsewhere, those tags have to go with it. When it's on your site, those tags are what drives that meaning that can then be translated or moved around based on different factors and different screen resolutions. So where do you fit? Well, you know design. Well, if you're a designer and I'm out of time. So this is like one slide. You are the person that knows this the best. You should know your client and you should know the web. You're ideally situated in the middle there to think about these things and make them part of your design process and then you get to use Drupal to help you build it. So got your tools, you've got your things to, your topics to think about and stuff to learn. Buddy up, stretch, learn some new skills and then just go out and do stuff. I lied, it was two more slides, I'm sorry. So this is just kind of wrap up and review. All of these things are the reasons why you've got to think about this stuff and then you just want to get out there and do stuff. So make awesome things, thank you. If there are any questions, I would love to answer them. I may have to do it outside if somebody else needs to get in here. Please fill out evaluations, it's the only way we know if we did a good job. I'm sorry, that ran a little bit long. And also just before this started, I put up this copy of the slides on the site and it has two extra screens at the end with resources for books and people you should check out and links to articles. So download it if you're interested, thanks.