 So, welcome to Big Websites for Small Screens, the ICANN.org case study. If you are not intending to learn about responsive web design and the ICANN.org case study, and you were here to learn about something completely different, you're in the wrong room. Personal introductions. Chris, could you introduce yourself? Hi, I'm Chris Ruppel. I'm a developer at Four Kitchens here, front-end developer. I am leading all of the efforts for mobile web development and responsive design and stuff like that here. I really dig JavaScript and Drupal and the Semantic Web while we're at it because it's awesome. And that's me. And my name is Todd. I'm a partner at Four Kitchens. I'm a designer, UX person. I love mobile and in a previous life I was a writer and editor. Zach. Howdy. I'm Zach. I am Four K Alumni. I'm currently working at South by Southwest. I specialize in UX design and implementation in mobile web also. So today, this is what we're going to cover. First, we're going to take a look at the business goals and technical requirements behind this project. When I say technical requirements, we're going to limit that to how it affected our design of the site. What we will not be covering is how we handled the really enormous migration challenge. Although, Mark, if you could raise your hand, why not, right? They didn't pick the session. That's why not. And they're going to regret it someday. Boo. So we had a major, major migration challenge that we'll talk about in a little bit. But several of the people who are on the team working on this site. Actually, if you could raise your hands, if you worked on the ICANN.org site, all right. We've got some other people who can maybe answer some questions. If you have technical questions about migration and server architecture and things like that, you may be able to talk to them after the session. But we will not be covering that here. This will be limited to design and the responsive mobile experience. So we're going to talk about IAUX and visual design, that whole design process and workflow. We're going to talk about how we then implemented those designs using various technologies, JavaScript, things like that, media queries. And then we're going to take your questions because we know that you're going to have some. So business goals, this is where I come in. When we worked with ICANN at the very beginning of the project, we had to identify a handful of business goals for the site. We want to always identify business goals up front because business goals drive every decision we make, whether they're creative or technical, content related. We want to make sure that everything that we do has their business goals in mind. The first business goal that they identified was they needed to build a stable dynamic site. ICANN.org, who is not familiar with ICANN the organization? Okay, briefly, ICANN, and this is a gross oversimplification, ICANN essentially runs the internet. ICANN is the organization that gets 17 or 18 cents or so of every domain registration that you purchase. And that fee goes to fund this nonprofit organization that handles the very complicated political, geopolitical, technological hurdles of making sure that every domain name links to an IP address on the internet. So they are very important, right? And their website, unfortunately, had been a static by hand maintained site since it was first launched, probably in 1993, I'm assuming they were one of the earliest websites launched. But since about early 90s, it had been all done by hand in various iterations and it had built up a ton, a ton of content. Moving this content into a dynamic system like a content management system, specifically Drupal, was a huge, huge win for them. So just doing that was really, really big. They wanted to make sure that they could maintain their website using modern technologies like a CMS. That was their first business goal. Stop editing HTML files and uploading them to a server. They also wanted to update their visual design. They wanted to do a complete refresh of not necessarily their branding, but definitely the look and feel of the website and everything about their web presence. They want to make sure that their visitors do what they want to do and get what they need when they come to the site as quickly as possible. The audiences that they're serving on the site, we identified something like five or six personas. There were members of the press who need to be able to get information about new top-level domains that are issued. So if you ever wondered who came up with .com and why is there not a . whatever, I can. I can controls the top-level domains, the TLDs. It's the thing after the . at the end. So there were a lot of changes recently to how the system works that allows individuals or entities to buy an entire TLD. So theoretically Coca-Cola could come along and say, I want to buy .coca-cola and be in charge of then issuing all domain names within .coca-cola. So that's now basically open to the public. The fee is very hefty, but that's something that they control. So they have journalists and people who are interested in that information, but they also have people who are on some of the governing committees and they have many, many governing committees, international committees and people who handle technology and things like that. So they're also, though, and this was perhaps not their largest audience as identified by traffic but the most urgent, were people who had domain name disputes. So if you have ever lost a domain name to a squatter or something expired and you had to get it back but you felt you had rightful ownership to it, this was one of the organizations that you could go to and seek help from. So they needed to definitely identify, hey, do you need help? Are you not a committee member? Are you not interested in TLDs? Are you somebody who just has a problem and is really scared because now your website is down because your website expired or your domain name expired? So they wanted to grab this people up front. They really wanted to enhance their image as a multinational organization, which they are, but they wanted to make sure that that was up front. They wanted to highlight multilingual content. They wanted to emphasize that this is a global organization that is working for a global internet. One of the phrases that they use internally to describe their mission is one world, one internet. There are places in the world that have their own internet in a way that is firewalled off or controlled or censored or something. They want to help protect that from, they want to help prevent that from happening. They also want to enable users from all over the world access the website using a variety of devices. So there are two key things built in there. A variety of devices, that's one thing, right? Tablets, iPhones, Android phones, blackberries, laptops, desktops, all of that stuff, but all over the world is, what is not apparent when you first hear that is you're dealing with different levels of bandwidth and types of connectivity. So here of course we think, oh we have an internet connection that's broadband. I have DSL, I have cable, I have something like that. There are places in the world that do not have broadband. There are many places in the United States that do not have broadband. There are areas that still have dial-up. So when they say all over the world they're talking about some parts of the world that rely exclusively on mobile data to be able to access the internet at all. They're doing it through a feature phone, they're doing it through something like that. And then finally they wanted to clearly and concisely explain what ICANN is and why it matters because it is a complicated idea and they wanted everything in their website and design to reinforce that. So then we had to identify technical requirements and these are different than business goals and technical requirements force us to make certain decisions about the architecture within constraints that they set technically. Not goals, not things they want to achieve but actual constraints that are in place. So for example we had to use their existing server cluster. They had, I think they had purchased some servers, I forget exactly, but they had, they have an in-house IT team, we definitely needed to work with them and we needed to make their servers work. They also had a Google search appliance. So we knew that we were going to be using these results. We absolutely had to provide multilingual support and all of the technical challenges that go along with that and we had to migrate content without any change to structure or broken URLs. This website had 40, 4, 0, thousand static HTML files that had to be migrated into Drupal. And in the end Mark, how long did it take the script to run? A few minutes? Half an hour. We got this process down to countless edge cases and parsing text. I mean this was literally going, opening every file, trying to figure out the date of that blog post, using all kinds of metadata or the file date on the file or all kinds of complicated things. We got it down to 40,000 static HTML files, cleaned up, parsed, some archived away, some put into Drupal in about half an hour. And that took several months to do. So if you want to learn about that, you can maybe talk to Mark. We're covering the amazing technical challenges behind that in this hour. We identified certain mobile devices that we had to support. So we worked with a client to create this list, and this is what we worked off of. So Android 2.2, iOS 4.1, Ram Blackberry, Windows Mobile, Symbian, and so on. Likewise, we had to support certain modern browsers. And, Hallelujah, IE6 and IE7 were not on the list, but IE8 still was, and there were a lot of challenges. Namely, lack of support for media queries. So we could support modern browsers, but luckily we didn't have to worry about the really, really bad ones. So, Zach? Epicly awesome. Hi, everybody. I'm Zach. I would like to say before I get started that this project was a huge collaborative effort, and every decision that I made or that we made as a group was constantly pinging back and forth. So when I'm talking about the wireframes or why we did certain things, I wanted to be very clear that, like, I wasn't in some vacuum. It was constantly talking with the rest of my teammates going over technical goals, pinging the client who was incredibly responsive and helped us. It was really actually very freeing to have somebody who was very aggressive and gave us answers when we needed them and pointed us in the direction that we needed to take. So, I'm going to try this thing and see how it goes. Yes. Okay. So where do you start when you're remapping something this incredible? You have to start with the AI or the IA, hahaha. Map existing website and identify all the content and then re-architect that content and then identify some content for archiving or deletion. And just as Todd just explained and all the effort that Mark and our team went through in doing that migration, we started out by creating a simple website, excuse me, a simple site map of what their link structure looked like. I don't know if you can see the little dotted lines that spider across, but essentially this is the navigation that the users were experiencing. There were obviously clear sections that they had labeled, and this is kind of hard to tell in certain distances, but those blue those blue items indicate links that are, say like mainline link label that links to some other section in the website. So, for example, for instance you could click on something that says blah, blah, blah, resources, and as a user when I clicked on that it would take me to slash about some other thing. So there would be a lot of jostling back and forth and so we went and experienced it at the user's level and mapped that experience so that we could sort of decode all the things that we might have to deal with. And of course there were tons of little things that we eventually cleaned up that were edge case things that we missed and things that we added, but I'll get to that in a second. So that's kind of an idea of the fun that we had doing that. Then we moved on to re-architecting all that, creating new silos, creating new sections, relabeling everything, giving new names to everything. We actually worked very closely with the client in different stages to get this picture created and he was very hands on with it. It was really great to have Mark S in the room with us to say this needs to go here because of this and we got really good buy-in from his stakeholders obviously who are a part of that. So this wireframe represents the new hierarchy, the new architecture that keeps everything where it's supposed to be and if there are outliers they're very specific to some organization or group. And it also illustrates some of the external link systems that we have for like their groups and their social media contacts. Oh yeah, there's more. So then after you get done doing all of that information architecture which in itself is a bear we move on to wireframing, like how is the user going to see this site and we built wireframes for all the devices in parallel and when I say all the devices we set three break points in sizes. So just kind of like three general sizes. You've got your desktop so it's like 9 59 pixels wide plus then you've got 640 to 700 range so like tablet in a portrait view and then the 320 to 480 which is like your iPhone or Android so something pretty standard smartphone here in the west. And before we designed everything we tried to have a perfect map that helps us like really plot the A to B points for how we're going to get there. Of course like I said before not everything can get covered in a set of wireframes you will always have little edge cases or content types that you end up designing or finishing out or polishing in the browser and that's normal. So I'll just run through the different sets. This is the home page so as you can see this is the 960 view you've got horizontal navigation we've got our search bar up there at the top and the multi-lingual links because that was part of the client's requirements. We had our help section and news feed and then as you came down into the site there were these different sort of feed blocks and at each point when we were planning out what these objects were there was a dialogue about how these objects were going to reflow as content. Below those feed blocks is the state connected area which is a way for people to sign up for newsletter information which is a big part of disseminating information to certain bodies that they were used to communicating with and also their social media links and other sites that relate to how ICANN communicates. At the bottom here is an example of the pinned helper toolbar that's on the site and we had several features that we thought about but we eventually pared down that functionality to some very key things for the launch. Here's what that same home page would look like in a tablet. You may be seeing the gray bands in the background and thinking well this is, you know, what grid are you using? Well for the 960 obviously I used a standard 960 grid system to give me blocking and things like that but as I collapse the screen these grid lines essentially just as reference, I knew my approximate range was going to be in the device window and from there I just came up with some decent round numbers that would help pair that down little by little so I didn't use a specific framework to accomplish this, it was more just setting specific goals and using some pre-established ranges. So here on the tablet version as you can see the reflow of those blocks now 50-50 they've got a little bit more breathing space for somebody who's going to be on a slightly smaller screen and for the most part this remains unchanged. Then once you hit the mobile view we see kind of a pretty drastic change. Around this time the Boston Globe site had come out and we were working trying to find a good solution or an elegant solution to implement for how the main menu, the help and the search were all going to play together and we thought what Boston Globe had come up with was so elegant and perfect that it would be something that we could try to implement ourselves and it ended up being just a great site to draw information from and technology from and we learned a lot about it in that process. As you can see that menu is hidden so when you tap the menu key you get a pop out of the high level navigation and then obviously the slide show at the top and all the other supportive content has been turned into a single column and just flows down the page. Some people might have said well this seems like a lot of content for a smart device but I think people are getting used to not really having a true fold so we didn't think there was any reason to worry about them having to scroll a little bit to see all the information is there because it's all pretty valuable for the stakeholders. So that's that. This represents a section that is a landing page. In the site there's basically four layouts there is the home page there are these landing pages which have three columns there are two column pages which make up the majority of the content and then there are some edge pages edge case pages that have no columns and are full width and each one of them is was built on a grid and then worked down into each of these break points so I'll just quickly run through the look and feel of each of these so we've got the content flowing down the middle column in the desktop view you've got your navigation on the left hand side and on the right you've got supplementary blocks for the context of that landing page so if it's the blog then obviously you know most recent comments or most recent posts might be a block that shows up there and then of course the footer essentially remains the same then when you move to a tablet layout we flop the position of the navigation and the content it's a little bit easier for the reader to have their content sitting on the left hand on the screen obviously and then having the sub page navigation on the right and then just reflow the other sidebar blocks into that after the navigation so that's the only real change there and then with the smaller smart device layout you've got the new navigation element up there we removed the sub navigation in the wire frames but you may see the difference between what obviously what I'm showing you in the wire frames and what the final product is because there's an iterative process that we go through so this was this brings me to the style tiles Samantha Warren has given us a bunch of really great tools now as designers to go through the process of extracting visual information and communicating with the client their desires in terms of text and color and things like that and getting them buy in and excuse me and the way that we're doing this is we're creating tiles that show a style or a theme without actually creating a full layout and this gives you a chance to go through all of the descriptive process with the client asking them questions like how would you describe your website one of the questions we use was if your website was a car what kind of car would it be and every stakeholder will have different ways of labeling those things and you have to be able to just go through the process so you can break it down to the essence of what they want so I'll just go through those tiles real quickly and then at the last one will be what we've landed on and what became the platform or the guide for how we design the site so as you can see we start these light airy multicolors we had some different ones that are a little bit more funky or edgy and we got good feedback on all of them and eventually landed on this and so this became kind of the theme or the idea that we were going to use to create the design and this technique worked so well that by the time we hit the visual design we did one comp and we got buy-in and that was it it was really awesome I don't know how many of you are designers and experienced I think the client is bought into it and you show them the design and they're like nope that's not what we asked you for try again but this time we really got it I just want to add something does everybody here realize how amazing that is that we delivered ok thank you we were not soliciting applause please applause Samantha Warren for creating this technique the idea of essentially combining something like a mood board with a visual comp to give us some stuff that kind of looks like a website but it's not it's just a tile that we can show the client to be able to get to that phase to look at your final Photoshop file and say yep you nailed it great let's move on floored us as well but that worked because we went through the style tiles exercise and that was the point at which we had all these conversations like oh I don't know this doesn't pop for me or this one you know we have that fuzzy talk about how people feel about the design being able to get all that out of our system in a much more iterative way all our way using the style tiles and then actually having a clear picture of what they want without having to go to Photoshop and manipulate every column and every bit of text and the logo and all of this stuff we just do this one card and their imagination is limited to that and our canvas is limited to that so please please please google style tiles the first result I'm pretty sure is Samantha Warren's website do read about it it is an awesome technique it saves a ton of time and money so then after you've after you've done that and you settle on a tile we went through the process of creating artwork for each of the major break points and screen width and we use the style tiles as I mentioned as a guide for the artwork and for the business requirements of this I planned the elements to use as few images as possible and really really rely on css modern css techniques to give the site life so that it would be very snappy and the last part is anything you don't hit in that comp phase don't be afraid to design in the browser that's what it's there for it is it's the litmus test it tells you the truth so this is what we came up with for the home page as you can see it follows the pattern that we established in the wire frames to a T like there's no like there was no bait and switch here we've got every element as described in the wire frames but with the style that they selected and here you'll see the the state connected block is collapsed we use javascript to hide and reveal that then here we go at the tablet size as you can see everything is just as it was described before there's all the elements popped out and then finally for the smartphone that was it and now I can hand it over to Chris alright so the theme of Drupalcon is collaborative publishing for every device we've got a lot of that going on here we had a great talk by Lewis who's in the room with us this morning about the past president future of responsive web design pretty interesting stuff and you might be focusing on internet technology when you're doing this but it really does apply to a lot of disciplines and so it can be a challenge to try and use these constraints to your advantage as you go ahead and start building for many screens so one of the first challenges that we tackled was how do we build this what should we use from the Drupal ecosystem so the first question of course was to theme or sub theme when the project started though this was over a year ago there were no good sub themes so what we did was we just started from scratch and we decided we were going to go ahead and override any Drupalisms that we didn't prefer to use and that meant that instead of trying to deal with both a contrib theme trying to un-configure it if you will we were only trying to deal with core so that saved us a little bit of time and allowed us to spend more time optimizing and refining our designs rather than working around a piece of technology that we didn't really have any control over something that I'm very interested in here and an advocate of is feature detection if you're not familiar with it feature detection is the next generation of user agent sniffing it's the natural evolution so if anyone has ever tried to browser detect on the server or detect a user agent which is what the technical term for it is called you'll know that sometimes that's a little bit like asking for someone's name and then trying to assume that you know everything about them so my name is Chris there might be another Chris in the room but we're probably not very similar but at the same time you can ask someone hey are you an extrovert or are you shy or something like that and so you can actually get more information about another person by assigning personality traits and this is the exact same deal with a browser so you can ask a browser hey do you understand border radius do you know how to use CSS gradients do you know how to use geolocation all of these browser capabilities can be identified and either utilized or stepped around depending on the answer which is going to be a yes or a no so the library that we chose to use was modernizer I really like modernizer and I think it's a really easy way to get all of these questions suss them out of the browser it basically just creates a big list of yes and no's for you and allows you to either if the answer is yes go ahead and use this feature and if the answer is no either ignore it or provide a fallback in some cases you'll want to provide a fallback if it's a vital feature and in other cases you might want to just skip that piece of functionality if it's only going to add weight and decrease the performance of the website in general another thing that having all of these conditionals lets you do is to conditionally load other resources so this is something that's a hot topic right now because especially when you're trying to progressively enhance a website what you need to do is sometimes just drop features off for people that don't need to use them and add them for other people who would like to use them and we ended up not conditionally loading anything on this website there's one set of assets but we conditionally applied some of the JavaScript because in the end when we kind of looked at the size of the scripts that we were loading we decided that the performance set of sending it down the line was not as bad as just loading it all and then asking yes no before you actually use the JavaScript so for one example here I'm going to show you the menu without JavaScript on a smart phone and what happens here is that it's fully expanded so you can see that it says menu there and then you've got the lists of links that are in the top level nav and then you've got a search bar at the bottom so all of this stuff just shows up if you don't have JavaScript enabled on the particular device that you're looking at and then if you do have it enabled it starts in a collapsed format like we saw in the wireframes in the comp but then when you tap one of the items in the menu it goes ahead and expands it for you so that you can use that particular feature and so since most smart phones do have JavaScript this is a great way to save some screen size and use that real estate for other content rather than just showing top level navigation over and over and over again as the user loads each of the pages another set of libraries that we use was for responsive media these are tricky problems which are not fully solved yet so you might hear things about responsive images that's an unsolved problem at the moment we analyzed some of the content on the website and found that they weren't loading enormous images to begin with so there was no need to go ahead and try and add burden to the website by loading small images first and then using JavaScript to load bigger ones if necessary but technologies that we did rely on were the FitFids JavaScript library and BlueberryJS also so let's look at one example of Blueberry here in the smart phone layout of the website you can see that the paragraph of the description of the top slider here the featured content that they had on the homepage the image falls below the text there and then when you are looking at the desktop version of the website they flow out and fill the grid all the way so Blueberry is just a slideshow that unlike typical slideshow JavaScript libraries which require a fixed width and then they basically use exact pixel values to achieve the effects that they're going for Blueberry is a fluid slideshow JavaScript library that allows you to implement this kind of thing in a responsive way Chris what is FitFids and FitFids is just like you might have a guest from the name it allows you to fit videos within a fluid grid and it allows you to shrink and squash video embeds which is actually another tricky problem when you're trying to load things in a in a space that you don't know the exact dimensions of so typical embed code says width 480 height 320 and then that's it you know if you change the size of the window it's either going to fall off the edge or it's going to it's going to not fill the space so obviously you need a large source video to make sure that you can fill the space but it makes it much easier to squash down in that case so one of the most important factors of a responsive design is speed people are getting caught up right now with the technology here it's really cool technology it excites me and it's a major evolution of web development in general but when you start sending a ton of assets down the line you can slow the website down because you're loading it for multiple iterations of the website that people may never see so a desktop user will use the fullest set of assets but you know a mobile user is going to end up loading some of those assets after all anyway and as Zach had mentioned we made a very deliberate decision to not use images in many places where CSS was sufficient and that allowed us to cut down on a lot of images which in turn allowed us to not conditionally load assets as I was mentioning before so sticking with CSS3 when possible is a really great move and for a lot of things like border radius or gradients or something like that you're both saving bandwidth by not sending images down the line and you're also increasing the speed of the website just because it's quicker to render CSS than it is to fetch an image and display it on a browser and again we use Modernizer to enhance those features of the website so in some cases when there was fallbacks that we're using before then we went ahead and used Modernizer to set up conditional CSS rules that allowed us to put like small background images in where gradients used to exist if you've built a responsive website and you had to support IE you might have heard of a little library called Respond.js so after analyzing and implementing it during the course of development on the website we decided to not use Respond.js to fix IE as we mentioned before we only had one version to correct for and although the website does work and you can see all of the functionality on older browsers that don't support media queries we decided that taking the performance hit and adding the extra request to go and fetch Respond.js didn't seem necessary at the end of the day for this particular website and the first thing that we always do when going to optimize a website for speed is moving JavaScript to the bottom. There are several ways you can do this. It's normally consequence free to just move dollar sign scripts the scripts variable down into the bottom of html.tpl or page tpl if you're in Drupal 6 but there are also other ways to do it using Drupal ad.js and other template preprocess functions I don't have any slides for this but there is another challenge that I thought of while standing here talking that we had to implement multilingual for this website and so what that meant is that we have right to left languages in addition to left to right languages on the site. This has posed a particular challenge because although Drupal has the infrastructure to support RTL when needed it will automatically load RTL files when it senses that they're necessary it still is quite a challenge to get everything to play nice and to make sure that you're writing very modular CSS that doesn't cause position issues and margin issues and stuff like that when you are building the website. One thing that can really enhance user experience especially on touch phones is that you want to have you don't want to have any elements hanging off the edge of your grid but if you do then all of a sudden you can move the website side to side instead of just up and down when that's your only desired direction that you'd like people to scroll and so RTL proved actually pretty challenging to walk around this in some cases so it's just something to keep in mind if you ever have to develop a responsive multilingual website and that is it for me so we're going to open it up for questions just before we do that because we have plenty of time and we do want to leave plenty of time for questions I think it's time to see it in action right so this is the site in question and you can check it out for yourself so for those of you unfamiliar with the responsive concept in that I think is almost none of you which is actually really cool here we are looking at the desktop version this is the tablet and that is the smartphone version of the site so everything becomes big and touchable and easy to work with so you'll notice that we had to reflow some elements in the navigation one of the business goals again was to highlight multilingual content so we wanted to make sure that in all versions of the site that that multilingual content was up at the top of the page so even though we had to hide the search inside the menu itself and you'd have to click on the magnifying glass icon to expose it we still wanted that multilingual content to show up so that people French speakers English people can obviously read the site as is but people, French speakers and Russian speakers they have a way to get to that content right away on the site here is the search and the menu in action so imagine watching on this with your finger it exposes the menu that way we don't have this on a smartphone when you load the site the entire first page that you see isn't just a giant menu you can actually see some content right away but you can access the menu very very quickly I do have opera so we're going to take a look at this in opera real quick download now what do you want me to demonstrate go real small okay we're going to go real small so this is the real small version of the site this is not smartphone size this is sort of feature phone I can't load media queries I can't do a lot of CSS3 stuff this is the very very very basic kind of site that you see when you're dealing with feature phones or if you have really limited bandwidth connections or something like that this is what you see so you can still use the site you can still scroll through it with the little you know blackberry ball thing or side scroller or whatever but you can still get through the site it obviously lacks a lot of the bells and whistles but all of the stuff is still there we don't just give up on these people these people still need to access this information and they should be able to navigate the site in some way so we have to switch to opera for this because chrome will only shrink so small opera will go almost all the way so be sure to test your sites in opera because if you're only doing it in chrome you're only going to get this small and you're going to forget that there are smaller screens out there and more importantly there are screens out there or devices out there that don't support media queries ok so questions I'm sure you have some let us know what you have and if you could please come up to the mic that way they can record the questions for the video and things like that later on yes sir I have two questions can you hear me on this I have two questions one is you mentioned that this was built like a year ago and then you had rolled your own theme in hindsight knowing that there's a ton of themes out there for responsive what do you have gone with one that exists today so we did not launch this site a year ago we started working on this site nearly a year ago excuse me we launched the site in de february yes so I didn't actually catch the last part of your question could you repeat that I couldn't quite hear it so if you were going to start on it today if you were going to redo the whole thing and do it today would you have used would you have used a theme that exists today if we had started it today we'd probably have followed the same path because as I said there's a lot of unconfiguring that you have to do many contrib themes are helpful in that they provide drop-in solutions for users who are not as adept at dealing with this technology but we were kind of on the front wave of this and so I would probably have opted to do the same type of build for this website just to allow us to focus on front performance and issues like that regardless great is there any responsive specific modules that we used for this yes well like I said I actually wrote the respond.js module while working on the site and then we ended up not using it I also did not create but do maintain the modernizer module and so some enhancements went into a yet unreleased branch of it that we did experimentally use on the website as well to go ahead and test them in a real-world situation and then finally there's another one called responder that basically wraps media queries around core and module CSS so that you can build a website mobile first without having to deal with the CSS that's been created over the years in Drupal to deal specifically only with desktops great thank you so one point that's worth bringing up about responder not respond.js but responder is that Drupal was not designed for mobile and it wasn't until Drupal 7 was really about to be released that the whole mobile landscape sort of exploded and now we have tablets on these great smartphones and things like that and people really started to adopt those devices so a lot of the markup and CSS in core is not only not optimized for mobile but it just didn't even really know it existed at that point or that there was a thing that needed to be done with it and a lot of the techniques that are now used that we are considered that we consider industry standard came out just as Drupal 7 was in code freeze or after it was released so responder is a really great tool because it allows you to wrap some of that stuff into media queries so that you can sort of make Drupal core stuff responsive there's also like if anyone uses panels which is a wonderful delightful module you can build layouts basically and so if you go ahead and use like a flexible layout instead of one that's based on a grid system it will hard code a bunch of pixel values into the markup and while this works great on one particular screen dimension it doesn't work so well on lower and so that was kind of where the idea was born out of which is there are all these great pieces of code that are created for desktop but sometimes we just want to maybe remove some of them and start with mobile and then add those back in as needed so yes sir the fourth screen shot that you showed us an opera I didn't catch that you wireframed that fourth one maybe I missed it but that was actually something you had to CSS for and code for right yes so actually as you know you may have noticed in the technical requirements the list of phones and operating systems that we were explicitly asked to support was a pretty modern set of requirements but we didn't want to completely ignore the fact that other audiences exist especially given the global nature of ICANN so people using feature phones in Africa should be able to access the same content as iPad users in LA so we we went ahead and created a baseline set of styles even though it wasn't explicitly requested right I'm not sure if we actually went through the wireframing phase for that I mean I did a bit of work to establish some of that baseline because I knew that it was going to be there and I knew that it was something that we were planning on implementing anyways so when we started building out the styles for it I had already been we had already been testing styles that were essentially like the CSS crown floor that would be that baseline okay another question just what application did you use to sitemap out that you had that nice diagram that's omni-graffle for all of you folks at home who love to sitemap omni-graffle is a great tool it can be a little fussy sometimes but that's an understatement it definitely makes that process a lot easier and it helps you visualize things and the wireframing tool we used is balsalmic how many people here use balsalmic just to give a show of hands how many people use fireworks okay so we're thinking about maybe adopting fireworks as well but balsalmic is really great because you can make changes live in this program on the phone with a client and they can be saying yeah but it's kind of think of a drop-down but when you select this thing you get kind of a pop-up deal and then we can say oh you mean like this and you can pull together a balsalmic mockup that actually illustrates their thoughts literally in seconds on the phone and that always really really really impresses the client because they think that's exactly what I wanted that's awesome you like read my mind and no we just have a tool that's really fast that allows us to visualize that stuff lucidchart is another one that just launched some wireframing okay lucidchart for site mapping for wireframing okay great thank you I was wondering if over the course of the project you had to run into the dilemma of showing different content blocks based on what viewport was in view and if not for instance showing one block for you know tablet or making that block make that content block be different for you know the mobile size and if not what would the best practice be how would you tackle that I'm pretty sure specifically for this I'm pretty sure that we're not substituting anything all the blocks are completely flexible so basically what we're doing is we're using percentage or fluid layout for anything that isn't specific so we use percentages for that sort of thing just so that you can easily reflow all of the blocks so like a good example of this is like in that main slideshow that's in the header there's actually three basic divs that are controlling how that layout works there's one for the image that handles setting its position in that background gray there's one that's the box around the entire piece and there's one that's the content and when it's a 960 those are fixed values and then as the browser social shrink those go from fixed values to percentages so it allows you to reflow them pretty quickly and that's the method I use I realize that it's and it's KISS you know like keep it simple so I think that I think we talked about doing some stuff where blocks are going to be switched out based on a context but we never found a use case for it we were able to accomplish all the layouts using just divs CSS you guys touched on earlier the decision to keep all of the content on the homepage even in a mobile experience I just am curious was that a decision that was kind of based on your guys philosophy that people do scroll or was that a request from the client how do you guys reach that decision instead of just pairing the site down to the basic functionality right I think that was our decision to leave the slide show or to leave basically all the content on the homepage as opposed to pulling some stuff out there there was a request to definitely emphasize this featured content whenever they have a new program like new GTLDs or another conference or something because they have three yearly or they have three conferences each year each in a different country and so they want people to be able to find out about those fast because just like a Drupalcon type situation people only ever come to the ICANN site when they want to find out where they're going to be going in two or three months or something like that so that they can represent their country when decisions are made about DNS and so forth so for you guys it's still on a site by site basis just the importance of that information normally we would elect to show content regardless unless it's really really heavy images or something but like I said none of these images are enormous so we elected not to use any like conditional loading to load them up after the fact cool thanks yeah really these images here on the homepage these are pretty representative of how big the images get on this site so if we were dealing with some enormous screen filling image that we might be thinking differently about something like that hello hello hello it's more of a four kitchens question so I love the style tiles thing I think one thing that's really difficult for agencies to do and does anyone doing design on the web is when you send a client a comp is getting the right kind of feedback about that you want them to talk about content and they're talking about design or you want them to give feedback on like the color scheme and they're talking about well why is this why are these items here in this menu like well we're actually talking about design we're not talking about this other thing so this seems awesome because not only does it save you time in that you don't have to go through rounds of comps but you get the right kind of feedback about what you want exactly um so my question is like was this the first time you guys had done this on a project this is the first time we ever use this on a project yeah and it worked immediately yeah this is awesome yes um and so is this you plan to kind of use this process this is absolutely part of our design process moving forward for the rest of our lives great yes and really and Tom mentioned this before really Samantha you should Phase 2 specifically Samantha Warren I can't say yes please buy her drinks and all kinds of prizes maybe vacation she um this is hers right this is not ours this is hers right okay cool and now since we're on the subject maybe to dive just very briefly into um more of the process behind style tiles because it's not just creating a bunch of these things and showing them to the client there's actually a conversation we have in advance where we um we ask them to go home or you know to their offices or wherever um go back to where they're from and think about the words that they would like to describe what they want their website to be and we ask at least three people at the company this we asked our product owner who was um also sort of a stakeholder and then he also clued in two stakeholders and they came up with a list and we would get things like um we ask specific questions too if your website were a car what kind of car would it be um and then we said use some adjectives to describe you some verbs to describe things like that Samantha Warren describes all of this stuff on her website the good questions to ask and things like that that's how we arrived at these words that you see at the bottom here if I can find my cursor where did you go anyway bottom right you see these adjectives or notes right so we have these words thank you um we have these words at the bottom of all of these style tiles so this one says mini Cooper inclusive pluralistic universal cool new interesting heart slash soul so we took all of these words and we split them up into three categories um and this is also what Samantha recommends um they were um I think conservative middle and stream and extreme so we took all the words that they gave us sorted them into three different categories and we wanted to create and this is not representative of how many style tiles we actually did I think we actually went through about 10 or 12 so we did about three or four rounds of style tiles three apiece until we slowly narrowed and zeroed in on the the final one um so one of the one stakeholder said well if my new ican.org website were a car I wanted to be a mini Cooper and then we'd ask them well why because we took this list of words and we would ask them why this what do you think of when you think of this what made you say this so we write all these notes about the words that they're doing we go and we make the first round of style tiles and then we listen to them we send them the style tiles they think about it for a day or two and then we get on the phone and we say alright style tile one how does this make you feel what elicits um some of your feedback about what you think this does or does not say about your organization and we have a list of you know does and does not and that allows us to um like there was one style tile uh in particular that they said this is just a complete miss skip we were like okay but why hold on why why why and they they talked about like well it's kind of monochromatic and like okay so you want to constantly elicit this feedback and this may sound familiar because this is the same kind of conversation that we're usually having when we're dealing with enormous photoshop files right home page comps and content comps but if we limit it to this 1024 by 768 image and just show color swatches and words and things like that it moves a lot faster um so that's uh a little deeper dive into the method of style tiles and I think Samantha is going to talk about this sometime in the next couple of days so please look that up yes sir okay uh it's a UX question I did a little test drive of the site on my iPhone and my iPad and you can't zoom out of it on iPhone or the iPad and I was curious if that came up in the discussion with the stakeholders you know what if I want to zoom out to get a bigger font on my tablet or anything like that and you know if it came up or you know have you been asked to do something like that is it hard to do in responsive mode can I ask one question about your question are you referring to zoom out as in taking your fingers at the edge of the screen and moving them inward to make the site smaller um actually make it bigger so you know I would consider that zooming in that's why I was asking you forgive me so um yes we we set user scalable no on this website um and actually I've had conversations about this very recently uh and some people would consider that to be um a constraint that is undesirable um just like being able to resize text on a website uh some users would always prefer to be able to zoom into it and look at elements that they may not be able to read and so um that's actually a very quick fix but uh in particular this website uh was shipped that way uh and one more question um I was talking to Earl Miles yesterday about responsive in panels and and he had some suggestions about how it could be implemented and how you could do it and I was just curious if you would just avoid that at all costs if I would avoid using panels using panels to to to build a responsive design no I really like panels so if I said something that sounded like I didn't know no no I I wouldn't want to put words you know I guess just panels offers a lot of tools it can do so many things and so one of those things that I've actually been experimenting with and kind of kicking around internally is uh using it to fake ESI edge side includes so that you can like load blocks of content and simulate what we kind of refer to as rest based requests so um nothing solid yet but it's one solution that might be possible using panels because then as someone was mentioning uh you can load a web page and then conditionally load more content uh based on context that are in uh panels and so forth so I would say that panels is probably one of our shining examples of a tool that can be repurposed to enable more uh intelligent responsive development within Drupal um at least until uh we get all the whiz bang that's going to be uh the initiative formerly known as danger plate thank you thank you uh so we have time for just one more question okay well first I was going to say if you're looking for other tools uh I use mockflow.com that's another one and you can set it up with actions so people can actually walk through and see how different screens go Balsalmic does allow that as well and fireworks I think too right um that was such a good question answer on panels I almost forget my question now I think I was going to ask um so you said you wouldn't use you would just do it from the base up again and then um are there any particular techniques like um you're saying you'd use panels you're saying you'd build up from the base from the ground up again for a new theme um so would you start from that small and build up again if you're going to do this all over again and I guess is there any other hints you could get like so you really are saying you wouldn't use any other themes and you just build from the ground up um yes and that's a custom that maybe just that that's our custom at four kitchens often times we just don't um have the room to use a contrib theme because it would get in our way more than help us um and like I said lots of themes do their job very well and that they enable tens of thousands of people to use Drupal um beyond what they would be able to uh use it for tasks that are beyond possibly their development capabilities or something like that so um and I so our choice not to use a contrib sub theme uh or a base theme rather um is not a knock at any one of those fantastic themes but rather a preference that we have for front end performance and so forth that um that's generally speaking at four kitchens we don't use um we don't sub theme unless we're building a um a platform or an architecture that will use a sub theme that we are also producing uh or a base theme that we are also producing and the reason for that is just simply the kinds of projects that we take on so if we were a high volume shop we would probably be sub theming because we need things to be rapid and um uh easily maintainable by um um well anybody else at the company for example or um it's a trade off it kind of becomes a bit of a business decision a bit of a technological architecture decision but uh our typical projects last a minimum of six months and sometimes years so when we're dealing with projects of that size and we only do five six projects a year um the sheer size necessitates that we build things generally speaking from the ground up alright well thank you very much we appreciate you for coming