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.
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
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
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.
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.