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.
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.
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.
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.
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.
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.
The first of our content layout examples was an addon button for an input field.
Vertically centred element
The second example is content vertically and horizontally entered using flexbox.
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.
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.
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:
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.
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.
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/
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
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