Developing An E-commerce Website

I am excited about the next part of my journey, I enjoy building websites in my niche with supplements and health being two of them.

I am fortunate to have the skills needed to build websites, I have been building them for nearly twenty years now after getting a lucky break as a freelance web developer in the early days. Although it was some years ago now, it’s a bit like riding a bike and I can still knock together a pretty decent site when I need too.

So, this means I can take the branding and logo concepts along with the label designs to build an attractive, functional and converting Super Greens website without external help, which ultimately means I can be live faster, that is unless I get stuck on fixing a problem.

A big point to mention here, the e-commerce website I am developing here is not intended to be for ALL potential customers of the product. It's the main website that will be used for other ambassadors of my brand, but I will be developing what's called sales funnels to target particular audiences (more in an upcoming article).

This article is going to look at the web technology options available, why I decided to go for one over the other, and I’m also going to discuss the latest approach when designing websites using a mobile-first approach.

What If I am Not a Web Developer?

I appreciate not everyone may have these skills, if you don’t then there are other options, the most obvious being to hire a freelance web developer online using any number of freelance hiring platforms, such as Upwork.

More on this in another article, but briefly when you are finding a developer, it’s my opinion you should be looking at finding one for the long term. ie. Whilst price is important you need to get a feel for the person you are working with, because trust me the developer's work isn’t finished when the site goes live.

Mobile first design

Before rushing into designing your website, you should carefully consider a huge shift in the web industry over the last five years, which has been caused by the rise of mobile and tablet devices. With more and more visitors using portable devices to view websites now. To the point where there will be few websites that don’t have more mobile visitors than desktop, that’s especially so in this niche.

Percentage of all global web pages served to mobile phones from 2009 to 2018:

Source: Statista.com

This should therefore have a significant factor in the design, content, and marketing of your website, as it’s more likely the first time someone visits your website, will be from a mobile device.

Mobile-first design follows the principles of progressive enhancement, which basically means the mobile site is the lowest level of functionality going up to the more advanced desktop version.

Taking this approach means you have a content-first approach as functionality is stripped down, making the focus completely on the content.

Making your site content-focused, then means the focus is on the user, and so getting your message over as effectively as possible without the bells and whistles of a flashy user interface should be your primary concern.

Prioritizing content is also paramount with a mobile-first design approach as not everything will fit on mobile real estate.

Wire-framing Your Site

Wire-framing is a technique to define the structure of your website and where certain elements go. It helps to organize where content will go and how your site will flow from one section to the next.

Wireframes are exactly what they sound like, see the image below because they allow you to focus on what is going where. Essentially, they allow you to focus on the bigger picture, without getting bogged down in the little detail.

An example of a simple wire-frame here:

A good starting point before working on any wireframe is to identify the content you want to be shown on the page. As I said above, it’s important so that you get your layout sorted first before getting bogged down by other design elements such as color schemes and types of images to use.

The main sales page for my website is also my home page, so this is where most of my content will be shown. In my case, this site is essentially a one-page sales site, where I outline the problem and the solutions my product can give all on the same page. I will go into writing effective copy for your website in another article).

I started out producing a wireframe for the mobile version of the site before expanding this to the tablet and desktop versions.

It’s easy to fall into the trap of putting too much information in at this stage, your focus should simply be on a rough sketch of the elements. No colors, no images, no content – just the label of what’s to go in there.

A great article that goes over the importance of wire-framing written by The Segue Creative Team.

Wire-framing Tools

There are a number of tools available that can make wireframing easier, such as SketchApp ($99 per year) and Balsamiq Wireframes ($89).

In reality, having a wire-framing tool isn’t essential as you can sketch them out in any paint program, or even a piece of paper. I simply used Adobe Photoshop to create straightforward wireframe mock-ups.

I stuck with just wireframing the home page as the secondary pages are of lesser importance and are very simple in layout – essentially the top navigation header with logo and “buy now” button and the content section ending with the footer section.

https://www.sketchapp.com/pricing/

https://balsamiq.com/wireframes/

Responsive Websites and Breakpoints

Websites should look and function well on most devices and browsers. This can often be a challenge as there are more new devices produced every year. Thankfully by concentrating on the most popular devices you can narrow these down significantly.

Instead of developing for devices though it’s better to focus on developing responsive websites based on specifying various breakpoints (usually in pixels) that can alter the appearance to suit the device.

HTML Mockups

Once the wireframes have been produced and the elements on the site have been identified it's time to build the HTML mock-ups.

This servers two purposes, firstly it gets you thinking about the content (more in another article where I discuss website copy) and secondly, there is nothing like testing how a functioning website works across popular devices and browsers.

Self-hosted versus Hosted Shopping Cart

My initial thoughts when looking at the technology to use, was for the main website to use a SaaS platform like Shopify. To be honest this is to make life easier and would give me access to a number of Shopify Apps in the marketplace.

There are two issues with using most SaaS platforms, not just Shopify but other popular platforms too, they often charge a monthly fee (sometimes coupled with a transaction fee), and developing a template can be more work than creating a stand-alone site.

My thinking progressed to looking at WooCommerce, which I have some experience from my previous business when we used this platform for our internal and external clients.

There are many good reasons to use WooCommerce.

It's open-source so it’s incredibly adaptable and it's self-hosted, which I am a fan of because I don’t find setting up hosting too troublesome. There are downsides though as using WordPress as the engine of an e-commerce store as it can cause speed issues and, in some cases, and WooCommerce seems like overkill, especially when looking at selling just one product on a small 5-10 page website.

I am also very keen to have a super-fast web page that doesn’t need regular plugin updates as well!

One of the gripes I have with WordPress is it’s a bit overkill for one-page one-product sites. And with all the modules there is an admin overhead. I want my site to be very low maintenance.

I will however look at Shopify and WooCommerce, if and when I decide to open a multi-product store.

Check out my post on how to set-up a fresh WordPress website for tips on how I do it.

Hosted Shopping Carts

The alternative is to use a hosted shopping cart that can either produce a pop-up window of the cart and checkout or proceed to a branded hosted checkout page.

There are some big advantages to using the hosted shopping cart method, the main one being able to create multiple landing pages that point to one checkout.

The other is being able to use a Payment Card Industry Data Security Standard (PCI DSS) compliant hosting provider that ensures the payment details are handled in a secure environment.

For more information on PCI check out this site.

There are many externally hosted shopping carts, many are offered by payment processing companies like PayPal, WorldPay, Stripe (see image example), etc.

As I am keen to incorporate customer relationship management (CRM) software into this business to centrally manage customers and leads, I am looking carefully at integrating one of these solutions with their hosted shopping carts.

I explain my decisions for this and select the best CRM software for my supplement business in a forthcoming post.

Building the Website

As I have decided to create a self-hosted website I have other choices as to which technology to develop in, HTML / CSS and PHP. Now if you’re not familiar with these terms, then I recommend checking out the following resources, this article will make more sense then:

One thing you notice above I said HTML, PHP, and CSS, may people forget it’s entirely possible to add PHP to HTML and there is a very good reason to do this. You can’t do anything that is server-side with HTML, but you can with PHP.

https://www.codecademy.com/learn/learn-html

http://www.htmldog.com/guides/css/beginner/

https://www.homeandlearn.co.uk/php/php.html

There is another compelling reason for this approach, site speed. Site speed is increasingly becoming important. your visitors just don’t want to hang around and because it’s important to your visitors it’s also important to Google.

These days you don’t have to create any website from scratch, and you can choose from a number of frameworks that provide the barebones of the CSS you need to create a website that can look amazing on mobile, tablet, and desktop.

Downloading a framework can save hours if not days of work and it is completely free to use. They are typically very intuitive too and the learning curve is super-fast, especially if you’re familiar with HTML/CSS.

There are a number of frameworks to choose from, but I went with “Skeleton” as it’s a lightweight HTML/CSS framework that’s perfect for smaller projects.

Software to Edit HTML/CSS

If you’re like me, you’re using an Apple Mac then I would recommend downloading TextWrangler. This is an all-purpose text and code editor and is free to use.

More features are available in the paid for version called BBedit, so if you need a more professional HTML and text editor then this could be worth checking out. It’s inexpensive and only cost $49.

Website Content and Images

From the wire-framing concepts, I created the sections of the page using the Skeleton Framework. Based on these sections I wrote a website copy and selected suitable images– I go into writing the website copy in another article.

Where to Get Legal Images From

It may be tempting, but it’s a very bad idea to go downloading random images from Google Image search for your website.

Using a copyrighted image could mean at some point you receive a cease and desist letter. Depending on your domain registrar and hosting they may simply give you 24 hours to remove it or even take down your website without notice, yes, they can do that and they do.

Where buying images is concerned, I strongly suggest you build this into your marketing budget, quality images make a website and it’s one of those hidden factors that often surprises people. If you create a budget for images, then it’s not as painful and you don’t get surprised by extra costs.

So, where can I get legal images from?

There are a number of sources, some are free to use but most of them are paid for.

Selling Bundles

The presentation of the packages I am looking to sell on the site is important in influencing visitors' purchases. There is so much information here you could write a separate article on this, in fact, I have on my pricing strategy for my supplement.

What I want to cover here is the layout part of the packages available, I will have three bundles available; 1 tub, 3 tubs, and 6 tubs. After getting some traffic and conversions this will no doubt change, but you have to start somewhere in order to find the best bundle options.

To start with I will have the three bundles one on top of the other in mobile and tablet devices, with desktops (or any device that has a resolution above 750pixel width) will show them side by side.

Important elements within each package bundle will be the Name of the bundle, the number of tubs in the bundle, how many total servings, the price per tub, bundle image, savings available, and the “add to cart” button (see below).

Example supplement bundles:

Which “Add to cart” button do you think would be more effective?

Add to Cart Buttons

I remember the days when I used to obsess over “add to cart” buttons. Constant questions of what color works best and should it say, “add to cart”, “buy now” or “order now”!

Eventually, I realized two lessons after developing a number of e-commerce websites.

Firstly, although colors are associated with particular emotions you’re better off initially selecting a button color that simply stands out, maybe a color not used elsewhere on the page. At the end of the day, you want your visitors to see and click on your call to action (CTA) or add to cart buttons!

Secondly, once you have designed your “add to cart” button or CTA, get some web traffic and do some testing. It’s only from the data from actual visitors and buyers will you be able to tell for sure what color and text to use on your buttons.

I thoroughly recommend taking the time to read the following two articles to understand more about the influence of color for “add to cart” buttons.

https://www.convertize.com/add-to-cart-button-color/

https://www.tipsandtricks-hq.com/ecommerce/add-to-cart-button-images-for-shopping-cart-631

My “add to cart” buttons are initially going to be colored red as this will stand out on my web page and grab visitor attention. But this is certainly something I will test once I have enough traffic.

Testing the Website

Since building the site I have modified the layout a bit based on the feedback from testing it on various mobile and tablet devices.

A really great site for testing how responsive your website is is http://responsivedesignchecker.com/.

This excellent (and FREE) site shows you how your site looks on a number of platforms, which makes ironing out any obvious design issues really straightforward.

Other things I looked at were site speed as already identified earlier. Free online tools such as https://tools.pingdom.com/ and https://gtmetrix.com/ provide excellent breakdown of potential bottlenecks with site speed.

Lastly, simply showing the site to friends and family is a great way to get an outsider's opinion of the site, again if anything obvious is wrong.

Remember though, the real test will be when the site is live and receiving new visitors.

The Outcome

This somewhat lengthy post has explained I hope how I nailed down the technology and tools used to build my Super Greens e-commerce website.

I’ve outlined the reasons why I have decided to go for a self-hosted website developed in PHP, HTML, and CSS. There are many benefits to using a number of hosted solutions out there, but for a single product e-commerce site, it makes more sense to use the solution I have outlined.

I went over briefly the approach to wire-framing a website using a mobile-first approach and expanding this to tablet and desktop versions. Then building the site using one of the many barebone HTML/CSS frameworks available free online.

Confession time, I spent way more time than was needed developing the site. It's my Achilles heel, in that I tweaked and then tweaked some more until I felt I was happy with it. The outcome is that I am very pleased with it, so a great result, but will it convert that's another question!

I touched on some of the standard elements required on the website, such as the package bundles and “add to cart” buttons. The website content and images will be discussed more in-depth in another post.