Responsive Illustrations

February 25, 2021

More and more of us are browsing the web on our phones. Most of the times is just more convenient than sitting down at a desktop or laptop computer. And the data confirms it — mobile accounts for approximately half of the web traffic worldwide. In the third quarter of 2019, mobile devices (excluding tablets) generated 51.5% of global website traffic (source: Statista).

As people increasingly started to use a diversity of devices to browse the web, designers realised the days of designing a website for a single desktop screen were over. So they had to re-thinking how their designs were displayed across different devices. That brings us to the concept of responsive design, which we’ll cover in the first part of this article.

Then we want to focus particularly on responsive illustrations. More and more designers are taking advantage of custom illustration work on the websites they create. And why shouldn’t they? Good illustrations are not only a feast for the eyes, they can help users better understand the brand’s message. They certainly look better than some random stock photos that we recognise from seeing on another website.

Can the same illustration be used the same way on a desktop screen, on a tablet or on a smartphone? How is it possible to make them look great on every screen without losing quality or the idea the brand is trying to convey? Let’s see.

First things first — what’s responsive design?

If designers and developers had to build countless versions of a website for every known device there is, it would be impractical both time and cost-wise. Responsive web design (or mobile-friendly design) is an approach that allows design and code to respond to the size and orientation of a device’s screen. Responsive websites essentially use fluid grids, flexible images and CSS styling to change the site’s design and render it according to the width of the viewing screen.

Responsive web design means that the page uses the same URL and the same code whether the user is on a desktop computer, tablet, or mobile phone — only the display adjusts or responds according to the screen size.

Google

And why is it important?

A need for speed

Although more than half of the global population is currently connected to the internet (according to Statista, as of October 2020, almost 4.66 billion people were active internet users, which encompasses 59% of the global population), internet speed is still quite slow in many parts of the world. Responsive design plays an important role in the optimisation of websites for speed. That’s relevant when 1 in 4 visitors would abandon a website if it takes more than 4 seconds to load. As a consequence, it will negatively affect conversions.

Search engine stardom

Speed is also crucial when search engines demote websites that don’t load quickly, both on desktop and mobile searches.

Since April 2015, Google has introduced responsive websites to their ranking criteria. That’s of major importance when it comes to SEO (Search Engine Optimisation) and if you want your website to secure a spot on the top results displayed to users. And as we know, high Google rankings drive much more traffic and possibly more conversions.

When a website isn’t mobile-friendly images might appear distorted, text is too small and hard to read, or doesn’t fit the screen at all, information is difficult to find. Having a website optimised for mobile can make a huge difference, specially when we know that 67% of mobile users say they’re more likely to buy a site’s product or service when the site is mobile friendly.

To mobile-optimise websites and meet user needs, there are a series of best practices designers and developers should take into account. They concern, for example, clickable areas, buttons, content, imagery and typography. But today, we want to focus on a particular one — illustrations.

Responsive illustrations — what are they and how do they work?

Illustrations have become a key web design trend, and one that’s definitely here to stay. However they are more than just decoration to make a website’s layout look nice. The best illustrations are those who enhance both the website’s content and the brand message. They are incredibly effective to engage visitors and add a human touch to the overall experience.

If we think that 94% of first impressions are design-related and 38% of people will stop engaging with a website if the layout is unattractive, then creating an aesthetically beautiful website, taking advantage of illustration, must be a priority to leave a lasting impression on users.

The secret: SVGs

SVGs or Scalable Vector Graphics are essential for any responsive design that uses illustrations or icons. When you create a JPG in Photoshop, for example, the file is exported as a fixed set of pixels, which can make logos or illustrations lose quality and appear pixelated or grainy when scaled up. Unlike image files in JPG and PNG format, SVGs are infinitely scalable.

SVGs are resolution-independent because they’re a vector format constructed using a mathematical equation that allows images to scale in size without losing quality. With SVGs the final product uses XML format, which is a collection of code. Since an SVG is a vector base graphic, it will scale any size to fit different size devices. So by using an icon or graphic in SVG, you know it will remain pixel-perfect across all experiences. For that reason, SVGs are a huge time saver as you don’t have to design multiple versions of an illustration to fit different screens.

Then there’s the speed factor. We all know it’s pretty annoying when we’re sitting on our phones and watch an image buffer because of how large it is. SVGs often have a smaller size file, which helps websites load faster.

Let’s take a look at this example

To be responsive, this illustration of a man and woman in an office setting is built in 3 layers — background, person 1 and person 2 — each layer corresponding to a different SVG file.

With a responsive approach, the illustration increases proportionally. However, in order for the illustrations of the two persons to be framed on the screen, the “Person 1” and “Person 2” layers move to the centre of the screen.

If you we don’t use a responsive approach the illustration will appear small or important parts of the image will be the ones to be slightly cutoff. By using a responsive approach we will keep the important elements of the foreground, and the less important elements in the background will disappear.

In the responsive approach, we might not see some elements of the background layer when using a mobile device, however that doesn’t affect the idea the illustration is trying to convey because the important elements of the foreground are well framed.

The illustration we see in the non-responsive approach would probably make more sense in a tablet or desktop screen which are big enough for us to see more details.

Who’s nailing it

HubSpot’s homepage strongly relies on illustrations. If they had been saved in PNG format, their size would be quite bigger, due to all the details, the amount of colours used and the large dimensions. That would result in more loading time and poorer quality.

When comparing the homepage illustration in both desktop and mobile devices, we can see that instead of having the same illustration sized down to fit the smaller screen, two of the buildings disappear and only one is included.

The Firewatch videogame website uses amazing background illustrations. We can clearly see how the illustration adapts to a smaller screen size.

Another great example is Loop11. This is how the illustrations on their homepage look like:

When we see their website on our mobile, this is what we get:

We can see that the first illustration decreased proportionally. The man on the right disappeared but that didn’t affected the idea they’re trying to illustrate. The second illustration we see on the desktop screen loses the lifter element and focuses only on the icons.

Illustrating all the way (and for all devices)

It is no longer enough to have a static website that only works well in desktop screens. If a big part of your visitors are accessing your website through a mobile device, a page designed for a desktop will simply not do the trick. Mobile website traffic has never been so important. Businesses who don’t have a website compatible with mobile devices are likely losing a high number of potencial customers to their competitors.

When it comes to illustrations, they can do a great job in representing brands on their websites, helping users understand content in both a unique and engaging way. Surely seeing an illustration in a desktop screen and on our mobile is clearly different. On a wider screen, we’ll be able to perceive details in a way that we’ll not in a smaller one. That’s why it’s crucial that illustrations, along with all the other elements of an interface (menu, buttons, text, etc.), can adjust to whichever device each user decides to open a website on.

Nearly 8 in 10 of consumers would stop engaging with content that doesn’t display well on their device (source: Adobe). That’s why designing a website for varying devices and screen sizes is critical. Responsive illustrations and overall page design are about optimising the experience for everyone, no matter the device they’re using. That will result in higher conversion rates, higher leads and business growth.