Responsive web design and web accessibility go hand in hand, deliver your content to EVERYONE.

1. Ryan Chittenden
Fuego Digital Media QSTP-LLC
Responsively Accessible
Web Design & Development

2. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
Who I am
Ryan Chittenden, Director Web Development
‣ Started in the web industry in 1997, as a webmaster
‣ Came to Qatar 2011, became Director in April 2012
‣ Twitter: @RyanChittenden
‣ Email: ryan.chittenden@fuegoondemand.com
!
Fuego Digital Media QSTP-LLC
‣ Builds web-based business solutions for enterprise-class public and private sector clients
‣ Twitter: @FuegoQSTP
‣ Facebook: https://www.facebook.com/FuegoQSTP
‣ Website: http://www.fuegoondemand.com
2

3. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
And so it begins…
3
In 1989, Tim Berners-Lee envisioned a
simple, fluid, medium that everyone
can enjoy - the world wide web.
He envisioned the web something like
this:
http://www.fuegoondemand.com/ux-
majlis/tim-berners-lee
!

4. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
Guess What?
4
WE MESSED IT UP - those...those
marketing departments!
Really we can only blame ourselves, we are the ones
that added:
‣ colours
‣ images, and photos
‣ table layouts
‣ fixed width/height sizes
‣ Flash, and other proprietary plugins
‣ mouse only actions
‣ frames

5. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
Graphic Design Evolved
‣ First web designers came from the print world
‣ They chose, and defined their canvas
‣ Fixed width and height
‣ Misunderstood the power of the scrollbar
‣ Limited sites to “above the fold”
‣ Designed for the lowest common denominator
!
What they didn’t realise the canvas they chose was
one step removed from the real canvas - the browser.
5

6. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
‣ Yay IE 8 is finally dead! Get your happy dance on!
‣ Now we are working with a full suite of modern browsers that basically work all the same…wait a minute…
Fast Forward to 2014
6

7. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
Enter, Stage Left…
‣ In 2000, the Ericsson R380 - it could browse the
web
‣ Mobile devices are 33% of global web traffic
‣ In Qatar - sites are approaching 60% mobile traffic
‣ Factoid: Google Android and Apple iOS power
90% of mobile devices
7

8. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
Devices, devices, everywhere devices…
‣ Many of us have multiple devices (phone, tablet,
laptop, etc)
‣ A recent study in the UK found that users, at home
switch devices 21 times an hour
‣ http://www.campaignlive.co.uk/news/1225960/
‣ Switching back and forth even on a single task.
‣ We need to provide a seamless experience across
all screens and platforms
‣ Many thought to provide a specific mobile
experience (example.mobi, mobile.example.com)
‣ This resulted content duplicated between the
mobile and desktop
8
OMD UK's Future of Britain research project

9. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
Responsive designed websites are like a river, small
quick moving stream in the mountains, down to a
wide slow moving flowing river. The user can cross
the river at ANY point along the way.
9
Andy Clarke
http://stuffandnonsense.co.uk/

10. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
Revolution!
!
‣ John Allspop, Ethan Marcotte, Jeremy Keith, Brad
Frost, Andy Clark, Lea Verou, and others lead the
way
‣ Get working on the real canvas the BROWSER.
‣ How can a static mockup convey the what the user
experience will be like on so many devices?
‣ Simple answer it can’t.
!
‣ Content strategy,
‣ User experience (UX),
‣ Information architecture (IA), and
‣ Usability
‣ Golden age of the web is now
‣ This when you can really make the web be all
things to all people.
10

11. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
The Missing Key Element…
!
‣ We have gone responsive, including all screen sizes
‣ Still leaving users behind, designing for devices
that have a screen…
‣ What if the "screen" is outputted in brail?
‣ What if the "screen" is audio output?
‣ What if the “screen” is a fridge, but has audio input
only?
11
Artist: Joe Mac Kechnie

12. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
...my website will meet you wherever you are...
12
Trent Walton
http://trentwalton.com/

13. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
…Accessibility
!
‣ "Device-Agnostic" = “device unknown”
‣ In 2005, behind the scenes the Accessibility was gaining steam
‣ It just wasn’t a priority of clients
‣ Today, governments, and organisations like Mada, the message is getting out
‣ Clients are demanding Accessibility to be built in.
‣ Educational institutions, CMU and University of South Australia are adding Accessibility to their programs
‣ Development companies to need to add Accessibility to their core processes.
‣ Every website Fuego produces from now on will be responsive and at minimum WCAG 2.0 Level A compliant.
13

14. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
Now we know what we must do, how?
‣ “Give me a template, give me something I can use as a
starting point”.
‣ How to reconcile all the responsive best practises with
all the accessibility requirements.
‣ I feel the web developer community has not come
together thus far.
‣ Numerous sites, and blogs that share design patterns,
best practises, frameworks, and boilerplates for
responsive websites.
‣ An equal number of sites/blogs that discuss
accessibility and its benefits
‣ BUT there are almost no sites/blogs talking about
them together.
14
Of course, the day I write this talk, this article shows up!

15. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
Checklists, a lemonade, and boilerplate…
‣ Launching a large public sector website soon…
‣ Broke down the accessibility goals into checklists -
Level A, Level AA, Level AAA
‣ Determined what applied to the content
‣ Considered different responsive grids/frameworks
‣ Finally settled on a responsive grid system called
“Lemonade”, and used the “HTML5 Boilerplate”
‣ Both are lightweight, and work well with components
and widgets that you find in a CMS.
‣ @FuegoQSTP on Twitter, we will see the good news!
15

16. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
What is next?
!
‣ Over the summer months, my team and I will be
building a site we where we are going to share:
‣ our experiences,
‣ design patterns,
‣ best practises,
‣ advice,
‣ and online resources.
‣ Open it up to the community, they can share their
experiences, and discoveries.
‣ As a community we can grow awareness and future
generations of web designers/developers thinking
Responsively Accessible.
16

17. Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
Thank you
17
Fuego Digital Media QSTP LLC
support@fuegoondemand.com
Innovation Centre, Office 352,
Qatar Science and Technology Park
PO Box 24782
Doha, Qatar