Website Best Practices

Creating a leading website takes thought and planning, a site is typically considered successful if it is well designed, useful and in e-commerce aspects, lucrative. While different stores each have different website needs, there are some best practices that are global to all sites. In this guide, we explain those best practices and have broken them down into 4 categories:

DESIGN & CONTENT | E-COMMERCE | SITE ADMINISTRATION | MARKETING

DESIGN & CONTENT DESIGN & CONTENT

1. Select a responsive and mobile friendly theme (IndieCommerce Members Only): With the increase in the use of smartphones and tablets, the need for having a responsive mobile friendly website also increases. Listed below are a few resources that can help you determine if your website is responsive and mobile friendly:
   • Drupal 7 Themes - This document provides a list of free Drupal themes available on the IndieCommerce platform and their features - responsive, mobile friendly, built in slideshow etc.
   • Google Mobile-Friendly Test - This test provided by Google is free and will analyze and report on whether or not the page has a mobile friendly design
   • Chrome Mobile View - The Chrome browser allows you to preview your website on various devices.
   • Image Sizes - Don't use fixed width/height on your images. Fixed-width items are not adaptable. A fixed-width image on a large screen may look fine, however, on a smaller screen, users may have to scroll horizontally to see the full contents or it may distort your page design completely. The same applies to tables and grids.
2. Clearly identify who you are: Your business name/logo should be clearly visible on your website.
3. Keep your most important information above the fold: This is the area a visitor immediately sees when the page loads without having to scroll down. Items that should be kept above the fold include:
   • Contact Information
   • Newsletter sign-ups
   • Login/My Account button
   • Social Media Links
   • Search buttons
   • Links to sidelines
   • Recent News/Upcoming Events
4. Include calls-to-action: A call-to-action (CTA) is a button, banner, graphic or text on a website meant to prompt the user to click it and continue through your site on a specific path. CTAs should be:
   • Action oriented - Use phrases such as ‘Sign-Up’, ‘Register’, ‘Join Now’, ‘Buy’ etc.
   • Visually apparent - Should stand out from the rest of your site and be located in an easy to find spot
   • Brief - A few words to grab their attention and lead them to the next step.
5. Create a footer with links: The footer of a web page, though often underutilized, is a key element of your website:
   • When website visitors scroll down to the bottom of the home page, a footer with interesting links to other sections of your website will give them a compelling reason to go deeper into your site, rather than navigate away from it.
   • Links in your footer also help search engines to navigate your website and index your pages so that they can be found in search engines.
   • Site visitors who use a mobile device to navigate your website will need links in the header and footer to navigate the website since they will be scrolling up and down, and not left to right.
   • Consider adding a note “If you have difficulty accessing content on this website, please contact us at ____ and we will strive to assist you in accessing our website.” for those visitors with impairments who might have difficulty using your site.

With all of this in mind, we highly recommend you create a footer that is simple, well organized and includes links to contact information, ‘About Us’, ‘Help’, and other important pages.

6. Utilize space well and keep things organized and updated: Make sure you’re effectively using the layout of your website, eliminating unnecessary whitespace and using colors and fonts that are clear and easy to read. Keep your information organized with the aid of menu categories and enable drop-down menus where appropriate. Make sure to remove information that is no longer relevant and add new content regularly.
7. Place upcoming events on the front page: Including upcoming events on your front page is a great way to prompt users to visit your store and to let them know that your site is up-to-date. We recommend just ‘teasers’ of events on your front page, and linking them to a page dedicated to the details for those events. We provide several ways in which you may do so:
   • Place the pre-built event blocks on your site (Upcoming Events and Event Calendar)
   • Using Drupal Views, you can set up a display of your events that will automatically pull in new events and remove old events. You can determine the event fields displayed in these views and we provide some basic instructions for creating an Upcoming Events View. If you find views daunting, we can assist in setting this up for you and show you how to maintain it.
8. Use ‘Alternate Image Text’: The purpose of Alternative Image Text (also referred to as alternative text, alt text, or alt tags) is to provide a description of the contents of an image file. One of the most common uses of alt tags is to provide text for visitors who can’t see images in their browsers. If images do not show in a browser, for any reason, the alt text will show in its place, giving context to what the images actually depict, this is especially important for visitors to your site who are visually impaired and visitors who use screen readers. Additionally, effectively using alt text can also improve your site’s placement in search engine results because it allows the images on your pages to rank in image search results. The ‘Adding Images’ document includes instructions for adding alt text to images.
9. Include Closed Captioning for Videos: Adding closed captions to your videos can also improve your site’s placement in search engine results because closed captions come from a text file that your video references as it plays. Closed captions also provide your visitors with hearing impairments a way of understanding the contents of the video without having to hear it.
10. Use the Drupal Contact Us module: This module allows you to set up different categories for your Contact Us form. Site visitors can provide their name, select a category,  specify a subject, write their message and elect to have a copy of the message sent to their own email address. Each category can have multiple recipients and the email address(es) remains hidden from the user.
11. Create custom help and error pages: Drupal makes it possible to configure customized ‘help’, ‘access denied’ and ‘page not found’ pages.
    • For your custom ‘help’ page we recommend the following information:
      • Contact us
      • Order tracking
      • Accessing user account
      • Refund policy
      • Privacy policy
      • Review the 'Creating A Help Page' document
    • For your custom ‘access denied’ and ‘page not found’ pages we recommend the following information:
      • A friendly message about why they might be receiving the error
      • Links back to the main area of your website
      • Review the 'Custom Error Pages' document

RETURN TO TOP

E-COMMERCEE-COMMERCE

1. Shopping Cart: You do not want anything getting in the way of your customers completing the checkout process. Therefore, anything that could prevent checkout, distract them or doesn’t pertain to the checkout process should be fixed or removed from the checkout pages. This includes:
   • Unnecessary blocks of information (anything not related to the checkout process) should not be placed on any of the checkout pages. You can control the visibility of blocks on pages through the block visibility settings.
   • Slideshows
   • Social Media Feeds
   • Links to services outside your website
2. Collapsed Pane Cart Format: By default, all checkout panes (Customer Information, Delivery information, Shipping costs, etc.) are open and displayed on one page. By enabling collapsed checkout panes, a ‘Next’ button is added to each pane and only one pane is expanded at a time. This allows for a simplified checkout experience for your customers. To enable the ‘Collapsed pane’ cart format navigate to: Store > Configuration > Checkout and select ‘Use collapsing checkout panes with Next buttons’.
3. Shipping: Make sure your customers have different shipping choices by offering at least two shipping options.

RETURN TO TOP

SITE ADMINISTRATIONSITE ADMINISTRATION

1. Staff Access: Each staff member with access to the site should have their own login, they should not share accounts.  Once they have their own account, you can assign them the appropriate level of access. This makes tracking changes on the site easier and will help you maintain who has access to your site. Further instructions can be found under ‘Adding New Administrators’.
2. Email Addresses: Due to changes made by Third party email providers such as; Yahoo, Gmail, Outlook, Hotmail, Live and others, emails with addresses from those providers set as the 'from' address cannot be delivered by the IndieCommerce system.  This is a restriction that is imposed by the third party (Yahoo, Gmail etc.) to prevent unauthorized emails coming from their domains. We recommend that you use an email such as [email protected] - an email using your store's domain name.  One company that you can purchase email service from is Google Apps for Work.  However, your domain host may be able to provide one for you as well.  You may want to contact them to see if that option is available or if comes with your subscription with them. Please note that we can deliver emails to all major providers, as long as the from address is not one of those mentioned above.
3. Setup Google Analytics: Google Analytics (GA) is a free Web analytics service that provides statistics and basic analytical tools for search engine optimization (SEO) and marketing purposes. Google Analytics allows you to access both general statistics and minutiae in detailed, comprehensive reports as well as the basics, such as how many visitors you're getting and where they are coming from. GA helps you understand ways to reach your audience and drive traffic to your site. You can find information about setting up a Google Analytics account and how to enable it on your website here: Google Analytics Setup and we have a great webinar on it here: Google Analytics Webinar.

RETURN TO TOP

MARKETINGMARKETING

1. Setup Your ‘Google My Business Page’: This is something that Amazon can’t do, but as a local business, you can show up on page one of local search results for your area. Google My Business is a free tool for businesses to manage their online presence across Google, including Search and Maps. By verifying and editing your business information, you can both help customers find you and control the information presented about your business including your hours and contact information. Get started setting up your Google Business page and watch our 3 part webinar on the importance of local search optimization in our Webinar Center: Local Search Optimization For Your Bookshop.

RETURN TO TOP