cazmockett.com

I attended the excellent Scripting Enabled conference and developer day recently held in London. It was extremely enlightening about various aspects of the web and how users with varied access difficulties are affected by the decisions us developers make every day.

There were some excellent panels - links to the trascripts, slides and audio etc:

• Denise Stephens talking about her life with Multiple Sclerosis.
• Antonia Hyde from United Response talked about learning disabilities.
• Jonathan Hassell of t he BBC on Dyslexia
• Kath Moonan from Abilitynet talked about Why she hates the Interweb.
• Artur Ortega & Leonie Watson shared their expertise on screen readers and JavaScript
• Audio files for most of the session are available now too

[Kath  hates the interweb!]

[Leonie and Artur talk about Screenreaders and JavaScript]

[The panel takes questions at the end of the day]

Designing User Interfaces: Details Make the Difference

Dan Rubin

The main topics Dan covered were:

• Proportional Design
• Borders, Lines & Layer Modes
• Texture Tricks
• Other Interesting Stuff

Proportion
Creating patterns for margins and padding aids a sense of cohesion with your design - even if it’s just multiples of 5px, 10px etc. Being consistent will look better.
With typography, use relative text sizes to create balance. Use letter-spacing property (aka Tracking) to balance things.

Borders, Lines & Layer Modes
Grids - take the guesswork out of things. But they can be a bit boring - so use certain elements to break the repetition [see below]

Texture Tricks
Reality is rarely smooth - so using slight touches of texture to break up large blocks of colour can make designs seem more natural and less “flat”. Subtle lines & gradients on elements can have a similar effect, and make things feel more tactile. Depth can be inferred with a bit of subtle bevelling of buttons etc.

Almost any image can be used to make a gradient fill for a banner, for instance. Getting a natural, interesting gradient could take ages in photoshop, but sampling a single line of an image, then stretching it vertically to produce a gradient is a really quick and easy way to start. Then use layer cloning/blending to make it more interesting. It’s a trick I’ll definitely be putting to good use in due course.

Other Interesting Stuff
Finally, Dan wrapped it up with a demonstration of a redesign of the Fox News website (which he did purely for his own amusement!). Currently, it’s a mess with uneven margins, padding, borders, heading styles etc. The revamp made it all much more cohesive and easier on the eye. Nice work, Dan!

Oh dear, now I think I might have to revisit this site’s design and put some of Dan’s tips into practice

Dan’s presentation: slides (pdf) | audio (mp3)

Designing Our Way Through Data

Jeff Veen

Jeff’s opening keynote for @media was very thought provoking, as usual.

He spoke about data visualisation and how diagrams can often show us things more quickly and more intuitively than a table of data is able to.

User Participation + Mass of data = designing for data
Data + metadata = information

Make the data useable, you can make sense of it. Add some styles -> makes it more accessible. Example was a rainfall chart. Boring table gives no indication, you have to parse the figures and work it out. But make an icon in each cell instead - colour darker and a bigger raindrop for indicating more rainfall - suddenly the visualisation makes things easily understood. Beware, “prettification” can go too far, and destroy the underlying data.

Jeff also showed us some notable examples:

John Snow
A Cholera outbreak in 1854 in London killed 500 people in one neighbourhood. He figured out with empirical evidence what was happening by plotting the death locations on a map. The local water pump was infecting people  - pump handle removed -> people stopped dying. He effectively mashed up pump location vs Cholera deaths and proved Cholera was a water-born disease. Lead to the development of  Victorian sewers. Found new way of gaining meaning from data.

Charles Joseph Minard
Map and chart for Napoleon’s troops marching to Moscow [see above]. This showed graphically how the number of Napoleon’s troops dimished with time, and location, as they marched to Moscow. And it also showed vividly that thousands of them died whilst trying to cross a particular river - obviously a dangerous spot - by plotting time/deaths/geographical location, it tells you much more about the data than pure figures would convey. Minard said of his map:

The aim of my carte figurative is … to convey promptly to the eye the relation not given quickly by numbers requiring mental calcuation. Charles Joseph Minard

Harry Beck
Tube map designer - Veen showed us before and after views. The old version was very confusing. Leaving out all the dross made things a lot simpler and more intuitive.

Google Analytics
Simplified things. Don’t plot too many things at once. Inspired by Indiana Jones plane journey - dot per datum on the chart. Don’t junk up things too much - remove “chart junk” and things get more comprehesible.

When to talk to people
Lots at the beginning, tails off in a log graph - compared with cost of changing your mind - the opposite. As launch approaches, expense climbs dramatically.

• Look at history
• Look at data visualisations
• Look at users

To help give instpiration for your designs. Books - Edward Tufte:  “The Visual Display of Quantitative Information”

Jeff’s presentation: slides (pdf) | audio (mp3)

The last week of May was designated London Web Week, and I aimed to attend as many events as possible during the schedule. I took the sensible step of staying at a friend’s house in Peckham for a good chunk of the week, as to-ing and fro-ing from Chelmsford would have been pretty costly and inconvenient.

The first do I managed to get to was Tuesday’s Microformats vEvent, where we were treated to presentations from Tom Morris and Dan Brickley.

Putting microformats on the Semantic Web with GRDDL
Another good session from Tom, his slides are now available as a PDF dowload.

One Big Happy Family
Dan’s slides from his talk can be found on Slideshare.

Next up was Mark Boulton, who wanted us to work with typography in a better way.

• Be Appropriate & Adaptable
  Typefaces tell stories, and the web is still playing catchup with this power. Comic Sans is appropriate for the menu at a greasy spoon cafe; you wouldn’t want an invitation to a Black Tie event done in it though. Similarly, the BBC’s use of Gill Sans evokes order and authority. The BBC logo has a twist - by reversing the type and blocking out the shapes of Gill Sans.
  Don’t let type and design get in the way of words.
  Be adaptable to requirements, and appropriate for the story.
• Use Rhythm
  Richard Rutter’s Compose To A Vertical Rhythm explains about using the line height and leading of your blocks of text to best advantage. The basic theory goes: 12px font height with 18px between lines, give a line height of 1.5. You can use incremental leading to make 4 lines of text in the main body of a page line up with 5 lines of text in a sidebar.
  [Text in the sidebar bears no relation to the main body copy. It looks messy.]
  The maths gets a bit hairy: 18px x 4 lines = 72px for the main body. 72px ÷ 5 lines = 14.4px for the sidebar
  If you’re using 10px height for your sidebar text, 14.4 ÷ 10px = 1.44 line height. You may find the sidebar top-margin property needs a bit of tweaking to get it to line up properly.
  [This looks much better now everything is aligned vertically]
• Optical Grey
  If you squint at a block of text, you’ll see the page has different tonal ranges depending on font, leading, letter spacing etc.
  Verdana has a more open shape, so is paler at smaller sizes.
  Combining serif and sans-serif fonts can be effective, giving different “colours”. Minimize dark grey and balance the line height.
• Use The Right Tools For The Job
  Hyphens “-” are NOT em dashes!! “—”. Use an em — or en – where appropriate.
• Use a Grid System
  Use grids as a tool to help you organise information. How to decide how big the grid unit should be? You can subdivide the units too - you might have a 3em high by 4.5em wide block, which divides nicely into 2×3 squares each of 1.5em width and height.
  Choose gutter sizes carefully, it can depend on the relationship between whitespace and font size.
  Using Alternate Row colours in tables must be done with care - don’t use colours which are too strong.
  Set type to your grid, and align everything! The smallest error can really stick out.

In Summary
Typography is all about the details. Tiny increments can make a huge difference. The full slides are available at Mark’s website.