Blog

Read About What We Love: Web Development & Technologies

Key Things to Remember While Developing an Ecommerce site

With online retail sales increasing year after year, it’s an exciting time for ecommerce development. More and more people are purchasing from their mobile devices and from their homes. You sure will be spending a lot of time researching the most efficient technology for your eCommerce site (NopCommerce or Magento, for example) and reading up on the latest of ecommerce trends. While those are crucial decisions to make before conceptualizing and building your ecommerce website, our developers would like to give you some simple tips that come in handy while you build your site.

Here’s what a UI developer for ecommerce sites can do to improve the user experience and boost the website’s performance, in a few easy-to implement steps.

Keep the UX simple and clean. How?

1) Arrange your content in a way that is intuitive to read. The regular norm is to have the most important message on the upper part of the screen and then gradually lay out other parts of your site. The objective here is to keep the bounce rate (the percentage of single page visitors) as low as possible by giving the visitor what they are looking for, immediately. Because, research has shown that users take less two-tenths of a second to form a first impression. And we think, the first impression determines if they stay or leave the site.

2) If you have a call-to-action like a ‘Discount’ or a ‘Buy Now’ announcement, make sure you have sufficient contrast between the message and its surroundings so that it’s prominent.

3) Design you website in such a way that the visitor find what they are looking for in a minimal number of clicks. There’s absolutely no excuse for making the visitor feeling lost. Period.

4) Make sure you have enough breathing space among sections/ drop-downs to facilitate smooth navigation of the site.

5) When it comes to the mobile version, customize content to avoid a webpage that’s too wordy and one that requires excessive scrolling.

6) Further, you can entirely remove non-essential content/sections that are not a requisite for the mobile version. At Gaja Digital, we sometimes avoid ads and videos. 

7) Avoid repetitive sections; this often happens with mobile versions where the sub menu present in sidebar menu also shows up on the burger menu on subpages.

8) Re-arrange the sections for the mobile version by prioritizing the sections. You don’t want your visitor to view client testimonials or an ad the first thing they open the mobile site

Tune your performance. How?

1) If there is a section of your website you don’t want to display on the mobile version, you must absolutely make the code inactive (use conditional loading) instead of merely hiding it. Having “display:none” property still downloads the section (image, content etc.), adding weight to your responsive site and slowly it down.

2) Using appropriately resized product images/banner to fit their purpose and also optimizing to progressive level will reduce the file size and increase the performance.

3) Ecommerce sites usually will have plenty of icons, buttons and repeated images. It helps to have all under a single sprite image in order to avoid individual image request which slows the site down.

4) You can also improve the performance of your ecommerce site by reducing the size of the file, there are few ways to do it:

  • Minifying CSS and JS files (use a CSSor aJStool)

  • Maintaining separate style sheets for layout and JS support styles will help in requesting only the required style files for page parsing and will also reduce the file size

  • Group the classes which use the same CSS property, this will decrease the line of code and reduce the file bytes.

Ex: 

Before grouping:

                  p a{

                        font-weight : bold;

                        color : #333333;

                  }

 

                  li a{

                        text-decoration : underline;

                        color : #353535;

                        font-weight : bold;

                  }

 

                  button{

                        border : 1px solid #333;

                        font-weight : bold;

                  }

 

     After Grouping:

                  p a, li a, button{

                        font-weight : bold;

              }

                  p a{

                        color : #333333;

                  }

                  li a{

                        text-decoration : underline;

                        color : #353535;

                  }

5) In addition to reducing the size of the file, it makes a world of a difference if you prioritize the file organizing for faster page rendering (CSS ,JS, etc). At Gaja Digital we usually place Layout CSS before other CSS or JS files to make the page render fast.

6) Since Java Script is one of the reasons in page render blocking, it is advisable to use ‘defer’ for external JS links. This simply makes the script load after the page renders.

If there’s anything you’d like to add, do lets us know in the comment section below. Also, we’d be happy to help with you ecommerce website, all you have to do is drop in a word here and we’ll get back to you. Good luck, and welcome to the online world of retail!

Maleva Robert | Blogger

Naveen Kumar & Revathi PSenior UI Developers

nopCommerce request a quote

Leave A Comment

Bangalore – Paris – Aix-en-Provence – Geneva – Montreal

We love diversity and we work out of five fabulous cities, on 3 continents, and 3 time zones.


Contact us
We’ll get in touch with you ASAP!