Blog

Front-End Best Practices for Ecommerce

Front-End Development
SEO
ecommerce best practices

Written with reference to the latest front-end methodologies in the year 2018.

 

Let’s imagine for a moment that you’ve never visited an ecommerce website. You’ve never been to Amazon, never seen a “Shop Now” banner ad, and never considered the possibility of having something shipped directly to your door with a few clicks of a mouse. What would you expect when visiting an ecommerce site today? What type of experience would warrant your return business to an ecommerce site?

In this article we will cover what is expected of a modern ecommerce website from the user interface, to the checkout flow, and the front-end code architecture.

 

The User Interface

When we think about an easy to navigate ecommerce platform, what components carry the most impact on a user’s ability to traverse your product or service offerings to ultimately closing a sale at checkout?

 

Search

Without a doubt, every great ecommerce site utilizes a constantly available search input field and type-ahead feature, but why is it so important?

The simple answer is that it minimizes the amount of friction that a user might encounter while using the traditional category hierarchy model of grouping products. Beyond that, having instant-search results or a type-ahead gives the customer instant feedback regarding available products.

In regards to the placement of a search input on your ecommerce site it is highly recommended that the layout leverages a fixed header, which means that the primary navigation is always at the top of the viewport and includes a large, clearly visible search input.

 

Call To Action

For those who aren’t familiar a call to action is essentially a clearly identifiable button or link that is used to drive a user into a particular checkout or customer flow quickly and easily.

For example, say you have a promotion that you’d like customers to be aware of; it’s common-practice to have some type of carousel, or call to action tiles on the homepage of your site briefly outlining your promotions value proposition.

FunkyChunky website

Funky Chunky is a great example ecommerce utilizing ever present search and call to actions.

 

Seamless Customer Account

One of the biggest headaches for ecommerce companies is dealing with the customer service aspect of the business. Whether it be a customer inquiring about when an order will be shipped/delivered, or how they would go about updating the billing information. Having a seamless account experience is pivotal to retaining customers for future business.

How do we accomplish this? By making everything from customer login to checking on an order to updating their account details quick and easy.

This is easier said than done. To optimize this experience a helpful exercise to simulate a customer’s expectations is to look into personas. This is gathering a set of characteristics to describe a typical customer that would use your ecommerce site and then determining which pieces are going to be the most crucial to delivering a solid experience, and which can be footnotes per se inside their account dashboard.

Also considering how optimized your site should be on mobile is something to be considered in this instance, especially because typically customer account dashboards include tons of information so it is important to account for how elements will look from a mobile device versus  larger viewport device.

 

Front-end Code Architecture

Let’s consider how a front-end developer might approach structuring their HTML, CSS, & JavaScript inside an ecommerce site codebase.

 

Componentization

What does that even mean? Componentization means breaking down common elements that will be used around your code into reusable snippets of code.

For example, a typical ecommerce site will have product or service listing cards. In this instance, a developer could parse this code into a separate file and include instances of it where needed. They could even pass additional data to this component to handle any variants such as font size of colors to the product or service card interface.

 

SASS/LESS -> CSS

It is common-practice in 2018 to leverage precompilers such as Gulp.js, Grunt.js, or Webpack to breakout your frontend assets into more human-readable file formats. This is an excellent approach, ensuring your naming conventions file hierarchy is easy to understand and navigate.

I highly recommend looking into SMACSS for reference of CSS best-practices with regard to layouts, theming, and prototyping. In contrast, my personal approach to SMACSS with file hierarchies uses a minorly different convention as you’ll see below.

SASS/LESS (Root Directory)

  • Pages
    • _homepage.scss
  • Components
    • _product-card.scss
  • Core
    • _buttons.scss
    • _forms.scss
    • _typography.scss
    • _tables.scss
  • Partials
    • _header.scss
    • _footer.scss
  • Settings
    • _variables.scss
  • _main.scss
  • Styles.scss

 

JavaScript (Angular, React, Vue, JQuery)

Now let’s get into the weeds of front-end development. Here things can get really complex and cumbersome, or be a breeze. First, with the rise of a slew of JavaScript frameworks, it’s important to consider which one will fit your needs and, more importantly, when to leverage their features.

If your ecommerce site is fairly standard, doesn’t need to handle a lot of client-side data management (and typically just leverages event-driven functionality), I’d recommend vanilla JavaScript or the latest version of JQuery. Simply because it’s generally easy to structure, maintain, and write. If you choose this approach, I’ve found the best success in writing JavaScript using an OOP (Object-oriented Programming) format to organize each object by component or feature.

If your ecommerce site is more complex and your development team is familiar with ECMAScript 2018 best practices, it might wise to explore alternative JavaScript frameworks. I’d recommend looking into VueJS, Angular or React since they are the current industry leaders. As it stands right now in 2018, React has the largest developer adoption for a JavaScript framework. However, VueJS has been gaining lots of traction in the last twelve months due to its thorough documentation and small size.

Regardless of which framework you choose, make sure that the data being manipulated and components you’ve created aren’t SEO pertinent. This is a crucial piece to consider since search engines like Google aren’t able to index SPA JavaScript application components without SSR (server-side rendering) or specialized pre-rendering. Thus, I highly recommend that the information you want search engines to index is made available inside the source code.

Lastly, let’s talk about when you’d expect to leverage asynchronous API calls because these are an excellent resource for enhancing a user’s experience.

A typical example would be when a user clicks the “add to cart” button and perhaps a loading icon appears, followed by a success confirmation outlining that a given product has been added to their cart. These client-side interactions can help expedite the checkout flow and give the user more immediate feedback into their actions result.

 

Search Engine Optimization

The illusive top result of a search engine query. How does one achieve such a coveted position atop the competition? Let’s investigate.

Google click-through rates

 

In 2018, the search engine index algorithms have been optimized to account for more than just keyword densities, high PR backlinks and domain age. Nowadays we have to consider our social media integration, open graph tag structuring, markup schema, page load time, among a plethora of other items.

Above all, the most important pieces still remain which include page titles, meta description, og:image, alt tags on images, and content-rich pages. But others have been deprecated such as meta keywords.

Additionally, always ensure that your site adheres to the latest web accessibility standards as this will help improve your search engine ranking since many companies choose to ignore these at their peril. At Irish Titan we utilize a tool called Siteimprove which will run tests on your site and give you immediate feedback on which areas can be improved from an accessibility and general SEO standpoint.

The last piece to consider is how strict your content entry standards are. For example, say your companies content entry specialist creates an article and decides to randomly place headings throughout the article not following a traditional hierarchy or neglects adding alt tags to their article images. These actions can be detrimental to the SEO potential of your ecommerce site, maintaining content entry standards and running articles through a SEO analysis tool prior to publishing can make all the difference in the long-run.

 

Thanks for reading! If you have any questions regarding the content or references of this article please feel free to reach out via LinkedIn or my personal website.