A great article on approaching a small screen-first project based on how content will be viewed. Discusses off-screen navigation and organisation of content. Check out “View mode” approach to responsive web design on Medium.
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!
- 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.
- Progressive Enhancement acknowledges that there are things that you can’t see yet (future enhancements to specifications, for example).
- Use conditional loading for features that are “nice to have” but not essential.
- Check out Future Friendly - by design, be backwards compatible!
Icon Design Process – Jon Hicks
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
- 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)
- Don’t get fancy – simple is best
- Think about the context in which the icons are to be used
- 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
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
Responsive Web Design is about CHANGE. That change is broken down into three areas: Content, Process and “The Trend”. These are described below:
- Target your audience effectively
- The same story in different words in different environments is ok!
- 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”.
- “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
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:
- SassMe | A Tool for Visualizing SASS Color Functions
- Free Mobile Performance Testing with Akamai’s Mobitest
- Website speed test
How to call your client an idiot without getting fired – Andy Clarke
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.
- Say “hi” to users.
- Draw and make things. Make a style. Use yourself.
- a 404 is an opportunity to entertain
- Test everything (including assumptions)
- Make things better. Constantly. By was of little nudges in functionality.
- Engage thy community
- Love thy user as thy self
- Don’t assume what users want
- Assume prioritisation however
- Remember content and keep it holy
- Right content, to the right user, at the right time
- Make magic
- But don’t chase perfection
- Be true to yourself
- If you have perfection, leave it at that!
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.
Convey passion and you’re more likely to get hired. Why are so many people lacking it?
A necessary evil I’m afraid. I hate giving them because I usually end up interrogating the candidate like someone who has just committed a horrible crime. The candidate is usually full of nerves, rarely prepared and completely lacking passion for what they are talking about. It seems that way at least.
The good eggs
So why don’t you want to be hired?
When giving an interview, I find myself time and time again going to a crib sheet I scribbled down months ago (with questions like “what is a doctype?”) and interrogating candidates based on that because people simply aren’t talking my ears off as to why they are better than everyone else and they can join me on my journey to do great things. I shouldn’t have to ask what experience you have with tools. I expect candidates to be telling me what the tools of the trade are. What bleeding edge technologies I should be aware of as they will be causing me and my team to produce all sorts of awesomeness over the next few months.
The web is an amazing place to work. If you’re dabbled with a bit of web development because you’ve turned a simple CMS install with virtually no tweaks to the shipped design into a site for your brother’s mate’s nan’s cousin and think you can make a career out of it by turning up half-arsed in attitude, passion and the language you use over the phone to me, I’d rather you not waste both our lives. I’ve got web development to be getting on with, because I actually care about what I do.