Pixel Pioneers Bristol 2019 - pp.bristol.get('knowledge')

Life is like riding a bicycle. To keep your balance you must keep moving
— Albert Einstein

That quote from Albert Einstein is so appropriate for all businesses but specifically for web and technology companies. With new technologies always being developed it is important to keep learning and finding new and better ways to give clients the awesome service they expect. At Noughts & Ones, we are always looking at new platforms and new technologies to allow us to give clients more functionality and make them stand out from the crowd.

This is where Pixel Pioneers comes in. Although they have only been around for 3 years, each year they have put on a fantastic line up of speakers and workshops with a wide range of topics. This blog post will take you through the speakers we went to see and what we learnt from them.

Craig Sullivan - Optimising device experience // Twitter

Craig is a genius when it comes to looking at UX of websites and telling you how it should be done! He brought a few examples to the talk of sites that just don't work, one of which was British Airways. If you load up their site on certain devices the user interface is so small that you need a thumb the site of an ant to accurately use it. It was staggering that some major companies don't test their own websites to make sure they work for every customer.

Now testing a website to make sure it works on every device is very hard, if not impossible. There are so many devices in the world today with an equally large amount of browsers. He did, however, share a technique of using Google analytics to look at the conversion rates of different landing pages to spot inconsistencies in a website. Using this information you can narrow down your search for issues and ultimately fix them quicker.

You can read more on this here

Lisi Linhart - Practical web animation // Twitter

Lisi came to Pixel Pioneers to talk about web animation and how to do it well, something a lot of people think they are doing well. She explained that different CSS animations use different rendering engines and sometimes if you animate one item, the browser will re-paint (render) all of the sibling elements as well. This is where you start to see some animations fall down and become 'laggy', especially if there are lots of them.

We came away from the talk with a better understanding of just how important it is to take the extra few minutes to make your CSS more specific. This will make less work for the browser and improve the usability of the site for the end users. One final tip that she gave us was that if you have a basic animation it should be around 0.1s - 0.2s in duration and if you have a more complicated animation it should be around 0.4s - 0.6s. This gives the animation enough time to run and the user enough time to notice it.

See the Pen Rocket - Codevember #10 by Lisi (@lisilinhart) on CodePen.

Chen Hui Jing - Using DevTools to understand modern CSS layouts // Twitter

Chen Hui Jing definitely gets the award for the biggest knowledge bomb dropped in the conference! She showed us how using FireFox Developer Edition gives you the tools to see how flex-box and CSS grid layouts look with visual overlays. This is a massive help to us as we primarily use flex-box and CSS grid to make the custom layouts for the sites that we build. This DevTool feature will save us so much time in the future and has actually convinced a couple of our developers to switch from Chrome to FireFox as their daily web browser!


Phil Hawksworth - JAMstack // Twitter

Phil works for a company called Netlify and they... well let's just say they are revolutionising the way that we think about building websites. Phil's talk on how Netlify works using a JAMstack process was inspiring and opened up so many more questions than answers, mostly around the topic of "How do we start using this for our clients?". The best news is that one of our developers, Adam, has been tinkering around with Netlify and thinks that we could be using it for client projects at some point this year!

Phil was kind enough to post the link to his slides on his twitter account for people to view, check them out here

Rachel Andrew - Grids: All the way down // Twitter

Rachel's talk was all about a technology that we can't actually use yet, CSS sub-grids, however, it was one of the most interesting. We at Noughts & Ones have been using CSS grid for a little while now to develop unique layouts for our clients but there have been times that we almost needed a grid within a grid... welcome to CSS sub-grid. It does exactly that, it allows you to define your grids and then put grids inside them and link them all up with a little black magic. This gives us creative developers more scope to create some very complex buy uniform layouts to hold lots of content.

As mentioned above, CSS sub-grid is not actually available yet, with the exception of Firefox Nightly. If you are using this browser you can have a crack at getting CSS sub-grid to work and see what creative layouts you can come up with. Then when the other browsers catch up with FireFox we can start using it for clients as well!

Round up and final thoughts

Overall the event was exactly what we wanted it to be. We learnt a lot of new information and we have new theories and practices to research and implement into our work pipeline. We will definitely be going back to Pixel Pioneers next year and we recommend it to anyone working in the web industry that wants to take what they do to the next level.

TeamJoe Coryevents