Responsively Accessible

Ryan Chittenden Fuego Digital Media QSTP-LLC

Responsively Accessible Web Design & Development

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: [email protected]

!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


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

!

http://www.fuegoondemand.com/ux-majlis/tim-berners-lee


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


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


‣ 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


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


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


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/

http://stuffandnonsense.co.uk/


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


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


...my website will meet you wherever you are...

12

Trent Walton http://trentwalton.com/

http://trentwalton.com/


…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


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!


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


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


Thank you

17

Fuego Digital Media QSTP LLC [email protected]

Innovation Centre, Office 352,

Qatar Science and Technology Park

PO Box 24782

Doha, Qatar

mailto:[email protected]

http://g.co/maps/f6ma2

Responsively Accessible

Internet