In our first blog about Web Design Responsive Imagery we explained the basics.
Now here is part two of our Best Practice – Web Design Responsive Imagery, Logos and Icons blog. Enjoy!
Photography makes up some of the ‘heaviest’ bits of a website, and so the key is optimisation. Stay away from PNG (unless you need transparency) and TIFF images, as these don’t provide any true form of compression, and therefore are rather large.
Instead opt for JPEG compression.
If you’re using Photoshop, make sure to use the ‘Save for Web’ feature. Zoom in to the image at 100% and adjust the quality making sure that you don’t see any change in the visual quality. Make sure that ‘Convert to RGB’ is checked, as this converts print images (CMYK) into web standard images (if you notice the colour of your images is off on your website, this is likely the problem).
Your logo is a key part of your brand, and it needs to be well represented on your website. The normal way to include a logo is using a PNG or JPEG image. However, for responsive design this often leads to the logo looking blurry or distorted on higher resolution screens.
Driven by the continued increase in mobile device usage, there have been many changes to how logos are presented and used as can be seen in these articles from Viget.com and SmashingMagazine.com. There is a concentration on simplicity and clarity on all device types and screen sizes.
Source: (Smashing Magazine, 2016)
As you can see, having a progressive approach to logos, where it can scale with the page, and transition to icons when needed is really important for clarity on smaller devices. The only practical way to scale an image indefinitely is using vector images.
A perfect example of this, that you can try yourself, is available at ResponsiveLogos.co.uk. Simply load the page and resize your browser width to see the logos adapt to the available space, some logos simply get smaller, whilst others simplify details as they shrink.
Source: (Marketing Cloud, 2014)
As described above, any website that has icons (every website), should have standard font files for the main website typography, and an icon font file. A good example of this would be Font Awesome which provides a set of font files that cover nearly every requirement.
However, this is a little overkill and loading such a large font file can slow down your site, especially on mobile.
Fontello is a similar site, that allows you to select icons from a few different libraries and also upload your own to create a custom icon font set.
Using this, you can scale, colour and position your icons using CSS to keep them consistent throughout the site.
When designing and building a responsive website, even when designing some brand guidelines, think about how best to include imagery and icons within your website, and what sort of interactions you require and can achieve.
Make sure that you’re using the best implementation for each use-case, optimising and compressing where possible, without reducing quality.