Tag Archives: WordPress

Effective e-commerce websites and metrics

So we all want a “beautiful website” and beauty is in the eye of the beholder, however good design can also improve a sites navigation open up to a new audience and increase sales.
I recently took on a contract role with an organisation who’s old site was in dire need of both a visual refreshment and a code overhaul.

Choosing a CMS

So my poor client had a propietry CMS (not open source).. I felt obliged to rescue them from it. It was over 5 years old, no longer supported by its creators and just not up to scratch on managing files, being accessable or mobile friendly. For me it’s natural to move clients to WordPress its open source highly customisable and easy to make standards compliant.

Before and after a design renovation

before frontpageDesign  wise the  original site looked like it had been made in the 90’s with a funky top and side menu that was difficult to navigate and update it was not doing my client any favours. 
But before we could replace it  I had to  get some  concepts and ideas about what might work better and what the
before general formcompany wants.  My own wishlist was quite long:

  • accesable(wcag2)
  • RTO compliance
  • Mobile first ( hamburger menu )
  • html 5
  • All courses on dynamic list
  • Backup system
  • https (on all pages)
  • User driven

Mock up stage

I use  mockups and wireframes to work  out some  layout basics, many modern  sites use parallax and scroll down  So  I wanted to do that and define clear sections of the front page. 

I tend not to have images at this stage as it distracts the client from addressing the real layout. We have  a top section with the menu and a massive image slider. A call out section that clearly defines the key business services and links though to meet those needs. 
A “brag” section to inform the user of the companies achievements followed by a featured courses section that puts the most important  thing on the front page.. links through to book featured courses. Followed by a bottom menu for fallback and  user friendliness. Having sorted all the main elements and got some kind of sign off we are then free to  start the build.

Key design features and benefits


full final front pageAs you can see  the final  site is super modern, featuring  clean but simple design elements. We went out of our way to take our own  photographs featuring  female and male students in workplace situations. 
I worked collaboratively to make custom site icons for the 4 sections ensuring they are industry specific and not just generic stock icons.  
One important factor for me was to generate a dynamic listing of all the courses, as the old site had no single page that listed all available courses and even if I created one it would be difficult to maintain as  such information is  likely to change. This seems like a small ask but it also seemed vital to the sites success.

For this I used Woo commerce as it allows categories

and should the client want to use the selling system, its powerful and has many options.  Woo naturally  generates a “shop ” page that can be ordered and  highly visual with clear calls to action like “book buttons”.This   list  will automatically add new courses – no maintenance needed.

I needed to ensure the main menu was more  user friendly so I’m using a “mega  menu ” as i find older users have issues navigating with drop downs and many of the clients are over 30. Nice clear section headings help keep it feeling organised and some courses can be listed twice theres a lot of control over how and what it shows. 

custom 404

Custom 404’s add an element of fun to what can be a frustrating user experience.

Improvements to the search functionality and availability and  internal links built to help users find their way around the site. 

Product pages

information blocksGood design shouldn’t stop at the front page. Each product was carefully looked at and key elements a user may need to know were put into a information block so students can at a glance identify the cost, duration and outcome of a course. Imagery was created for each course to help identify the key course subjects, and the way the course is to be delivered. 

Using accordions to  keep the clutter down we were able to  get clear repeatable information blocks such as prerequisites, terms 

and conditions, funding and  an enquiry form on every page. 
Dynamically generated bookings lists  populate pages giving users choices about when courses are available and making bookings possible on a mobile and a tablet. . 

Half the battle with sites like this is presenting information with clarity and consistency.  Using  modern CSS we were able to use process maps and charts, some fun UI additions such as fontawesome for  icons that will scale. This site has many features  I’m super fond of and  hope will take the client into a new era of web.

Metrics and analytics

google goalsSo good design is more than just the visual, for a commercial website to be  “successful”  you should somehow measure that success. For me thats all in the  google analytics. It’s early days yet but the old site had a conversion rate (for bookings) that was on average 2.5-3.5 %  and currently the new site has 21% . I’m happy to say the new  site  is working twice as hard for the company as its predecessor, with  mobile bookings now a possibility thats 1/2 the sites traffic now able to use it fully so I’m pretty happy with the result. 
Check out the site yourself https://www.jbhunter.edu.au

 

Avoid a Google Mobile Ranking Demotion with responsive design

aeoncadamy mobile site - iphoneSo Google just announced a new algorithm for search rankings that will actively demote sites that are not mobile friendly. The word “Mobilegeddon” is being bandied about.

This is because your users want a mobile site according to Google 75 % of consumers want a mobile friendly site, So its not just affecting your search rankings its loosing you business.

So what can you do to avoid being demoted by the google mobile ranking algorithm ?What can be done?

Check & Test
Pick up your smartphone and go to your website.

  • How long does it take to load? (over 3 seconds is too long)
  • Does it look good ( does the content scale well can you still read the text ?
    remarkably simple i know but you’d be surprised how many sites fail this test.
  • Is it easy to navigate ?
  • googles own mobile test : /webmasters/tools/mobile-friendly/

So what can be done?  If your site isn’t mobile friendly it was probably made several years ago anyhow and its time for an overhaul.

Responsive design

Responsive design is making a site that scales to fit any device so one site reshuffles and scales to fit smaller screens like smartphones and tablets. If your site is responsive and fast it will adhere to google’s new rules and avoid demotion.  It just takes some CSS and Javascript magic but its can be done and is remarkably easy. If your using WordPress most of the basic templates like twenty fourteen and twenty thirteen will scale to fit most standard devices so you don’t need to worry.

The image on the side is a WordPress site running a customized twenty forteen theme as seen on a mobile (Iphone) This did not take hours, just a few tests and a little code. Most of the sites I have made in the last 4 years have been responsive and optimized for mobiles.

Speed testing

We also like to speed test sites speed of loading is hugely important and will impact on whether your customers stay on your site or even get to it. Face it there is nothing more annoying or rage inducing than a slow site. Some of the tools we use are :

Some solutions to page speed are really quite simple they may include:

  • optimize all images
  • reduce garbage code (CSS and Javascript )
  • allow caching

If your worried about loosing Google rankings and loosing customers due to a  poor or no mobile site give us a call we are happy to help.

Tribal& Trance Festival – a clean modern website design

It’s a new year and a new look. My brief for this was a modern & clean website for
Tribal & Trance Festival

screenshot

I moved the site over to wordPress so its not just a reskin – the previous site was joomla –
And so far the client seems really happy getting around wordPress. We wanted the site to be easy to navigate and as simple as possible.

Tools used :

Photoshop,Dreamweaver, wordpress, html ,css, php.

Process:

We used a standard theme (twenty thirteen) as a good solid base. and customize it  by making a child theme, this means when the original theme is updated it wont override our theme. Having set that up we started to customize. My aim was for it to be done with a minimum fuss and with future maintenance in mind.

plugins
Pluggins in wordpress are great, however you want to have a minimum amount of plugins on any site for several reasons. Firstly updates can kill you, yes that’s right inconspicuous update may cause a clash with other plugins causing it to fail or sometimes break other things. So I’m try and keep my plugin habit to a minimum.

Bare basics
Disable comments – I dont know what id do without this plugin , its simple but it does a might job. Often clients dont want comments on their sites, Even if they have time to moderate the comments most of them are spam anyhow, and really its a chore. To avoid security issues and spam violations this is a gem.

Some sort of backup !
Rule 1 of multimedia always have a backup. You can restore a site from a backup, make clones and sleep somewhat soundly. Knowing that if the server fails, if the site gets hacked if you need ot move it in a hurry  you have a plan.

Special functionality
I’m always trying new things  I looked around at a few “event” plugins and picked one , although I could have built a directory of events with a pay pal link from scratch its sometimes faster and cheaper to grab a plugin and style it . the one I picked had extra features like  csv export  (exporting all the bookings to an exel file) , Ical integration and google maps.  Its not to bad if your running an event based site so ill give them a plug  its called event organizer pro.

Budget responsiveness
Whats responsiveness? its how your site looks on a mobile and a tablet eg  smaller screens.   Twenty Thirteen is fairly responsive..but it did require a few tweeks. As I was using  the main header section for the logo and for some reason.. (dont ask me why) The header doesn’t scale the image !

Ok well there’s a few ways to tackle that.. you can write your own function , hack the header.php file and general spend a great deal of time messing about and testing  or…
you can do it with CSS (cascading style sheets).

Here’s my fix for what its worth – load smaller headers  in the media query.  It sort works ,I don’ttf mobilet consider it beautiful. I made two smaller versions  of the header.

A tiny but mighty one at 400 pixels for mobiles  and a slightly larger one for the tablet at 600 pixels. For me that’s great, load time will be faster, the logo is scaled correctly – a little under whats available just to be safe . ttf_header_tablet

 

 

 

Then you have to load them in the CSS (cascading style sheet)  here’s an example:

@media (max-width: 480px  or what ever your target) {

     .site-header {
    background: url(images/load a much smaller header! );
    background-repeat:no-repeat ; (unless you want an ugly tile..)
    max-width: however wide the image is;
    max-height: the image hight;
    background-size: 400px Auto !important;
            }
}

Prevent hacking – care and maintenance of your site

spiders anIt’s funny you never think about it until its far too late. I get called at odd hours with panicked clients  “somethings wrong with my website “ or worse  “Help my sites been hacked !”  -these are the words you really don’t want to here late on a friday afternoon , or when your in the middle of a big project.

Let’s face it having your site hacked is really no fun.. no fun at all, so why not take a moment to prevent your site from being hacked ? and if you haven’t got the time employ someone who does or get a staff member unskilled so you can do it in-house. At the end of the day if a few hours work prevent the pain its well worth it.

Why did my site get hacked ?

The good news is its probably not personal, then again if you’ve just finished suing your old web designer it might be ( I had a client who was in that position..). Its most likely its was there you might not be aware of just how much hacking there is for a little perspective  try reading this: the internet of things has been hacked in where bots (web robots) were used to send a bucketload of  spam emails. The likelihood thats your sites been hijacked to send spam is pretty high.

Prevention

CMS (wordPress, Joomla or Drupal) have exploits, and most modern sites use one of theses three open source CMS, I recommend them, most digital systems have exploits nothing is “uncrackable” or “unhackable”. I’m going to offer some simple tips to make sure your site stays online and as clean as possible, no voodoo just simple common sense.  All of theses things are industry “best practice”

5 steps to care and maintance

  1.  Make a backup –  A simple backup plugin should at the very least send you a zipped up file of your site I recommend this is done automatically on a schedule.  If your whole site gets demolished you have a copy.
  2. Stay updated –  As fast as an exploit is found you can bet theres a bunch of people working in the open source coding industry to try and fix it. Often updating is as simple as clicking a button.   make sure you have a backup before you update.. just in case something goes terribly terribly wrong.
  3. Strong passwords – I know they are a hassle but most sites get hacked by whats called a  “brute force attack ” Though is sounds like someone beating up your sever with a baseball bat, what that really means is that a bot is attempting to get into your login .A bot  will try user names and passwords over and over again, until it gets in. So Its obvious its going to try  admin and test1234 <-theses are not strong passwords. I’ve also seen bots  scrape the content from a site and use that to try get into a site, they get smarter every year.  Use a capitol letter or three and some numbers and or special characters  like %*^  or alternatively a really long nonsensical phrase  (see xcd for explanation and a laugh)

  4. Lock the windows – forms are often windows into a site, you may have many or none. Most of us have at least a simple contact us form. WordPress has a comment system  every comment is sent via a form. If its not necessary why even leave that open to spam and other risks?  I use a simple plugin called Disable Comments saves my the hassle of having to clear out spam comments.
  5. Security plugins –  If your really worried install a security plugin. there are heaps out there and for the most part they are pretty good. Some will send you a notification of every attempt to hack your site, sounds good? No, within a day you’ll be swamped with emails. Fascinating at first because of the amount of information you can see in them, but  after a while its just a bit too much.
    Others will automatically deny bots it thinks are malicious – However I had one that blocked out google and I was not impressed.

I hope this information was helpful go forth and maintain your site !  But if your too scared, or you simply don’t have time feel free to ask for a web site maintenance and tune up.