Below is a talk I gave at TechShare 2014 - about Responsive, and Accessible Websites.
Slides: http://www.slideshare.net/RyanChittenden1/responsively-accessible?qid=b58e16bc-e099-4223-9849-601da27e2132
------
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
Guess what, WE MESSED IT UP - those...those marketing departments! But, really we have no one to blame but ourselves, we are ones that started adding in pictures, colours, table layouts, fixed width/height sizes (more on that in a minute), mouse driven only actions, Flash, and other such fun stuff, because we could - man, who doesn't like building cool stuff, after all we are programmers - put a challenge in front of us and we will do it...and we can always claim the marketing department demanded it (I swear, really)! Of course, the browser wars didn't help matters any either with proprietary tags (Can you say: <blink> vs <marquee> [bonus points to anyone can tell me which tag belong to which browser]), plugins for video, and media.
In the beginning the web medium was hard to define, the first graphic designers came over from world of print design, they chose their canvas - defined width and a height - as they alway have. They opened their tools like Photoshop or Fireworks, they gave us wonderful colours and photos, that literally coloured the web for all of us. They got caught in the same machinations of their past (this is a natural human thing - like my grandfather used to say - "bad habits die hard") and didn't understand the power of the scroll bar, and limited their canvas to the lowest common denominator. Pre-2000: 640 x480, by 2002-3: 800 x 600, by 2005-6: 1024 x 768 and so on. The most important thing they didn't realise they were missing: the canvas they chose was one step removed from the real canvas - the browser.
Fast forward to Today - Yay IE 8 is finally dead! Now we are working with a full suite of modern browsers that basically work all the same - wait a minute…
In 2000, the Ericsson R380 began a trend that literally changed everything - it could browse the web - sort of - but it started the trend we see today. Today the Google Android and Apple iOS power 90% of mobile devices and are responsible for as much as 33% of global web traffic.
Here in Qatar - it is even higher, we are finding many of our clients are approaching 60% of their traffic from mobile devices.
Additionally, many of us have a multitude of devices we use everyday - [interactive poll] how many of us don’t have a mobile phone, and a tablet, and a laptop and a desktop? I am sure the IT people here at QNCC would confirm many of you here today have 2-3 devices on you, actively connected to the internet.
A recent study in the UK found that users, at home, switch devices 21 times an hour...let that sink in for a second...we switch between, phones, tablets, laptop/desktops 21 times in 60 minutes. More often than not they are watching TV the whole time. Ref. http://www.campaignlive.co.uk/news/1225960/
So bottom-line we multi-task...yes, even us "men"...we do it continuously - switching back and forth even on a single task. So as web designers and developers we need to provide a seamless experience across all screens and platforms as to not loose your users. At first, when we thought of doing “mobile” sites, many people thought they needed to provide a specific mobile experience. Enter .mobi domains, or the mobile. or m. subdomain notation. This meant the content was siloed between the mobile experience and desktop experience. Many websites provide different content and site structure for their mobile users making the switch between devices - we, apparently, like to do 21 times an hour - impossible. Not to mention made content editors’ work twice as hard.
Slides: http://www.slideshare.net/RyanChittenden1/responsively-accessible?qid=b58e16bc-e099-4223-9849-601da27e2132
------
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
Guess what, WE MESSED IT UP - those...those marketing departments! But, really we have no one to blame but ourselves, we are ones that started adding in pictures, colours, table layouts, fixed width/height sizes (more on that in a minute), mouse driven only actions, Flash, and other such fun stuff, because we could - man, who doesn't like building cool stuff, after all we are programmers - put a challenge in front of us and we will do it...and we can always claim the marketing department demanded it (I swear, really)! Of course, the browser wars didn't help matters any either with proprietary tags (Can you say: <blink> vs <marquee> [bonus points to anyone can tell me which tag belong to which browser]), plugins for video, and media.
In the beginning the web medium was hard to define, the first graphic designers came over from world of print design, they chose their canvas - defined width and a height - as they alway have. They opened their tools like Photoshop or Fireworks, they gave us wonderful colours and photos, that literally coloured the web for all of us. They got caught in the same machinations of their past (this is a natural human thing - like my grandfather used to say - "bad habits die hard") and didn't understand the power of the scroll bar, and limited their canvas to the lowest common denominator. Pre-2000: 640 x480, by 2002-3: 800 x 600, by 2005-6: 1024 x 768 and so on. The most important thing they didn't realise they were missing: the canvas they chose was one step removed from the real canvas - the browser.
Fast forward to Today - Yay IE 8 is finally dead! Now we are working with a full suite of modern browsers that basically work all the same - wait a minute…
In 2000, the Ericsson R380 began a trend that literally changed everything - it could browse the web - sort of - but it started the trend we see today. Today the Google Android and Apple iOS power 90% of mobile devices and are responsible for as much as 33% of global web traffic.
Here in Qatar - it is even higher, we are finding many of our clients are approaching 60% of their traffic from mobile devices.
Additionally, many of us have a multitude of devices we use everyday - [interactive poll] how many of us don’t have a mobile phone, and a tablet, and a laptop and a desktop? I am sure the IT people here at QNCC would confirm many of you here today have 2-3 devices on you, actively connected to the internet.
A recent study in the UK found that users, at home, switch devices 21 times an hour...let that sink in for a second...we switch between, phones, tablets, laptop/desktops 21 times in 60 minutes. More often than not they are watching TV the whole time. Ref. http://www.campaignlive.co.uk/news/1225960/
So bottom-line we multi-task...yes, even us "men"...we do it continuously - switching back and forth even on a single task. So as web designers and developers we need to provide a seamless experience across all screens and platforms as to not loose your users. At first, when we thought of doing “mobile” sites, many people thought they needed to provide a specific mobile experience. Enter .mobi domains, or the mobile. or m. subdomain notation. This meant the content was siloed between the mobile experience and desktop experience. Many websites provide different content and site structure for their mobile users making the switch between devices - we, apparently, like to do 21 times an hour - impossible. Not to mention made content editors’ work twice as hard.
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.
- Andy Clarke
Fortunately, some really smart people like John Allspop, Ethan Marcotte, Jeremy Keith, Brad Frost, Andy Clark, Lea Verou, and many many others have lead the responsive web design revolution - now there are many, many resources for web designers/developers old and new to get out there get working on the real canvas the BROWSER.
Think for a moment how can a static fixed width and height mockup convey the what the user experience will be like on so many devices? Simple answer it can't. By designing in the browser you can show your clients, and their users how a site is going to work for them across all their devices.
This is a fundamental shift in the way of thinking of web design, and all the stakeholders, the designer, the front-developer, and most importantly the clients all have to be educated. This changes the game for everyone, new terms like content strategy, user experience (UX), information architecture, and usability become ever more important. Welcome to the revolution, this is the real golden age of the web - this where you can really make the web be all things to all people.
The Golden Age of the Web is NOW!
- Content strategy,
- User experience (UX),
- Information architecture (IA), and
- Usability,
- User centric Design
- This when you can really make the web be all things to all people.
Okay so, we are in the middle of a revolution, and changing the way of our thinking, processes, and delivery - we are still missing one key element. We have gone responsive, we are including all screen sizes, however we are still leaving users behind because we are just designing for devices that have a screen - but what if the "screen" is outputted in brail, what if the "screen" is audio output, what if there is no mouse for input?
Back to Andy's analogy of a website as a river, I will take it one step further Accessibility is the boat, jet ski, canoe, kayak, or hip waders the user uses to enjoy their time at any point along that river.
...my website will meet you wherever you are...
- Trent Walton
"Device-Agnostic" is the latest buzz word that has been floated around the web design world, and to me this term to mean “device unknown”. Therefore build and design the web for EVERYONE.
By the middle of the first decade of the new millennium many of us web developers were lost in the subtle art of CSS, the clever wiles of PHP, and the seemingly arcane powers of “Web 2.0” - behind the scenes the accessibility was gaining steam, building up to the release of WCAG 2.0. However, it just didn’t to show up many developer’s radars, because it just wasn’t a priority of clients.
Presently, thanks to proactive governments around the world, and organisations like Mada, the message is getting out, our clients are demanding accessibility to be baked right into their websites. This is leading more developers than ever scrambling to find and consuming all the information they can find. Thankfully educational institutions like CMU and University of South Australia are stepping up to the plate to include accessibility in the programs.
For us at Fuego, this means implementing an internal policy: every website we produce from now on will be responsive and will be at least WCAG 2.0 Level A compliant whether the client asks for it or not. We will be advising, and educating all our clients to be aware of the needs of all their users and will be encouraging them to WCAG 2.0 Level AA compliance, and get Mada Level 2 certification for those sites targeting users in Qatar. I would encourage everyone in our industry to do the same.
In the last UX Majlis, I discussed many issues with fellow developers. One person’s demand really resonated with me, “give me a template, give me something I can use as a starting point”. Myself I had a similar issue, where do I start? Not only for accessibility but for responsive design.
The biggest hurdle I found as web developer is how to reconcile all the responsive best practises with all the accessibility requirements. This is where I feel the web developer community has not come together thus far. There are numerous sites, and blogs that share design patterns, best practises, frameworks, and boilerplates for responsive websites. There are an equal number of sites/blogs that discuss accessibility and its benefits, but there is almost no sites/blogs talking about them together.
I discovered all this first hand, here at Fuego we have been working on a large public sector website based here and Qatar, and it is going to launched early next week. It will be fully responsive, and Mada Level 2 certified site.
First, I began by breaking down the accessibility goals into checklists - Level A, Level AA, Level AAA, and determining based on what I knew of the content what accessibility guidelines that will apply. Then armed with that information, I began to consider different responsive grids, and frameworks that are available, and to figure out what was suitable. By referring back to my checklists in accessibility I was able to narrow down on a few responsive grids, and a HTML5 boilerplates.
It wasn’t so smooth, I started down one path, then stopped, and started again - I ended up building the home page, only to throw it out and start again because I was discovering pitfalls, and challenges both from an accessibility standpoint, and from a HTML/CSS standpoint. I had to also keep in mind that CMSs clients manage content themselves, and I can’t count on them to add classes to their content.
Finally after a few iterations, I settled on a responsive grid system called “Lemonade”, and used the “HTML5 Boilerplate” for this particular client. The HTML5 Boilerplate has some wonderful accessibility classes and features included, and Lemonade really simplified the grid system so I didn’t have to do complicated math to figure out the width of things. Both are lightweight, and work well with components and widgets that you find in a CMS.
With a lot of hard work, blood (I was viciously attacked by the battery cover of my mouse), sweat, and tears (of joy when the home page finally worked). We packaged it up, tested it with the plethora of devices we have in the office, and sent it off Mada for their kind review. We are still working with Mada on finishing up the last few changes to achieve their Level 2 certification.
Over the coming 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. Then we are going to open it up to the community, so they can participate share their experiences, and their discoveries. And as a community we can grow awareness and get future generations of web designers, and developers thinking Responsively Accessible.
No comments:
Post a Comment