Clear navigation, instant page loading, and ease of use on any device of any screen size - those are the building blocks needed to give your visitors a smooth and pleasant online experience. Simple enough concepts but they can be time consuming to implement, which is why many eCommerce websites fail to go very far. If done right though, you can reap huge benefits.
Create webpages that load quickly
Nobody likes a slow website, especially when they're on the go using their mobiles or tablets. They want a fast, easy website that responds quickly. To do that you need to optimise.
With the sheer amount of devices currently on the market it opens up developers to adjusting their webpages so they are perfectly suited for each and every device. There are a number of places to begin with this but let’s choose image optimisation as an example. When you visit a website on your mobile you may see images that are sized correctly in relation to your screen size but are of extremely poor quality. If you dive deep into the code you will see that it is in fact a heavily compressed version of a much larger image. This results in slower page loading and the potential for your visitors to leave before they've even got a chance to see what you're offering.
There are several solutions that developers use in order to adjust their images for use on different devices and screen sizes. One of the more preferred methods to use is media queries, which can eliminate a lot of these issues. With media queries you can specify exactly what images you want to appear at specific screen sizes/devices. For example, the code below changes the background image for the ".image1" class to a smaller image when it detects a screen size that is smaller than 770px.
The drawback of using this method is that you are limited to using to for CSS background images and it cannot be used on HTML tags such as <img>. Fret not though, as HTML5 promises to eliminate this problem with the new <picture> tag.
Clear website navigation
Visitors to your website do not want to be overwhelmed with buttons and links. You want to make their visit to your website as pleasant as possible without confusing them at any point. For an eCommerce website one of the biggest navigation concerns is the category list and sorting options. When designing a navigation system such as a product filter you want to ensure that whatever your visitor is looking for is found quickly and easily. The key to success lies within the design. Making the categories and sorting options easily identifiable helps the visitor to become familiar with your website. Keep it simple! Use simple fonts with plain colours - Simplicity can be immensely effective.
Ensure your navigation works on all devices. This will require a significant amount of CSS work and a large amount of media queries depending on the layout of your navigation. For a typical eCommerce website it would become impossible to list all of the categories and subcategories on view as soon as the page loaded. Instead, try using a clear menu button instead, allowing the user to see all of the categories at their discretion.
If your website isn't perfect for mobile devices then you are losing sales! Design a website perfectly suited for all mobile devices, make the checkout as easy as a few taps on the screen and you have the recipe for success. Be at the forefront of new technologies and constantly update your website to create the best possible experience for your visitors.
Richard Doyle (Author)
Join our newsletter
Get the latest updates from Technoshack delivered straight to your inbox when you subcribe to our newsletter.