Upfront Conference 2015 – Responsive web design is more than the look

Posted on

Conferences allow us to look outwards, to recharge our enthusiasm for the web and to inspire us to continue making great things.

Most of us are naturally inward looking, turning our heads to see what others are doing can be extremely valuable. Both to learn new things and to confirm we’re on the right track.

This year saw the very first UpFront Conference. A Manchester-based conference that focuses on front end development. It was probably one of the most interesting and valuable conferences I have been to.

When I go to a conference I generally have a good idea of what I want to get out of it. At iWeb we’ve been experimenting and using pattern libraries on a number of recent projects. When we saw Brad Frost was speaking, one of the pioneers of pattern libraries, we jumped at the opportunity to see him.

Design systems

Pattern libraries are a collection of styles, elements and pages that allow us to build websites. Think of it as the brand guidelines for a website. Often referred to as a design system, they allow for a consistent experience on every device and every page of a website. They work great and go hand in hand with responsive web design.

Brad Frost spoke about his ideas using the analogy of atoms, molecules and organisms, coining the phrase atomic design system. Brad spoke about how page styles can be layered on top of each other to eventually create a fully interactive page. Dave Olsen and Brad created Pattern Lab which is a piece of software that helps you create your own pattern libraries. The Pattern Lab website does a great job explaining the philosophy along with a demo of the software.

Performance

Throughout the conference the message was clear. Performance is more important than ever.

We often forget responsive web design is much more than adapting the visual presentation of the website for different screen resolutions. Responsive web design is about providing a great experience on every device to everyone. This should always consider accessibility, usability, input control (touch, mouse, keyboard, remote, etc.) and speed. Anna Debenham showed just how many devices there are out in the world in her talk about console browsers.

Both Dean Hume and Yesenia Perez-Cruz spoke about the consequences and solutions of considering performance. Both were great talks with Dean’s focusing on the more technical side of improving speed and Yesenia’s on considering performance while designing.

Addy Osmani

When you want to go faster you have to give up the
things that are slowing you down.

Addy Osmani

There have been numerous articles on this topic and the evidence is pretty conclusive. Amazon’s research is often quoted, they found a 100ms delay in their website caused a 1% decrease in sales. Similarly, Walmart released evidence that a one second speed improvement resulted in a sales increase of 20%. On top of all that, Google now use website speed as a ranking factor and they’re even playing with the idea of labeling search results with a slow label.

Dean spoke about the technical changes we can make to our projects. Using the acronym RAIL, standing for response, animation, idle and load; Dean showed the different key areas we can focus on to improve our website performance. His talk spoke about everything from caching to image optimisation.

Performance is often seen as something we focus on in the later stages of a project. Both Dean’s and Yesenia’s talk put performance at the forefront throughout a project.

The message is clear – a successful website has to be a fast one.

Perceived performance

We want our websites to be as fast as possible but as Dean mentioned in his talk, it’s the perceived performance we really care about. Perceived performance is how quick a website feels to use, not necessarily how fast the page really is. What’s key here is controlling the initial page load, prioritising the order of elements, loading the important content first.

Richard Rutter, who I’d like to call a typography wizard, spoke about how loading custom web fonts often creates a delay where nothing shows, while the browser waits to download the fonts to use. This can be altered by loading a web safe font first, then when the custom font is available switch to that. This can cause some minor snapping and jerking as the new font may have different spacing but allows the content to appear much quicker.

Dean Hume also spoke about this with regards to loading some CSS inline. I have previously read about this method on Addy Osmani blog.  The idea is you isolate the most important CSS and add that inline, then with JavaScript load the rest of the CSS. This allows the page to start rendering significantly faster.

Performance budgets

Lots has been written around performance budgets with many agencies already adopting the philosophy. Before the conference I had heard of them. However, I hadn’t spent much time investigating them.

Performance budgets are the idea of setting speed targets for a website. They can either be a page load time, a page size or both. Setting performance targets in the initial stages of a website forces the focus of speed to be at the forefront of every decision made.

The performance budget helps us prioritise what’s important and understand the implications of adding images, JavaScript, web fonts and styles.

Yesenia provided a great example of requesting a carousel. It can have a huge impact on the performance budget because of the need to load additional JavaScript and images. She even managed to slip in a cheeky mention for Should I Use a Carousel.

Dean raised another example which was the use of social sharing widgets. These are renowned for impacting performance but are very rarely used. In fact a study of 61 million pages views found that just 0.2% of users interacted with them. A performance budget is often weighing up the pros and cons of features.

There is even a Gulp and Grunt plugin that will tell you if you’re going over your performance budget! Automation basically rocks.

Automated workflows

Automated workflow tools such as Gulp or Grunt are becoming an important part of front end development. These tools can help automate virtually anything from compiling SASS or LESS to optimising images.

Dean mentioned a whole plethora of tools that made my pencil work hard to jot down. Just to name a few of my favourites:

Task runners, such as Gulp and Grunt are becoming essential tools for front end development, to both speed up workflow and to help improve performance.

Key takeaways

It’s only when you come to writing up an event you realise how much is covered in one day. It shows how valuable conferences like these are and when they’re only around £100 it’s a bargain!  I could have easily wrote a books worth on the amount I learned.

Some of the key takeaways from UpFront Conference 2015:

  • Design systems are key for a responsive website
  • Consider every device, not just their screen resolution but their input control too
  • Performance is key to a successful website
  • Performance should be considered at every stage of a project. That includes the design!
  • Automated workflows have become key to helping us speed up project development, reduce overhead and improve performance
  • Use a performance budget to bring it to the forefront of all decisions
  • Communication between designers, developers and the client is key to a successful project

Want to discuss a project?

Talk to our Magento experts on 01785 279920

Request a callback