UX Cambridge: Vasilis van Gemert, New Smarter Defaults in Web Design

Vasilis van Gemert is a Dutch developer living and working in Amsterdam. He is currently the Principal Front-End Developer at Mirabeau and a member of the Fronteers board. His personal site is vasilis.nl, he posts links daily at dailynerd.nl, and tweets at @vasilis.

Edit: You can now access the slides from Vasilis’s talk on his website.

  • More and more you hear people say the web has changed – but how has the web changed?
  • The size of the web has changed; we’ve gone from 640×480, then 800×600, now it’s 1280, but also 320×480 — the web isn’t growing any more
  • Everybody has a mouse — except for everybody that doesn’t
  • Everybody has broadband — except for everybody that doesn’t
  • All monitors are calibrated — only those of visual professionals
  • Computers get faster every year — except for those that don’t (and we want stuff that lasts for years)
  • The Dao of Web Design was saying the same thing years ago
  • futurefriend.ly described how you could develop for the future (but basically said “We don’t know”)
  • Old Kindles are good ways to test contrast of designs
  • Last month, 60-70 different mobile devices entered the market
  • Going to talk about some new defaults positions we should consider for interaction design, visual design, content strategy, functional design
  • New default: Touch First – a standard dropdown menu with a touch device doesn’t work (there is a default link for the top-level, click area is too small for fat fingers. Redesign, make bigger links, suppress the top-level link. Never forget the keyboard, don’t remove the focus outline
  • Think in layers – progressive enhancement (“is a principle, not a technique”)
  • On the web we have to support old browsers, modern browsers, future browsers, robots, humans, small screens, fat fingers, etc.
  • The web design stack: content, typography, layout, paint
  • Content will work for everyone, any browser. Typography works just about everywhere (small screens). After that let’s think about layout.
  • New default: Small Screen First
  • Expanding a website to fill more space is easy, but shrinking to a small screen is hard – forces you to focus, what’s really important, first things first
  • Brad Frost’s Ish (http://bradfrostweb.com/demo/ish/) to test sites at different screen sizes
  • It’s up to the visual designer to decide breakpoints — never let the developer decide these things [laughter]
  • Showing a video of filling in a non-optimised form on iPhone (scrolling, wrong keyboards) and improved version (top-aligned labels, html5 input types)
  • New default: Content First
  • How we used to make websites — a logo, navigation, sub-nav, widgets, footer, then cram content into space left over
  • Now we start with the content… and then ask yourself; do we need widgets, sub navigation, header, a logo? (example – all blogs used to have a sidebar, now the ‘default’ is to not have a sidebar)
  • If we do need these things, do they need to be in the place where they are? Logo is in the most important, expensive place. Header is huge — but people come for the content, not for your header
  • Browsers are our friends, not enemies (mostly), this means clean code, this means we can actually redesign a site — we always talked about redesigning with stylesheets only, but it was never a reality due to browser issues; now it could actually be possible
  • New default: CLI First – the web is not just articles, what devices will we use in 2 years?
  • Use the command line – test your app before you design it (see Luke Wroblewski’s article, discussing how they built and tested the API before they designed the site) — it’s a really interesting approach, so find a good nerd to work with
  • A solid API also lets others do the work, and they can make things you don’t have the time or imagination to make

Sketchnotes of the session by Jenny Willatt:

Sketchnote of Vasilis van Gemert talk at UX Cambridge 2012

6 thoughts on “UX Cambridge: Vasilis van Gemert, New Smarter Defaults in Web Design

  1. Thank you very much for the quick notes! With all the links too, that’s very handy. A few minor corrections: I a Dutch, not Greek (I do have a Greek mother though) and I’m the Principal Front-end Developer, not the lead developer. I’m not *that* clever (-:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>