Handheld Conference 2013

An amazing conference, in a beautiful venue, with fantastic speakers and extra entertainment as bonus! Craig Lockwood created something magnificent today — and then told us there won’t be another Handheld next year! Let’s hope he’s just changing focus rather than stopping organising conferences.

Handheld this year was two conferences in one — the previous night's mini event and the much larger full day event. The main conference was focused mainly on responsive web design — and the implications that brings to the design process and to the implementation of the sites. Last year was a mix of both native and web experiences, and though we lost the native side, the web side was very strong — with speakers being the authorities in their areas (the people who wrote the books that everyone should read).

Some highlights before you dive in to my notes below:

• Hearing icon design tips from Jon Hicks, the designer of the Firefox logo, Skype emoticons and many other big name logos
• Learning about improving business participation in the design process from Andy Clarke & Mark Boulton: mobile and responsive design has big impacts on the design process that extend not just to the artifacts (comps, wireframes, etc) but also on the communication and interaction between the business, the designers and the developers.
• "measure your success in decades" — Jeremy Keith on web design
• "XML is like violence: if it doesn't get you what you want, you’re not using enough of it" — Graham Lee
• and, of course, Ling Valentine of Ling's Cars (if you haven't seen her website before, you must look now!), appearing on stage as a Dalek!

If you like your information visual, Luke Murphy from Ubelly wrote up some beautiful sketchnotes of the main conference.

intro + guess who

Syd Lawrence @sydlawrence, We Make Awesome Sh

• over 1,000 people in audience
• rickrolled the audience using twilio, node & pusher!
• everybody sent SMSs in with their seat column number
• then made calls back to 8 people in each quarter of the audience — playing 4-channel audio across the auditorium
• (unfortunately all our lanyards had been mixed up and only one person received the rickrolling call… but it was a nice idea)

The Long Web

Jeremy Keith @adactio

• 1907: Francis O’Neill, chief of police in chicago, noted down 1001 Irish tunes - The Dance Music of Ireland (“the book”)
• 1991: ABC musical format invented
  • text file, metadata at top, notes at the bottom
• mid-90s: Jeremy launched http://thesession.org
  • started by self-publishing a song a week
  • but soon needed other people to contribute tunes
  • 2001: allowed other people to submit tunes in ABC — Jeremy would then convert to sheet music & sound files
• site then languished for 10 years — still being used but Jeremy had no time to improve it
• finally got around to rebuilding the site in 2012
• interesting to see what had changed in web development in a decade
• biggest change: environment is no longer a desktop/laptop computer
• open device labs
  • Jason Grigsby tried to set one up properly in Portland with lawyers, insurance, etc. but got slowed by red tape
  • Jeremy just started with a tweet inviting people in to the Clearleft offices to test - then people started donating devices
• mobile first: mobile forces you to prioritise
• can also think about content first (or task first)
• Jeremy likes to start URL first
  • forget screens completely
  • think about structure of URLs
  • almost like doing an API design
• don’t think about the layout first — instead think about the individual pieces of content (pattern primer)
  • forces you to be very modular in your CSS
  • all the pieces must be able to work in any bit of your page
• if you’re thinking content first: then navigation comes second
• thesession.org does navigation by having navigation at bottom of the page — revealed with a simple hyperlink to the bottom (with a hyperlink back to top under the nav)
  • (capable browsers with more space have CSS to move it to the top)
• the logo is progressively enhanced too
  • full CSS support shows stitching, shadows, etc
  • less support means that the text & colour is still there but the details go away
  • error handling model — browser will just ignore stuff it doesn’t understand
• other progressive enhancements
  • escalators (enhanced stairs)
  • moving walkways (enhanced floor)
  • electric toothbrush (enhanced toothbrush…)
  • these rely on electricity to enhance but would still work without (kind of…)
• use javascript but don’t rely on it
• Jake Archibald (@jaffathecake): every user is a non-javascript user while the page is loading
• Andy Hume: progressive enhancement more about dealing with things failing rather than things not available
• don’t merge the stack levels — use javascript to enhance the HTML, not replace it
• on thesession.org have an ABC to sheet music form
  • by default submits a form that returns a GIF
  • with javascript, uses a JS lib to turn ABC into inline SVG
• similarly sparklines: previously used Google static charts
  • but google have deprecated the service and will be shutting it down in 2015
• instead generating sparklines using SVG with contained javascript
  • same SVG file, with different query parameters for data
  • could also put CSS (including media queries) in the SVG
• but SVG sparklines were slowing down the page load
  • so used conditional loading
• watch out for script loading in middle of page
  • especially third parties
  • the loading of your page stops until that script has finished loading
  • if it’s a third party script, you’re now dependent on a third party server to finish loading your page
  • e.g. if it’s twitter and the page is loaded from China, then your page will never finish loading… (twitter is blocked)
• “measure your success in decades”
  • the inventor of CSS put a bet on to say that HTML would be around for 50 years
  • he’s recently upped his bet to 500 years
• http://futurefriend.ly — the best way to work on future devices is to be backwards-compatible

Bruce Lawson on guitar

Bruce Lawson (@brucel) usually has a speaking role as Opera’s developer advocate, but today he taught us about HTML through song! The first, “like a rounded corner”, bemoaned the life of a CSS developer struggling with making his site lovely for iPhones:

Rounded Corner - Handheld 2013 from Besquare on Vimeo.

…the second was an ode to HTML5 to the tune of Living Doll (let's hope the video goes up for this soon too!):

• it’s so much better than five…
• never completing, flash defeating, living standard :-)

Living Standard - Handheld 2013 from Besquare on Vimeo.

Icon Design Process

Jon Hicks @hicksdesign

Jon was co-designer of the Firefox logo

• single icon files -> sprite sheets -> icon fonts
• less http requests, small size, scalable for different resolutions & sizes
• accessibility issues
  • can use unicode private use area to prevent reading out
  • but might also need to add an invisible span if no other indication on the page
• can use opentype ligatures to replace whole words with icons
• colour?
  • Apple have created an emoji font with 128px square PNGs — works but not scalable
  • BBC Weather use different glyphs that they colour individually — when combined they make a colour image
  • can do the same with a company logo
  • Microsoft Windows 8 emoji set uses layered characters with colour information built-in — means they are completely scalable — and translates automatically from Apple emoji font
• fonts available online, e.g. pictos: 324 interface icons
• discovery phase: usually start with 16px grid but consider an odd-numbered grid for some cases (e.g. arrows)
• two kinds of icons: models (iconic, real-world) & symbolic (learnt)
• follow conventions — use what people know already
  • use google image search
  • or the noun project: with a tag search
• don’t forget local knowledge
  • owl in East is stupidity
  • bowing in Japan needs hands clasped in front — otherwise it means “I want to die”!
• boxes and arrows survey of filled vs outlined
  • found that iconic, realworld icons were recognised faster than symbolic, but outline/filled made not much difference
• differentiation: padlock, handbag, 20kg weight
  • think about adding subtle differences
• tools & styles:
  • decide size, output format
  • see all icons in context together
  • balance can change depending on context — you might want to move the icon up or down to align with the rest of the icons or text
• outputting a font
  • need to convert any rounded corners, expanded strokes etc
  • reduce anchor points as much as possible — reduces file size
  • easier to do this in Illustrator rather than Sketch
  • end up with a folder of SVG icons
  • then use font custom command line
  • glyphs app (expensive but worth it)
  • github did a blog post on settings
• access icon on page:
  • data-icon attribute
  • class=”icon-blah”
  • use aria-hidden="true" to help with screen readers
• alternatives to icon fonts:
  • all icons in an SVG file — with LESS or SASS to calculate the resulting CSS
  • makes it easy to adjust
• webcode app
  • lets you code in CSS or SVG or canvas (JS)
  • but canvas is larger file size
• further reading:
  • Brian Suda: Creating Symbol Fonts
  • Jon Hicks: Icon Handbook

an open letter to the industry from an 8 & 11 year old

Again, a brilliant intervention — video and transcript available on Vimeo (or listen below):

An Open Letter - Handheld 2013 from Besquare on Vimeo.

The Business of Responsive Web Design

Mark Boulton @markboulton

• redesigning the CERN web site
  • “next year we’re likely to make an announcement which will fundamentally change our understanding of the universe — and we want your help to make it”…
  • people wanted to know updates
  • from different perspectives — from particle physicists to random public
    • scientists want words and specifics
    • general public still want updates but need gentler explanations & pretty pictures — the pictures don’t need to mean anything or even be related to the content
    • teachers & students want updates with things to do, lesson plans etc
  • same updates need three different perspectives
  • but then you need structured content and a whole new CMS & editorial process…
• in news, story is no longer headline, subhead, image & caption
• now it’s a seed with lots of links together
• “meta data is the new art direction” @studip101
• in old-style advertising, agencies would win an account, not a project
  • take time to understand our issues, to get to know us
  • accounts involve more risk, but greater rewards and closer communication
• house of cards & netflix:
  • kevin spacey said we don’t want a pilot
  • want a longer view on development of the series, without the restriction of cramming everything in to the first episode
  • only netflix said yes…
• sometimes useful to let the client beat you up a bit for a while until they wear themselves out
  • an aspect of working on an account not a project
  • painful in the short term, but leads to better relationship & understanding
• if your process is to gradually improve fidelity over time, where is “the design”?
  • it’s not really there any more…
  • no big reveal, no final document
• marginal gains — fix small percentages all over the place
  • but you need to look across the whole system
  • e.g. cycling teams take their bedding with them to ensure a good night’s sleep
  • if you’re struggling with a particular CSS you may want to look elsewhere in the system for a small gain
• we’re breaking new ground at the moment — so it’s all hard
• but we’re leaving a legacy for the future

carefully everywhere

Brendan Dawes @brendandawes

• title comes from an e.e.cummings poem:

  as when the heart of this flower imagines
  the snow carefully everywhere descending

• film posters are data viz

  • the story of the film —> an iconic image
• symbolize and summarize
  • e.g. Ridley Scott selling Alien: “jaws in space”
• photoshop like elvis
  • originally leather jacket, streamlined, designed for compositing large images
  • now it’s like fat elvis on the toilet…
• making tools for playing with graphics
• making dynamic logos
  • flocking points with trails avoiding words (almost)
  • word made of springs with collision avoidance from several circles
• you can represent everything with numbers
• and then you can transpose those numbers into other systems
• flash was great as it was self-contained (and didn’t need to check it ran in lots of browsers…)
  • ed: we’re still waiting for good tools for interactive web design
• building an app called Kennedy
  • captures the now: weather, current headline, etc
  • you own your data — can export to visualize yourself
• happiness machine:
  • finds people saying they’re happy on twitter
  • prints out their tweet on a receipt
  • receipts are much more personal than larger piece of paper
• french new wave cinema came about ‘cos there was a 16mm camera that you could hold in your hand
  • new camera angles, new scenarios
• using sound to animate & extrude a 3D object
  • can then print it out
• data waffles: 3D printed 3D graphs

When responsive sites work as well as a chocolate iPhone

Ling Valentine @lingscars, Ling’s Cars

Pushed onto stage in a Dalek costume by Andy Clarke & Jon Hicks!

Ling then proceeded to tell us that responsive design just doesn’t cut it.

• it’s a mobile phone not a TARDIS
• Ling's Cars website makes it enjoyable to read lots of information!
• buying a car is one of the biggest decisions you can make — a car lease is a 1-3 year commitment
• good quality video, pictures, etc requires lots of bandwidth
• most car dealers have even given up on the web — they just say call us now or visit us in the flashy showroom
  • Ling relies just on her web site
• but it’s really important to satisfy all the people who start on their smartphones
• start by building up trust with them — let them see the enjoyable information and encourage them to visit the main website with more time
• mobile site is attention grabbing — different from main web site
• first link is a free car!
  • send me a PDF via email
  • and a link to remind them to check the full website later
• various games to get people to interact — then get them to start reading car deals

Crafting your Toolset

Eddie Machado @eddiemachado

• created bones (a starter theme for wordpress)
• Craig asked Eddie to build the Handheld 2013 site and use it as a case study for building a response site
• start with a design persona
  • http://aarronwalter.com/design-personas
  • visual lexicon
  • don’t forget personality traits & voice
• sketch everything and share it as much as possible
  • don’t hold out for a great reveal
  • things move much faster if you communicate
• mock up little elements
  • Sketch app is good for this
• establishing a colour theme
  • work out complementary colours: http://sassme.arc90.com
• sass structure
  • partials — grid, mixins, etc
  • modules — components
  • breakpoints — different sizes & non-media queries
• icons
  • icon fonts from http://icomoon.io
  • picking up icon using class on a span
  • SASS lets you create an array of subclasses with a for loop
  • let’s you create named classes with their unicode references easily
• using grids from gridset
• autoplay videos don’t work on touch devices
  • so used plain images for mobile
  • included video sources but in a div not a video element
  • on non-touch (desktop) devices, swapped out the div for a video element using javascript
• checking page size using http://mobitest.akamai.com/
  • also use http://tools.pingdom.com/fpt
• use a similar technique for background images on mobile
  • leave them out by default
  • add them in using javascript

Codename Prometheus

Aral Balkan @aralbalkan

http://indiephone.eu

• top 50 web properties are closed silos other than wikipedia
• indie OS + indie Cloud + indie Phone
• will be crowdfunding in 2014
• planning to ship in 2016

How to call your client an idiot without getting fired

Andy Clarke @malarkey

• client participation is currently broken — how can we fix it?
• the challenges of responsive design are not in design & implementation
• many problems stem from the workflow
  • not something you can easily control
• pre-planning stage
  • content audit, information architecture, etc
  • user stories, personas, scenarios
  • screen blueprints, storyboards
• but the tools can limit creative experimentation
  • e.g. wireframes shown to & signed off by client even before they get anywhere near design studio
  • want to avoid setting expectations in the minds of the client
  • but the wireframe layout gets ingrained in the client’s mind — so difficult to move away from them
  • big problem if you need to cater for different screens
  • e.g. start a new claim / edit an existing claim works side by side, but doesn’t fit on mobile — lose the second item below the bottom of the screen
• try to move from documentation to better communication
  • a written description can leave the door option
• visual design:
  • static visual assets (comps) being used as currency
  • exchanged as specs, blueprints, QA tools
• but these should not be used in place of communication…
• it’s impossible to write a functional specification that reflects responsive design
  • especially when technology moves so quickly
• need to do open-ended planning
  • admit that things can change
• but combine graphics tools with code
  • design for the medium, using the medium
  • use tools like http://hammerformac.com/ and http://vanamco.com/ghostlab/
• go from testing to prototyping, all with the client in the room
• but having the client sitting over your shoulder can make a lot of people uncomfortable
• many customers still expect to receive static comps as design deliverables
  • are pleasantly surprised when told they’ll receive code
• designers & developers need to work much more closely together — and understand each other’s constraints and aesthetics
• static comps can’t demonstrate:
  • liquid layouts
  • flexible font styling
  • native forms
• can do atmosphere
  • typography
  • colour
  • texture — decorative elements, etc
  • ed.: this is kind of the same as Jeremy’s pattern primer
• Andy might start with photoshop for atmosphere, then go to pencil sketches and code examples
  • results can be a little soulless
  • but nothing stopping going back to photoshop to add detail
• clients love to be involved; to be part of the process
  • sometimes suggestions can add real value
  • other times they might not… it’s ok to tell them!
• rules
  • never ever share a picture of a web site and just ask for thoughts
  • don’t do a big reveal after weeks & weeks of waiting — keep client involved all the way through
• try to work physically alongside
  • if not, have daily Skype calls and a shared DropBox
  • even then, the client gets scared sometimes: “it’s not going to look like that is it?”
• have banned unstructured feedback!
  • don’t accept any feedback via email or phone unless it’s part of a structured feedback session
  • ask for specific feedback — typography, colours, styles, layout, etc
• don’t underestimate the value of the design input
  • not about ego, but respect for the work
  • just because the client is paying, doesn’t mean they get to have everything they want
• can set rules about how to receive constructive feedback
• take the time to explain the design thinking behind the outputs — clients are then far less likely to want to make changes just to make a mark
• host feedback workshops — and use them to get to know the client better
• another rule: only people who turn up to design workshops can comment or criticise the designs
  • this includes the CEO :-)
• it’s ok to say that client’s ideas are stupid…

Ten Commandments of Modern Web Design

Jeffrey Zeldman @zeldman

1. thou shalt entertain
   • Panic’s web site — they’re just apps in dull categories but they have a personality — and therefore a following
   • a list apart: geeky articles — but have an in-house illustrator
   • you don’t have to be an “illustrator” to draw — just try it yourself
   • old flickr used to welcome you in different languages — light touch, but subtly reinforces global reach of photography
2. test everything (including assumptions)
   • use Adobe Edge, Remote Preview or Ghostlab
   • can’t choose breakpoints based on specific screen sizes
   • recommendation: choose types of devices
3. thou shalt iterate
   • milton glaser: what is graphic design? “I move things around until they look right”
   • the web is always iterating
   • positioning sharing links on A List Apart:
     • tried to guide people to read down to the bottom before sharing — people stopped sharing
     • put teeny sharing labels at the top — lots of sharing
4. thou shalt ship
   • if you can’t delegate at the pixel level, you’ll never ship
   • even if it’s not perfect — you must ship
5. engage thy community
   • instagram stumbled when they upset their community by changing their licensing
   • monotype featuring independent designers on fonts.com — humanising the big company
   • a list apart: letting people opt-in to showing tweets on blog — until twitter changed their API and it stopped working
6. love thy user as thyself
   • think about use case compassionately
   • don’t make assumptions about amount of content
   • but do make assumptions about priority
7. thou shalt experiment (I think)
   • can play on your own personal site
   • zeldman.com: trying out content first with big type and no extraneous distractions
   • followed by 37signals, Medium, USA Today, New York Times, etc
   • ask how you can take things away from the page?
8. thou shalt make magic
   • instagram uploaded pictures in the background while you were still typing the comments
   • it worked magically fast
9. thou shalt prioritise
   • how to prioritise
   • kick ass kickoff meetings
10. to thine own self be true
    • hay net — used to be need hay / have hay
    • but then added lots of extra guff and completely lost the simplicity of the main form

…and this is not religion — it’s only design!

Finale

…singing We’ll Keep A Welcome in the Vales — When You Come Home Again to Wales

Welsh Veterans Male Choir - Handheld 2013 from Besquare on Vimeo.