Every website needs a strategy

Focus on the end user to design your website

For small business and community organisations it can be all be all too easy to set up a website that ticks the box of being your website, but doesn’t connect with your customers – as in it doesn’t increase sales or champion your cause.

There’s plenty of tools for creating websites, but when people task themselves with setting up a website for their business or cause they often focus on its creation rather than its end users. And why not, that’s human nature – solve the problem. I (my business or organisation) need a website, and I (the business owner) can make a website right now with tool X.

The problem with this approach is that whilst you get a website, there has been no focus on the end user of your website. You want those people to purchase your product or services, make contact with you to arrange that, or engage with your cause.

How do we determine what the end user needs?

A good website strategy, design and end website focuses on those people (the end users) – to effectively connect with your customers or champion your cause.

1 Determine your audience

Everything needs to be done with these people in mind.

  • Is it one primary audience, or segmented?
  • What age are they?
  • How do they access the internet?
  • What do they engage with online?

For instance a website whose primary audience is youth needs to work very well on smartphones. 25% of Australian youth only access the internet via their smartphone. A mobile-first design approach would almost certainly be the best approach.

2 The style of the website needs to match with what this audience experiences elsewhere

In part this means your competition, but it means much more. The person looking for your services/goods/cause is likely to be immersed in aspects associated with it, and you’ll be measured based on their experience of that.

If your service or goods are visual, such as any fashion, architecture, art, even “designer” consumer items, then your website needs to meet that standard. If your website looks bad because of poor design, then the person can only conclude that surely your visual sense is also bad.

For instance, if you’re an architect marketing your services, the audience looking for an architect is probably also browsing real estate websites, reading home beautiful magazines, browsing interior decorating boards on Pinterest and watching home improvement shows – indeed, they’ve probably been doing this for years.

If your website doesn’t match these experiences they won’t connect with you – because you haven’t matched their conscious, or more likely unconscious, expectations. You’ve just lost a sale/recruit.

3 Task Pathways

When you focus on the end user, you focus on how they think when they are looking for your product or service.

  • Is the website easy for them to use? What is their pathway through the website?
  • Can they achieve their task quickly and efficiently?
  • What are the obstacles to complete their task? If the obstacles are too great, they may begin but abandon their task, moving on to another website.

An example of this is purchasing an item online.

A user visiting your website is looking for the item to purchase, for you to be the one to make the sale, they need to complete all of the following steps:

  1. Find the item
  2. Determine it is the correct item (it is indeed the item they want)
  3. Refine their product choice (colour, size)
  4. Know the total price (is there a postage charge? how much?)
  5. Know how long it will be before it is delivered
  6. Put it in a shopping cart
  7. Pay for it (are there obstacles? are they forced to sign up first, is it one or two screens, or many, do they know where they are in this process?)

Website Strategy

I’ve helped numerous clients with website strategy:

  • determining their website audiences,
  • tasks each audience segment undertakes, and
  • deploying systems to allow those audience segments to complete those takss in the most efficient way

Optimising WooCommerce Checkout for Mobile

For an online store to be effective – to maximise its sales – it must work well on smartphones. WooCommerce for WordPress is a common online store system, but the checkout process is poor on smartphones. Why doesn’t the checkout fit on a smartphone screen? Because it uses tables that aren’t optimized for the 320 pixel width of a smartphone.

Mobile Use in Australia

The checkout experience can’t be ignored – between 30-40% of internet traffic is now conducted on mobile devices (such as smartphones and tablets).

People are five times more likely to abandon a task they are trying to complete if the website isn’t optimized for mobile use. If this is your website you just lost a sale.

In mid-2013, 63% of Australians owned a smartphone.

31% of smartphone users – equating to 17% of adults – only access the internet on their smartphone.

Tables, considered evil by some, are perfect for laying out tabular data (their original purpose before being hijacked for page layout until the mid-2000s). But they need help to display well on smartphones. The solution is to make a table responsive. The trick lies in the CSS display property, making the td element (the table cell), behave as display:block, instead of it’s natural display: table-cell.

I originally posted this in a CyberChimps forum, in response to someone’s question as to how to optimise the WooCommerce page for mobile – principally that the cart and checkout didn’t fit on the mobile screen. A table, being naturally not responsive, simply breaks out of the page.

My solution is actually an adaption of Chris Coyier’s Responsive Data Tables article, http://css-tricks.com/responsive-data-tables/.

Using this method allows the font size to remain at full size, which is good for smartphone viewing.

Disclaimer: the CSS could be overwritten by your theme’s styles

Before and After

WooCommerce cart page, before and after smartphone optimisation with table responsive design

WooCommerce checkout page, before and after smartphone optimisation

The CSS Code

The CSS code below can be pasted at the bottom of your theme’s stylesheet. Visit WordPress Dashboard > Appearance > Editor (http://yourWebsite.com/wp-admin/theme-editor.php) and it is usually the file the loads automatically (otherwise it is at the bottom of the right hand side list, Styles > style.css).

The media query can be tweaked. In this case I’ve used 600px, any bigger than that and the table will fit as per normal. You could use 480px, a common landscape screen size, or 568px (an iPhone5 landscape). Using 320px (common portrait smartphone) would be an oversight, as it would ignore landscape smartphone use.

Download CSS file

/* START Make the cart table responsive */
/* http://css-tricks.com/responsive-data-tables/ */

@media screen and (max-width: 600px) {

/* Force table to not be like tables anymore */
.woocommerce-page table.shop_table,
.woocommerce-page table.shop_table thead,
.woocommerce-page table.shop_table tbody,
.woocommerce-page table.shop_table th,
.woocommerce-page table.shop_table td,
.woocommerce-page table.shop_table tr {
    display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
.woocommerce-page table.shop_table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.woocommerce-page table.shop_table tr {
    /*border: 1px solid #d2d3d3; */
}

.woocommerce-page table.shop_table td {
    /* Behave like a "row" */
    border: 1px solid #d2d3d3;
    position: relative;
    padding-left: 30% !important;
}

.woocommerce-page table.shop_table {
    border: none;
}

.woocommerce-page table.shop_table td.product-spacer {
    border-color: #FFF;
    height: 10px;
}

.woocommerce-page table.shop_table td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 25%;
    padding-right: 10px;
    white-space: nowrap;
}

/*
Label the data
*/
.woocommerce-page table.shop_table td.product-remove:before {
    content: "DELETE";
}

.woocommerce-page table.shop_table td.product-thumbnail:before {
    content: "IMAGE";
}

.woocommerce-page table.shop_table td.product-name:before {
    content: "PRODUCT";
}

.woocommerce-page table.shop_table td.product-price:before {
    content: "PRICE";
}

.woocommerce-page table.shop_table td.product-quantity:before {
    content: "QUANTITY";
}

.woocommerce-page table.shop_table td.product-subtotal:before {
    content: "SUBTOTAL";
}

.woocommerce-page table.shop_table td.product-total:before {
    content: "TOTAL";
}

.woocommerce .quantity,
.woocommerce #content .quantity,
.woocommerce-page .quantity,
.woocommerce-page #content .quantity {
    margin: 0;
}

.woocommerce-page table.cart td.actions,
.woocommerce-page #content table.cart td.actions {
    text-align: left;
    border:0;
    padding-left: 6px !important;
}

.woocommerce-page table.cart td.actions .button.alt,
.woocommerce-page #content table.cart td.actions .button.alt {
    float: left;
    margin-top: 10px;
}

.woocommerce-page table.cart td.actions div,
.woocommerce-page #content table.cart td.actions div,
.woocommerce-page table.cart td.actions input,
.woocommerce-page #content table.cart td.actions input {
    margin-bottom: 10px;
}

.woocommerce-page .cart-collaterals .cart_totals {
    float: left;
    width: 100%;
    text-align: left;
}

.woocommerce-page .cart-collaterals .cart_totals th,
.woocommerce-page .cart-collaterals .cart_totals td {
    border:0 !important;
}

.woocommerce-page .cart-collaterals .cart_totals table tr.cart-subtotal td,
.woocommerce-page .cart-collaterals .cart_totals table tr.shipping td,
.woocommerce-page .cart-collaterals .cart_totals table tr.total td {
    padding-left: 6px !important;
}

.woocommerce-page table.shop_table tr.cart-subtotal td,
.woocommerce-page table.shop_table tr.shipping td,
.woocommerce-page table.shop_table tr.total td,
.woocommerce-page table.shop_table.order_details tfoot th,
.woocommerce-page table.shop_table.order_details tfoot td {
    padding-left: 6px !important;
    border:0 !important;
}

.woocommerce-page table.shop_table tbody {
    padding-top: 10px;
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2,
.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
    float: none;
    width: 100%;
}

.woocommerce .order_details ul,
.woocommerce-page .order_details ul,
.woocommerce .order_details,
.woocommerce-page .order_details {
    padding:0;
}

.woocommerce .order_details li,
.woocommerce-page .order_details li {
    clear: left;
    margin-bottom: 10px;
    border:0;
}

/* make buttons full width, text wide anyway, improves effectiveness */
#content table.cart td.actions .button,
.woocommerce #content table.cart td.actions .input-text,
.woocommerce #content table.cart td.actions input,
.woocommerce table.cart td.actions .button,
.woocommerce table.cart td.actions .input-text,
.woocommerce table.cart td.actions input,
.woocommerce-page #content table.cart td.actions .button,
.woocommerce-page #content table.cart td.actions .input-text,
.woocommerce-page #content table.cart td.actions input,
.woocommerce-page table.cart td.actions .button,
.woocommerce-page table.cart td.actions .input-text,
.woocommerce-page table.cart td.actions input {
    width: 100%;
}

/* keep coupon at 50% */
#content table.cart td.actions .coupon .button,
.woocommerce #content table.cart td.actions .coupon .input-text,
.woocommerce #content table.cart td.actions .coupon input,
.woocommerce table.cart td.actions .coupon .button,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce table.cart td.actions .coupon input,
.woocommerce-page #content table.cart td.actions .coupon .button,
.woocommerce-page #content table.cart td.actions .coupon .input-text,
.woocommerce-page #content table.cart td.actions .coupon input,
.woocommerce-page table.cart td.actions .coupon .button,
.woocommerce-page table.cart td.actions .coupon .input-text,
.woocommerce-page table.cart td.actions .coupon input {
    width: 48%;
}

/* clean up how coupon inputs display */
#content table.cart td.actions .coupon,
.woocommerce table.cart td.actions .coupon,
.woocommerce-page #content table.cart td.actions .coupon,
.woocommerce-page table.cart td.actions .coupon {
    margin-top: 1.5em;
}

#content table.cart td.actions .coupon .input-text,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce-page #content table.cart td.actions .coupon .input-text,
.woocommerce-page table.cart td.actions .coupon .input-text {
    margin-bottom: 1em;
}

/* remove cross sells, they interfere with flow between cart and cart totals + shipping calculator */
.woocommerce .cart-collaterals .cross-sells,
.woocommerce-page .cart-collaterals .cross-sells {
    display: none;
}

}

/* END Make the cart table responsive */