A quick guide to building a lean, clean and fast responsive website

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.

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.

Frameworks such as Skeleton and Pure boast of super tiny lightweight file sizes. Pure’s entire set of modules clock in at 4.0kb minified. Super-fast for page loads!

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 maximise 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.

Picture Element

<picture>
  <source srcset="big-image.png" media="(min-width: 600px)">
  <img src="small-image.png" alt="awesomeness">
<picture>

<img src="small-image.png" srcset="medium-image.png 1000w,  large.jpg 2000w" alt="awesomeness">

<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>" />

Conclusion

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.

Is your responsive design performing at it’s best? Use Pulse Insights for a fast responsive website. Pulse Insights crawls your website scouting for performance issues created by responsive design that could be giving your end users a poor experience. Take a free trial today.