Responsive design. Although relatively simple to set up, there are still a few pitfalls when it comes to creating a great end user experience and a fast responsive website.
We’ve all heard about responsive design, and if you’re a designer or developer you would have had this faithful companion in your tool belt for many years now. For those not familiar, however, responsive design means using fluid grids, fluid layouts and media queries to adapt your website to an ever-changing landscape of device screen sizes.
These days it’s not hard to get a simple responsive site up and running, with the help of such front end frameworks as Zurb Foundation and Bootstrap. Don’t get me wrong, these are world-class tools that can really make life easier, however with so many components at your fingertips, you may find it a challenge to avoid the inevitable slow, clunky website experience.
So, here are a few tips to cutting the fat on those bulky responsive websites when using frameworks, and making it a faster, leaner experience for all.
As a designer, responsive frameworks have served as a quick and easy way of getting templates ready for development. The teams behind these frameworks are always researching and enhancing their products, so the out-of-the-box solution is hard to ignore. So why re-invent the wheel, and do it from scratch?
Something to consider before you begin your project, is whether you really need to download the complete build (which is every single file and line of code required to take full advantage of what the framework can offer). Based on the design of your website, could you simply pick and choose what is needed to get the job done, right? Well, you may need less than you think. Here are the key elements of a fast responsive website:
Use Only the Essential Elements for a Fast Responsive Website
Most popular frameworks will provide package options at the point of download that only include the essential elements required to construct basic responsive templates. The end result is a whopping reduction in file size across your entire file structure, meaning faster page loads and happier end users.
Customize Your Package
Manually customizing your downloadable package is also an option for creating a fast responsive website, but only recommended if you have a clear understanding of the file dependencies.
When customizing a framework build consider the following:
- Choose to only include the general base CSS rather than the full sheet. This may include common styles for typography, buttons, and forms. You can always add styles from the framework later if needed.
Keep It Simple, Minimal, & Lightweight
Whilst many frameworks and responsive systems will mesmerize you with their plethora of componentry, navigational systems and robust CSS, there is always the less known, lightweight options that may prove to be a better solution in the long run.
If you are not interested in a framework, but you still don’t wish to write your website from scratch, generating a ready-to-go grid system online may be a good resource to quickly get you started. Free online generators such as Gridpak prove to be very useful. Gridpak will not only provide you with custom CSS and media queries, they will also include associated LESS, SASS and design files to download as a package. All of this can be done in the time a developer makes a coffee!
Boost Performance With Responsive Images
No one wants to see a blurry, pixelated image on a large display, or even worse a huge image on their mobile phone that takes forever to load.
The average site is now is around 2.4 MB in size – two times larger than the average site from four years ago, according to data tracked by HTTP Archive. As illustrated in the graphs below, it’s important that we address the size of the images that we serve up to our responsive websites for both website and mobile:
Data source – HTTP Archive
As designers and developers we can maximize the performance and overall user experience by serving images of different quality depending on the end user’s viewport, without using complicated server-side setup. As you can see in the graphs above, it’s becoming more important to design a fast responsive website. Although these approaches have been around for a while, and still suffer in the eye’s of compatibility, the HTML picture element and the srcset and sizes attributes have finally been drafted into the HTML 5.1 specification. Because we cannot predict where and how users are going to view our websites, we need the browsers themselves to pick the best image for the situation.
The picture element is a container used to specify multiple source elements for a specific image contained in it. The browser will choose the most suitable source according to the current layout of the page, and the device it will be displayed on, whether it’s a normal or hiDPI device.
<picture> <source srcset=”big-image.png“ media=”(min-width: 600px)“> <img src=”small-image.png” alt=”awesomeness”> </picture> ‘Srcset’ attribute
If you’re implementing responsive images (different images in HTML for different situations) and all you are doing is switching between different versions of the same image, all you need is the srcset attribute on the img.
<img src=”small-image.png” srcset=”medium-image.png 1000w, large.jpg 2000w” alt=”awesomeness”>
The sizes attribute allows us to explicitly define the size the image should be according to a set of media conditions.
<img src=”image.png“ srcset=”small.png 100w, medium.png 500w, large.png 1000w“ sizes=”<media condition> <width>, <media condition> <width>, <optional default image width>“>
So there you have it, a few tips that will help you create a lean, clean and fast responsive website. We’ve obviously only skimmed the surface when it comes to increasing the overall performance of your website, however, these simple approaches ensure that you have an optimal user experience in mind.
Trimming the redundant code from a framework will not only make your pages load faster, but it will also make it easier for you to build upon and alter the existing code base without conflict. Trimmer frameworks and grid systems tend to also be more flexible when it comes to front-end design, and the more modular approach allows you to remove components when the design changes.