TREND 4

Super-light Sites

Loading speed and page weight have always been important - but with mobile devices becoming increasingly more popular as the web becomes more complex, is it more important than ever?

Performance is user experience.5

Users expect that a website will load in 2 seconds or less - no matter if they are visiting from their laptop on a high-speed connection at their office on or on the road on a 3G connection. The problem is our websites are becoming heavier and heavier experiences that require loader animations or specialty code to try and load progressively. Our industry is not truly designing for performance these days, despite the fact that around us more and more websites are being accessed on mobile phones than ever before.6  What we need to be looking at, beyond the visuals of our sites, is the performance. Mating how our pages load with how they look is beginning to look at the entire user experience - not just what happens to your user once your page manages to load.

Fast page load time builds trust into your websites.

- LARA CALLENDER HOGAN5

What can I do?

Many designers are looking at creative solutions to this problem: how do you design something amazing and lightweight?

Bloat like bootstrap is to go. Bootstrap is great as a framework, but when used on a launched design, there is a lot of excess code that may not be being used in your design. Keep code clean, minimized, and simple is a great first step.


But what defines bloat? Web has gone through so much - from using splash pages to launch you into Flash websites to the current sites built on hefty CSS frameworks, what is bloat to your website may not be to another website. Be careful to be wary of what you consider bloat and not to cut out functionality, but instead to look at alternative ways to achieve things in order to save on page weight.

Jank is any stuttering or lag that the user sees when your site isn’t able to keep up . I can’t explain it better than they can, so I’m going to take from jankfree.org.


“Modern browsers try to refresh the content on screen in sync with a device's refresh rate. For most devices today, the screen will refresh 60 times a second, or 60Hz. If there is some motion on screen (such as scrolling, transitions, or animations) a browser should create 60 frames per second to match the refresh rate. Jank is any stuttering, juddering or just plain halting that users see when a site or app isn't keeping up with the refresh rate. Jank is the result of frames taking too long for a browser to make, and it negatively impacts your users and how they experience your site or app."7


The best example I can think of for this would be animations. Some animations are easy for your browser, but many animations are quite difficult for your browser to render. One of these isn’t going to kill your design, but too many animations will cause issue to your user. This is an important thing to consider when designing that your page must be able to be rendered by the browser in a decent time.

I hate this one. I do. I love imagery - I am an avid photographer and absolutely can’t get enough of big photographs. It is my true weakness - but I am not alone. We are all designing webpages heavy on imagery. So how do we combat this?


First off, SVG. SVG is amazing as it takes vectors and uses your browser to render them. This makes it lighter weight than any PNG image file you are going to save out. SVG is also easily scaled responsively, easy to change on hover or click, and has a multitude of other amazing benefits besides weight. But, SVG isn’t always going to fix your issue because it’s only for vectors.


What about those amazing photographs? It’s not feasible for us to stop using photographic imagery in JPG format on the web. But what we can do is ensure we are saving our imagery in small file sizes optimized for web. There are plenty of free resources - like TinyJPG - to help you out if you are at a loss when saving from Photoshop or another program.

Challenge Yourself

One of the most inspirational things I can show you is this challenge the creators of An Event Apart hosted in 2016: 10K apart. Designers and developers submitted web sites that were under 10KB that still did amazing things. My favorite is the 10K Pixel Character Creator by Hannah Malcolm. This completely interactive website is both well designed and fun to use.


Being mindful of our designs is truly important in today’s mobile first world. It’s not enough to think of a ‘mobile first’ design ideology as simply the smaller layout, but also the slower connection speeds we experience while outside of our own homes.

TREND 5

Unified Design

Next →