On 7th February, our whole team made the journey to Sheffield to attend Front End North. With an early start, we arrived in Sheffield right on time and made our way to registration. We had a bit of time to kill so made the most of the free tea, coffee and biscuits and eagerly awaited the opening of the doors ready for the first talk of the day at 9.30am.
Rachel Andrew: Evolution of Design
First up was Rachel Andrew, whose talk was on Evolution of Responsive Design; but don’t be fooled by the name as this talk was very much developer-focused, leaving our designers looking a bit like this:
Rachel’s talk took us through the different ways we have achieved grid layouts with CSS over the years and how we should be doing it now. She began with the history of layouts, including things such as floats, fluid images and media queries. She then took us onto the ways of achieving the same layouts with column-count and flexbox, and then she proceeded onto the main focus of her talk: CSS Grid. Rachel highlighted the various ways that CSS Grid can be used to create grids that also respond to content, allowing images to be flexible and responsive as default, and how layouts don’t have to be so fixed in present day.
How else can we respond to content?
The talk took us on to other ways that developers can respond to content and Rachel presented some different methods that I was not aware of previously, but have since used on more than one occasion! For accessibility purposes, and a smoother web experience, you can use the prefers-reduced motion media query; and we will now use this on sites going forward to turn off all animations if this is set to reduce. You can use prefers-color-scheme to provide a light and dark mode for your website, and check a users’ settings to display their preferred color scheme.
Another super useful media query that I have used the most since finding out about it is media queries for checking capabilities such as what type of cursor the device using the website has, or whether it has the ability to hover or not. This is something we should all be using as it is becoming increasingly harder to provide a perfect journey for users’ with all the varying screen sizes and touch screen laptops that are available. Just because a user may not be using Google Chrome on a Macbook with a 15inch screen doesn’t mean their experience should be hindered in any way.
Florence Okoye: Are we even designing? Like, at all?
Florence Okoye was up next with her talk: ‘Are we even designing? Like, at all?’. As the UX & Service designer at the Natural History Museum, we were all looking forward to this to find out “How can we come together and better engineer the web?”. Florence started with some key points of how we can be better at designing technology:
- Thinking holistically
- Design means to solve problems
- Technology means to shift things
She discussed how humans are complex, and how we need to research more thoroughly. Okoye also proposed the idea that we should be designing for advocacy, and not just for inclusion, and how we need to design technology as a service and not just something that is aesthetically pleasing.
Florence’s talk ended with this quote from Christpher Alexander, which definitely left us with some food for thought for the break that followed her talk:
“This is a fundamental view of the world. It says that when you build a thing you cannot merely build that thing in isolation, but must repair the world around it, and within it, so that the large world at that one place becomes more coherent, and more whole; and the thing which you make takes its place in the web of nature, as you make it.”
Stuart Robson: Design Tokens and CSS
After a break, which included a quick dash to Starbucks from some more coffee and snacks, we returned into the atrium of The Crucible for Stuart Robson’s talk on Designs tokens and CSS. Stuart shared definition of design tokens from Jina as “named entities that store visual design attributes” and how they are used “in place of hard-coded values in order to maintain a scalable and consistent visual system”. Stuart’s talk took us through the what, the how and the why of design tokens and why we should be using them as part of a design system.
What?
The what included using design tokens for things such as sizing, font families, font styles, font weights, font sizes, background colours, gradients, text colours, time, media queries and many more.
How?
For the how, Stuart braved it and did some live coding of some different techniques to include design tokens in a project, including (but not limited to) the following:
- Theo https://github.com/salesforce-ux/theo
- Style Dictionary https://github.com/amzn/style-dictionary
- Dragoman https://natebaldwindesign.github.io/dragoman/
- Chromatic https://github.com/ui-js/chromatic
- Diez https://diez.org/
Why?
Why even bother using design tokens? Well;
- Consistency
- Maintainability
- Scalability
Stuart also shared a quote from Maya King that is justification enough for why design tokens should be considered: “When there’s an update to our brand colors or typography, tokens can help streamline the redesign process”.
Mike Smith: Have you written tests for that?
Next up was the nerdiest development talk of the day, ‘Have you written tests for that?’ from Mike Smith. I have to say, this one went over most of our heads a little bit but as a superbly delivered talk, it was hard to still not be excited by what Mike was presenting. He discussed different methods of testing code, and compared them in whether they were “cheap” methods of testing. The cheapest tests give confidence, stability and documentation in the shortest amount of time, and also in how efficient they are. He started with Unit Tests, which he described as the cheapest, before going on to discuss and give code examples of Contract Testing, Integration Tests, Visual Regression Testing, Accessibility Testing and Mutation Testing. The Accessibility testing was especially interesting as he highlighted PayPal’s Automated Accessibility Testing Tool (AATT).
Léonie Watson – You talkin’ to me?
With Léonie Watson being a member of the W3C Advisory board; co-chair of the W3C Web Applications Working Group; and a member of the Accelerated Mobile Pages (AMP) Advisory Committee; and as accessibility is, rightly so, being talked about more and more, this talk was one I was eagerly awaiting all day. ‘You talkin’ to me?’ focussed on speech in code; particularly how to use Speech Synthesis Markup Language (SSML) with the Amazon Echo or Google Home, and the Web Speech API in the browser; how the CSS Speech module might be useful if it was more supported; and how we might be able to solve some problems by making things talk.
Throughout Leonie’s talk, laughs could be heard regularly as she used comedy to really hit home how lacking SSML can be, and how it has evolved (slowly) over the years. She also discussed the CSS Speech Module, and if the browser support improves then soon we could be looking at voice design, with a way to customise our websites and make them truly accessible for people with sight difficulties.
Laura Gonzalez – Guerrilla Design Systems
As a UI developer at Facebook, and before that at The Guardian & The Next Web, there was no doubt that Laura Gonzalez knew what she was talking about. She began her talk by highlighting the difficulty of the relationship between designers and developers, and how changing design a lot can negatively impact the relationship – but it doesn’t need to.
Why use design systems?
Laura discussed how design systems can allow for easier redesigns and easier handovers, specifically in the context of when she began working at The Guardian. The first step is to figure out the rules of the design before it can be transferred to CSS, as in we know the how but not the why, and we need to know the why for scalability. For example, why is this button one colour but another button is another colour – what are the reasons, is there a hierarchy, etc. Design systems could also be seen as future proofing – there’s now no need for a total rebuild; if the code is done right in the first place then a redesign shouldn’t be as much work as you first expect.
Creating a design system
- Find patterns
- Turn them into components
- Recycle, reuse, reutilize
At one point, Laura attempted to reason how a code base can get so messy in the first place: “Writing more CSS is easier than talking to people”, which received a lot of knowing laughs from the audience.
She also stated how if you have a website, you have a design system, it’s just bad and poorly documented, but it can change. So with Laura’s steps to create a design system, the answer is to have a component library in the code of your project. And how do you document your component library? Laura’s answer was https://storybook.js.org/, which also lets you see your components out of context which can assist in the improvement and development stages of design and code.
Nevelina Aleksandrova: Developing Software for Prisons
Next up was Nevelina Aleksandrova with her talk on developing software for prisons. She took to the stage wearing a bright pink tutu and immediately drew attention to this, and how wonderful it made her feel, which in turn put a smile on most faces.
Nevelina began by giving context to her talk, explaining how she had visited a couple prisons in the UK and how there are some prisons that are still very much stuck in the Victorian age in which they were built. This means that the software that is built for prisons will need to be done differently than normal to meet the users’ requirements. Most prisons in our country have very slow internet and it is very expensive to load the data from remote servers, therefore React.js was no good for any of their software and her first point of call was to remove it from everything. Any software for prisons also needs to work in all browsers, on all machines. This meant that things did have to be taken back to basics.
What’s important for prisons?
The most important part of the software built for prisons is that it’s quick: it should speed up the tasks of anybody using the software. A prisons’ main priorities are security and reducing reoffending, and the best way to reduce offending is for prison officers to spend as much time with prisoners as possible; so software reducing the time it takes to complete paperwork and tasks is extremely important.
Nevelina showed an example of some software they had built and the attention to detail that they had to pay to ensure it was quick and easy to use for officers. This included making sure buttons and links were clear so that clicking on the wrong thing is a rare occurrence, as going back to the point that data is slow and expensive to load in prisons, this would mean officers were not completing the task as quickly as they should be able to.
All the software built by the Ministry of Justice, and the example of software that Nevelina used is for a Prison Staff Hub that can be found here.
Jessica Rose: Burnout and Balance
Last but not least was Jessica Rose with her talk on Burnout and Balance. She began by rhetorically asking ‘Why are we talking about burnout?’ stating how “You are not doing good work if you’re burned out”, but pointing out how this opinion is completely wrong. She described how your cognitive load is the total amount of mental effort being used in the working memory (how much you can think at once), and how everything gets harder the closer to your cognitive limit you are.
What is burnout?
Occupational burnout is exhaustion – physically, emotionally and mentally – and is the result of long term, unavoidable stress. It mirrors symptoms of depression and can also trigger depression. Her questions to ask yourself to help recognise burnout included:
- Have you become cynical or critical?
- Have trouble getting started?
- Are you irritable or impatient with colleagues?
- Do you lack energy to be consistently productive?
Recovering from burnout
Jessica then moved onto how you can recover from burnout, stating that it does take a long time, but you can so with the following steps:
- Do less, in ways that don’t damage your life
- Outsource
- Start saying no
- Selective emotional investment – choose what you care about
- Ask for help
- Recharge
- Practice forgiveness (of yourself)
- Don’t be a jerk, as in don’t blow up relationships that are valuable to you.
Although quite a serious topic for her talk, Jessica Rose delivered this in a light-hearted way that provided many laughs but also delivered the seriousness of the subject to evoke thoughts and feelings regarding burnout and balance. We all walked away from this talk understanding the importance of balance in preventing burnout.
To sum up…
We had a great day out as a team in Sheffield and want to thank everyone at Front End North for putting on an affordable, inclusive and extremely interesting conference. We can’t wait for next year already.