AEA12: Interacting Responsibly

AEA12: Interacting Responsibly Picture

Your website is being used in ways you may not expect. Between screens small and large, bandwidth constraints, varying capabilities, assistive technologies, and diverse input mechanisms – mouse, keyboard, touch, sensors, device buttons, trackpads, etc – multi-device development requires an awful lot of consideration to do well! Thankfully, there’s plenty you can do to be prepared. Learn how to think and build defensively to create experiences that not only work most anywhere, but take advantage of the latest browser capabilities and are ready for your users’ next move.

Scott Jehl
@scottjehl
Responsibility in Responsive design

Accessibility and empathy go hand in hand. Accessibility goes beyond the needs of those with disabilities. It means being able to access the things that we build on the the web and removing the barriers.

As he travelled in Southeast Asia, he found that most people access the web over a cell connection. Access was a lot slower. A lot of the web didn’t work as well as he was used to.

Disgraceful Degradation (noun):  A shocking unacceptable user experience.

Accessible, but is it responsible?

Takeaways…

  • Delivery Systems - http requests are a gamble. A chance to fail.

We are overly presumptions about…

  • our users
  • about the networks
  • about how people use our sites
  • about the scripts we install and whether they load

A lot of this is our fault.

The average page in 2012 is over 1MB. Why are pages so heavy. We are burdening our users with developer conveniences. 196kb is the average amount of JavaScripts.

“Am I thinking about my own clock, or the user’s?” Paul Ford, 10 Timeframes - Contentsmagazine.com/articles/10-timeframes/

The good news? We are in control. We are the cause but we are also the solution. We have to be creative.“We have to be prepared to discard old ideas…” Nicholas Gallagher.

Let’s fix some problems

HTML Problems

Time Ideas Page is an example of a typical page. It includes 200+ requests.

Options for slimming down a page:

  • Reduce features and remove content
  • Prioritize loading of essential content and defer the rest!

We often think of progressive enhancement as a css, js issue but we now look at it as a content issue as well.

Check out the South Street Projects that allow you to defer content loading.

  • AjaxInclude
  • QuickConcat - Allows many AjaxIncludes, with only one http request
  • AppendAround Pattern - Responsive Source Order

CSS Problems

  • Mobile First CSS - sends large amounts of code that the device will never need.
  • In all browsers, every link is requested. Moving css to device specific stylesheets is not an option.

What can we do today?

Esential (South Street Project) - figures out which css should load immediately, which should load lazily (without blocking) and which shouldn’t be loaded at all. An experimental project, may not be recommended for use.

Images

63% of the average 1MB page are image files.

Picturefill (South Street Project) - works with div’s and not the picture element.

  • Responsive, no overhead.
  • To be used for big, impactful images.
  • Can deliver Retina images.
  • If you pay per MB or GB, you develop more responsibly. You also self censor the sites you visit.
  • Features Responsible Defaults (HD vs SD version).

Javascript

Second heaviest when it comes to page weight.

Enhance (South Street Project) - a pattern used on the Boston Globe site. Helps developers decide which scripts need to load on a particular device. A reworked version of the original Enhance project.

Problem with JS is not just that it blocks content loading but that it’s too heavy! It’s time to start crafting JS like we craft CSS. We need to put care into our JS.

Wrap (working title) - a DOM framework for writing only the JS we need. Will be released within the next couple weeks.

  • Minimalist DOM utility
  • Very light and fast 2KB
  • Qualified to modern browsers (IE8 and up)
  • Works with AjaxInclude

Related Links

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins