Development, design and so much more, 24 April 2014
The ever brilliant Front End London continues to draw in top talks and a sociable group of devs and designers from all around. I’ve not managed to get there (or do a blog post on it) for an age… but back after some months it didn’t disappoint.
The world keeps spinning round and round
The softly, but eminently well spoken Mr. Ross-Paterson made a personal call to ensure you keep following that sense of adventure which brought you here (to fel, to front end development, to design) in the first place.
He reminded us that the world of front end development is moving so fast it can often be disorientating… but that by choosing a technology to champion (with an understanding that you might not always pick a winner - but you’ll always learn something) you become a better designer, a better developer.
By learning you can push ahead and you’ll find you know more than you thought. And, with that knowledge, you should help others to design and develop better too.
Bridging the gap between developers and designers with Sass at theguaridan.com
Did you know that the release cycle at The Guardain.com is four times a day? I didn’t. And considering there are around twenty-five people working on the HTML and CSS (btw, around 16K lines of Sass) and then a huge number of other UX, designers, product troops, backend devs, JS peeps and the like it’s not surprising to hear that finding a strategy to have them all talk together in harmony has become very important to the team at The Guardian.
Sass is not only a core part of their developer toolbox, it’s become a tool for communication. There are two distinct (but not exclusive) areas that need to talk to one another: the design system and the dev code.
The design system is a set of rules which dictate how the site is built around content. Communication needs to be flexible and strong when discussing this and how it applies and relates to front end code. Monsieur Deloumeau-Prigent gave some excellent examples (with a little help of the very nice Sassmeister):
Colours using sass variables
Variable names are defined between designers and developers: so the names mean something to the two audiences… try avoiding ‘red’, go for ‘error’… for example.
Breakpoints and grid systems
Defining the vocabulary of breakpoints is helpful for developers and designers and also product teams too. The product teams simply don’t know about breakpoints in ems or px: but they do understand a level abstraction that gives a name, such as ‘mobile’, ‘tablet’, ‘desktop’ etc. This was achieved with some nifty mixin work which you can see here.
With grids the systems are made simpler by ensuring all is based on a set of agreed template grids.
In total there are nine breakpoints used on the site and they can radically change the layout that is delivered to different devices (huge displays get a whopping 16 columns).
The Guardian have a set of fonts specifically designed for them. Core elements of the brand, built to work for both print and digital.
The issue is that they have completely different names across mediums. This ‘can become quite messy quickly’(!)
A matrix was created with what is used on the site - with the different names, in Photoshop, in CSS, and a ‘human’ name when referring to it with colleagues.
It’s clear that Sass has been a kickstarter for a better communication system - a tool that has been worked to leverage better decision making because people (from all backgrounds in the large team they have) can actually understand and talk to the options they have.
Over-promised and Under-delivered
or You Ruined My Holiday or The Mobile Web is Rubbish
by Mr. Peter Gasston
Mr. Gasston has a bone to pick with us. You see, his holiday (a rather nice affair by the looks of the snaps he shared, making the most of Lanzarote) was ruined by having nothing but a 3G connection to keep up with the Kardashians.
Sites spent an age to load, the user experience was often obnoxious and this was just the start. Designers and developers have a lot to answer for as site sizes increase year-on-year, but there is hope…
Mr. Gasston pointed to his and other people’s experiences (more of which here and here). Do these sites get tested? Do I need to be asked more than three times if I want to download the app version? Or is that people’s preference is for apps more generally?
And just why do people prefer apps? Could it be the mobile web is just not up to the task? It was a clear call to arms: we need to do better…
The keys to this:
Performance - get to the content first/fast, or as Roxette would put it: don’t bore us, get to the chorus.
Experience - don’t make me jump through hoops to get to content and make the most of the medium (90% use their thumbs for mobile use (90%!!) - optimise key tasks for thumb reach).
But help is on it’s way with better ways to serve images and service workers, for example.
And remember: don’t make it good, make it amazing: your holiday RSS catch up could depend on it.
Post published: 25th April, 2014