The BarbLog

Design, front-end dev and other random thoughts

Talk Web Design 2014 – 7/5/14

May 11, 2014 | Comment

twd-2014-29

Talk Web Design is a conference primarily aimed at web design students, organised by my MA course tutors, David Watson and Prisca Schmarsow and now in its third year. I was asked to photograph the event which was a great experience for me, but I engineered it so that I could still listen to the best part of each talk after taking photos during the first few minutes and between talks. I had been looking forward to being inspired by all the speakers, some of whom I’d already seen speak and others of whom I’d heard a lot about and wanted to finally see. They didn’t disappoint – the day was packed with all sorts of inspiration and information.

twd-2014-44

Pui-Ling Lau kicked things off with a particularly confident talk for a first-time speaker, about her journey from being a lawyer to being a UX developer at Reading Room. Seeing a former MA student doing so well gave me confidence for the future, much needed as that was the day before I started my new job and I was quite nervous!

twd-2014-51

Kaelig Deloumeau-Prigent then discussed the benefits of Sass in the workplace (he is a developer at the Guardian) and I picked up some very handy practical tips that I’ll be sure to try in my own work. The way they use variable naming and a style chart to establish a common language between designers and developers was something I hadn’t come across before but will be sure to consider when working with a team on similar projects. Instead of using font names that may vary across platforms, they have a generic name for each weight&size combination so it’s easier for developers to understand when designers want a particular combo added. They also use a handy breakpoint abstraction mixin, sass-mq, to make media queries easier to understand and maintain – these aren’t defined in pixels but in grid column numbers.

It’s also worth noting that media queries dotted throughout a stylesheet have no negative impact on performance so if that makes it easier t maintain then it’s fine to do it like that instead of grouping queries at the end of the stylesheet.

twd-2014-88

Adam Onishi followed with a roundup of the front-end developer’s toolkit, mentioning some tools such as Emmet (for easier CSS), Codekit, Hammer and Mixture (project tools – first 2 seem to be Mac only, so boo) that I’ll look into a bit more although I tend to be wary of excessive use of tools and like to stick with the bare minimum – which is probably not good, but I’m lazy to learn new stuff if I’m not sure it’ll work for me… The HTML5 boilerplate is  a good starting point though. Adam made a good point about not having to know every single tool there is – just know the few that are right for the job you’re doing and what fits best into your workflow while concentrating on more fundamental things such as accessibility and site speed.

twd-2014-92

Laura Kalbag talked about all the mistakes she’s made as a freelancer, with some very useful tips that I’d never have figured out myself without a few bad experiences (like Laura, but I can now learn from that). I heard this talk at 12 Devs of Winter last year, but didn’t have a notebook so this time I made sure to take lots of notes and chat to Laura afterwards about some more questions I had – she was very helpful :) Her advice included:

  • Bill 50% upfront (this helps weed out clients who aren’t serious), then every 2 weeks to keep cashflow healthy
  • Contract is essential – check out Andy Clarke’s contract killer and modify to suit your style
  • Online contract signatures – rightsignature.com
  • Accounting software: FreeAgent (though I use Wave for my own accounts at the moment and am happy with it, so you can give that a try too)
  • Estimates: calculate how long, then add 20% – then you can always charge less if you finish quicker than expected, and client will be happier too rather than being hit with an unexpectedly large bill. Stress that an estimate is an estimate, and you will notify client if it starts looking like it’ll go over
  • Get client address at beginning, and send postal invoice reminders if overdue – more official
twd-2014-120

After a nice lunch, Nicklas de Leon Persson discussed remote asynchronous working and how even a small distraction can throw your brain out of focus for 15 minutes (I think that was the number), so it’s essential that you set up workflows that aid concentration despite the need for communication between team members at various times of the day.

twd-2014-144

Ben Foxall was a runaway success; his practical demo of some very cool JavaScript and network stuff was technically way over my head but it was extremely fun to watch and take part in the more interactive bits! I noted some tools he used in case more techy/backend developer readers are interested in checking them out:

  • PubNub – device syncing and receiving responses
  • WebRTC – p2p network directly between devices via a local router – this is faster than other methods of data transmission if devices are close to each other
  • PeerJS
  • Socket.io
  • Three.js
twd-2014-156

Andy Budd then spoke about the Clearleft graduate internship programme, an excellent way of giving three young designers and developers a chance to get their foot in the door and learn from the people at one of the best agencies in the web industry. Last year’s interns Zassa Kavuma, Kilian Bochnig and Victor Johansson gave a presentation about their project, Chüne (I can type ü because I have a Hungarian keyboard, aren’t I cool :P) which is a social playlist creator, based on the ‘vibe’ at a gathering. It was fascinating to hear about their process and how they got to the final design – they were three people from very different backgrounds (a roboticist, a communication designer and a product/industrial designer) who, it was clear, had managed to work together really well to create a polished prototype.

twd-2014-189

Peter Gasston was the last speaker of the day, delivering a very enjoyable and funny talk (I remember laughing through most of it) about web usability and accessibility, unfortunately by this point I was quite tired and didn’t make as many notes but a couple of things I did scribble down:

  • Associate a <label> properly with its checkbox/radio button, as this makes it easier to tick or select buttons for the user especially from a mobile device because if they just click on the label it affects the button too.
  • Use appropriate HTML5 input types as this brings up relevant keyboards on mobile devices, again better UX.
  • Consider what’s better to move stuff around on screen – absolute positioning vs CSS translating?
  • Don’t use ‘user-scalable=no’ if you want to have an accessible site or web app – short-sighted users will be very unhappy
  • Don’t annoy users with loads of modal windows and ad overlays that reduce actual content areas to a tiny area of the mobile screen…. oh, how I can relate to that!
twd-2014-193

We then had a Q&A with some of the speakers, and ended the day with a short walk to a nearby pub for a few drinks.

A huge thank you to David and Prisca and all the speakers who gave their time on the day – I’m sure we all came away with a lot of new knowledge and inspiration, and maybe even some new acquaintances :) I’m already looking forward to next year’s event!

twd-2014-111

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>