E-Commerce Web Design

An E-Commerce web design implements branding. It distinguishes the website from the competition and enriches the user experience. Adding product price, part numbers, and currency significantly impacts how the search engine maps content to keyword searches. The capabilities of the design tools determine page response times, ongoing operational costs, and the ability to support omnichannel marketing effectively.

Page Design

E-commerce websites require features and functionality that make them different from other websites. Also, many aspects of regular websites typically need to be addressed with e-commerce.

In Store Shopper

Product Details Page

A product details page needs the same attention to Search Engine Optimization (SEO) as any other. That means the page has to answer questions relevant to real-world searches. That is more than a list of product specs. A well-designed page:

Listing Widget

E-Commerce SEO A listing widget is a horizontal bar of products with an image and text. Both need to fit into the aspect ratio and thumbnail-sized box. Careful planning makes it possible to automate the entire process of creating the widget, while an ad-hoc approach results in more manual fiddling and testing.

The design optimizes the products within each widget to maximize revenue. Each one can have a different goal and comes from a different source. The most sources are:

Catalog Page

A catalog page has many listing widgets per page. Product selection comes from the product hierarchy of the website. Each page should align with SEO keywords and have the content to land organic searches. For many industries, it will be easier to rank a category page than a product details page.

Checkout Workflow

The best checkout workflows use psychology to maximize click-through to completion. If completion fails, it maximizes the data collected for abandoned cart recovery. Standard design features are:Shopper Image The following diagram shows sample navigation for the above checkout workflow.User Flow for Purchase

Technical SEO

Technical SEO ensures the website meets the needs of modern search engines. It enhances organic search ranking by making information about the page more accessible to search bots. Basic SEO processing for an e-commerce website includes:

Operations Management

The tools used to manage the website significantly affect the time, effort, and ability to maintain the website. The maintenance includes eliminating technical debt and applying the knowledge gained from data-driven marketing.

Data-Driven Marketing

Data-driven marketing collects and analyzes website data to support marketing. Our solutions have built-in data collection capabilities that avoid the limitations of 3rd party cookies and comply with the Payment Card Industry (PCI). Downstream reporting gets access to details like page scrolling, dwell times on a page, and much more. The data makes it much easier to build campaigns and analyze the results.Product Shipping

Quality Management

Quality management collects metrics to analyze the user experience and track system performance. It includes details like how long the DNS lookup took and if all the URLs in the page downloaded correctly. That level of detail makes it easier to detect emerging issues before they affect the user and reduces the time to fix problems if they arise. The information includes:

Page Response Time

The web design significantly impacts page load times. The other contributors are the planning for subsecond performance and performance planning of website development. The following sections outline major contributors to response time.

URL Latency

Our solutions serve static content for static web pages. However, the common practice is treating the website as a development server that reconstructs the same page for each user's request. That massively increases server loading, which slows down the page.

The following chart shows the distribution of URL latency across websites.URL Latencies

URL Redirection

URL redirection is when the web server instructs the browser to load a different URL. It is a usability feature for the user. Backlinks, hyperlinks within the website, and the Google Index should never have them. They slow down response times and increase SEO complexity. The following chart shows the impact on the average response time for a given number of redirects.Page Load Time by Number of Redirects

URL Count Per Page

Most Content Management Systems (CMS) used to build websites generate excessive links. Excessive means the URL that has no material impact on the user experience. The following chart shows the number of CSS files per page across websites. The Google recommendation is to embed CSS into the page and have zero files. That allows the page to start rendering while downloading the first URL. Websites with many have to wait for all of them to finish before drawing the page.

Page Shift

Page shift is when rendered content moves after the initial rendering. The longer the page takes to download, the worse the problem becomes. The most common sources are omitting the height and width of images. The other significant source is overriding CSS definitions in one file with another of different sizes. That forces the browser to redraw the page and causes the visual display to jump. Our website designs have zero page shifts.CSS Links per Web Page