pete blakemore logo
Handheld Conference 2013

Date: 30 November 2013

Handheld Conference 2013

On Thursday I, under cover of darkness starting at 4am, drove down to the Wales Millennium Centre at Cardiff to watch a great day of talks at Handheld Conference. There were some amazing speakers, and I took a few notes. Here they are.

Syd Lawrence @sydlawrence

Syd kicked things off with an entertaining talk that involved everyone in the room (1200 people) playing a big game of Guess Who. It didn’t quite go to plan as only one person’s phone actually made it through to the end, but it woke everyone up and it was great to hear and watch Syd walk us through what he’d done to create the game (working or otherwise!).

Jeremy Keith @adactio

Jeremy encouraged us to start thinking about the web in the long term. He also spoke about device test labs and websites like opendevicelab.com that help you find free-to-use device test labs near you.

When designing a website, Jeremy suggests thinking about priority of content on the page. Rather than building entire template pages and “layout first”, he talked about how important it is to break page elements down into building blocks. This in turn forces us to write more modular CSS. The Adactio Pattern Primer was mentioned, which is a really helpful tool for creating snippets of code storing them for use later on in a project.

During the talk, Jeremy walked us through some of the process of redesigning his musical hobby site thesession.org. Amongst other things, he talked about the importance of considering conditional loading when building new sites, and how it should really be used a lot more. I tend to agree with this, as we’re now finding that the responsive web design approach of the same content on all devices just isn’t suitable in all circumstances (for instance, when we have a really high resolution photo at the top of our desktop site, we might not want that graphic to be shown at all on a smaller screen. Using display: none surely hides the element from the user, but the impact on performance is still there, as the browser still downloads the element, whether it uses it or not). You can read more about RESS over on the Smashing Magazine site. The example of conditional loading that Jeremy gave was how Flickr photos on the The Session site are loaded in at the bottom of the page in desktop browsers, but they’re not on a smaller screen.

Jon Hicks @hicksdesign

Jon’s made a name for himself as being “the guy” when it comes to icons and icon fonts. In this talk he covered some really interesting points, and discussed the use of SVG as opposed to using icon fonts.

A case study on the 68px based Windows 8 icons was talked about, and Jon told us about the technique of combining multiple icons which overlap to form a multi-coloured icon.

When designing a new icon set, Jon normally starts with a 16px grid. However, sometimes he uses an odd numbered grid which allows for pointy bits, like when you want the point of an arrow to end with a single pixel (which wouldn’t work with an even-numbered grid).

Jon mentioned the Chrome extension for Icomoon, which is essentially the same as the Icomoon website but you can have it as a nice icon on your Chrome homepage. He also mentioned a couple of apps that are useful for creating and working with icons; The Glyphs app for Mac is not free, but is a full featured tool for working with icons. It lets users easily manage their fonts, and includes easy unicode management too (and there’s a free trial as well on their site!). Jon also mentioned a tool called Glypho, which lets you create icons from Photoshop layers – sadly I can’t find a link to this anywhere, so leave a comment if you find anything else on it!

Mark Boulton @markboulton

Mark covered a lot in his talk, and every bit of it was golden. He spoke about everything from the process he uses on projects at Mark Boulton Design, through to how he proposed to his wife, which was nice (but sounded painful…).

We heard Mark talk about how the “content first, same content everywhere” idea for responsive web design is all very well and good, but it isn’t always appropriate to do that, and more attention should be given to structuring the content in such a way that best suits the user. He used the example of designing the CERN site where there were two distinct user groups – everyday folk like me, and scientists. Mark found that essentially these two user groups want different things from the same website – the scientists wanted facts, figures, charts and results from experiments. The everyday folk wanted to see pretty pictures of space.

Mark ran us through his process of creating the Al Jazeera news website. It’s responsive, but just like when Jeremy mentioned conditional loading, gives us different amounts of content depending on the device that the site is viewed on. On a desktop browser the news article pages feature lots of side modules as well as the main article. On a smaller screen like my iPhone, I’m shown the main article, and no other modules apart from some related stories at the bottom of the page. Although this does make an assumption of what the user has gone to the page to do, I think in this case it’s a safe one.

On news stories, Mark told us how during the research phase of the Al Jazeera project it became apparent that they aren’t always delivered in one big manageable lump of content. On the contrary, the site had to allow for articles to be modified, and added to as journalists created more content to publish. He likened the creation of a news article to that of a seed, which starts off with nothing more than a headline, and over time it grows and grows, with content being added to it such as copy, images, video and so on.

Mark identified that lots of designers these days seem to be moving in house to work closer to the project / problem that they’re trying to solve. In a studio or agency the problem is always abstract, and the design is not ingrained in the problem.

On working with clients, Mark encouraged us to “rope-a-dope” – to let the client sweat and worry a bit, because sometimes they just need to get the stress out of their system. To us as designers and developers, projects are everyday things. To a client it can be highly stressful. By allowing them to stress a bit (which is entirely natural), we can later step in and offer up the solution.

We were taken through the process of redesigning the UCL (University of Central London) website. There were lots, and lots of lo-fi diagrams of ideas to start off with. Mark spoke about how the fidelity of sketches start off really bad, which is fine. But later, as we discover more, the fidelity improves as we work towards the design solution. There was no big reveal in the project, which Mark said was important. Little problems were solved along the way, until everything finally came together at the end. There was some rope-a-dope, but it all worked out well in the end!

Mark identified how people and companies like to use buzzwords (yeah, no kidding!), like how ten years ago it was “we need a website”, then it was an app, and now it’s a responsive app / responsive “anything”! I can identify with this, and I’ve often found that after talking through and discussing requirements with a client, what they actually want isn’t always what they need. It’s up to us as design consultants to guide the client to the best solution for their problem. Mark gave an example of this when his company produced a really cool responsive map of the O2 Arena. Over 3 days with 400,000 people visiting an event each day, only 25 people actually accessed the responsive map. Visitors were picking up a printed version of the map at the door. This tells us that just because we “can” do something, it doesn’t mean we should.

Marginal gains were talked about, and how they can be applicable to web projects. Mark told us the story of Dave Brailsford and his quote “The aggregation of marginal gains”. Dave lead the Team GB cycling team in the Beijing Olympic Games to become the most successful track cycling team in modern history. His philosophy is to sweat the detail, and to make the 1% or 2% gains here and there which all equate to an overall larger gain in performance (Mark even told us about the example of when the GB cycling team stayed away at a hotel anywhere they’d take their own bedding.This ensured a better nights sleep, and better performance the next day. Genius). We can apply this idea to web design when thinking about performance improvements, where trimming down our file sizes might not seem much when looking at an individual file, but done over all files will make a substantial difference to page load time. Jon Hicks also touched on this method when he talked about removing unnecessary points in an Illustrator graphic to help keep file sizes down.

Brendan Dawes @brendandawes

Brendan’s talk blew my mind! From all the talks of the day, his inspired me the most to go back after the conference and try new things in my work. He mentioned his use of Process app, an open source bit of software that allows users to create their own bits of software for “doing things”. He also told us of the importance of experimenting and keeping absolutely everything we do, no matter how useless it might seem at the time, because it might come in handy one day. Brendan told us about one such bit of work, based on the seeds of a sunflower where he used Process to later create printed infographics for the UK phone company EE. A project that would not have finished so well if he hadn’t experimented earlier on.

Ling Valentine @LINGsCARS

Possibly the strangest thing I’ve ever seen on a stage, anywhere, ever. Ling was pushed on stage by Jon Hicks and Andy Clarke in a dalek outfit, and that’s when the madness started. Ling told us about why she believes her site Lings Cars wouldn’t be suited to having a “same content everywhere” approach. She firmly believes that mobile users should be shown different content on mobile than on her desktop site. It seems to work for her, and behind all the craziness it was an interesting talk that offered a different view on content strategy.

Eddie Machado @eddiemachado

Eddie’s talk was one of the most useful ones of the day for learning about project process. He walked us through his process in designing the Handheld Conference 2013 website. Eddie broke the project down into 4 sections; Organising Content and Sketching, Prototyping and Early Layouts, Fleshing out layouts and Iterating, More Iterations and Launch. He spoke about the importance of creating deadlines and setting goals at the end of each phase. Here’re my bullet points from the talk:

1. Organising content and sketching


  • Give clients homework

  • Create personas and a visual lexicon (atmosphere)

  • Start gathering content, even stuff you think you might but don’t definitely need

  • Don’t code anything yet

  • Sketch everything (yes everything, even if you don’t want to!)

  • Share everything with the client. No big reveal (like Mark Boulton said in his talk)

  • Find your general theme, then everything else starts falling into place

  • Mock up pieces of the site – Style Tiles are also useful for coming up with snippets of design. Start trying these snippets out in code

  • Figure out what you can and can’t do (know your or your teams’ limitations)

  • Gather everything and make an inventory (Gather Content came to mind, but I’m sure other tools are available).

  • Work on design atmosphere

  • Establish a colour theme

  • sassme.arc90.com helps with choosing colours that work together

  • Move onto prototyping in HTML and early layouts

  • Icomoon was used for creating the icons on the Handheld site.

  • Work out an underlying grid. Handheld site uses 4 grids

2. Flesh out layouts

3. JavaScript

4. Updates and iterations


  • Use progressive images

Wow.


Andy Clarke @malarkey

Andy stepped in to do this talk when some other presenters couldn’t make it. He didn’t have any slides, but the content was all really good. Here’re my notes from his talk:

  • The boss needs to take some ownership of the responsive problem as well, not just the designers
  • Ergonomics needs consideration – how does the design / interface feel when in our hands, not just how does it look on a big screen when designing it
  • Cleverly written solutions can often be better than producing wireframes
  • Clients should be involved more closely in every stage of the project (no big reveal, as Mark Boulton also mentioned)
  • Structured feedback workshops; ask for specific feedback on certain aspects of the design (typographic, colour, etc), don’t just ask “so, whadda ya think?!”
  • No feedback via email or phone!
  • No asking “for your thoughts”
  • Rule 1; don’t upload a static comp to email or basecamp, etc. properly explain designs face to face. If face to face isn’t an option, call or Skype
  • Rule 2; take control of the environment in how designs are presented to the client. “Design crits” – make them face to face. Only people who show up to the design meetings can have an opinion on the work, including the CEO.
  • Rule 3; remind everybody that we’re talking about work, leave feelings at the door. When talking about design, only the work matters, not people’s feelings. This helps people to speak openly and freely, encourage people to be open and honest. By the same token we’re free to disagree with suggestions that they’ve made
  • We’re the specialists, there to take control of the design process. We’re not there to take pre-existing half-finished designs / wireframes and colour them in.

Jeffrey Zeldman @zeldman

Jeffrey gave his talk about his 10 Commandments of Web Design. It was full of insightful thoughts and plenty of humour. I really enjoyed Jeffrey’s talk and took a lot away from it. Here are my thoughts, but you can also read about what Jeremy Keith thought about the talk on his site too.

Thou Shalt Entertain


  • Like how Panic Software take an otherwise mundane subject and make it entertaining

Test Everything including assumptions


  • Ghostlab, Adobe Cloud tools, “Remote Preview (free)”:http://viljamis.com/blog/2012/remote-preview/

  • Stop thinking about breakpoints, and instead think about device types

  • Test on real mobile devices without breaking the bank, by brad frost

  • On Alt Text, a blogpost by Jeffrey (sometimes images don’t need alt text)

  • Navigation in lists: to be or not to be, by Chris Coyier

Thou Shalt Iterate


  • Little and often, nudge, nudge and nudge then boom with a big idea. Take something and keep experimenting with it, until something great becomes of it.

  • “I move things around until they look right” – Milton glazer

  • Iteration never sleeps.

  • Positioning of links (like the social ones on the A List Apart website) can be more important than the design / look and feel – Jeffrey told us about how the social links on the A List Apart site we originally as icons at the bottom of the page. Since moving them up into the left side bar and making them small text links they’ve had a lot more access

Thou Shalt Ship


  • It doesn’t matter how great a project is if you never release it

  • Don’t try to make something perfect before releasing it. Just get it good enough to see if it will fly. If it’s any good, you can iterate to make it better once it’s live!

Engage Thy Community


  • The community is people not machines

  • Jeffrey used the example of Instagram not involving the users in the change in the Terms of Service. This alienated many of them who subsequently moved over to the competition at Flickr

Love Thy User as Thyself


  • Don’t send inappropriate content just because someone’s on mobile. Know your user, so you can give them what they want

  • Don’t make assumptions about content, but do make assumptions about prioritisation of content layout (like Mark Boulton with the Cern and Al Jazeera sites)

  • Get the right content to the right user at the right time

Remember the Content


  • Stop thinking about how much you can cram on the screen and think about what the user actually wants

  • Make magic – don’t chase perfection. That will lead to not shipping!

Ignore Workflow at Thy Peril


  • Surprise and delight – Instagram loading stuff magically in the background

Thou Shalt Prioritise


  • You can’t be everybody’s friend, you can’t do everything so don’t try to! When Instagram first launched it didn’t do everything right, but it got the priorities right so was a success

  • wikihow.com/Prioritize

- Kick Ass Kick off Meetings – A List Apart article about how everyone must feel that they have a vested interest in the project

To Thine Self Be True


  • Do what you’re good at, don’t try to be something you’re not