Front-end London, July 2014

Last week I attended Front End London, a monthly meet-up organised and hosted by Made by Many in Angel. Their impressive, trendy office provides the perfect venue for chatting to fellow front-enders, enjoying some free beer and pizza, and learning a few things from the speakers. So, with a beer in one hand and a pen in the other, I eagerly took notes so I could share the event with those who missed out on tickets.

Speakers at this months Front End London, included Jonas Ohlsson demonstrating how to automate faster page rendering, followed by Paul Hamilton offering great insights into his design techniques and finally Peter O'Shaughnessy letting us try out his Google Cardboard and Oculus Rift.

Jonas Ohlsson is a Front-End developer in London and creator of Critical Path CSS Generator. He began with a reminder of why website performance is so important: "When people click on a link they remain focused for about a second, after that they get distracted." Website performance effects revenue, conversion rates and usability.

The focus of this talk was on optimising the critical rendering path for faster page loading, paying particular attention to CSS. The critical rendering path refers to the journey taken to render a webpage. Thus, an optimised critical rendering path would render only what is essential for an initial view of the webpage. With this in mind, reducing the volume of CSS to what is required above the fold will speed up page rendering.

To implement this, critical CSS should be inlined in the <head> of the HTML file and the full CSS moved to the end of the page before </body>, as shown below on one of Jonas' slides.

So, how do you decide which CSS is critical? Jonas showed us Penthouse and Critical Path CSS Generator, which are tools that he created to take on the job of generating critical CSS.

Another useful tool I took away from this talk was, which runs website speed tests from different browsers and locations.

Paul Hamilton from Made by Many gave us some great advice and insights into his design workflow, which focuses on meeting the needs of businesses and users.

Design projects start with ideas generated in workshops, meetings with clients, sketching sessions, and meetings with designers. This stage is all about getting ideas down, so it's important to encourage everyone to have a voice; help people join in conversations, listen to them and translate the client's requirements.

Ideas are filtered down, developed into something testable and presented to users for validation. Paul often produces very quick sketches for testing. These can be created quickly and offer more room for interpretation, giving him a better understanding of what people want. For the next stage of prototyping, Paul recommends using Flinto and Keynote. Both tools are quick and easy to use and result in finished prototypes within a day. In his experience they generate strong feedback in the early stages of projects. Always test on real potential users rather than people in the industry. Left field are a London field agency who specialise in recruiting participants for focus groups, interviews and all kinds of user research activities.

Here are some of Paul's key lessons and advice from the talk:

  • Someone may have better ideas – always listen and consider the possibilities.
  • Learn early and learn often – get ideas in front of users quickly.
  • Don't fall in love with your ideas – if something tests badly, move on quickly.
  • Design is not about creating something that looks pretty – you need to look at systems, humans and how they connect.

The final talk from Peter O'Shaughnessy, a developer in a future technologies team, was great fun. We looked at some of the new interfaces on the horizon and even got to have a go ourselves.

Desktop and mobile are old news. Now it's all about devices and the vast array of screen sizes. Whilst they have their differences, essentially they all produce 2d "pictures under glass". Whether wearable technology will take off is yet to be seen.

So, what is next? Peter pointed out that new technologies take time to take off. You have to be patient as many new technology releases take years of refinement, augmentation and growth. The diagram below (from Peter's slides, original source Wikipedia) illustrates how consumers can get very excited about new technologies and have inflated expectations. The dip is a result of products not meeting expectations, but as the technology is refined and users understand their purpose, they are adopted into lifestyles.

This is where it gets exciting. We found out that the upcoming paradigms are augmented reality and holographics. Virtual reality takes the experience further than we have been before. It gives us a sense of presence, tricking enough of the subconscious into making the body react. Peter gave us a demonstration of an Oculus Rift – a VR head-mounted display for games and experiences. Check out their site, it looks fun!

As a web developer, I was excited to learn that Mozilla have released a version of Firefox with virtual reality support and Google have done the same with Chrome. They are working on implementing features such as device discovery, full screen extensions, sensor interpretation (e.g. orientation) and rendering for different hardware. It's all early days though.

Later on I tried out a Google Cardboard! Peter had created a nice virtual reality dinosaur as a demo. Google Cardboard really is a cardboard box – a smartphone slots into it and the lenses and button turns it into a VR device. If you want to see a demo and some code, Google have posted a demo using WebGL and Three.js.

I recommend reading Peter's brilliant blog post, which has lots more information on this topic, some WebGL code and more about the dinosaur demo!

After the talks there was one thing left to do – take the discussions to the pub! Thanks to the speakers and the guys at Made by Many for organising a great event. Looking forward to next month!

I originally posted this on RocketMill's blog.