 Thank you, and thank you for the completely overblown and impossible to live up to introduction. I appreciate that. I like to set the bar high. Well, first of all, thank you very much for coming. And I also want to thank everybody who helped organize the conference and help enable me to come here from Providence, Rhode Island, in the United States, all the way to the other side of the planet to see lovely Sydney and join you all here. And that trip was made possible by Linux Australia, so I really can't thank them enough. So I tried to be as vague and lofty as possible with this title, mainly because I found it gets people's attention, but more importantly, I think it really illustrates the point that whatever we can talk about today is not necessarily what we're designing for tomorrow. And so to give you a little bit of background before we jump straight into that, there's a little bit more about me. I've been working on the web for quite a while. I've been doing web strategy and design and development since about 1994. Thankfully, that's probably not predating too many people in the room in terms of birth dates. But there's a lot of things that have changed over time and a lot of things that have sort of come back around as truths of the web that I think are really kind of interesting to see in that context of this length of time and kinds of different technologies I've worked with. So I have a new business that I just started with my wife. We're focusing on design and strategy for the web, and we happen to use Drupal for a lot of that. And I think like what we heard about this morning, that has enabled us to tackle projects that are much larger than any individual could. And that's I think one of the more amazing things about the capabilities of Drupal and why I think it's such a strong foundation to talk about some of these design ideas. So if you're interested in following me or getting in touch, because I love to stay in touch with people and answer questions and see what people are working on at Jay Pomontel on Twitter, Jay Pomontel on D.o., pretty much any other social networking platform, that's probably where you'll find me. A lot of people actually know me more for the photos of my dog walks in the morning. So a lot of people on Instagram have kept tabs on what Tristan and I are doing in the mornings. It's a lot colder there than it is here. So if you want to see what pictures of snow look like, you can actually just look at that and you don't have to deal with the reality of it here. So that's good. So I wanted to talk about why what we're going to do today and why I'm here and why I hope you're here. So over the years I've had the chance to do a bunch of talks like these at various conferences in New York and Munich and London and now for the first time in Australia. And one of the things that I always come away from in attending these conferences is a tremendous amount of inspiration and a tremendous amount of excitement. Because I think that every time I go to an event like this I learn so much and there's so many more things I can try and new people I can work with. And so I have always tried to keep it in my mind that first and foremost the thing for me to do is try and impart that same sense on the people in the room. And so that's what I feel my biggest job and challenge is. And I think that your job is to always make me do that more. And I think of any person who's standing up in front of you trying to impart some of their knowledge, your job as part of the audience is to challenge them to think about it more, to come up with a new idea that maybe you have been struggling with or maybe it's your turn to stand up here and do the same. But I think that's a constant cycle that feeds on itself. So the challenge for me is to try and inspire you to want to do the same. And your task then is to take the things that I have to say or that Jeff Eaton has to say or Trees or Addie Berry or any of the other people that you're going to see over the course of these next couple of days and bring that into your own life and work and things that you do and push it right back out again. And either in the form of sharing something on d.o or sharing something on Twitter or sharing something in your blog and furthering that cycle of knowledge in that community. And I think it ties in really well to our opening this morning. And I thought that was really special. So I really appreciated that. And I try and make sure that that cycle keeps on going. So what we're going to talk about today is nothing. We're going to figure out that we don't know anything. And we're going to talk about how we can predict what we're going to be putting things on when we're designing. And we're going to figure out that our understanding of design really does not necessarily originate or have its even greatest level of importance on the screen in front of us. But it's actually in the concepts and the meaning that we're trying to impart. And so taking that level of understanding about design take everything that we did yesterday and rip it into little bits. And then we're going to rebuild it into something new that we can actually make our new normal for tomorrow. And I think that's a really crucial piece of this is that everything that we have done up until the last year or two has been focusing on a one way of designing, a one way of presenting information on a screen for the time it was 960 pixels. That was kind of the defining thing about web design. And I think increasingly we've really kind of figured out that that's not the right answer. So things that we know, well, we'll die. We will pay taxes. We will have no idea on what our design will be viewed tomorrow. And I think that is probably the most important point to take away. The other things we have no control over. This one we can't control, but we can anticipate and we can react and we can actually start to do something to make what we're trying to impart as designers still relevant no matter what that technology is. So unfortunately we know even less about the people who are viewing our site. So we don't really know how they're looking at it on what size screen it is. Is it a very small and a very large one? What kind of capabilities are the device behind it? We don't really know what else they're doing at the time. And that is a crucial piece to this because as soon as you give up on the notion that people are viewing your website on a desktop, you don't know where they are anymore. Prior to that you could make some sort of assumption that they are seated in front of a device that has their full focus. That this is what they're doing at the time. And that is just simply no longer the case increasingly the majority of the time when people are looking at something that you've put up on that screen. So we have all these different places where stuff's showing up and I'm not sure if that is on sale in this country as much as it is in mine, but you can go and buy a Samsung flat screen that has an app in it or two or three or five. You can get a Ford that actually has Pandora built and vetted in the dashboard so you can stream your internet based music service into your car. So the destinations for this design that we're doing and not only that, the way that people have to engage with your design physically and sort of cognitively are changing tremendously. So we really just can't know enough. Certainly not enough that we as much as we thought we knew a couple years ago. So we need to rethink. We need to rethink our whole thinking about design. And I think we need to step back a little bit and kind of reframe the way we're positioning ourselves as designers. Excuse me and I use that term in a very holistic sense because I think design applies as much to a site builder, to a database developer, to the person who's writing the content as much as it does to someone who might or might not have a degree in design, but is actually using Photoshop using a code editor and actually putting that stuff into HTML and CSS and showing it on the screen. And because they're design decisions that affect perception and use in every case. So we're not designing pages. We're designing systems of relationships and hierarchy. So let's step back a little bit from designing a page on a website and think about designing a business card. Think about designing a billboard, an annual report, a piece of letterhead or a website. There's a hierarchy of information that you're putting in front of the viewer. I say putting in front of because I don't want to think about a screen. I don't want to think about size or scale. I want to say you're presenting this information and this concept to that consumer of that idea. And you need to have meaning and importance that's attached to a title or a logo or a tagline that's different from and more or less important than the caption under a photo that's incorporated in. So there's a relative scale of importance and we usually equate that to size and color and placement that conveys meaning. Now that's all very generic. It can easily apply to a billboard. It can easily apply to a web page. It can easily apply to an app. But you want to get someone to do something and you need to give them the tools with which to do it. So we are trying to have a design but a design that's fluid, one that can scale and react. So that message will still be conveyed on the billboard on the business card on the web page. And in order to do that, we have to accept that the precept of 960 and this is getting a little old because I think most people have moved past this. But that concept of a 960 pixel wide content area is just a fantasy. I mean it's increasingly, decreasingly relevant. So if you look at the stats on your website and if you look at the stats globally, the amount of people who are working on and using mobile devices or tablets or feature phones in many parts of the rest of the world outside Boston, I think, which is where most people with smartphones are. I'm sorry, that plays much better in a Northeast audience. But we're trying to design meaning. We're trying to convey a concept and something that has to hold true no matter how or where it's received. So we need to understand how people learn and we need to understand how they see in order to design for that in a way that can translate so that you start with semantics. What is the concept that you're trying to deliver and then adapt the presentation of it across these devices? So what you saw in this illustration is from a printed page to a desktop design to a phone. You have common elements but you see that the relative scale one to the other is going to change and it has to because physically the constraints are just different. You have in paper and a desktop design a width and an amount of information that's fairly similar but you have a resolution on paper that is infinitely higher than the resolution you can put on a screen. It's hard to even necessarily measure the resolution of print, a nice printed piece on paper because it could easily be a thousand dots per inch. Well we can't even get close to that on a computer screen, even a retina display. So the size and scale and the sharpness and clarity with which you can convey information really drastically changes on down to a phone that might have a 300 pixel resolution going across. So you really you simply can't convey the same amount. So we're getting away from a page and we're thinking about meaning and we're trying to decode when we design how do we convey that meaning in a way that survives across these differences? Well we want to get into psychology and cognitive science and and I bring these things up because I think they're simply not taught in design and they're not talked about that much in web design specifically but I think they're really crucial because one of the things that I've always felt about design is that it really has to do two things well. It has to convey information and it has to influence behavior. I mean that's ultimately the point of almost any piece of design is that you need to give an idea and you need to get somebody to act on it. It doesn't matter if it's an e-commerce site or a library website you're still encouraging people to take an action based on information that you're providing. So stepping back and reading a book or two about how people think and what motivates them can have tremendous benefit in the effectiveness of your design. So we want to figure out how people learn and then structure our design so that it will still convey that and you understand how people learn you can tailor that system of design in those relationships and I promise I am going to illustrate more of this coming up in the next slide but I think this visual system thinking is a bit of a difference from the way most people might think about design but it's really just an abstraction of what you're currently doing. When you set an H1 on the page that is by default going to be bigger than a paragraph and it will have more importance semantically so that's kind of what people tend to be doing but in a more unconscious manner and if you're late you will simply have to walk down to the front here and sit in the front row so I can heckle you but there's empty seats so have at it. So we have psychology and cognitive science are things that I think are tremendously important to the design process and I think that what you want to take away from that is reading a book by Daniel Pink called Drive is a great read and it's mainly about motivation and what drives people to do things from a management perspective but it's equally applicable to design and it's very engagingly written it also happens to be a great book on parenting if you want to apply it that way but the next thing that we have to think about is what is the part past conveying the information well it's influencing behavior and allowing people to do things so the other thing that's really critical in the design process is enabling people to accomplish that task that you want them to do so what I wanted to show you is the changing faces of Pandora across different platforms so everything in your design should have a function it should have a place but that function and place and relevance is going to change based on the size of the screen and the the type of device on which it's being viewed so here we have now a car interface to Pandora so if you think about the things are important when you're driving are things like how quickly and can you scan that interface and act on it so how many people in here have used Pandora before okay good so it's about half the room and the thing to take away from that is you're creating a personalized set of radio stations based on music that you like and they have this really fantastic algorithm that will find other music based on a few songs that you like and the idea is by you're interacting with that stream and giving a thumbs up or a thumbs down to any given song that's actually acting on the algorithm it's tweaking it it's making it work better for the taste that you're expressing through saying yes or no to a given song so that's a pretty important function and unfortunately I think now this will show an inherent bias for me as a driver in the US that sits on the left when I'm driving the car if you look where the thumbs up and thumbs down buttons are they're in the bottom right of the screen and they're also very spread out so for me as the driver to look over the first thing I see are the station settings which are probably less important to me in an immediate sense I use them less often but the more often I would want to thumbs up or thumbs down something is actually hidden off to the right so if you think of that in your terms if you were to flip that interface around it would actually function this one would actually function a little bit better for you as a driver here in this country but taking those things into account as part of your design process what are the important tasks what are the important things you have to convey are really important in this case and and if you do it poorly in a car you cause an accident I mean another thing that I saw recently in a new car that that we got was the the title and the artist for the music that we're playing is now displayed in about one third the type size that it was in the previous version of the car that we had and you might think that that's not a big deal but if it takes you three times as long to notice when you want to glance over and see what song is playing you've just rear ended somebody so it may be an extreme case but I would argue that poor type choice in this case could kill people and that's really terrible and that's they think about the effect of bad design I mean that may be an exaggeration and it's worth a laugh but but that's a real issue and it's something that is eminently solvable by changing a type size and so here again on the phone I think they actually did a better job so the importance and the accessibility of these tasks if you look at this on the phone where you know you're using it with your thumb so right across the bottom of the screen left to right handed it's so pretty easy to get at those primary controls for this app so I think they've been very successful in one I think they've made some what I would say are somewhat questionable decisions in the car and on the desktop unfortunately this vast wasteland of space that they're not even using at all so you know I think there's a lot of challenges there but with a responsive design process you actually could anticipate and deal with all of those things because you could actually target just using basic capabilities of the device and maybe the car is a separate issue but for anything else you could have one design that actually functions equally well across all of those and across your media breakpoints and height and width don't forget you can detect both that you could anticipate these different orientations and arrangements of things and actually adapt your design to work better for how people are going to be using a device in that orientation and so you can actually make a design that will work in a relevant manner so some other examples going into a restaurant website on an app there's kind of two main things you'd want to do you want to get there and you want to know what they serve so those things might float to the top in terms of importance if you are researching a non-profit to see if you want to support that cause if you're looking at at it on your desktop you might be going deeper into the content but you are simply going to try and do different things perhaps then when you're on the mobile phone although not always you can't necessarily know that's going to be true but you also have these use cases where like on ebay you have as many ferrari sold through their phone app as you will on the website and that is a bizarrely real fact maybe slightly exaggerated but it's close so you have these different contexts contexts where people are doing or not doing with any given device but the important thing is to remember that you can't have one at the exclusion of the other so your design has to adapt and still present things you can present certain tasks differently based on screen size and capabilities but you should never make a design decision that makes an assumption about what they want to do i think the worst possible thing you can do in your design is say well if you're on a phone you probably don't want to do x so i'm going to remove it i mean that's i i think the biggest crime that you see when people are trying to deal with this multi-screen size issue is they take the easy out and say well we'll just do a mobile theme we're going to take half of this stuff out because they probably only want these three things so the other 47 kinds of things you can do on our website are instantly relevant and we won't let them see them and i've seen this happen it actually happened with my children's school website if i access it on the phone i have four functions i can perform and i can't even look up anything about the history of the school from my phone they prevent me from being able to do that by forcing by user agent sniffing to push this very capable web browser over onto a screen that over onto a theme that actually prevents me from accessing most of the content about the school so if i wanted to tell somebody how wonderful the school is that my children are attending i can't do it if i'm on a phone i think that is a huge problem so we need to embrace this we need to embrace that we don't know a whole lot about what the device will be we want to think about how that can change our design process and start thinking about how to present information in a more fluid way and we do that by stepping back and picking up a sharpie don't design in high fidelity in one platform in mind start to think about what you can do with a fat tip marker and squinting at a page so you can very quickly and easily as illustrated by those drawings take the same content elements that you need to have on a page and sketch out how they might appear on different sizes of screens and different orientations tape them up to the wall stand back and squint at them and can you still identify the hierarchy of that information so you can start to make some decisions about what's important and what's not and how much you can arrange this in different scale and proportion so that you can still get that point across no matter what is going on on that screen or what can't be seen on that screen because that's an important consideration so we have a small area you can't fit as much content but you also have a more confined area so the proportions of what you're showing need to change as well so a heading that naturally looks good three times the size of body copy on a printed page or on a large desktop screen looks comical when you shrink it down and put it on the phone so that proportion relationship in the typography actually needs to change there so that actually allows you to present a little bit more because your headings don't need to be quite as big and you can still present nice sharp text here and you can then do something interesting to change or swap out image assets based on media queries or in some cases other kinds of device detection so that you can put the right kind of stuff on the screen at any given screen size excuse me so this is all pretty new has anybody in here actually built a website using responsive design that's fantastic that is by far the highest percentage of people that I have ever seen in a talk about this and and I think that shows a lot of progress so with that knowing that almost everyone in the room actually raised their hand which is awesome how many people have thought about some of these ideas where you want to change the scale of what you're presenting or looked at those those kinds of relationships beyond just making the design fluid awesome but a smaller number so I'm glad you're all here so we can talk about that um we're going to try and and deal with that by getting past the basics of responsive design the the mechanics of making something scale and now you can now that you've hit that sort of basic level you can start to think a little bit more about how to do it better across these devices and start to incorporate features at different break points in your design that are more native to the devices that will likely be used at the time so it is new there are new UI patterns developing all the time so things like pull down and refresh it originated in one little twitter app that one guy made and it is now one of the most standard UI conventions on a touchscreen device known to man and has even been incorporated back into the os level apps like apple mail so that is that is something that is tremendously successful so new conventions are emerging all the time three horizontal lines in the upper left corner is becoming a fairly universal symbol for navigation um and there's been a lot of interesting things written about whether or not that's a good idea um I happen to believe it I think we need to come up with some conventions and I think we need to think about them carefully and I think this is one that is emerging as something that makes sense and it's starting to be used enough that it will become second nature to people perhaps even more so than making the logo link back to the home page because that one apparently fails way more often than we think it should um so what happens when you're using the facebook app and you tap on that is that I go in the wrong direction um slides over exposes the navigation so that gives you a way to take the same navigation you had going across here and dropping down with a hover and condenses it down this way in a way that you can scroll through and make sense with on a phone using your your finger and then it very easily can go right back and close up over that content again and so it's really out of the way it's easily accessible it can still scroll so you don't have to try and keep things all in one screen so I think that's becoming a very effective way to present navigation on a very small screen um so why does all of this stuff matter because we don't really know we don't know where it's going to be we don't know what people are doing um we don't know what else is going on in their life or mentally for them at the time so one of my favorite things of ways of looking at this is from josh clark um and I I think it's a wonderful way to keep in mind when somebody says we don't have to deal with mobile well when you say that you're saying that you don't care about an increasingly large segment of users of your website but also people who are going to go across devices because they're going to see something and they're going to look at on their phone and then they're going to look at it again at their desk or and is there's increasingly this kind of sharing amongst this this ecosystem of devices and if you capture them in one place you want to make sure they can transition easily so that's why your navigation needs to stay the same so that people can find their way around your site across devices you might present it slightly differently but it should be the same options so you have some attention to spend and you want to figure out how they're spending it on any given device and this was another one of my favorite quotes is from luke rubluski they're doing it on a phone with one eye and one thumb and I think it's a great visual but it's also a conceptual thing they've got one thumb out of 10 devoted to interacting with your sites your site so you have 10 of the physical capability and you have one eye which is at most going to be 50 percent of your cognitive ability so again meant more for a laugh than anything but the concept there is they are doing something else and you need to make sure that when they are devoting that portion of their attention to what you have put in front of them that they can still do what they need to do and so in order to capture that you need to then remember that just because they're on this device and they're using it with one eye and one thumb doesn't mean that they are actually on the go so that percentage of attention is going to vary if they're on the couch and it's an ad and now they're focusing on their phone and reading something or they're reacting to an ad and actually going to a website and then that attention then shifts again when the show comes back on or they start doing something else or the walk symbol has come up and now they're crossing the street so it is not necessity that they are actually moving it's just the device so when we say mobile device it's actually more of a physical descriptor it's not actually a way of life so don't think of it as the mobile use context think of it as a mobile device on which your content needs to fit and that I think is a more effective way to think about it so those tasks are changing and the circumstances of use why they're using this device versus a tablet or a desktop is because this is what was in reach how many of us have this on them at all points during the day pretty much everybody right you can don't be afraid just put your hand up because we know everybody has it in their pocket in their purse in their bag it's with you all the time that is not always the case with a tablet or a laptop sometimes but not always and so it's because that this is here that stuff needs to work there and the how is going to change based on what that specific device is so is it going to be hover on the desktop is it going to be touching and swiping on a touchscreen device those methods of interaction and the size with which you have to present things will change but they are adaptable and the great thing about that is Drupal's already capable of doing a lot of this so here we are where I think about I'm at 28 minutes and I finally brought up Drupal so that's good because honestly this really has nothing to do with Drupal it has everything to do with how you're thinking about design first but one of the great things about it is then when you do want to go and build it Drupal already has a ton of these tools available so Drupal is this great way to build content and there's about 15 000 plus modules on d.o to help you get there and there are a bunch of responsive themes already so you can actually just grab a few things off the shelf on the website download it and put it together and you can be in business as long as you have thought first so this focus on design started really a few Drupal cons back I'm trying to remember which one it was I think it might have been in Chicago is probably the first time that I saw Dries talk about design in a keynote and and I thought that was a really fascinating change in the shift in focus in the community because it is a community of you know there's over 630 000 people registered on d.o and I would say probably 95 percent of them are developers so it's a pretty small group of people that actually spend their time focused on visual design but that design and that community and that ability to to bring people into it is actually much larger so we have this focus on design that has started a few years ago and you saw that that continued today and we have a lot of great work being done by Morton to sort of lead the charge to make markup better so we want to make sure that we continue that so that the better our markup is the better it will translate across screens that's an absolute truth we've had a lot of great work being done by John Albin to help make Drupal truly mobile first so there's been great things happening right now around cleaning up CSS and trying to kind of make all of that work in a a better and more consistent manner according to web standards and also that will also help make it work better across different devices and and then we have a lot of really beautiful UX work being done by Aquia and Kevin O'Leary with the whole spark initiative is really pretty fantastic so that's something that is addressing design and usability and the site administrator I mean that's the these the admins of our websites are should be first-class users because they're the ones that put the content there in the first place so we've done all this work to present content well they need to have the right experience to be able to do it on their phone as we're talking about with Superstorm Sandy this morning as well as just at their desk to control the workflow and actually be able to get their work done in a timely manner so we have users who have a higher level of expectation because it's so easy to publish content on a WordPress blog I do take issue with that actually because I recently took over a client's website that is in WordPress and I think it is the most dreadful authoring experience I've ever seen I think it actually makes Drupal 6 look pretty tame by comparison so granted it's probably not a well put together WordPress site but I think that it doesn't matter what the platform is you just have to pay attention you have to think about that but users are expecting that so we need to deliver they don't want to just access the your site they want an experience I think that was a great theme that Drees brought up this morning and to deliver that experience we need tools that can help us do that so they had the tool covers the basics and we're thinking about the higher level topics and and about how to engage with these people and deliver content that is is actually relevant to them because this is one step away from somebody making something better than you you can't afford to do this badly this is really important so what is going to make your site memorable well this really comes back to working wherever people find it that's the first step if you want someone to engage with your content and your site it has to work the first time they look at it so when I see something about a restaurant that wants me to come to their website and they encourage me to go check out their website so I can figure out what their specials are and I tried to pull it up on my phone so I can make a reservation and their site was broken because it was flash only that's a pretty big fail I mean that's that's an extreme case because at least a fair number of people have gotten past using flash but there's no fallback and that was that was a terrible experience and we didn't go to that restaurant we've never been back since so that's cost them that meal plus a whole bunch of other meals because there's lots of great restaurants and Providence so we just go to ones that we can actually make a reservation on from our phone so we need to take that and then go backwards another step to our process so we can't be building things in photoshop and expecting that design to translate across to all these different screens I triage this with every other client that I work with that brings in any kind of design work and and those repercussions add in cost they add in complexity they make the coding harder once they realize how poor the usability is with that design once you've implemented it on a small screen then you have more design cycles that get burned going back we have to get away from that and one of the ways I started to get away from that was actually based on a talk at an earlier Drupal con and how many people have heard of Samantha Warren how many people have heard of style tiles okay well a lot more people have heard of that and I think that what's awesome is it was one of the most talked about sessions at south by southwest this past year I heard endless tweets about this I mean it is sort of taking the whole web design wider web design world by storm it originated in Drupal Samantha is a fantastic designer she's actually off at Twitter now but she worked at phase two technology for a long time a really good Drupal shop in Washington DC and and her work with that I think like it was for me completely changed how I designed so the focus with a style tile is on small relationships and color type scale texture that you can put in front of the client to start to establish a design language and dialogue but you have not committed to a screen size one bit so during that process not only is it very iterative and very quick to iterate because these style tiles are a little bit lower fidelity and it's easier to swap things in and out but it gets us away from that full type full page it gets us away from that time consuming mock-up that will probably be thrown out not to mention the other two that we didn't like as much but we want to make tiles then we want to prototype we don't want to make a promise we want to actually build something and I think that you know along with that I have to throw the dig in here that we should never be putting aerial up on a screen again we need to get past that we need to communicate more effectively in a more unique and memorable manner we're doing it with everything else in our design let's not forget the letters on the page because the letters cover 95 percent of your design it's text so make that text beautiful make it memorable make it easy to digest and make it look good and be inviting and your design will automatically stand out because 90 of the world is still putting aerial up on the screen we need to get past that but so you know we have prototypes that we can make using Drupal we have design that we can do in style tiles and then adapt across these different screens so why do we have to think about a page we can actually put something in front of them that they can then look at across all these devices and actually see something that is far more relevant to the world today because the web has left the building it's in our pockets it's on the couch it's on our television we talked about in the dashboard of our car so 960 doesn't matter it's a fantasy it's this thing that we propped up so that we can make our lives a little bit simpler as designers and deliver a comp that was in a fixed dimension that we knew could actually fit on the screen for the most part so we have to throw that out along with everything else and remember that it's about where they access the content and then how they continue to access and engage your content so that has to adapt and flow from one thing to the next and that power rests in the hand of the viewer so it's this is actually something that is is targeted as much of developers as it is to designers it's the reality of the web as it stands right now is that there is no reliable or accurate way for us to know with certainty on the server side what somebody is using to view our content it's not possible user agent sniffing is fine you can do a certain amount based on setting cookies or using javascript but these are all assumptions that can and will fail and we can't count on them so that's why the responsive design techniques rely on things in the browser so with solution really has to live there right now we don't have the capabilities built into html yet to do better image serving although at least that is coming along there was actually just just this week i read something from typekit about font events whether or not a web font has loaded being introduced as part of the font module in css3 so that's another thing that's coming along to help better allow our designs to react with more and a greater certainty and and then we have other things like other aspects of media queries that allow us to detect for screen resolution in addition to i'm sorry pixel density in addition to screen resolution so these things are developing but they're not really here yet so what we have to rely on are things that work in css in the browser so drupal can help us deliver that because we can use a theme that's responsive we can in drupal seven there's an adaptive images module that could help tie into serving the right image to the right device and all of these things help enable client side decisions to be made and and that's that's important there because on the receiving end on this phone like right now i'm using a ridiculously expensive data roaming plan through at&t that allows me to seamlessly get on a voto phone network here and pay a hundred twenty dollars to get 800 megabytes of data yes wi-fi i'm on wi-fi with this well i i still blame at&t because it's really it's it's the way the network environment is in the u.s. that really kind of blocks that i was very jealous of people with unlocked phones that come here and you know spend 15 dollars on an unlimited data sim card and i can't put one in here because at&t locks my phone um so drupal is this great foundation that allows us to add these modules and add these themes to deliver content that will work across all these devices and the thing for us to remember is that this is drupal there's a module for that doing all this stuff can from scratch can be really really really hard and i know that because i've built a lot of it that way so don't do that learn from my mistakes learn from what everybody else has contributed use the power of this community and the conventions that are emerging about how people interact with these different systems and and devices and and build appropriately use drupal to build one platform many experiences that's the point of responsive design so that there's lots of experiences that can be delivered either with a responsive theme but then also with web services to syndicate that content elsewhere and enable it to be shared but it is that one platform and one authoring experience that we can present that will then allow this content to go to all these other places none of this stuff that i've talked about here is impossible or at times even difficult to do with drupal and i find that to be really remarkable because i've done i've taught some workshops and in building this stuff from hand i've done by hand i've done a bunch of things about um you know just doing the basic prototyping in html and then moving it into drupal but once you get the hang of the tools that are there um it's remarkable how much you can do and how quickly you can do it at this previous company where i worked out schoolyard we built websites for schools and we had a platform developed in drupal and i had a responsive zen starting theme that i made um and using that with less a css preprocessor that allowed us to put variables in there we could theme a site in two days have a completely unique look to it it was totally responsive it worked in everything it was even responsive in ie seven um six kind of but um it's all possible um on a site that we could deploy in a matter of weeks so we were launching three sites a month that were very unique websites that had tremendous functionality and had a very unique design and still worked across all these devices because we leveraged these kinds of conventions and and the strength of drupal to help us forget about the foundation think about the advanced things because you know this part will work so think first think about the hierarchy and the meaning in your design how is that going to be conveyed how are you going to decide which things are more or less important if you can only fit this much on the screen and what should be pushed down or pushed off or accessed in a slightly different way but it does make this part pretty important because we're designing systems we're not designing pages we're designing for things that are only one four hundredth of the answer when there's that many android devices alone and that's old data that's that's probably a number from last year there's probably 600 plus devices for android out there now and we've got this whole ecosystem of apple devices out there um that have different densities in their screen display and different sizes and and different capabilities so we have to give up on this notion of a static starting point we need to start building real things early leverage the power of drupal with a simple base theme to do that so that you can make a living breathing wireframe that can then be accessed and looked at on all these devices and that way you are far more prepared because what you know about design you know will apply anywhere it's going to be viewed you've spent the time to get to know your client you know their content so you know what needs to be presented and you know all these things about the web and how stuff can be presented so don't stop looking around don't look just at drupal um one of the best things that i've done in the last few years was start a design book club which was essentially a commitment upon the part of me and one other person to pick a book invite a bunch of people and every week get on go to meeting or skype or the phone and talk for an hour about two chapters and we've been doing this for about three years now and we've gone through all of the book apart books we've gone through a great information architecture book right now the last one was jonathan snooks smacks book on css um steve krugs don't make me think and with the exception of everyone but one we've had every author actually come on to the call with us just because we asked but we're not looking at drupal we're actually looking at design we're looking at usability we're thinking about all these things that are outside our immediate community because by bringing all that knowledge in we leverage the strength of drupal but then take it that much further by incorporating all these like sort of wider concepts of design so i always try and remind myself by doing this i'm forcing myself at least for an hour a week to think about stuff that maybe i'm not doing yet and hearing from other people about how they're doing it so i mean it's a really low tech thing um but just by making that commitment and make sure that i'm always learning and then i can always apply that back to drupal because really the concepts are going to apply no matter what i just happened to pick this tool but really you could use any of them because we are designing meaning we're not designing pages so with that i encourage you to go out and make awesome things thank you and i would be remiss in not thanking linux australia again for bringing me here so thank you and and please don't forget that all of us who do this get better by hearing from you what we did well or poorly so please go and rate sessions not just mine try and rate as many of them as you can because it's really tremendous feedback for us and i think now we've got some time for some questions i think iterative in the sense that i believe they're far more participatory if they're done well the what i try and describe to people with style tiles is um print them out cut them up and mix them up the way you like them so in that sense i i never expected to be done the first time that i give a client something i expected to be wrong and i actually am very conscious about not trying to put all of my favorite ideas in one of them and that may be um a sort of a bit of psychology but i think it's actually important to employ that with your clients as well because you want to get them thinking and and becoming a part of this design conversation early so that as it becomes further down the path and you go to that full page or the rest of the website they are now part of that process they have been saying yes to themselves they're not going to say no to themselves later so that's really important you're really kind of creating that deeper engagement it's going to be a better design but it's also going to be one that they're thoroughly bought into by the time you get to that full page well i well we can i unfortunately i would have had to stay up until midnight last night to participate with our 8 a.m. call back on the east coast and there's no way i could make it because i just got here yesterday morning but but yeah i know that's why i think i want to sort of document the whole process and share it because i think it's a superb way for you to continue learning and actually perform some stronger bonds with people in your community well i will i will say that i'm trying to understand it myself because i think it makes me a better designer but i'm also a company of two i'm not a large company where you have a separate i a and a separate this and a separate that and and there's values to all of those but what i've tried to do is follow a lot of articles the books that i find that i have found relevant i thought drive was pretty good there's another small one called neuro web design that came out a few years ago that really focused on the psychology in e-commerce sites but i thought that was really interesting but also a lot of things that i've read about how people perceive color how i wish i could think of more of the sources but i would love to hear more of yours so i hope that also if anybody sends me any of these references i would happily tweet them back out again because i think that this stuff is fantastic i'd love to learn more about it awesome that's fantastic well maybe we should have like a cogside boff later on cool all right well i guess all right of course you have a question sure um well the the first thing that i had done was um make a zen d6 theme responsive which actually wasn't really all that hard in d7 zen is responsive already so i think that's a pretty good starting point um omega is also a tremendously capable theme i think that it puts a lot of configuration in so you really have to spend a lot of time getting to know it um so it's it's meant to be a very universal tool whereas most of the time i'm focused on a much more narrow set of tasks so i have tended to make my own more than anything um but i think zen is great especially if you want to get into sass and compass because i think that uh as another way of working with css i think is tremendous it's been a huge time saver for me um and then you also have access to something like zen grids which really helps with controlling the layout um that you can easily tweak from one breakpoint to the next so i think those are some of the good tools that i've found there's a good adaptive images module in d7 to help tie into media and other kinds of image assets to leverage a library that helps detect from the browser side which image size should be served so that actually can can help in some cases get the right size asset delivered to the right device and it only relies on javascript for the first page load after that is cookies so it's actually it's pretty pretty reliable in that sense and it actually puts a pretty reasonable load on your on your site to make it happen yeah i would how many people in here have used less or sass in their development process awesome anybody that didn't put your hand up put it up now and slap yourself on the wrist and go to that session because it will change the way you work i guarantee it within the first day exactly uh no you don't no that's that's just fine but the problem with bootstrap is the structure of their media queries is wrong and i'm pretty opinionated about that i know but they don't really have a really strong mobile first approach with it the way their court media queries are written as if they fail you will not end up with a good site on a mobile device and i think that's a problem it can be fixed i think there's good ideas there but i would never want to push the adoption of that framework in the format that it is right now i think there's too many issues oh yes yes that's really cool it is your mission to tweet that link all right um well i i've done it recently on a couple of projects and prior to that i really had just used um a simple black white and gray my that's then starting theme actually worked just fine for that um but what i have found is because i'm used to working in drupal themes when i went to go and build an html prototype i was still sort of thinking along those lines and the modularity that you get out of an approach like jonathan snooks to structuring your css lends itself very well to that translation so actually going from the prototype into a theme um was almost entirely cut and paste and and then if you um you can go take that a step further and look at the existing theme you could copy the divs that you know are already there so then it's even more cut and paste when you build your html just use the same identifying page structures so that way there's even less work to to bring it in um it can um what what a lot of people don't know is that you can actually support retina displays now with just basic css and in that css is supported on any safari device so um it's also supported in most other web kit stuff as well so they're i'm not recalling the syntax but it's another aspect of a media query to deal with pixel density right so um so the reason i bring that up is if you structure your design on relative proportion like m's rather than percentage of the screen um you could uh or rather rather than a fixed pixel dimension um you could then adapt your design based on pixel density as well as screen resolution so at that point it actually doesn't matter what adaptive images is doing because you've already anticipated that um i think the danger in trying to serve really high resolution images onto those devices that support them is that you've quadrupled the download so i think there's actually a measure of caution there that i would say don't necessarily go with that fully higher resolution image go with something that's slightly higher and you still get a noticeably better image um and then for everything else um this is something that i just experimented with on our own site um we use web fonts a lot um so we've incorporated icon fonts and there's also like icomoon allows you to upload your own svg graphics and incorporate them into a web font so for any monochromatic visual elements you can use web fonts for that and then you could try svg because most browsers are actually supporting that really well um for multicolor elements and so you get this really tiny super sharp uh things like logos so if you go to hwdesignco.com that's our new website the logo in the upper left corner is svg and looks gorgeous on all of these different screens even though it's multiple colors and the fallback is that if svg is not supported and i detect for that using modernizer um then they just supplies the png instead so there are a few simple techniques that will allow you to address some of those concerns so that you get down to its only photographic elements it's not any kind of other graphic elements that you need and then if you're only serving higher res photos and that's the only thing that you're pushing out in a larger file size then that would still be a good way to go yeah what's the um well it's give us a year um but you know the thing to remember is that being responsive in the way you build these things is a layered approach so you can read through ethan markot's book and you can get a base level responsive site and it will be far better than what you were doing yesterday or the week before but then you can take it further with adaptive images and you can take it further with web fonts and icon fonts and your own svg graphics then you can take it a step further and try and address something like that by some simple javascript stuff so like there are ways that you can figure out what someone's average bandwidth is by using a few simple javascript functions and you could then incorporate that back into tweak things further back on the server side so none of these things are necessarily always going to work but it what it means is that progressively the more things succeed the better the experience is going to be and then when that final thing comes out and we have picture set or you know instead of trying to use adaptive images you're replacing one little piece at a time with whatever the evolving standard is and and then you're that much further down the road and you don't have to invent something new you really can't so I think that's the approach that you have to take you know sometimes javascript won't be an option sometimes web fonts won't render as well on an older browser but taken in aggregate you expand and and improve the experience across the board and it's never going to be a total failure in any one of these points so you can still take your work to a higher level and then polyfill where you need to for nth child or for png support or for media queries and older browsers and and still kind of keep yourself moving forward and not hold the project back usually it's traffic analytics that's usually the biggest thing and I will I will say that actually I have not built a an unresponsive site in over a year and a half and I've never had pushback from a client about it I think part of the issue is that we as designers need to adapt this mindset and adapt these skills so that once you are good at it it's not a 50% increase in budget it's maybe 10 or 15% but you can demonstrate that value very quickly and easily so you know I think we need to take the first step I think it's really important exactly yeah so I mean I think that that's that's really important by taking this approach to design both in discovery and architecture and then the design process itself you've engaged the client so thoroughly along that path that there there isn't going to be a big no at any point and and they're really going to be far more successful with with the end outcomes thank you