Any views expressed within media held on this service are those of the contributors, should not be taken as approved or endorsed by the University, and do not necessarily reflect the views of the University in respect of any particular issue.

Frontend United 2019

We were in Utrecht to attend the conference Frontend United 2019. This is a non-profit, developer-first, community-focused conference. Its aim is to connect frontend developers and designers from all kinds of backgrounds closer together to share knowledge, experiences and ideas.

Conference details

Frontend United website

Location: Utrecht, The Netherlands

Attended by: Joanne Gordon and Aileen Robertson

Highlights from the Frontend United conference

Day 1

Utrecht is an amazing city. We were struck by the beautiful architecture, canals, cleanliness, and the bicycle traffic jams!

Bikes and canal in Utrecht CSS workshop in Utrecht

We started with a full day workshop titled ‘Next Steps with CSS Layout’. It was run by CSS working group member, Rachel Andrew.

It was held in a venue called ‘De Witte Vosch,’ or The White Fox. We were glad we arrived early as by the time everyone else had arrived, there was standing room only!

The workshop was focused around creating layouts using grid, flexbox and multi column displays. We discussed compatibility across browsers, and mapping layout from the top, right, bottom and left of the physical screen – to using logical properties and values.

It was a fascinating day and we could see real potential to use these new CSS techniques to achieve some of the layouts that we require for our clients’ websites.

Day 2

Going offline – Keynote speech

Jeremy Keith

Web Developer, Clearleft

Day 2 marked the start of the conference itself, and Jeremy Keith kicked things off.

The main take away from Jeremy Keith’s keynote speech was the possibility of creating websites that are available offline. This is achieved by installing a service worker which sits between your device and the network and instructs your cache to store the page that you have previously viewed. It is particularly useful for static websites, such as online books. Jeremy also demonstrated how content, including audio files, could be saved to your cache to be recalled later.

Slide on service workers

Adactio

Resilient Web Design

I don’t care what Airbnb is doing (and neither should you)

Stephen Hay

Creative Director, Rabobank

This talk was intriguingly entitled, ‘I don’t care what Airbnb is doing (and neither should you)’ by designer Stephen Hay. The main premise of this session was that we can often be tempted to rely on conventions because they will often give us an acceptable solution with minimum effort. However, the solution to this problem might not fit the solution to your particular problem.

Logos very similar to Airbnb

Do these look familiar?

“Trying to be different by imitating ‘different’ won’t make you different. Nothing exciting happens in the comfort zone.”

By this, Stephen was illustrating that if we all copy the company/person who is different, it becomes a trend and we all end up with the same product.

“Stop focusing on the solution, and start focusing on the problem.”

Stephen Hay speaker profile

How to design and award-winning website

Peter Van Grieken, Inclusive design consultant, Frozen Rockets

Luc Princen, Freelance developer & designer

Take aways:

  • We should not work in silos.
  • Accessibility should inform the design.

Peter Van Grieken and Luc Princen showcased their award-winning website for KIT.

KIT website

They spoke about the design process from gathering data to wireframes, simple prototypes, design and development. But, they also designed their website with accessibility in mind at every stage of this process, and stated that accessibility should inform the design. They suggested we should all spend ½ hour testing out our websites without a mouse and using keyboard navigation.

Slide from presentation

An interesting concept in the initial stages of a project was to conduct a ‘pre-mortem’. This involves gathering your team and going through any reasons why this project might go wrong in the future.

They spoke about working in silos. Not all decisions are made in a siloed design phase, and in fact there will always be things that are missed and design decisions will need to be made in code.

How to design an award-winning website

Day 3

Grids all the way down

Rachel Andrew

Web Developer, Perch, W3C

Following on from our workshop on day 1, Rachel talked about Flexbox and Grid. She suggests that you can use either method to suit your needs by looking at the patterns you might require.

Flexbox is good for laying out items in a sensible way and will expand to fill the available space. Grid is good for structure control where you might have fixed widths.

Layout with Flexbox

Layout with Flexbox

Layout with grid

Layout with grid

 

Not all browsers have compatibility right now, but If you’re building something now, it is fine to use whatever is available and look at fall backs. It’s perfectly possible to create good fall backs so that your patterns look good on old browsers, but new browsers can take advantage of this new technology.

You can nest grids inside a grid that inherit the parent properties using Subgrid. This is only available on Firefox Nightly behind a flag right now, but we can play about with it and perhaps identify case uses for the near future.

Grids All The Way Down

Creating a design system that people actually use

Rebecca Hill

Software engineer, WeTransfer

Rebecca suggested that you need one or more designers, developers and a business person, in order to create a useful style guide. You need buy in from the people that will use it and time and passion to make the design system work. Start the education process early to get people to commit to it completely.

Clear documentation is very important and it is a really good idea to prefix all classes and consider naming conventions that are part of the system. The process of building a design system is ongoing and iterative, and the process of maintenance and updating might be passed to the customer or different developers, so this ensures that you can always identify the original components.

Example of button components and code

Make available examples of CSS code to copy and paste.

Stylabilla

Style Guide WeTransfer file download

Designing for deaf people, for everyone actually

Marie van Driessche

Interaction Designer, VPRO

Marie is deaf and uses sign language as her first language. Marie gave an in-depth introduction about what it is to be deaf and to be part of the Deaf community. This was so interesting and inspiring.

I don't have a disability: society imposes a disability upon me

It was enlightening to hear that sign language is regarded as their first language and it doesn’t exist in written form. We often consider the needs of users’ visual impairments, but actually there is a significant portion of users who struggle with reading for many reasons.

85% of the videos on Facebook are viewed without sound and with subtitles. So, actually a large proportion of people are using this feature with or without hearing impairments.

For example, something to consider is mandatory fields on web forms that are of no use such as ‘telephone number’. It would be useful instead to provide an option to choose your preferred method of contact including a comment field to explain why a user does not want to be called.

Top tips:

Reading = effort

  • Improve readability for everyone.
    • Use headings and subheadings
    • Make one point per paragraph
    • Use short sentences: seven to ten words per line
    • Use bulleted lists
    • Use easily accessible language
    • Avoid unnecessary jargon or slang
    • Use images, diagrams or icons or translate
    • Chunk your content
    • Use white space
    • Glossary for specialised vocabulary.

Microsoft Inclusive Design

Goodbye Utrecht

We found this conference both informative and inspiring from a technical and holistic point of view. We learned some new CSS techniques that we’re sure will prove invaluable, web design and development processes, and gained fascinating insights into design for accessibility.

Frontend United graphics

Leave a reply

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=""> <s> <strike> <strong>

css.php

Report this page

To report inappropriate content on this page, please use the form below. Upon receiving your report, we will be in touch as per the Take Down Policy of the service.

Please note that personal data collected through this form is used and stored for the purposes of processing this report and communication with you.

If you are unable to report a concern about content via this form please contact the Service Owner.

Please enter an email address you wish to be contacted on. Please describe the unacceptable content in sufficient detail to allow us to locate it, and why you consider it to be unacceptable.
By submitting this report, you accept that it is accurate and that fraudulent or nuisance complaints may result in action by the University.

  Cancel