Responsively Accessible

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.

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

http://stuffandnonsense.co.uk/

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

http://trentwalton.com/

"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.

Project Blackout

The wonderful part of Minis are that they are customizable, so you can express yourself through the look of your car.  There is a wonderful set of parts, gadgets, badges, graphics, sunshades, seat covers, etc.  available for all Mini owners.

My mini, Sera, is brand new, so I wanted to start small.  Her headlights, grill trim, door handles, gas cap, and taillight trims are all chrome.  Hunting around on the internet I found many other Minis de-chromed and looked really sharp.  Since, I was running with the black roof and chilli red paint scheme.  I thought I would do the same.

Before

New Side Markers

I have ordered headlight trims, taillight trims, these were official Mini parts I ordered from a http://outmotoring.com.  These were an easy swap, 20 minutes or so.  The other official Mini parts I bought were black side markers.

Speaking of which, quick tip, keep track of all the fasteners you take off and put them back when you are done!

I have managed to lose 3 of the fasteners when I got so excited about the side marker install I forgot to refasten the weather seal that keeps water out of bottom of the quarter panel.  Doh!

Speaking of swapping parts, I did add a little personality, and fun to my Mini by swapping out the puddle lights under each door.  These were a really simple change, pry out the stock lights and put in the new lights.  Since the puddle lights were first designed for older model Minis, I had to use the included wiring adaptor, while this added 3-4 centimetres to the wiring harness it all tucked up into the door just fine.  I got the lights from http://www.gobadges.com.

I also snagged a Black Chrome Carbon Fibre Stubby Antennae, and matching Value Caps.  The stock antennae was huge, I am glad I went with the shorter antennae - it looks WAY better.  That is as far as I could go with the swapping of parts.  Now onto the sticky (err tricky) bits.

Passenger's Side

Driver's Side

So for the rest I ordered, "blackout tape" for the chrome strip at the base of the windows, door handle covers, and gas door cover.   The blackout tape is this weekend's project.  But for the gas cover and the door handles, it was a simple clean, and prime with alcohol, and stick the laser cut pieces in place.  Really simple job to do, and you don't need any tools for, it way cheaper, and easier than replacing the chrome bit if they are available to order (and for my Mini they are not).

I will get to the blackout tape next weekend, along with laying out the positioning on my new spoiler winglets!  More updates soon!

After

Smashingconf Oxford 2015

My company was gracious enough to send me to my third SmashingConf March 17-18, 2015 - this is a my second time to the Oxford version of SmashingConf.

As with years past, my mind was opened, and shown new ways of thinking, and of doing things.  The speaking schedule is gruelling and sometimes down right overwhelming, it takes 2-3 weeks to fully digest all I learned/heard/watched.

My Day 1: March 16th - Flexbox Explained!

I participated in a workshop prior to the main event, with Zoe Mickley Gillenwater.  She is a wonderful teacher, and workshop presenter.  The format she used was excellent.  She would introduce a concept, and make us all do an exercise to utilise that concept.  Also, the concepts she chose were very realistic and have real life applications.  I plan to run my team through the same exercises, so they too can learn flexbox.

Zoe also presented it as a progressive enhancement, so it is not a all-or-nothing type deal.  Build you page the way you normally do, then make it better with Flexbox for the browsers that support it.  Being CSS only solution Flexbox is very easy, inexpensive progressive enhancement and your website will work and look better for it.

I was lucky I was able to have dinner with Zoe, at Eagle and Child Pub (trivia: the very same pub where Tolkien came to drink) the following day, and really enjoyed comparing notes on working abroad, and raising a family.

My Day 2: March 17th - Brain Overload Begins

Day 1 of SmashingConf

Everyone of these talks were Smashing! The following were the real highlights for me, however the slides and eventually the videos will be available here: http://lanyrd.com/2015/smashing-conference-oxford/coverage/

Christopher Murphy's kickoff talk was really good - he is a very dynamic speaker! His talking about being a good writer makes you a good thinker, actually inspired me to start writing this blog.  With profound quotes such as "Writing rewires your brain.", and "...writing as a process, a process through which new ideas are developed, challenged and tested..." - I just had to start to write.  Stay tuned.

"...writing as a process, a process through which new ideas are developed, challenged and tested..."  - Christopher Murphy

Yoav Weiss' talk about responsive images really gave me a lot to think about.  This new tags surrounding the <picture> tag and the new attributes for the <img> tag were a bit confusing at first, but it will be really interesting to see how the browsers start to implement this.

Day 2 of SmashingConf

Bruce Lawson's talk on browsers, specifically Blink based browsers (Chrome, and Opera) was a cautionary tale about history repeating itself.  Back in the early 2000s IE6 enjoyed a 80% market share, and as much as it kills me to say it, IE6 was lightyears better than the competition (Netscape).  Because of this many developers, including myself, targeted that 80%.  As Chrome continues to grow to dominate the browser market we are in danger of the doing the very same thing.

Didn't get much time to digest it all, after dinner headed over networking event/part at Freud.  I packed it in early, didn't want to kill too many brain cells :-)

My Day 3: Brain Overload Continues

The mystery speaker was Christian Heilmann! He gave a fantastic talk about the web and how we are screwing it up and making it difficult for new developers to get in on the action.  Many people in the industry are saying you need to know certain frameworks or user certain productivity boosters.  That is just not true, the web is still HTML, CSS and a little JS.  Productivity boosters like Grunt, and SASS are great tools but bottomline beginners need to begin with the basics.

Christian Heilmann also moved from Mozilla to Microsoft, and there were some hints about Spartan and some of the cool things they are working.  My company's creative director, Dom, and I got to chat with him one-on-one during a break, I was able to ask some questions I have been dying to know.   Is Spartan or whatever they end up calling it really an all new engine or is it a reskinned Internet Explorer?  Christian told me that it is an all new HTML5 rendering engine.   Also, he mentioned how the Google, Microsoft, Opera and Mozilla guys are actually talking to one another, the future for our browsers it definitely bright.

Paul Lewis and Jake Archibald both talked about some really cool JavaScript stuff improving the performance and making content available offline.  I really need to get into their ideas more, see how I can use it to make the websites I make better, and faster.   I think some of their idea are especially helpful when you think about hybrid apps for mobile and the desktop.

Remember all the slide decks are available here: http://lanyrd.com/2015/smashing-conference-oxford/coverage/

My Day 4: All Things Responsive Design Workshop

This workshop was intense we covered so much material - I could barely absorb it all.  Vitaly Friedman, editor-in-chief of SmashingMagazine was awesome and worked hard to cover all the topics he wanted to share with us.  The workshop broke down into sections.  The first section was about his design process - get to high fidelity design in 2-3 weeks - this is because he is an consultant so he is only onsite with a client for a short period of time.  The second section about what I really cared about - responsive site performance.

He gave a slide deck with 1000+ pages - obviously he hit only the highlights, but I am looking forward to breaking down the deck into more chewable pieces and sharing that with my team.

All-in-all a very worthwhile trip to Oxford and to see the folks at SmashingMagazine.  If you are a web developer or web designer, this is definitely a worthwhile conference to attend, they hold SmashingConf at a variety of places all over the globe.  Check it out at: http://www.smashingconf.com.

SERA - 2015 Mini Cooper S

Blazing the way through traffic, and generally making the daily commute fun!

Delivery Day at the Dealership

Sera, short for Seraphina, is our little blazing angel for lane carving through the grind of traffic in Doha.  She joined our family on Feb 8th.   Sera is the first car I have purchased current model year and to my exact specifications.  I have always owned used or previous year model cars.

Sera is a 2015 Mini Cooper S (F56), she is the second year of the 3rd generation MINIs since BMW took over the brand.  2.0 litre, 6 speed automatic (w/paddle shifters), variable dampened suspension, 18" wheels, panoramic sunroof, and many more techie gizmos.  I think that is part I love the most about this car, all technology to explore and utilise.

I have discovered a great community of F56 owners, now because it is forum there are many posts about "niggles" people are having with their cars, but weaved in there are great tips and information about features, how to maintain, how clean, and to enjoy the most out of your car.  If you are interested check it out http://www.minif56.com.

Stay tuned I will be posting more of my exploits in tweaking the look of my car, and making some simple upgrades for maintainability and better performance.

Father, husband, petro-head, web developer

These are the things that make up my universe.

I am the father of 2 wonderful children.  Tyanna my eldest is a beautiful, and talented, drama queen.  Seriously, she is a great actor.  Calvin my youngest, is a smart, athletic giant! He bigger than me - not that is terribly hard considering I am only 5' 10".   Watching the 2 of them make their way in world on their terms gives me great pride and joy.  For their privacy, this is all I will say.

I am married to my soulmate, my true partner, Mariee.  She is my ray of sunshine, no matter the weather.  12.13.14 is the day that I will never forget.  We declared our love in front of our families, and friends.  This is just the beginning of our journey, and I plan to share some of our travels here.

RYAN AND MARIEE 12.13.14 from Ryan Chittenden on Vimeo.

Back in my university days, I got lost, and my dad put me back on track by hiring me to work with him in his wrecking yard.  This is where I developed my love of cars, well, pretty much anything a motor.  I learned to tear down motors, transmissions, suspensions, brake systems, steering systems.  I really enjoyed my time with my dad.  Ever since I like to tinker my vehicles.  My latest project is my 2015 Mini Cooper S Hatchback.  Stay tuned for my trials and tribulations with my projects for any of my project cars.

I have been building websites since September 28th, 1997.  I don't know why I can seem to remember the exact date, when I am not sure what I had for dinner last night, but the brain just works that way.  I started off humbly - just fixing bugs, updating sites in HTML/CSS and JS.  I used tables for layout because I didn't know any better, and well CSS support was sporadic at best.  

Fast forward until today and I lead a team of fantastic web design/developers.  Each with their own strengths and know how.  We build responsive, accessible, well designed, well built websites and mobile/hybrid apps for a variety of enterprise clients around the world.

All in all I am a very fortunate, and my life's roads and potholes has given me a pretty fabulous universe to live and grow in.