Back in April, I requested through my boss at the time to attend a web development conference called HandHeld. It promised to be a great event, with speakers including Jeremy Keith and Jeffrey Zeldman. I was lucky to have this request approved, and therefore spent two nights away last week attending this great event, held at the Millennium Centre at Cardiff. Before the main event on the Thursday, I went along to a pre-conference event on the Wednesday evening. It consisted of several 20 minute talks on Arduino experiments, NodeCopter demo's and the like. Very interesting stuff - I've never seen a JavaScript-programmed drone bouncing to dub-step before! Thursday saw the conference proper take place. Starting bright and early, the audience played Guess Who? using SMS and lasers - nothing specific to take away here, as it was more of an exercise to get the audience engaged at the start of the day. In between each talk was a small feature or comedic interlude, featuring everything from the Welsh national anthem being played Hendrix-style on the guitar through to gymnasts climbing high into the air. For me, Bruce Lawson's comedic guitar performances and the open letter to the industry were spot-on. I've summarised the talks given during the conference below:

The Long Web - Jeremy Keith

Jeremy Keith is someone I first had the pleasure of meeting back in 2005 when I worked for a large Swiss agri-business during my industrial placement year at university. Jeremy gave a talk entitled "The long web", with the major theme being about introducing longevity in to everything we do when developing for the web. The main theme is one that resonates with responsive deign principles: You cannot predict what device someone is using. He goes on to talk about making web pages work at any time, past and future.
  • Set up a device lab - having a broad spectrum of devices with differing screen sizes, resolutions and capabilities gives a nice broad spectrum to future-proof your site. If you cannot set one up, check out open device lab to see if there is a public device lab you can use.
  • Content is king. Think - what is the most important task the user needs to do on a page? That is what your content needs to be geared towards.
  • Design from URL-first. URL's should be readable, guessable, and hackable.
  • Be modular. Build from atomic elements. See adactio/Pattern-Primer · GitHub for a place to start (also, see Brad Frost's Pattern Lab)
  • Navigation should come second to content (as content rules the roost) - see the navigation pattern on The Session for an example (those on a desktop will need to shrink their browser window to emulate a mobile screen size)
  • Progressive enhancement is still relevant. There are users on less-capable devices than you!
  • JavaScript usage - ensure you have feature detection in place. HTML and CSS are backwards compatible, whereas JavaScript isn't:
    • HTML elements still have their contents rendered if the parent element isn't understood by the browser.
    • CSS declarations are ignored if they aren't understood by the browser.
    • JavaScript should not be the single point of failure for a site.
  • Progressive Enhancement acknowledges that there are things that you can't see yet (future enhancements to specifications, for example).
  • SVG is a great image format - you can put CSS and JavaScript within SVG declarations (it is XML, after all)!
  • Use conditional loading for features that are "nice to have" but not essential.
  • Never be reliant on a 3rd party service (imagine your site being halted from loading because the Twitter JavaScript fails).
  • Check out Future Friendly - by design, be backwards compatible!

Icon Design Process - Jon Hicks

Jon Hicks is the guy behind the FireFox logo. He has designed for large clients around the world, including such names as Shopify. He runs a studio based in Oxfordshire. Why use custom icon fonts?
  • One small file
  • Completely scalable
  • Accessible (when used as part of the private unicode area of a font)
  • Easily styled with CSS
  • Supported in IE4+
Why don't we use custom icon fonts?
  • Fiddly creation process
  • No semantic meaning to icons
  • Only monochrome (there is a way round this, using ligatures. These are a way of tying letters together in an open type format. See the BBC weather site for an example).
Why make your own icon fonts?
  • If there isn't anything out in the wild that is fit for purpose, then creating your own icon font is the only way to go.
The Icon Audit Before the icon font creation process can begin, an "icon audit" first needs to be carried out. This is used to:
  • Determine what is in place already
  • Determine what is needed
    • Try sizes, styles, filenames and different ideas out
  • A 16px grid is a good base from which to design fonts around, but don't write off odd-number grids, as icons for arrows and the like benefit from a single pixel on the end of pointed objects for sharpness.
The 3 elements to an icon font
  • Metaphor
    • Iconic icon fonts - realistic and familiar items. Little or no learning curve
    • Symbolic - abstract items, and these need to be learnt
    • Follow conventions - see The Noun Project (tag search works best)
  • Style
    • Don't get fancy - simple is best
    • Think about the context in which the icons are to be used
  • Grid
    • Decide on icon size
    • File formats are important
    • Look at icons next to each other:
      • Use space effectively
      • Look at where the visual weight is
Useful services: Lastly - don't forget to add the following attribute to any HTML element being used as a "hook" for an icon: aria-hidden="true"

The Business of Responsive Web Design - Mark Boulton

Mark Boulton, of Mark Boulton Design, gave a talk about what responsive web design means. Responsive Web Design is about CHANGE. That change is broken down into three areas: Content, Process and "The Trend". These are described below: Content
  • Target your audience effectively
  • The same story in different words in different environments is ok!
Process
  • Client accounts, not client projects are what are to be pitched for.
  • Clients need to see "just enough" detail. No one wants to see how sausages are made, for example, but everyone wants to know what is in the sausages they eat.
  • Do the "rope a dope". Let the client beat everything out of their system.
  • Don't hide from content
  • Write content and the client will change it so urgently, it'll be like they've got a rocket up their back-side.
  • Retrospectives are important. Insist on their inclusion to a project
  • There is no "big reveal".
 The Trend
  • "We need a responsive <INSERT THING HERE>" - seems to be the trend these days. Think about when responsive web design is more appropriate.
  • Add up any marginal gains to be made. Add these up and always look across everything you do. Add marginally where you can. Iteration is the trend. Iterate on what you have and your product will forever be on trend.
  • Don't strive for perfection! It doesn't exist!

Carefully Everywhere - Brendan Dawes

Brendan Dawes is a data visualiser. He advocates the use of data to tell stories. A few key points from what was a demo-heavy presentation:
  • Surface stories with data. Make the horrible beautiful
  • Symbolise and summarise data
  • Tell a story. The pitch for the film Alien was simple an succinct - "It's Jaws in Space" said Ridley Scott when pitching the idea for the Alien film.
  • Data needs poetry
  • Everything is a number - use data to make beautiful things.

When responsive sites work as well as a chocolate iPhone - Ling Valentine

Quite possibly the best entrance to a talk I've ever seen. Ling Valentine arrived in a BBC Dalek, being pushed on stage by Andy Clarke and Jon Hicks. Upon popping the lid she gave a superbly comedic speech about how mobile experiences have to be tailored. She runs a car-leasing business, and therefore she has a lot of information that people would naturally want to research. Her desktop experience is the only practical medium to do this, and therefore her "mobile site" is actually a few gimmicks with the serious intention of directing folk to her desktop website. She's generating a net profit of £400,00 a year, so it must be right. Key points from her talk:
  • People need to feel good about purchasing decisions they make, such as buying a car.
  • In these circumstances, a mobile site may be better placed as a "taster" to the full desktop site.
  • Desktop web sites are a more private experience, and therefore far better suited to the purchasing of expensive items (such as cars) than a social, mobile site.

Building the HandHeld Conference Website - Eddie Machado

Eddie Machado was tasked with building the 2013 website for HandHeld, and he shared his experiences in doing so. Key points to take away:
  • Clients love homework. Give them something to do, and they will feel involved. It help them to care about whats going on.
  • Use design personas.
  • Gather as much information as you can before you begin a project.
  • Sketch everything. It is a fast way of visualising an idea.
  • Don't hold out for a "big reveal". Iterate continuously.
  • Figure out what you can and cannot do - know your limitations.
  • Use saturated colours in your existing site colour palette for borders and the like - it keeps a sense of uniformity.
  • Don't use "ie" in a CSS filename for legacy browser support. There are other legacy browsers than Internet Explorer. Use "fixed" instead to denote that it is a stylesheet intended for fixed width experiences.
  • Use progressive images (those that start blurry and slowly render). It gives the user the impression that something is happening, which is particularly important for mobile devices.
  • Lastly, build a project your own way. Frameworks are great, but it is too easy to get sucked into another persons way of working.
He shared some useful resources he found along the way too:

How to call your client an idiot without getting fired - Andy Clarke

Andy Clarke, author of Hardboiled Web Design and owner of Stuff and Nonsense, gave a talk without using slides about his experiences in dealing with clients. In summary, his points for effective client relationships and steady project progression are as follows:
  • Communication is key
  • Don't ever blame the client
  • Have focussed conversations
  • Don't set the wrong expectations
  • Put prototypes, not static visuals, to clients. It is an artefact or deliverable too!
  • Never email pictures to clients and expect the required response.
  • There should never be a "big reveal"
  • Ask for specific feedback during conversations. Ideally, such discussions would only be face-to-face
  • Only people that turn up to a design review can give feedback
  • Leave feelings at the door. The work matters.
  • Encourage clients to get their points across. It works both ways, so discuss each and every point raised. Raise your own points if the client doesn't mention something you wish to discuss.
  • The client should understand that at all times, their interests are at heart.

Ten Commandments of Modern Web Design - Jeffrey Zeldman

The father of web standards, Jeffrey Zeldman, gave the closing presentation of HandHeld Conference 2013. Entitled "The Commandments of Modern Web Design", Jeffrey gave one of the best presentations I've ever heard. Here's the commandments in all their glory.
  1. Entertain
    • Say "hi" to users.
    • Draw and make things. Make a style. Use yourself.
    • a 404 is an opportunity to entertain
  2. Test everything (including assumptions)
  3. Iterate
    • Make things better. Constantly. By was of little nudges in functionality.
  4. Ship
  5. Engage thy community
  6. Love thy user as thy self
    • Don't assume what users want
    • Assume prioritisation however
  7. Remember content and keep it holy
    • Right content, to the right user, at the right time
  8. Make magic
    • But don't chase perfection
  9. Prioritise
  10. Be true to yourself
    • If you have perfection, leave it at that!

Finally

Sadly, it was announced that the 2013 HandHeld conference was to be the last. A shame really, given that 1200 conference-goers walked away re-energised about how great developing for the web is. I for one am feeling great about the skills I have and the work that I do. Developing for the web is an exciting place to be right now, with its rapid pace of advancement showing no slow-down.