With Google rolling out the “Mobile Friendly” update at the end April this year, a lot of companies have opened up to the idea of making their own websites responsive. But responsive design and development is far from a new technique, and it is steadily becoming the main part of a website - Rather than it being an “extra”.
When it comes to designing or developing responsive websites, It still feels like we haven’t quite mastered the correct techniques, or fully understand the correct workflow due to it forever growing and changing with new ways of doing things popping up regularly.
At Shape we have crafted a lot of responsive websites, and have come across various ways of making them work within a browser. So I’ve put together a few of our regularly used techniques for you to use in your own projects.
Flex Box Order
The Flex Box module in CSS3 allows us to layout and align elements a lot easier for responsive websites, as opposed to floating and using percentage widths. But a little unknown part of Flex Box is the ability to change the order of any element that has Flex Box applied to it!
This is brilliant for responsive websites because we can ensure the hierarchy of sections of our website stay correct on all devices / screen sizes.
We used this technique on the Climb Online website footer - shrink the browser and notice the elements change order.
Every developer knows about transform: translate(...) and that it brings better positioning abilities within animations and transitions in CSS - The main being an “Off Canvas” navigation, which is easily achieved with this property.
But it can also help fix a few bugs within responsive websites! We noticed in a few latest builds of Google Chrome that “Fixed” or “Sticky” elements (E.g. ) become jittery when scrolling. To fix this problem simply add:
Adding this line forces the browser to kick the GPU in to action and forces hardware acceleration which increases frame rate to make animations etc a lot smoother + scrolling!
One of the major headaches with responsive websites, is font sizing. On smaller devices fonts sometimes need to be a bit larger than on larger devices and doing this with px units is just not possible. Many developers use EM, % and even Viewport units now (I personally dislike this approach) but they all come with their headaches.
The problem with % and EM units is that they are relative to the parent container and before long become a kind of inception sizing nightmare! This is where REM units are brilliant - The size is relative to the “root” element (Being <html>) and by adjusting the root elements size, makes all the sites font sizes change with it.
Brilliant huh! In the demo below, try changing the html font-size value and notice all the other font sizes respond to this.
We’ve recently adopted this in to our own bespoke CSS / SASS framework. Theres just one downside in that REM units are not 100% supported in older versions of IE (http://caniuse.com/#feat=rem), so just make sure you have a PX fallback
SASS Break Points & Media Queries
Love them or hate them - CSS pre-processors speed up the front end development process and when it comes to responsive website development you certainly need to speed up development. One way we’ve sped up the development process of our websites is to create a SASS mixin that can handle many tasks such as the media query breakpoints as well as creating a different grid for the breakpoints.
To do this, we first create a SASS Map that contains all the options for that particular size, giving each part of the map a easily identifiable name e.g. “Tablet”. Then we’ve created a SASS mixin that enables to output the breakpoints easily.
In the example we’ve created, shrink the browser to see it in action. Also view the compiled CSS to see how neat this looks, as well as how quickly you can apply media queries and update them easily by changing a few settings.
Every developer knows that SVG’s are the way forward, so I don’t need to explain that! But, I thought it would be good to share a tool I found that compresses and optimises SVG’s - SVG OMG.
Running SVG’s through this optimiser reduced our Shape illustrations folder from 16mb, to 7mb! With no quality loss.
We’ll probably find these techniques may not be needed in the future, or better techniques will come along. But that is the beauty of digital - It’s ever evolving and changing, making our jobs as web developers interesting and challenging.
If anybody uses these techniques or have ways of improving on them, let us know in the comments or send us a Tweet.
P.s. You may have noticed we now have a CodePen account, if you have an account on there kindly follow us :) We will be keeping this updated with various snippets of code.