Our best practice website
Check out our demo GG website based on best practice design made using our website builder.
This has 3 different homepage styles that you can base your site on and some designs for other common content pages.
Homepage design
A well-thought-out home page serves several aims:
Introduce visitors to what you have to offer
Feature some categories and products on your home page. While many shoppers have a specific item in mind for purchase, not all visitors are as certain. Your website can support these shoppers in discovery mode by showing them your main shopping categories and best selling products high up on the homepage.
Lead prospects further into the store
This will be the key purpose of your homepage. The faster you direct people to the category/product pages to continue the customer journey, the better.
Help to navigate the website
If users want to return from a dead end quickly and find additional info the homepage is the most likely page to go to.
Provide trust
When a store is unknown to us, it’s reasonable not to trust it right away. Users will see having a poorly laid out website and low-quality images as a reason not to opt for what you have to offer.
Include images of the people behind your enterprise. On looking customers like to see the people behind what they purchase and this provides further trust in you as a business.
It’s also great to include real reviews from customers again further instilling trust in you as a business.
Design with mobile use in mind first
Many e-commerce stores receive more visitors from mobile devices than via desktops. That means they need to cater to the many differences between shopping on a smartphone versus on a laptop.
On your smartphone, you tap instead of click, elements are organised vertically, and the navigation menu is tucked away in a hamburger icon.
Our websites will automatically alter the layout of the site and resize any photos when the site is being viewed on a mobile. Make sure to check when you are building your site that the images and layout you have used work on all devices.
Website copy
Keep things concise
A simple way to increase the readability of your website is to reduce its word count. Concise, well-chosen phrases give website visitors the information they need as quickly as possible.
People tend to scan rather than read in-depth when browsing online. This means you should think about optimising any text for skim-readers so they can easily find the content that they are looking for.
Try these copywriting tips to enhance your website user experience:
- Use appropriate language in your ‘Calls to action’ (“Learn more,” “Add to basket”).
- Include key information in the form of bullet points.
- Ensure continuity of information across pages.
- Break large chunks of text up into smaller digestible sections such as shorter paragraphs so users can find the information they need much quicker.
- Pairing text with relevant visuals, can actually make it easier for people to process, understand and even remember your content.
Specific guidance on our websites
Images
When adding images to your website there are some specific things to look out for making sure the right image size and type is used in different types of content blocks. The site is designed on mobile-first. All image dimensions will change depending on the size of the screen they are being viewed on. Therefore try to use images with plenty of background, where the focal point is close to the centre of the picture. Close ups of veg work well because there is less likely to be a single point of focus.
As you can see below these images work well as the image on the left has no central focal point, and the image on the right has a focal point in the centre of the image.
When adding images as a single block it will appear in the ratio of the original image. The image you add may need need to be cropped appropriately for where you are intend to use it. Below is an example of a landscape image that has been pre cropped to square and portrait ratios.
Banner images
Types of images that work well on banners are those with no central point of focus or a point of focus right in the centre of the image.
We advise to crop any images to the correct ratio before adding to the content block. For example if a standard landscape ratio image is added, you won’t have control over where the image is cropped.
The image below has not been cropped before adding to the page. The image does not work well as it hasn’t been cropped where the central point of focus is 👎🏼
If cropped before hand you can be in control of where the focal point of the image is to give a better quality image like below 👍🏼
Images that have no central point of focus work well on a banner as it provides a neutral textured background for the text to sit on top of 👍🏼
You can also create something similar with a bespoke image designed by yourself. When adding an image block to a page, the image that is added will appear in the ratio of the original image.
Below is an example of an image used as a banner on a homepage that fit’s in with the users branding with the dimensions of 805x232 pixels.
Images on cards
The dimensions of the images on card blocks change depending on the number of columns used on a page. For example if a card block is used as a single block on a page the dimensions change to a wider thinner image on desktop.
The dimensions will change the more columns are added to a page. For example if you have 3 columns with card blocks the images will be taller.
However on mobile the images are resized to be taller than if on desktop. The blocks will be stacked on top of each other and all images will be the same size.
This is why images with no central focal point work well because when resized on different devices they work on all of them.
Veg box images
When adding images of your veg box products there are a couple of compositions that work well. Below are some pointers to help guide you:
A flat lay composition can work well for a veg box product image as these images can show a true representation of what’s coming in the box. You can show the exact number of items and portion sizes which will help your customer choose the right size for them.
Close up images of veg boxes also work great. This example from Riverford highlights the rough contents of the box and the arrangement of the vegetables make it look generous and full of colour and variety.
Single product images
Consistent backgrounds
Something you can adopt when creating single product photos is having a consistent background and format to the images. Below the left image is a GG user and the right is an example from Abel & Cole. Each of these images has the same or similar backdrop, this helps highlight the product and keeps the aesthetic consistent across the shop pages.
Let the product shine
Another thing to consider when taking product photographs is to remove the packaging from the shot. For example taking a photo of a salad in a bag does not highlight the product. Instead take a photo of the product without the packaging which will help highlight the product itself. It is also good practice to photograph the real portion size of the product. This will prevent any customers being alarmed by receiving a smaller portion size than what was photographed.
Layout
Banners
When banners are used they look best when the spacing to the menu is set to none. Not having a gap provides a cleaner finish to the site.
Banners can also be used effectively within columns. The below image shows banners set within three columns to show customer reviews. The text is then entered into the subtitle so a quote can be displayed nicely on top of the image.
Text alignment
When using a combination of header text and main text make sure that consistent alignment is used. For example having a centred title and text aligned to the left in combination together can look messy (right image below). Try keeping it either all aligned to the left, right or centrally in the block (left image below).
Block alignment
When adding card blocks next to each other if more text is added to one of the blocks they won’t be aligned neatly. To help align these blocks we recommend adding a similar amount of text into the text field of the card blocks. In the left image below you will see that the blocks don’t align as the text length is longer in the right card block. The right image shows them aligned as the text length is similar.
Text and image alignment
In some page layouts you will have text and an image side by side using columns. It’s important to consider both whether to have the text on the left or right and where to align the two blocks. We recommend adding the text block to the left column as when resized on mobile this block appears first as shown in the image below (right). If added to the right the image will appear first. The text is important to have above the fold so the website visitor has something to read on the page at the start.
