The term Responsive Web Design was first coined by Ethan Marcotte in 2010 (if you haven’t read the original post on A List Apart I recommend that you find the time too http://alistapart.com/article/responsive-web-design). Since then the browsers have done lots to improve our experience building responsive sites, implementing lots of new features. In this talk I talk about some of these new features that you can use today, in 2016.

Slides

First up I want to share my slides with you all, I have hosted them on Speaker Deck so they should work on whatever device your currently viewing this post. The slides themselves should hopefully be detailed enough to give you some reference points however below I have included further reading and code examples.

Code Examples

As part of my talk I went through several examples, it wasn’t possible for me to show the code in much detail due to time constraints so I have put together a series of examples which can be found on JSbin.

Content Prioritisation

Mobile first FlexBox prioritisation

The most common way in which you will be using FlexBox to prioritise your content is when you are thinking mobile first. This means that you will be building your HTML to be in the order for smaller devices and then use media queries to adapt the order/prioritisation of content. Checkout the code for the example used in the talk in this JSBin.

http://jsbin.com/poxoqa/7/

Desktop first FlexBox prioritisation

The main circumstance where you might want to build your prioritisation desktop first is where you need to support Internet Explorer 9 or below.

http://jsbin.com/poxoqa/5/

NanChick Structure Example

During the talk, I went through an example for a restaurant entitled NanChick and showed how it might prioritise content differently based on the type of device. Below I have included an example of how you might structure your code to enable this to work, please note I only built the structure, not the full site design.

http://jsbin.com/luvafa/12/

Content Layout

Add-on Button

The first of our content layout examples was an addon button for an input field.

https://jsbin.com/zifodat/2/edit?html,css,output

Vertically centred element

The second example is content vertically and horizontally entered using flexbox.

https://jsbin.com/xefice/1/edit?html,css,output

Picture Element

When looking at how we can optimise how we can load our assets we took a brief look at how we can use the picture element to optimise which assets to load on each of the different devices we support. I have put the example from the talk (minus the lovely photo of the church I got married in) on JSBin.

http://jsbin.com/weteca/1/

Further Reading

So a few of you asked me for where you can find out more about some of the topics I covered in my talk, I have therefore put together the following links and notes to help you start to reimagine how you design and build your responsive sites.

Content

The first area of the talk looked at is how we can adapt our content, above I have already shown the code examples I used however their is a lot more further reading which I can recommend.

Prioritising your content

When I first gave this talk there wasn’t much in the way of information about why and how you would go about the prioritising content using CSS. I have since written a post about how you can prioritise your content with CSS Flexbox:

https://www.jonathanfielding.com/prioritising-content-with-flexbox/

Content First Approach

So I quoted Bobby Anderson in my talk as he explains this really well, for the full article check out https://blog.prototypr.io/change-your-focus-and-design-content-first-a124e12f3bb2#.c2qa7w9ei.

Content discovery

As part of the talk, I looked at how often on mobile sites, the discovery of onwards journeys is often a lot more difficult due to the way its hidden inside a hamburger menu. I have written a writeup of how you can ensure you content is discoverable on my blog so take a look at it if you want to find out more.

https://www.jonathanfielding.com/ensuring-your-content-is-discoverable/

Adapting Functionality

One of the ways I suggested improving our sites was to adapt the functionality, one way in which you can do this is to use SimpleStateManager. This allows you to target functionality based on the characteristics of the device being used by your user. A full tutorial on how to use SimpleStateManager can be found on this blog https://www.jonathanfielding.com/getting-started-with-simplestatemanager-ssm/

Performance

One of the key areas I discussed in my talk is the impact on the performance, here is some further reading on performance.

Research into why performance matters

There a number of companies that have done research into why performance matters, in the talk I highlighted both Google and Amazon, however, there are many more studies, here are a few useful links worth reading:

Deferring Loading Images

There is a number of different libraries that allow you to defer the loading of images, the one that we use at Beamly is Echo.js which can be found on GitHub (https://github.com/toddmotto/echo/)

Deferring Loading JavaScript

Of everything that was covered the most interesting to me is the deferring of JavaScript, the standard way to do this is to simply load our JavaScript later however this doesn’t really benefit the perceived performance of the page. In my talk I mentioned how you can have Critical JavaScript which will track user interactions so you can handle them when your Main JavaScript has loaded. This isn’t particularly easy to do so I wrote a library which will add event tracking which you can later handle when it loads your main JavaScript. Its called CriticalJS and it can be found on GitHub. This is still early work and likely not production ready but I would love everyone’s thoughts on this so as I continue development I can take into account as many use cases as possible. Also, if anyone wants to pitch in and help I would be very grateful.

https://github.com/jonathan-fielding/criticaljs 

I would love to know your Thoughts and to hear your questions

It was really great speaking at Untangle tonight and meeting loads of new people. It would be great to get all your feedback and of course if you have any questions you failed to ask on the night feel free to post them here or tweet them at me.

Are you looking for your next role?

I work as an Engineering Manager at Beamly where we are currently looking for both Frontend and Full Stack software engineers based in our London office.

Find out more