Date: 30 November 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 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 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’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 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’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.
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’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
2. Flesh out layouts
3. JavaScript
4. Updates and iterations
Wow.
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:
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
Test Everything including assumptions
Thou Shalt Iterate
Thou Shalt Ship
Engage Thy Community
Love Thy User as Thyself
Remember the Content
Ignore Workflow at Thy Peril
Thou Shalt Prioritise
- 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