Good design is what attracts people to your website and great design in collaboration with strong SEO is what keeps them there and engaged.
However, there is a careful balance to be struck between finding an excellent web design that reflects your brand, looks good and draws your potential visitors in, while ensuring you don’t compromise on their ability to use your website or find the information they are looking for.
Finding this balance between great design and page speed is important and there are plenty of ways you can have an image-rich, aesthetically pleasing web page that doesn’t have your visitors waiting longer than the 3-second threshold.
To help you ensure your page designs attract the right target market without causing frustration, we have provided the following inspiration to get you started.
1] Optimising and Resizing Your Images
Any images you have on the website affect your page load speed and should be optimised accordingly. Images can make all the difference in your page design, whether you use them to show off your previous designs and projects or showcasing your staffing team such as the homepage on https://www.i3media.net/.
The best method of ensuring your images are sized appropriately is to check your page design across multiple devices and take note of the largest size your images appear in – this can be done by checking your design in a web browser and clicking ‘inspect element’ – you’ll be provided with two sizes – the size your image appears in and the original upload size.
If your upload size is larger than your largest display size, for instance, you have an image displaying at 192x108px, but your upload is at 1920x1080px, you should resize your image through a programme such as GIMP (free) or Photoshop (paid).
Once resized, run your image through an optimisation programme such as Tinypng. This will compress your image to the smallest file size available which contributes to a better page loading time and will reduce the time your visitors wait while all the images load in.
This is particularly important where your page has multiple images, such as a gallery, offers page or showcase page. Make sure to include this step whenever you update your images, first resizing them to the maximum display size and then compressing before uploading to your website.
2] Checking Your Code Is Efficient
If you are running your website on a CMS system such as WordPress, you’ll want to ensure each page runs as efficiently as possible without a lot of unnecessary bloated code commonly found when using JavaScript libraries and CMS systems.
Check your page code before launching a new design and make sure all your CSS and JavaScript has been minified. Should you identify any sections of code that are unnecessary or are simply bloating your page load times, check they are not referred to anywhere else and then clear them from your page design template.
Remember, your code should be clean and understandable, especially if you are working with a team where multiple people will need access to your page designs and may need to add or remove elements from your code. If the quality of your code is low, it makes it harder for improvements and won’t last if code you have taken care and time over.
Page speed is key to ensuring your bounce-rate stays at a reasonable percentage and should be a focused element when designing new pages for your website, especially on pages that are intended to convert such as service pages and e-commerce pages.
Make sure when adding additional images to your pages that you correctly optimise each image as even just one forgotten image sized at 10% greater than the intended display can have a massive effect on the time your page visitors wait until a full usable web page load.
