![Page 1: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/1.jpg)
MORE THAN JUST A BUZZWORD
RESPONSIVEWEB DESIGN
![Page 2: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/2.jpg)
Before we start...
![Page 3: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/3.jpg)
While I work in some areas of User Experience, I am definitely not a UX expert!
![Page 4: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/4.jpg)
My main areas of work these days is creating HTML/CSS pattern libraries and architectures for large websites and web applications.
![Page 5: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/5.jpg)
However, I also work with a series of smaller clients where I do a lot of the UX work myself.
![Page 6: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/6.jpg)
With that in mind, we’ll start with some key definitions and then discuss some UX case studies around Responsive Web Design.
![Page 7: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/7.jpg)
Responsive Web Design
![Page 8: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/8.jpg)
In 2010, Ethan Marcotte coined the term
Responsive Web Design
![Page 9: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/9.jpg)
Rather than build separate mobile & desktop websites...
![Page 10: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/10.jpg)
You could choose to create a single site that adapts to suit any device regardless of screen size or orientation.
![Page 11: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/11.jpg)
Ethan Marcotte defined Responsive Web Design with
3 principles
![Page 12: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/12.jpg)
A flexible, grid-based layoutThis allows your layout to reflow to the screen size of any device.1
![Page 13: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/13.jpg)
Flexible images and media (videos etc)This allows your images and videos to reflow with the layout2
![Page 14: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/14.jpg)
CSS3 Media queriesThis allows you to control each layout so that content is displayed optimally3
![Page 15: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/15.jpg)
“responsive” vs RWD
![Page 16: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/16.jpg)
Almost four years later, RWD has rapidly expanded. New techniques and ideas are appearing almost daily.
![Page 17: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/17.jpg)
“Testing the top 10,000 websites for responsive indicators showed roughly 12% of these sites were responsive.”
http://www.guypo.com/mobile/rwd-ratio-in-top-100000-websites-refined/
![Page 18: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/18.jpg)
However, there is also a growing sense of confusion...
![Page 19: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/19.jpg)
A lot of sites that are now considered to be “responsive” do not meet some or any of Ethan’s three key criteria.
![Page 20: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/20.jpg)
People are beginning to use the term “responsive” instead of “Responsive Web Design”.
![Page 21: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/21.jpg)
This term is used to describe a more broad approach to the overall problem. “Responsive” is more than just a technical solution.
![Page 22: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/22.jpg)
This broader approach can include all sorts of disciplines including content, advertising, UX and more.
![Page 23: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/23.jpg)
Adaptive Web Design
![Page 24: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/24.jpg)
Before we look at Adaptive Web Design, we need to define “progressive enhancement”.
![Page 25: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/25.jpg)
In 2003,Steve Champeon
coined the term “Progressive
Enhancement”
![Page 26: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/26.jpg)
“Progressive Enhancement is the principle of starting with a rock-solid foundation and then adding enhancements if you know user-agents can handle the improved experience.”
http://coding.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it/
![Page 27: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/27.jpg)
Now let’s look at Adaptive Web Design and how it relates to Progressive Enhancement
![Page 28: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/28.jpg)
In 2011,Aaron Gustafson coined the term
“Adaptive Web Design”
![Page 29: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/29.jpg)
![Page 30: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/30.jpg)
“Adaptive web design is about creating interfaces that adapt to the user’s capabilities (in terms of both form and function)...
http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/
![Page 31: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/31.jpg)
“Adaptive web design is just another term for progressive enhancement - it takes into account varying levels of markup, CSS, JavaScript and assistive technology support.”
http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/
![Page 32: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/32.jpg)
Despite Aaron’s definition, if you search for “Adaptive web design” you will get all sorts of different definitions.
![Page 33: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/33.jpg)
One of the better definitions is by Brad Frost, who described adaptive as:
![Page 34: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/34.jpg)
“Adaptive is creating a single Web experience that modifies based on the capabilities of the device. It’s a singular flexible experience built using sound progressive enhancement techniques.”
http://bradfrostweb.com/blog/post/the-many-faces-of-adaptive-design/
![Page 35: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/35.jpg)
Ready to beconfused?
![Page 36: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/36.jpg)
Adaptive is also used in a very different context - to describe “Adaptive layouts”.
![Page 37: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/37.jpg)
Responsive layouts are fluid. They are designed to adapt to different screen sizes.
![Page 38: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/38.jpg)
According to some, “Adaptive layouts” are different. They use a series of fixed-width layouts that are designed specifically for different screen sizes.
![Page 39: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/39.jpg)
Progressive enhancement
Adaptive web design
Responsive Web design
Responsive layouts(Fluid grids)
Adaptive layouts(Fixed-width or semi-fixed
width grids)
![Page 40: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/40.jpg)
RESS
![Page 41: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/41.jpg)
RESS is short for Responsive and Server Side (RESS)
![Page 42: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/42.jpg)
RESS uses Responsive Web Design as a base, and then adds server side components where needed.
![Page 43: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/43.jpg)
RESS allows us to serve different user experience & features to different devices.
![Page 44: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/44.jpg)
Why would we do this? We can optimise the experience and content for different devices.
![Page 45: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/45.jpg)
Unlike “full mobile” where the entire site is tailored to the device, RESS allows us to choose specific aspects of the site to optimise.
![Page 46: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/46.jpg)
The server side components are normally controlled with some sort of device detection service (Wurfl, 51Degrees, Device Atlas etc).
![Page 47: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/47.jpg)
Example 1 serving different user
experience
![Page 48: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/48.jpg)
Let’s use an example where you want to use a different navigation for mobile devices. You might want it to be simpler and position it in the footer, rather than the header of the site.
![Page 49: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/49.jpg)
With RESS, we can do this by providing two alternatives... such as a wide screen and a narrow screen header and footer.
![Page 50: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/50.jpg)
<body>! {{>header}}!! [...document content...]!! {{>footer}}</body>
![Page 51: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/51.jpg)
If the server detects a mobile browser, it can render the page template with mobile components. Otherwise, it falls back to the "standard" ones.
![Page 52: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/52.jpg)
The page is still a RWD page. But each of the variables is a device optimised component.
![Page 53: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/53.jpg)
Example 2Real world example
![Page 54: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/54.jpg)
![Page 55: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/55.jpg)
“On the new ND.edu we used a combination of server-side detection, media queries and javascript to determine content.”
http://weedygarden.net/2012/05/a-case-for-ress/
![Page 56: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/56.jpg)
“This allowed us to drastically reduce the amount of resources that are initially downloaded and the result is a very fast mobile experience.”
![Page 57: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/57.jpg)
Large screens:136 requests3.00MB
Mobile phone:23 requests291.94KB
![Page 58: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/58.jpg)
Is Responsive the answer?
![Page 59: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/59.jpg)
As “RWD” and “responsive” have gained popularity, there has been a growing trend to assume that these are the “best solution” in all cases.
![Page 60: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/60.jpg)
This is not true. Like any other solution, RWD and “responsive” have their own strengths and weaknesses.
![Page 61: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/61.jpg)
RWD strengths
![Page 62: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/62.jpg)
RWD sites are technically much easier to implement than full mobile or RESS sites.
![Page 63: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/63.jpg)
RWD can be implemented by any front end developer that understands media queries.
![Page 64: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/64.jpg)
For this reason, RWD sites are probably much cheaper to build and maintain than full mobile or RESS sites.
![Page 65: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/65.jpg)
RWD weaknesses
![Page 66: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/66.jpg)
With RWD, content and functionality are delivered in the same way to every device.
![Page 67: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/67.jpg)
With full mobile, content and functionality can be optimised for any device.
![Page 68: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/68.jpg)
This means that RWD sites can have much slower page speed than full mobile or RESS sites.
![Page 69: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/69.jpg)
With RWD, this also means that User Experience cannot be fully tailored to the device.
![Page 70: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/70.jpg)
“It depends”
![Page 71: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/71.jpg)
In the end, it depends on the site, the audience, the development team, the budget. Only you can decide which solution is best for your site!
![Page 72: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/72.jpg)
Mobile First
![Page 73: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/73.jpg)
In 2011,Luke Wroblewski coined the term “Mobile First”.
![Page 74: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/74.jpg)
“Mobile First” is about planning and designing the entire experience for small screen devices before wide screen devices.
![Page 75: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/75.jpg)
“Mobile First forces you to focus and prioritize your products by embracing the constraints inherent in mobile design”.
http://mobilegovwiki.howto.gov/Mobile+First
![Page 76: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/76.jpg)
“All screens first”
![Page 77: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/77.jpg)
For many Responsive Web Design projects, I use a variation on this approach which is “all screens first”.
![Page 78: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/78.jpg)
I try to get the team to focus on a product that will work at any screen size (phone, small tablet, large tablet, desktop) - not just wide or narrow.
![Page 79: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/79.jpg)
The aim is to get teams to move away from “wide screen only” thinking.
![Page 80: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/80.jpg)
It’s very easy for teams to accidentally slide back to “wide screen only” thinking during a project.
![Page 81: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/81.jpg)
For this reason, “Mobile First” or “all screens first” should be used through all phases of the project, from initial sketches, to wireframes, prototypes, user-testing, design and development.
![Page 82: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/82.jpg)
A cautionary tale
![Page 83: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/83.jpg)
In mid 2011, I worked on two responsive web projects back to back.
![Page 84: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/84.jpg)
This gave me an opportunity to observe and compare different two RWD processes in action.
![Page 85: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/85.jpg)
The first project was to design and develop a complex Responsive web application for a large “Energy company”.
![Page 86: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/86.jpg)
We used the “Mobile first” approach throughout every phase of the project.
![Page 87: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/87.jpg)
Every decision was made based on how the web application would work on small screens.
![Page 88: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/88.jpg)
Because of restricted screen real estate, the layout and functionality was focused and direct.
![Page 89: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/89.jpg)
When it came time to work on the wide screen variations during each phase, it was incredibly easy as each screen had already been optimised.
![Page 90: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/90.jpg)
For the second project, I was asked to do the front-end development on a non-profit Responsive website. When I came on board, the team were in the middle of the design phase.
![Page 91: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/91.jpg)
While the wireframe phase had used “Mobile first”, the design phase did not. The team spent weeks focusing on the wide screen designs only.
![Page 92: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/92.jpg)
Once the wide screen designs were fully signed-off, the team then moved on to narrow screen designs.
![Page 93: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/93.jpg)
As you can imagine, many of the decisions made for wide screen did not work at small screen.
![Page 94: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/94.jpg)
Aspects of the wide screen layout and functionality had to either be heavily adjusted for narrow screen, or revisited at wide screen.
![Page 95: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/95.jpg)
A lot of this pain could have been avoided if they had maintained a rigorous “Mobile first” approach throughout the design phase.
![Page 96: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/96.jpg)
Some case studies
![Page 97: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/97.jpg)
I’m now going to discuss two simple RWD UX case studies.
![Page 98: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/98.jpg)
The findings will come as no surprise to many of you, but hopefully there are some interesting little discoveries along the way.
![Page 99: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/99.jpg)
Case study 1Testing different navigation
paradigms
![Page 100: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/100.jpg)
One of the biggest challenges of Responsive Web Design sites is how to deal with site navigation on small and medium screen sizes.
![Page 101: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/101.jpg)
With wide screen, there is a lot of space to play with, so site navigation can be displayed in a variety of different ways.
![Page 102: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/102.jpg)
With small screen, there is extremely limited screen space, and navigation could easily take up the entire screen.
![Page 103: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/103.jpg)
Most RWD sites attempt to hide away site navigation at small screen to free up the real estate.
![Page 104: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/104.jpg)
A lot of different techniques have been developed over the last few years, to solve this problem.
![Page 105: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/105.jpg)
Here are seven emerging Responsive navigation design patterns.
![Page 106: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/106.jpg)
1. Do Nothing
![Page 107: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/107.jpg)
This is where you let the navigation wrap as needed.
![Page 108: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/108.jpg)
home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
![Page 109: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/109.jpg)
home about us services portfolio contact us loginLorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
![Page 110: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/110.jpg)
Example:
http://responsivenavigation.net/examples/simple-padding/
![Page 111: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/111.jpg)
Pro: Easy to implement. No special CSS or JS needed.
Con: Can take up space - especially at the top of the screen.
![Page 112: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/112.jpg)
2. The Footer Anchor
![Page 113: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/113.jpg)
At small screen, the header contains a simple link pointing to the footer navigation. The footer contains the navigation.
![Page 114: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/114.jpg)
home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
![Page 115: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/115.jpg)
home
about us
services
portfolio
contact us
login
Site navigation
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
![Page 116: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/116.jpg)
Example:
http://responsivenavigation.net/examples/footer-list/
![Page 117: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/117.jpg)
Pro: Easy to implement. No special CSS or JS needed.
Con: Can be disorientating for some users.
![Page 118: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/118.jpg)
3. The Toggle
![Page 119: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/119.jpg)
At small screen, the navigation is hidden away and replaced with a link, icon or both. When users click on the link/icon, the navigation slides open, pushing the page contents down.
![Page 120: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/120.jpg)
home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
![Page 121: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/121.jpg)
Site navigation
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
![Page 122: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/122.jpg)
home
about us
services
portfolio
contact us
login
Site navigation
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
![Page 123: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/123.jpg)
Example:
http://codecanyon.net/item/slicenav-responsive-navigation-menu/full_screen_preview/4874922
![Page 124: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/124.jpg)
Pro: Keeps the navigation in place, which is good for users. Elegant.
Con: JS dependent. Some options do not support keyboard access.
![Page 125: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/125.jpg)
4. Toggle overlay
![Page 126: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/126.jpg)
Similar to the toggle approach, but the menu does not push the page contents down. Instead, the navigation sits over the top of page content.
![Page 127: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/127.jpg)
home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
![Page 128: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/128.jpg)
Site navigation
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
![Page 129: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/129.jpg)
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
home
about us
services
portfolio
contact us
login
Site navigation
![Page 130: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/130.jpg)
Example:
http://responsivenavigation.net/examples/simple-toggle/
![Page 131: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/131.jpg)
Pro: Keeps the navigation in place, which is good for users. Elegant.
Con: JS dependent. Some options do not support keyboard access.
![Page 132: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/132.jpg)
5. Multi-level toggle
![Page 133: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/133.jpg)
Similar to the toggle approach, but with additional ability to open and close multiple levels of navigation.
![Page 134: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/134.jpg)
home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
![Page 135: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/135.jpg)
Site navigation
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
![Page 136: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/136.jpg)
home
about us
services
portfolio
contact us
login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Site navigation
![Page 137: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/137.jpg)
home
about us
our history
our staff
contacting us
where to find us
services
portfolio
contact us
login
Site navigation
![Page 138: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/138.jpg)
Example:
http://responsivenavigation.net/examples/multi-toggle/
![Page 139: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/139.jpg)
Pro: Keeps the navigation in place, which is good for users. Elegant.
Con: JS dependent. Some options do not support keyboard access. Can be confusing for some users.
![Page 140: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/140.jpg)
6. The Select Menu
![Page 141: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/141.jpg)
At small screen, the navigation is converted into a select menu.
![Page 142: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/142.jpg)
home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
![Page 143: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/143.jpg)
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Site navigation
![Page 144: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/144.jpg)
Example:
http://responsivenavigation.net/examples/select-menu/
![Page 145: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/145.jpg)
Pro: Frees up space.
Con: JS dependent. Can confuse some users. Sometimes harder to style.
![Page 146: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/146.jpg)
7. Off-canvas
![Page 147: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/147.jpg)
At small screen, the navigation is hidden away and replaced with a link, icon or both. When users click on the link/icon a tray slides in from the left and the main content is pushed to the right.
![Page 148: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/148.jpg)
Users can close the tray and the content slides back over to the left.
![Page 149: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/149.jpg)
home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
![Page 150: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/150.jpg)
home
about us
services
portfolio
contact us
login
Close
Lorem ipsum ut laoreet dolotation ullamcoiriure dolor in facilisis at verdelenit augue
Site navigation
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
![Page 151: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/151.jpg)
Example:
http://responsivenavigation.net/examples/off-canvas-slide/
![Page 152: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/152.jpg)
Pro: Frees up space.
Con: Much harder to build, especially elegantly. Doesn't scale well.
![Page 153: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/153.jpg)
The case study
![Page 154: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/154.jpg)
In early 2013, I worked on a client site where we wanted to test three different navigation methods to see which would be most intuitive at small screen.
![Page 155: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/155.jpg)
The method we chose where:The footer anchorThe toggleThe select menu
![Page 156: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/156.jpg)
Key target audiences were identified, and 30 users from these target audiences were chosen to take part in the testing process.
![Page 157: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/157.jpg)
These users did not know that the primary purpose for the test was to watch them interact with the different navigation methods.
![Page 158: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/158.jpg)
Each user was asked to perform a range of tasks on three different sites. Each site had a different menu pattern.
![Page 159: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/159.jpg)
At the end of the process, users were asked to rate the difficulty of each navigation method.
![Page 160: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/160.jpg)
Based on our observations and user ratings:
1. The footer anchor method and select menu confused many users2. Most users preferred the toggle menu
![Page 161: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/161.jpg)
Case study 2Testing navigation icon vs
text
![Page 162: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/162.jpg)
In mid 2013, I worked with a client who wanted to use an icon only to show the menu when it was “hidden away” at small screen.
![Page 163: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/163.jpg)
The target audience consisted of all sorts of age groups as well as users that were “tech savy” and totally “non-tech savy”.
![Page 164: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/164.jpg)
We were concerned that this audience may not understand such an icon.
![Page 165: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/165.jpg)
Again, a range of target audience users were chosen and asked to perform specific tasks on small screen devices only.
![Page 166: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/166.jpg)
10 users were presented with a site using an “icon only”.
Site navigation
![Page 167: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/167.jpg)
10 users were presented with a site that used an “icon and text”.
Site navigation
![Page 168: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/168.jpg)
The findings
![Page 169: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/169.jpg)
Of the 10 “icon only” users, only one user immediately understood the purpose of the icon.
![Page 170: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/170.jpg)
Six of the “icon only” users discovered the purpose of the icon by trial and error.
![Page 171: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/171.jpg)
Three “icon only” users did not discover the purpose for the icon at all. These users were not able to complete the relevant tasks.
![Page 172: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/172.jpg)
All ten “icon and text” were able to understand the purpose of this function and complete the relevant tasks.
![Page 173: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/173.jpg)
Some cautions
![Page 174: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/174.jpg)
While this may seem like a compelling result, a lot would depend on the types of users tested, the placement of icon and other factors.
![Page 175: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/175.jpg)
For example, an icon that is tucked away in the top left or right corner may be harder for users to discover.
![Page 176: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/176.jpg)
Wording
![Page 177: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/177.jpg)
During testing, several people mentioned that they did not like the word “navigation” associated with the icon.
![Page 178: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/178.jpg)
We decided to do some additional testing, this time focussing on the wording associated with the icon.
![Page 179: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/179.jpg)
Users were presented with four choices and asked to decide which was the most meaningful.
![Page 180: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/180.jpg)
The choices provided were:MenuNavigationSite menuSite navigation
![Page 181: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/181.jpg)
Most users preferred either “Menu” or “Site menu”. We felt that “Site menu” would be the safest option as it is most descriptive.
![Page 182: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/182.jpg)
The decision
![Page 183: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/183.jpg)
Despite our recommendations, the client decided to go with an icon only because it “looked neater”, and “lots of other sites use these icons now”.
![Page 184: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/184.jpg)
Conclusions?
![Page 185: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/185.jpg)
Responsive Web Design is a great solution for many websites today.
![Page 186: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/186.jpg)
It allows us to build sites that work across a wide range of devices without a lot of the cost or effort associated with full mobile or RESS sites.
![Page 187: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/187.jpg)
Just as with any website or web application, with Responsive solutions we have to avoid making assumptions about our users.
![Page 188: Responsive Web Design - more than just a buzzword](https://reader034.vdocuments.mx/reader034/viewer/2022051608/53f33b1d8d7f72c30e8b4755/html5/thumbnails/188.jpg)
Test earlyTest often