Responsive Design Guide


Published on

We created this whitepaper to explain how we tackled our largest and most high profile responsive design challenge yet - The new site for Macdonald Hotels.

Published in: Business, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Responsive Design Guide

  1. 1. WHITE PAPER Design knowledge Who will get the most from this. Agencies, designers, developpers How to design a responsive website Our design process for creating responsive websites To build a mobile site or not to build a mobile site; this is a question at the forefront of many a discussion. There is, however, another option: responsive web design. When, why, and how should you go about designing a responsive website? Published December 2011 withEquator144 Elliot Street, Glasgow G3 8EX ISO 9001 @equatoragency RE I R REGISTERED FIRM© Equator, Reg No. 198
  2. 2. WHITE PAPERHow to design a responsive website Key pointsWith mobile internet users set to surpass desktop internet users in the US Understand andby 2015, with tablets becoming more popular, and even with TV internet clearly define yourusage increasing, it’s important for companies to provide a great user reasons for designingexperience for all their visitors no matter what device they’re on. How and building adoes responsive design help us do this? Well, by allowing us to create responsive website solution that is flexible for different screen widths. It usesflexible grids and clever styles to present the same content to a user, but Carefully researchdisplays that content in a format that suits the width of the device. Check your requirements.out this beginner’s guide to responsive web design for a more detailed Think about yourintroduction. grid structure and components on different layouts. Test throughout the process. Resources UX Booth Mobile Internet Users to Surpass Number of Wireline Users by 2015, Says IDCWhy should you design a responsive site? Beginner’s guide toThere are many options to consider when a client asks for a mobile responsive web designsolution for their website, and the suitability of these options depend on Building a responsivethe business requirements and budget; it’s also important to consider any web siteexisting solutions or sites they already have. Creating a responsive websiteisn’t a complete mobile strategy, and won’t answer every brief, but,especially if you are starting a website from scratch, you should considerit as a very serious option.So why would you decide to create a website this way?You’re starting from scratchDeveloping a whole new website or web application is a challengingprocess. You won’t know if the site will be successful until it’s live and inthe world, so creating a separate mobile site or a mobile app in tandem1 How to design a responsive website
  3. 3. WHITE PAPERHow to design a responsive websitewith a website project could be a big waste time and money. It’s moreefficient to get your new site performing well before you create an “Solid responsiveadditional mobile site or application. solutions require additional designYou want to keep costs low and front-endSolid responsive solutions require additional design and front- development time,end development time, but doesn’t too heavily impact applicationdevelopment. It could take around 20-30 per cent longer to develop a but doesn’t tooresponsive site, but it’s still faster than creating an additional mobile heavily impactsite or app. Developing a site this way also means that you only need to applicationdevelop, manage, and maintain the one site, so it can reduce these coststoo. development”You want it to work even when new devices are releasedA mobile site needs to be able to recognize the user’s device; when newdevices are released, the site needs to be updated. As the responsivesolution only recognizes the browser’s width, no new updates would needto be made. This means it’s much more future-proof and scalable.The processLet’s talk through the process of creating a responsive website using ahotel website example. This September, we released the new MacdonaldHotels website. Macdonald Hotels are a UK hotel chain with 47 hotels andresorts across the UK and Spain. We created the new site for them thatincluded a new site structure, extensive hotel content, and a new bookingengine. Here are the steps we went through and also some considerationsyou should think about when designing a responsive website.These are the key steps: »» Research/scoping: Understanding the additional requirements for a responsive site »» Wireframing: Grid structures and layouts for the site considering different screen widths »» Look and feel: Style considerations »» Building the site: HTML & CSS issuesResearch and scopingResearch is always a very important stage in the design process so it’s2 How to design a responsive website
  4. 4. WHITE PAPERHow to design a responsive websiteworth putting a little extra consideration into the people who will be usingdifferent devices. Understanding how these different users may want to “The logic behinduse the website on a variety of devices will help you to decide what the how the stylespriorities are on the project. should change »» What different goals will a user have on different devices? can be a bit hard Questions like this are starting to become more redundant. In the past to define and the we’ve assumed that mobile users have been task-driven, e.g. I want to get the hotel’s address; I want to book something quickly. But now magic of it will people on any device are just as likely to leisurely browse the Internet really come out as they are to need to complete a task quickly. It is worth considering in the build of the though, as thinking about users’ goals in this way could help you site” prioritize content for the site, irrelevant of what device the visitor is using. »» What technical considerations do we need to make for functionality and content? Think about how any complicated functionality may work on different devices. Although a responsive site will only change the CSS depending on the width if there are complicated elements that rely heavily on JavaScript, they may not translate well on a smaller device and it could be worth hiding these.WireframingThe logic behind how the styles should change can be a bit hard todefine and the magic of it will really come out in the build of the site, butwe need a way to start defining the different width stages of the layout.We choose to look at 3 screen widths, a desktop, iPad and iPhone. Wefelt these covered what our requirements were, but for your project youshould consider what widths are important for you to think about—youmay even need to look at bigger screen widths for TV internet usage.At this point of the project you should already the key templates thatyou’ll need to wireframe, but you shouldn’t need wireframes for all thesetemplates in the different widths. The main goal here is to help define the3 How to design a responsive website
  5. 5. WHITE PAPERHow to design a responsive websitelogic behind how the CSS will change the look of the page, so focus onpages that have very different layouts. For us we looked at the home page, “The logic behindall the booking process pages, the hotel pages, offer pages as well as how the stylessome generic layouts. Each of these covered our different column layouts, should changecontent types and key functionality. can be a bit hard »» Getting started to define and the First, define the grid structure for each key width. We created 3 pages for the screen widths 1024px (Desktop), 768px (iPad portrait), 320px magic of it will (iPhone portrait), then we needed to define a grid structure for each of really come out these widths. in the build of the site” A very simple grid structure with equal column widths on each layout made it easier for us to plan for components wrapping as the width changed. »» Creating the master template As you create each wireframe you’ll need to think about the columns and how the components within these will adapt as the page width shrinks&mdashe.g. what happens When you have less space? If you have four columns of content? When you change to a three-column width? There should always be ongoing communication between the designer and the front end developer to answer any issues about what you can do with components visually and in the CSS. »» Starting on the home page You may feel like there is another page that has a higher importance than the home page, but this was where we started. Here is our finished original wireframe. You can see the mobile page length is quite a bit larger due to the content wrapping over one column.4 How to design a responsive website
  6. 6. WHITE PAPERHow to design a responsive website »» Main navigation We created a simple horizontal top navigation that would have a fluid width to change with the screen size. As the screen reduced the menu items would get closer together, then wrap on to the next line when necessary. This works for desktop, laptop and tablet widths, but going further down we wanted to create a menu that would suit the devices better. This gave us the menu spilt over two columns for the mobile device.5 How to design a responsive website
  7. 7. WHITE PAPERHow to design a responsive website Other header components are aligned right and would just shift along as the page width reduced. “Remember when you are styling the Remember when you are styling the navigation to think how it will navigation to think work as the screen sizes changes. Certain styles, such as using tabs, may be difficult to get to work and look good as the screen width how it will work as reduces. the screen sizes »» Footer changes. Certain Our footer is pretty simple, just think about what content you styles, such as want and how it will change as the width changes and the columns using tabs, may reduce—this could be as simple as components wrapping underneath be difficult to get each other. to work and look good as the screen width reduces” »» Other components Our simple grid structure made it easier to plan out our components. On the home page we used a horizontal scroller that had four components that would scroll across on a click. Our tablet layout let us keep this component but just amend it to only show three items, then on our phone width we removed the scrolling functionality completely and instead displayed each item vertically. Each component you design may require different behaviours, so think about how the visitor will want to use the component on different screen sizes. Phone users are more comfortable scrolling down a page than using small buttons to interact with the page.6 How to design a responsive website
  8. 8. WHITE PAPERHow to design a responsive website »» Test it straight away As soon as you have created “Adding the your first wireframe test it on the tablet and mobile relevant device straight away. versions to your It’s easy to get the image on a simple web page and take a look user testing at how it looks and feels to scroll process will give down. This will let you know you a lot of useful early on if your wireframe is feedback.” working. Testing in this way gave us clues really early on what was and wasn’t working. If you look at this wireframe you should quickly see our first issue.As the user navigated through thesite they would only see these firsttwo page elements - the navigationand the search panel. This meansthat the user may be unsure if thepage has changed, as well as wherethey actually are on the site. Thiswas solved simply by putting theseitems in show/hide panels—lettingthe user get into the content much faster.Adding the tablet and mobile versions to your user testing process willgive you a lot of useful feedback too. Now that your wireframes arecreated, tested, amended and approved it’s time to make them look goodfor all your screen widths.Look and feel visualsIt isn’t necessary to create visuals for every wireframe. The main objectiveis to cover all the styles that will be required to create the HTML and CSS.There will be a little bit of a crossover for wireframes and visuals, somestyles that will be required for the mobile where there wasn’t a need foran initial wireframe. »» Styling the page: Think about keeping your styles simpler for your mobile version—what’s great about CSS3 is that you don’t need lots of images to get great styled effects, but these still take a bit of time to load. »» Thinking about font: Make sure your font sizes are going to be7 How to design a responsive website
  9. 9. WHITE PAPERHow to design a responsive website readable on each device. They’ll have to be much larger on the mobile device to ensure readability. Also, be prepared for your visuals to change when it gets translated into the build of the site. There always should still be balance between what looks good on a flat visual and what will work when the site is being developed. The final site isn’t too far away from our look and feel visuals, take a look here and you can compare with the live site.8 How to design a responsive website
  10. 10. WHITE PAPERHow to design a responsive websiteBuilding the siteBuilding the HTML and CSS is a challenge all of its own, so I won’t discussthis is much detail, but here are a few things to think about. »» The impact of image sizes The site will need to load in the full size images even if the CSS scales them down, so try to keep image sizes as low as possible. There can be some nifty JavaScript tricks though to make the site run smoother. On this site we initially loaded in the smallest image size, and then used JavaScript to decide if a larger image was then needed »» Use advanced CSS It’s important to get the client behind the idea of using advanced CSS styles, allowing the site styles to degrade as the browser capability does. This lets you keep site loading times low. »» Constant communication is required The project will always go smoother if the team speak to each other, so from both designer and developer it’s good to discuss problems and solutions as soon as they turn up. It’s worth taking a look at our front end developer Jamie Boyd’s take on the front end development of the Macdonald Hotels website for responsive design.So what does all this mean?If you are thinking about convincing your client to have their new sitedesigned and developed in a responsive way, firstly you should considerif it really is the right solution for them, then you’ll need to be able topersuade them of the benefits and communicate that it will add more Written bytime to the project. But, I do believe that this is how more sites will bedeveloped in the future.We’ve all learned so much on this project about developing a responsivewebsite. We were lucky to have a client who was as keen as us to createsomething new and innovative and from that we’ve created a site we’re allproud of. Elaine McVicar Assistant Creative Director Equator9 How to design a responsive website