In a time where your website needs to function on a multitude of various devices, we’re all looking towards responsive design to save the day.
As with all new web techniques there are a few best practices we can use to make sure responsive design provides the flexibility it’s intended to.
What responsive design really is.
The main principle for responsive design is to create a browsing experience that is consistent across all platforms. A visitor viewing your website from a mobile or tablet should get the same experience as they would do from viewing on a desktop or laptop. Essentially most responsive design techniques are ones every modern web designer should be using daily as part of simple, good web design. Flexible layouts and well-formed HTML/CSS is now more imperative to accommodate the ever-increasing way to browse the web.
We can however break down responsive design into three main key features;
A flexible grid foundation.
There are plenty of pre-built grid foundations out there for you to adapt and use, but don’t be restricted by these. For some designs creating your own grid system can be much more beneficial and easier to control. You can find a number of great tools and tutorials on how to build your own grid system.
Flexible media.
Trying to load huge, oversized images that scale down on smaller devices can cause you some problems, and isn’t great for faster loading times. There are other options, such as using the CSS overflow property to dynamically crop images depending on the size of their container, or we can manipulate the DOM to serve the appropriate image versions depending on the device detected, much like Adaptive-Images does.
The final option is to use the CSS property – display:none combined with media queries to hide images when they’re not required. However, for speed performance this isn’t the ideal solution.
Different views for different contexts.
Media queries allow designers to build websites with multiple layouts using the same HTML elements and serving selected stylesheets or sections of stylesheets. Using media queries there are a number of parameters that can be detected to decide when to serve an alternative layout, such as screen size, portrait or landscape orientation, colour and screen resolution, etc..
For media queries to be most effective, we need to remember to take the first two key features into consideration first, building a solid flexible grid and flexible media will make media queries a lot easier and create a more effective end result.
As well as these key features, there are a number of other best practices we can keep in mind when it comes to creating a responsive design;
Keep responsive layouts in mind.
Getting an understanding of how some website layouts work a lot better at converting to new sizes than others, will benefit you when you’re wire-framing your designs. Try to avoid using fancy javascripts and flash, pointless absolute elements and complex div nesting. The simpler the core structure and layout the better.
Only keep the essentials.
When designing for multiple devices, we need to bear in mind that not all content works, and is never intended to work, on certain devices, such as mobile. Particular javascripts and flash files are best left to desktop use, and should be removed from your tablet and mobile layouts. This can easily be achieved by including a specific CSS class to those elements which are removed via your media queries. Of course, you could just lose them entirely.
When to use break points.
Attempting to cater for every possible screen size would be overly time-consuming and rarely beneficial. We can however focus on the more common screen resolutions:
- < 320px – Older smartphones with small resolutions
- < 480px – Common smartphones
- < 768px – Small devices such as tablets
- > 768px – Medium devices including larger tablets, small desktop/laptops
- > 960px – Large devices such as standard desktop/laptops
- > 1200px – Extra Large devices such as widescreen desktops/retina displays
Remembering these sizes as a guideline, you can better understand when and how to position certain elements. Some designs will require bespoke break points, whether you start mobile up or top down, you can scale your design and add in your custom break points when the content dictates it.
Content & element compression.
In addition to reducing your HTML/CSS file sizes by removing unnecessary white space, line breaks and using shorthand, consider using a program such as GZIP to compress your website resources, making your content easier to access from devices with low bandwidths.
It is also a good idea if possible to include all your media queries into a single CSS file, rather than multiple files for different devices, this reduces the number of HTTP requests and will aid in speeding up page load times.
There’s still more to be done.
Responsive design is taking a step in the right direction for a more dynamic and engaging web experience, but it still has its downfalls. Users are browsing on various devices with different intentions, mobile users are more than likely wanting to find core information quickly. Loading an entire site, to then hide half of it, cannot be the best solution.
It is however, encouraging designers to think more and execute better optimised sites that are ideal, intuitive and unique to a multitude of new browsing experiences.
