Type, Responsively: A more modern approach to type on the web
Responsively Accessible
-
Upload
ryan-chittenden -
Category
Internet
-
view
161 -
download
0
description
Transcript of 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
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
!
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
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
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
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
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
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/
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
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
Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
...my website will meet you wherever you are...
12
Trent Walton http://trentwalton.com/
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
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!
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
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
Copyright © 2014 Fuego Digital Media QSTP-LLC. All Rights Reserved.
Thank you
17
Fuego Digital Media QSTP LLC [email protected]
Innovation Centre, Office 352,
Qatar Science and Technology Park
PO Box 24782
Doha, Qatar