February 22, 2023
•
The struggle between e-commerce and creative teams on how to merchandise an online store is anything but uncommon. The visions creative teams have are very beautiful — and the concerns of e-commerce teams, very real. With each fuelled by different skill sets and backgrounds, it can sometimes feel like you’re not speaking the same language. No bueno! We’ve put together this handy guide for all you Product Owners, E-Commerce Managers, Developers, Designers, and Content Marketers alike. Because, when we are all using the same language and have the same understanding, well, we can make e-commerce a more beautiful and user-friendly place.In this article, we share our tips around content selection to get your online store looking as close to its designs as possible.
Wrapped up in excitement at the revelation of gorgeous new website designs, it can be easy to forget they’re static and not your actual online store. Instead, we must be mindful of slight differences that can result between the two, and view the designs as a best-case-scenario preview.
For instance, designs are often shown outside of the screen frame, and instead, appear zoomed out, showing more context than what’s afforded on our confined screens (see below).
Tip: use Figma Prototype to preview how the designs would appear on a variety of devices, to understand the constraints of each. Make sure the Figma screen size you use matches the size most frequently used by your customers (if you’re unsure what this is, skip to Appendix 1 for a run-through of where to find it in Google Analytics).
What you see when it’s live vs what you see in design
Your website designs will include placeholder images that your content team are going to want to change. However, replace these with new images that don’t meet the right criteria, and your pages are going to look quite different to the designs. We’ll also highlight that, if you have a Shopify Plus store, certain sections’ theme settings will have an option for a desktop and a mobile version of your images.
Here’s what you must consider when selecting new assets to use in the ongoing merchandising of your online store.
This is the ratio of an image’s width to its height. We’re more familiar with this than we might think (you can probably picture what a 4:6 photograph is like, and roughly know how an 8:11 sheet of paper looks).
Aspect ratio also affects your online store. For each image used in the designs, the aspect ratio will’ve been decided on, and hence, if you’re to replace that, you’re going to want to make sure that you do so with an image that marries up. When you don’t use the correct aspect ratio to what’s been used in design, the whole component can change.
To illustrate, let’s look at the Toast online store. The below shows the same image being used, only one version of it with a 1:1 aspect ratio (left), and the other a 2:1 (right). When we compare the two, you can see that the right-hand image brings other elements into view and changes the visual priority.
Given how much aspect ratio can affect the appearance of an image and the pageview surrounding it (as shown above), it’s important to make sure any images we use in ongoing merchandising match the aspect ratio of the placeholders that were used in design. Your designer and developer colleagues will be able to confirm these.
So, you’ve got your aspect ratio jotted down. Now it’s time to hunt for the right-sized images. There are many different image sizes that can fit into a given aspect ratio, e.g.
Image size is measured in pixels. The larger the image size, the more pixels the image contains. The more pixels, the larger the file size becomes, which affects the image’s loading speed, and site’s performance.
Generally, as long you’re using an image with a “high enough” resolution (more on that, next) that meets the right aspect ratio — the smaller the image size, the better. We’d recommend using files sized around 500KB or less. This will give you a balance of high resolution without badly harming your site’s performance.
Note: you can leverage image compression tools to help maintain an image’s quality without loading a huge file. Your developer colleagues can also help manage image size by capping what your CMS allows, or by employing lazy loading.
Now onto image resolution. Yes, image size and image resolution are two different things (I know, I know). Imagine resolution is measured in either ‘PPI’ (meaning pixels per inch) or ‘DPI’ (dots per inch), depending on whether it’s a digital image or print (respectively). PPI and DPI state how many pixels (or dots) are shown in a single linear inch of a given image.
The higher an image’s resolution (and hence, the more pixels/dots it contains), the higher the image quality. Or the more “crisp”, if you like — now we’re talking designer-language!
Imagine a still from a CCTV camera, posted on a bus stop digital billboard to help find a missing person. Whilst the image on the billboard is large, it will probably still be grainy — CCTV cameras often only save low quality imagery.
Or think about a huge Seurat painting done in Pointillism. It might be the size of your wingspan, but because the DPI is low, the resolution will never be crisp (no shade to Seurat, of course, we love him — peak at this super cool, and giant, Seurat piece on display in Chicago!).
A Sunday Afternoon on the Island of La Grande Jatte at The Art Institute of Chicago
Tip (for your dev team): computers can only read a maximum of 72 PPI. To improve the image quality beyond this, build your image container to allow 2 x the image size to be uploaded without increasing the container size. This improves the PPI (pixels per inch). Uploading images in this way is sometimes referred to as retina images, based on the higher resolution of mac retina screens. Sometimes, lazy-load configurations will block this, so check there if you’re still struggling with image quality.
Now we know that our image assets need to be a size that corresponds to the required aspect ratio and have a PPI value that’ll ensure they’re sharp. Next, we need to think about what kind of image we’re using.
This is where merchandisers really shine — knowing the composition of an image and how this will play within a component. Take the below, for example: note how our client, TOAST, deliberately uses images with background colors that allow their navigation to be easily legible. What would happen if they didn’t? See the second image.
This highlights why considering image composition is crucial.
Tip: here are some questions to ask your creative team to help you understand what kind of image assets you’re working with:
Now we know what creative criteria to keep in mind as you merchandise your online store away from the initial designs. So how come, when you upload these ‘perfect’ images, a part of them might be getting cut off?
It’s because we must also consider how they might respond to different devices.
When your store is opened on different screen or window sizes, the components of the webpage have to change size or configuration to meet the new confined space. A classic example of this is mobile vs desktop.
Webpage components scale in 4 different ways:
1. Fixed-height responsive croppingHere, the image responds by slowly cropping off its sides as the window size shrinks. The height remains fixed. This works best when tall and thin image containers still capture your image e.g. portraits.
2. Fixed-width responsive croppingReversing the above, here the image will slowly crop off the top and bottom as the window size shrinks. The width remains fixed. This works best when short and wide image containers capture your image e.g. landscapes.
3. Equal responsive croppingThrough this, images are reduced by cropping off all sides
4. Proportions scale with the window size (aka fixed-image scaling)In this case, a developer has built the container so that no cropping takes place at all. Usually, this requires more breakpoints to be added so that text and other elements look in ratio to the image.
Tip: here are some questions to ask your development team to help you understand how your image containers are built:
In the same way that you need your images to match what appears in design, you need to be guided by the copy length in the designs too. If you try to squeeze lots of copy where only a few words were designed to live, your component won’t live up to your expectations. Keep in mind word count — or better yet, character count.
As you can see, there’s a fair amount that goes into making a well-designed site look good as it’s continually merchandised. How the page is designed is one piece of the puzzle. But the images and the copy you use — as well as the way the container is built, can create big gaps in your expectations vs reality. But, the more you learn about your store, the better it will function. Don’t be afraid to ask lots of questions! You’re all in this together.
1. Open GA > Audience > Mobile > Overview Here, you can see whether your users view your site more through mobile or desktop.Tip: look at your conversion rate. Don’t neglect desktop if there are fewer views than from mobile. Often, desktop users are high-intent shoppers.
