Click here to return to the Random River Home Page

The Random River Blog

Never Knowingly Over-Designed

When I first start working with a new client I always ask them to list two or three ecommerce sites they really like. This serves two functions: so I can get an idea of my client’s tastes, and also to give me something to fire my imagination when I’m coming up with design concepts. Interestingly I’ve noticed of late that there is one ecommerce site that gets cited more than any other as something businesses aspire to emulate – John Lewis (www.johnlewis.com).

What is it that makes this site so good? Why is this site held up more than the sites of the other high street brands as an example of how to do great ecommerce? Here are my thoughts on the matter.

Mega Useful

The most prominent feature on the site is the ‘mega-menu’ – the main horizontal list of departments that expands into a hugely informative site plan.

Mega Menus on johnlewis.com

Mega Menus on johnlewis.com

When you have a store as large and potentially confusing as John Lewis’, providing visitors with a clear method of navigating it is essential. In a real store you can rely on people navigating themselves once they are in the right general area of the store, but online you only have seconds before a customer will give up in frustration because they can’t find what they want.

John Lewis’ mega menu is a great example of making the complicated straightforward. It is possible to locate your exact department amongst the hundreds of others before you even have to click a mouse.

If you have a large and complicated store and you are finding that your visitors are not purchasing as often as you would expect, the problem could simply be they are not finding what they want. Try adding a mega menu and see if this improves your conversion rate.

The Engine Room

At the top right of the store is what I refer to as the ‘engine room’ of an ecommerce site:

The Engine Room

The Engine Room

  • Search
  • Cart
  • Checkout Link
  • Account Functionality

These essential tools are clearly and simply presented, and they always appear in the same place on every page. They are the things that visitors need to click on more than once during their shop visit, and (in the case of the search) will often be the first thing new visitors look for when they visit a site for the first time.

Is your engine room nice and clear? Do you have these key features clearly displayed and easy to access? I’ve seen a surprising number of sites where vital things like the shopping cart are buried away in the design. They don’t need to be clever – they just need to obvious.

Limited Palette

One thing I really like about johnlewis.com is the limited colour palette. They’ve used pale beige for the background, and that’s about as colourful as it gets. Everything else is black, white and grey. A limited/neutral colour palette is a great idea for your site as it means that your products will stand out (and not be fighting for attention with your branding) and it allows your calls to action to be found easily. In the case of johnlewis.com the buy buttons for the site really stand out with a bright green colour against the neutral beige.

Clear Calls To Action

Clear Calls To Action

Simple

John Lewis have opted for a really simple and clean layout with very few graphical elements. Corners are square, drop shadows are minimal and there isn’t a gradient fill in sight. Again, this allows their product photography to shine and means the site will always load quickly and appear consistently across browsers. Great design doesn’t mean ‘lots of clever design elements’. I tend to approach web design like laying out a magazine page – it’s more about presenting information clearly than it is about making something graphically rich.

Lessons to Take Away

The way to approach design is not to think about how to make it clever and impressive. Instead you should think about how to make your site design best serve the needs of your visitors and your product range.

  • Is your site structure easy to navigate?
  • Are key features such as search and shopping cart easy to locate?
  • Do your graphical elements and colour scheme distract from your product images and your calls to action?

John Lewis have thought long and hard about these issues and come up with an approach to web design which is worth learning from.

Shop Mobility – The Challenge of Mobile Ecommerce

Many of my customers are finding up to around 20% of their visitors are now using mobile devices to visit their online stores. However, the proportion of these mobile visitors that then go on and place an order is miniscule compared to people who visit using a standard computer.

Quick note: You can find out how many people visit your store using mobile devices by using Google Analytics. Check the ‘Operating System’ results – for example on my site I can see that 10% of my visitors use iOS (i.e. iPhones).

This is the challenge that is now facing all ecommerce sites: how do we encourage people using mobile devices to go on and place orders? For the last 10 years web designers like me have spent hours upon hours trying to create stores that just work correctly on all the different versions of Internet Explorer. Now we have to make sure that it works correctly on all these different handheld devices as well! It’s a frustrating problem, but it cannot be ignored. How can businesses make sure they don’t miss out on this potential business from mobile visitors?

The first solution is simple: do nothing. There is a strong argument to be made that people use mobile devices to do their research, but they don’t go on and input their payment details until they get home and use a computer. Also, when using tablet devices like iPads, most standard websites work perfectly fine as they are. However, I know from personal experience this isn’t the case. If I’m doing a bit of online shopping on the bus and I find a site that works well on my phone and accepts PayPal then I know that placing an order will just take a few clicks. However, if I find a site that requires me to continually scroll and resize the screen, and then expects me to spend ages inputting my name and address information, then I’ll certainly pass on placing an order.

The second solution is to set up a completely separate mobile version of your site alongside your standard site. Companies like MyMobWeb (http://www.mymobweb.com/) and MymCart (http://www.mymcart.com/) will build you a mobile-friendly site, which your mobile visitors will be automatically redirected to. This is great for information-based sites, but not ideal for fast-moving ecommerce stores that need to add products and remove products from sale in real-time. Plus, the hassle of having to maintain two online catalogues will be more than most small businesses can easily handle. The logistical considerations massively outweigh the potential benefits of a separate mobile site.

The third solution is technically the most challenging, but it’s the best in the long run – to use a system that can present your information in a variety of ways based on what visitors are using to view your site. So people using computers will see your standard site, but mobile visitors will see the same information laid out in a different way. If you have a WordPress-based site, there are already plenty of plugins that can do this for you. For ecommerce sites it’s trickier as it will require you to switch to an ecommerce system that is based around an online database – if you don’t already use one. Most leading ecommerce systems like Magento (http://www.magentocommerce.com), Actinic Online (www.actinic.co.uk) and CS-Cart (www.cs-cart.com) can handle the creation of mobile-friendly storefronts, which are simple to navigate and very easy to buy from.

If you think you might need to change ecommerce system, it will mean a massive amount of work and potential disruption, but mobile usage is only going to go up and making the move now will future-proof your site – at least until the next big technological breakthrough comes along!

RIP HMV – Will browsing soon be a thing of the past?

Being a child of the 80s, and a music fan, I spent a huge amount of my teens and twenties in Our Price (gone), Virgin Records (also gone) and HMV (you get the idea) leaving through the CD racks, sniffing out special offers and making new discoveries. There was no better way to kill an hour while waiting for friends then rummaging through the shelves, anticipating that moment where you’ll find the CD or movie that will change your life forever.

But with the announcement this month that HMV has entered the hands of the administrators, I do start to wonder whether that whole way of experiencing retail will soon be a thing of the past. These days you just go to Amazon or eBay, search for what you want, add it to your basket and you are done. In the online space, the shopping experience has been designed to minimise time spent searching, and to help you zero-in with very little time and fuss. This is the golden rule of ecommerce – help the customer find their product with the minimum of clicks and minimum of distractions.

But does this somehow limit the experience of the shopper? Sure, sometimes you just want go into a shop, find the thing you want and get out as quickly as possible – and anyone who has been clothes shopping with me will be able to attest to this. But there are other times when an online visitor will be up for an explore – perhaps they are looking to spend a gift voucher, or maybe looking for a suitable present for their mum – and you’ll need your website to cater for these sorts of customers, as well as the ones who just want to get in and get out quickly.

Fortunately there are loads of ways you can turn a website into a quality browsing experience for your visitors.

First up are lists of ‘related items’ and also lists of ‘also boughts’ (i.e. ‘customers who bought this also bought…’). If you have a few of these on each product page, they are a great way to guide your customers to other parts of your store that they might not ordinarily visit. Related items need to be set up manually by you, and most ecommerce solutions support it. They can be a lot of work to configure, but definitely worth it. Also bought lists are convenient because they are automatically produced from your customers’ buying habits so it saves you the work of setting them up. However, the reality of people’s buying habits mean that most also bought lists end up being full of things like batteries and refills, so a little manual tweaking of the lists is a good idea.

‘Filtering’ tools are also good for visitors who are looking to browse. Filtering tools allow you to present your visitors with a page full of products, and then the visitors can filter that page so they only see products of a certain brand, or within a certain price range. This means casual visitors who might have a certain set of criteria in mind can browse just those products that fit what they are roughly looking for – rather than having to wade through your entire product range.

Another good idea to encourage browsing is a ‘sale’ or ‘special offer’ department of your store that is continually updated. It’s no good just putting a few products in there and then forgetting about them. You need to update it each week, and if you do mailouts you need to make sure that your special offers are included in the mailout. This encourages your regular visitors back to the store, and provides a good way for new customers to get a quick flavour of the sorts of products you sell, and maybe even find a bargain to boot!

So in conclusion, although retails stores themselves are having a rough time of it, there are still people out there who want to spend time browsing and exploring – and by using the right tools on your site you can make sure those visitors have a brilliant experience and hopefully convert themselves into customers.

Random River’s Secrets For Successful Websites

There are three things that are essential to make your site work.

Visibility

There’s no point having a presence up on the web and not telling anyone about it. It’s like holding a party, but not sending out any invitations.

Visibility is key – if you’re not seen, you may as well not exist.

There are two parts to visibility.

Normal (Offline) Marketing – No-one understands your customers better than you do. What Random River can do is help you with ideas about how to reach them and to provide incentives for them to visit your site. Traditional marketing methods such as magazine advertising, direct mail and roadshows are proven to be as successful, if not more successful, than promotion purely through the internet.

Online Marketing – Search engines are free to be listed in, but the amount of effort get your site listed in a good position is formidable. All designs by Random River come ready-optimised to work well with search engines and we can also provide advice on other key factors in making sure your site will succeed. We can also help with paid online advertising – these are those ads you see down the right-hand side of Google – helping you with what works and what doesn’t.

Clarity

When a new customer arrives at your site, you have about three seconds to convince them that they have come to the right place. Your content has to be clear and well written and the navigation on your site has to be obvious, intuitive and in a prominent place. Most of all though, your design needs to be modern, clean, uncluttered and unfussy – allowing your products and services to shine out and not be obscured behind over-fussy designs.

As well as professional designs, Random River customers have the option of our copy-editing and presentation service to polish your content before publishing it on the web.

Accessibility

Since 1999 the Disability Discrimination Act states that:

“it (is) unlawful for a service provider to discriminate against a disabled person by refusing to provide any service which it provides to members of the public” (section 2.2).

It also states:

“For people with visual impairments, the range of auxiliary aids or services which it might be reasonable to provide to ensure that services are accessible might include … accessible websites.” (section 5.23)

What does that mean for your site? It simply means that your design must be understandable to someone using a ‘screen reading device’ to read out the content of the page, and it must have clean, clear layout for people with any impairment to their vision. All designs by Random River will be accessible from the word go – thus reducing the need later on for costly re-designs. The great thing about accessiblity, though, is that an accessible site is visible to everyone – whether it’s someone browsing with a handheld device (if you don’t believe me, try going to http://www.randomriver.net/ on your mobile phone) or a blind person using a screen reader to read out the text. Also, search engines LOVE accessible sites as they can easily read the content and help you get a good listing.

Common Ecommerce Mistakes #2: Making Your Business All About You

In the last article we met a customer of mine with an online gift shop idea that was doomed to fail before it even got off the ground. In that article I talked about the mistake he made trying to sell lots of different types of products on one website.

Sadly for him, that was not his only mistake…

 

A Difficult Question

“Who are your target customers?” I asked.

He looked at me blankly. I tried rephrasing the question.

“What sort of people do you think will be shopping at your store?”

“Well… Everyone”, he replied proudly, “everyone needs gifts don’t they? And my gifts are brilliant.”

He is no longer trading.

 

Find A Need And Meet It

You see, the problem with most startup ecommerce businesses is that they are terribly excited about what they are planning to sell, but they often have zero idea who is going to buy from them.

Successful online businesses go about it the other way. They first of all spot a need that isn’t being met by anyone else, and then find a way to meet it with some good products.

This process has a name – and it’s one of the most commonly misunderstood words in business: Marketing.

 

What Is Marketing?

You see, marketing isn’t just ‘telling people you exist’. Marketing is the process of identifying the RIGHT people, and then telling them you exist.

For my ecommerce client, he was right in that everyone buys gifts. But he never gave any thought to why people would buy from HIM, when there are loads of other shops they could buy from. He cast his net wide, but the in the process never managed to give any one individual a compelling enough reason to buy from him.

At the time, I suggested he should focus on a few products that aren’t widely available which would appeal to a certain ‘market niche’ (market niche is just jargon for ‘group of people who think roughly the same way about certain things’).

 

Market Niches

You see, once you’ve identified a market niche who are likely to be interested in what you are selling,  you can start thinking about targeting your advertising at people in that niche, and also tailoring your website to appeal to the visitors from that niche that come your way. Essentially you are pre-selecting your customers, but if you get it right you will be pre-selecting people who are much more likely to buy from you.

It’s all about basing your business around your customers needs rather than basing it around you.

 

Getting It Right

Let’s have a look at someone who got it right. Another of my clients sells a range of shaving products and toiletries for men. When the business was first set up, the website and the advertising was almost exclusively aimed at the men who would be using their products. However, when we did some analysis on their orders we found that lots of orders had different delivery addresses to the billing address i.e. their products were being bought as gifts. My client thought their customers were one market niche (men who like to pamper themselves) but actually there was another group of people to promote to (people buying gifts for men who like to pamper themselves). Based in this evidence we added a whole category of ‘Gift Ideas’ to the shop and reorganised the home page to talk about gift shopping a lot more. As a result, they saw their sales go up by around 20%.

 

Lessons to Be Learned

So what’s the mistake to avoid here? Your website must not be just about how wonderful your products are. Instead it should be about your customer’s needs and how well you can meet them. If you get it right, then the job of selling becomes much easier as people are already sold before they even arrive at your website.

Common Ecommerce Mistake #1: Get Niche or Get Out

Originally published here: http://blog.postcodeanywhere.co.uk/index.php/common-ecommerce-mistakes-1-get-niche-or-get-out/

One of the most common mistakes new online businesses make is trying to sell too many different kinds of things.

Last year I sat down with a lovely chap in his fifties who had an idea for an online business that he was really excited about, and he wanted me to help make his dream a reality. He had spent the last six months going round craft fairs and trade shows looking for unique and unusual gifts that weren’t available on the high street and he was going to create an online store that offered them all to the public.

“Great” I said, “So what sorts of products are you selling?”

“All sorts” he replied. And he wasn’t kidding. He had a selection of beautiful environmentally friendly candles, a range of cute animal slippers for kids, a few wonderful handbags and even threw in some fountain pens with crystal detailing.

It was at this point I started to get nervous. And I knew no matter what I designed for him, and no matter how hard he worked, his business was probably going to fail.

Whatever Works On The High Street, Do The Opposite

With a bricks and mortar store it’s good to have lots of different sorts of products, as it can encourage people to linger longer and explore. But with ecommerce it’s much better to do completely the opposite and think about focussing on a more limited range. And the reason for this all comes back to the ideas about search engine optimisation I talked about here.

With my chap, although some of his business would have come from people who had heard about him locally or saw one of his adverts, the vast majority of his business was hopefully going to come from search engine traffic.

“But that’s OK,” my chap might say, “as someone searching for candles will certainly find me”.

Don’t Dilute Search Engine Results

Well, no. Because all the other things he was selling actually counted against him from a search engine point of view. The reason for this is that if someone searches for ‘candles,’ Google sees a site that sells nothing but candles as much more relevant to the searcher than a site selling candles and shoes and handbags and pens – therefore the shop selling nothing but candles will appear much higher in the results. The more different types of product you have on your site, the more it will dilute how well each individual item performs on search engines. Specialising in a certain type of product, or limited range of products, will mean that all the content of your site is concentrated around a smaller range of key words, concepts and phrases. And that means your site will appear much higher up in the search engine rankings when someone searches for that thing you specialise in.

Great Big Niches

And don’t worry that it could mean missing out on some sales opportunities. Never forget the internet is MASSIVE and the niches are still going to be bigger than any offline audience you could potentially reach.

So what should my chap have done? My suggestion was that he specialise in his range of environmentally friendly candles as they were unique, gorgeous and easy to talk about. But he didn’t. And his business failed.

On a more positive note, another one of my customers had a couple of high street stores selling a huge range of kitchenware. A few years ago they had put their entire massive product range online, but they were struggling to really make any headway in sales. The one product which they sold most of were Riedel wine glasses so I worked with them to create a mini-site that sold nothing but these wine glasses. And lo and behold it quickly began to outstrip their main business in terms of sales.

Leave The Mass Market to the Big Boys

Only someone like Amazon can get away with selling everything. So don’t try and compete with them. If you are a small business thinking about going online you should think about selling a small range of products that you understand and are passionate about. Doing that means that people looking for you are more likely to find you, and once they are on your site, that passion and expertise that will encourage them to go on and buy.

The Truth About SEO

In last month’s blog post I talked about how you can influence how relevant search engines think you are by tweaking the content of your site pages.

I gave you some simple things to look at that were well within your control and will have a real positive effect.

This month, however, is where search engine optimisation gets ugly.

Get Into The Mind of Google

You see, the content on your page is only half the picture.

Imagine you are Google for a minute and Mrs. Jones approaches you and asks you to recommend a shop selling cakes in Bristol. You, as Google, want to make sure that the recommendation you give Mrs. Jones is of the highest possible quality so she will come back to you again next time.

So you have a look and you find three largely similar cake shops based in the Bristol area. How would you decide which one to recommend? You would want to recommend the most reputable-looking one, but how does Google decide how reputable a shop is? As humans, we can look at the design, click around a bit, and maybe look for some reviews in order to make a decision about a shop, but Google can’t really do that in the fraction of a second it has to make a decision. Instead it looks at other factors that indicate the quality, professionalism and reputability of a website.

The algorithms that are used to calculate this are a closely guarded secret – plus they would probably be completely unfathomable anyway. What we do know is that it isn’t all to do with what you’ve got on your site pages. It’s also to do with more intangible things such as how up-to-date your pages are, and how many other sites are linking to you.

Keep Up-To-Date

How often you update your site is well within your control. If you haven’t updated your site for months, then Google will think it is some dead site that no-one cares about and you’ll find yourself slipping down the rankings. You must update your site regularly – ideally daily – to give yourself a chance of doing well.

This is when things like blogs come into their own. Having a blog on your site means it’s easy to quickly update the content of your site with the minimum of effort. If you haven’t done so already, it’s worth looking at WordPress (www.wordpress.org). WordPress is a free blogging platform that’s pretty easy to install as part of your current website, although you do need to know a bit about online databases and things so it might be worth contacting a web designer.

Get Connected

The other thing that Google looks at is how many links there are to your site. These are known as ‘backlinks’. The more people that link to you, the more reputable Google thinks you must be. This is the hardest one to influence yourself, which is probably why all the search engines put so much importance on it.

Don’t despair though. There are a few tricks you can use to get links to your site.

First up, have a look and see if there are any online forums where people are talking about the sorts of products you are selling. This is when it’s useful to be marketing to a particular niche area (e.g. selling ’Biker Clothing’ rather than just ‘Clothing’) as you’ll find that the smaller your niche, the more chance there will be of finding an active online community where lots of potential customers are talking to each other. You can then participate in the forums, including a link to your site as part of your forum signature. Don’t promote yourself too brazenly though as there are often rules against this.

Sending out press releases is another good thing to do whenever you’ve got a new product range to launch, or there’s an interesting angle on a current news event that is relevant to your business. As well as traditional papers, there are hundreds of local online news portals out there who are crying out for well-written content to bulk up their sites with. And the great thing about online news sites is that once your press release is on there, it will stay there indefinitely with a link to your site. Nice.

Above all it’s just about having a mindset where you are constantly looking for opportunities to get links to your site wherever you can. It’s a constant ongoing thing, but it really will help your rankings.

Everything Is Going To Be Great, Honest

Although SEO is hard work, don’t forget that if you follow the basic steps in this article, and in last month’s one too, you will already probably be doing more than your nearest competitors. Although you may not beat Amazon quite yet, you shouldn’t be too far behind.

Originally published here – http://blog.postcodeanywhere.co.uk/index.php/seo-part-2-the-truth-about-seo/

The Only SEO Guide You’ll Ever Need – Part 1

Originally Published Here

Search Engine Optimisation is such a massive turn-off for most businesses. What I hear all the time from my clients is that it’s confusing, it’s highly technical, it takes a huge amount of effort, there’s conflicting information out there about how to do it and no matter how hard you work at it, there will always be some other competitor out there doing it better.

This is an attempt to cut through a lot of the waffle and jargon. More importantly, it should give you a few things to work on with your websites that will actually move you up the search engine results over time.

Relevance is Everything

Let’s start by going back to what Search Engine Optimisation is trying to achieve. We know it’s all about getting you as high as possible on search engine results pages, right? But what actually determines the order of the results?

The answer is ‘relevance’.

A search engine will always try and return the results that are most relevant to whatever is searched for. The two most important things that influence relevance are:

1)      How much your page content talks about the thing that is being searched for

2)      How useful Google (or whoever) thinks your site is

I’ll cover the first one this month, and the second one next month (as it’s more complicated, and I need to do a bit more research first!)

Content Is King

The most important things to get right on your site are the actual words on the page.

Google likes pages that are full of lots of well-written text which contains plenty of words that are relevant to your business (known as ‘keywords’). Everything you write for the site should feature the sorts of words you think potential visitors are searching Google for. Google will thank you for it and, oddly enough, the real humans visiting your site will probably enjoy having lots of well-written and relevant text to read as well.

SEO isn’t about creating some monstrous Frankenstein of a site which only makes sense to the visiting search engine spiders. The one thing Google has gotten right is that it rewards sites that are full of useful content. So try and have a good chunk of text on each page near the beginning which introduces the page nicely, and which any visiting search engine spider can get its teeth into.

The Right Heading

OK – there are a few technical things you can do to your site pages to help them perform well with search engines. I’ll try not to blind you with science too much, but there’s no getting away from it.

The first is to make sure you have at least one heading on each page which uses ‘Heading 1′ HTML tags for the formatting:

<h1>A Heading</h1>

This page heading should be near the top of the page and it needs to contain a few key words that are relevant to what that specific page is about. Again, this will be quite useful for your human visitors as well!

Better Meta

We will end this bit of the article talking about the things which most SEO articles start with – meta tags. These are invisible bits of code that sit within the <head>…</head> section at the top of your HTML page and have an effect on your search engine rankings – but not as much as you might think.

The only really important one is the ‘Page Title’ which sits within <title></title> tags. For example, if I view the source of one of my old articles – http://blog.postcodeanywhere.co.uk/index.php/why-should-you-bother-with-twitter/ – I can see the following tag in the <head></head> section:

<title>Why Should You Bother With Twitter? | Postcode Anywhere Blog</title>

This controls the text that appears in the title bar/tab of the browser window, but more importantly it will become the actual link people click on in the search engine results:

SEO

Furthermore, all the search engines put a huge amount of importance about what’s in your page title when they calculate the relevance of the page. So make sure each page in your site has a clear useful page title. And don’t bother about making it too long – all search engines will cut it off after about 60 characters.

The text you can see underneath the link comes from the ‘meta description’ field – which looks like this in the code:

<meta name=”description” content=”blah blah blah” />

No search engine actually uses the meta description of the page to calculate how relevant the page is. But you should still think about using it as it will mean you have complete control over how your site pages are described on the search engine results.

Finally, you may have heard about ‘meta keywords’ which are big lists of keywords in the <head> section of each page. Truth is, these have been so abused over the years by spammers they are completely ignored at the moment by search engines and I can’t see that changing any time soon. So you can forget about them for now.

Until Next Time

Hopefully you’ll have recognised by now that the majority of SEO is not really that technical or tricky. Yes, you need to think about your <title> and <meta> tags, but you also need to have good-quality relevant content and informative headings. It’s good for search engine position, but your human visitors will thank you too.

Next month we will talk about how you can make your site appear more important and useful to search engines, as this is probably the area that is least understood but most vital to get right.

Actinic Online Part 3 – Menus

If you’ve been following the story so far (here and here) you’ll see that so far in Actinic Online I’ve come up with a straightforward but attractive design I think is achievable, and also worked out how to get at the CSS of the site to start implementing some custom fonts, colours, graphics and backgrounds.

Next job was to add in a top menu, a sidebar menu and a footer menu. Unsurprisingly, to get at these you go to ‘Site > Menus > All Menus’

Configuring menus in Actinic Online is a neat distillation of everything that is great, and everything that is frustrating, about Actinic Online.

AMAZING

It’s great because it’s so intuitive to add an item to any menu in the design. Simply highlight an existing menu item and a little pop-up menu comes up within an option to ‘Add a New Menu Item’. You can even ‘Add a Sub-menu’ in order to automatically generate drop-downs (from the top menu) or flyouts (from the side menu).

menus

LESS AMAZING

So adding a menu item is dead easy. The interesting part comes when you want to link a menu item to a page or category you’ve already created in Actinic. To do this you have to edit the ‘Navigation Behaviour’ of the menu item. In English it means you have to tell Actinic Online what happens when you click on it. So something as simple as creating a link to a section means having to add/edit a link and then:

  1. Click the ‘…’ button under ‘Navigation’ behaviours
  2. Set ‘Type of Behaviour’ to ‘Display one of the site components’
  3. Under ‘Component’ select the ‘Shopping Cart: Catalog’
  4. Under ‘Opening Mode’ select ‘Propose a category and/or brand’
  5. Under ‘Category’ select the category you want to display
  6. Click ‘OK’

A bit long-winded huh?

But then like everything with Actinic Online, simple things might seem overly complicated but that’s because there is a huge amount of other things you could do. So instead of linking to a section you could link it to a brochure page, or a search page, or a login page or you could link to a completely different web site, or link to a file, or… or… etc. etc.

PERHAPS A BIT FRUSTRATING

The frustration hits around now though, because it’s around this time you realise that there is no way to just tell Actinic Online to automatically create navigation to the categories in your store. Every simple link to a category has to be added manually. Not a problem for my store because I’ve only got one category at the moment. I can see myself risking RSI though when I need to add navigation for a large store in future.

BACK TO AMAZING AGAIN

OK, that’s the downside. But that’s pretty much the only downside. And there are massive upsides to enjoy too.

As well as putting text links into menus, you can also put in headers, images and separators. These aren’t much use in the header and footer menus, but these are great for the sidebar menus. In my case I wanted to include an image of some gift card designs. So I added a ‘header’ called ‘Gift Cards’ and then I added the image of the gift cards underneath it. Then I set up a ‘navigation behaviour’ for the image so when people click on it they get a bigger version of the image opening in a pop-up. Then I put in a separator and underneath that added a header of ‘Store Information’ and added in links for ‘Delivery’, ‘Returns’ and ‘Terms and Conditions’.

It sounds simple, but things like this had to be manually coded in HTML in Actinic. Now they can be managed via a neat user interface. I can certainly see how it’ll be simple enough to show customers how to manage a range graphical promotions in the sidebar which link to different brands and promotions.

SUPER STYLING

Best thing about the menus is that HTML-wise they are all standard unordered lists which are easy to style.

You’ll see the following styles in the stylesheet:

#headermenu / #verticalmenu / #footermenu – wrappers around the header / sidebar / footer menus
ul#hmenu / ul#vmenu / ul#fmenu – the actual header/sidebar/footer menus
li.mitext – list item containing a text link
li.miimg – list item containing an image
li.mititle – list item containing a title
li.misep – list item containing a separator
ul.submenu – a dropdown/flyout submenu

So for my design I just needed to position #headermenu correctly and give it a translucent background. Then I pretty much took out all css borders and backgrounds for the links in the top menu so they looked like standard text links.

CLASS

All the links in the top bar by default float to the left, but I needed my final link (to the shopping basket) floating to the right. To do this I edited the properties of the link and used the ‘Associated CSS Class’ field to give it a class of ‘basket-link’. I could then add a reference in the CSS that floated a link with a class of ‘basket-link’ to the right rather than the left.

The sidebar and footer menus were edited in a very similar way, which then just left the job of styling up my products and categories. This is where it starts getting (even more) interesting, but I’ll cover that in the next article.

Designing With Actinic Online – Part 2

Having come up with a design I think would work in Actinic Online (original article is here if you haven’t seen it) the next job was to get access to the design options in Actinic Online and start playing.

If you are doing a custom design, you can start in one of two places. Either you can start with a ‘SmartSkin’ or you can just pick a static ‘Site Design’.

SmartSkins

It is quite good fun to play with Actinic Online’s SmartSkin editor ( go to ‘Site > Site Design > Modify’ then click the ‘Use a Smart Skins Design’ link). This bit of Actinic Online is intuitive and well presented (and therefore has clearly been written by different developers than the rest of the software…) You can use to change the colours and sizes of all the main page components I mentioned in the last article (header area, sidebar, footer) and also change the appearance of all the navigation menu items.

smart-skins

All that’s happening with the SmartSkins editor is Actinic Online is dynamically changing the CSS of the site based on whatever you select, so whatever you can do with SmartSkins, you can do by editing the CSS of a standard Site Design. And because I am a MASSIVE control freak, that’s what I decided to do.

CSS Site Designs

First thing I did was to select a theme that was close to my design idea – i.e. roughly the same colours. The one I went for had the catchy name of #40454. Once I selected that, I had to go to ‘Site > Site Design’ and click the ‘Create and Manage Custom Site Designs’ button. I could then click the ‘Edit Properties’ button and suddenly I had a big load of CSS to play with.

Because my eyes are bad enough already, the first job was  I copied and pasted everything into a new file in Dreamweaver.

Then with Dreamweaver open in one window and a preview of the store open in another I got to work.

Changing CSS

First job was easy – editing the body tag to stick in a background colour, default text colour and change the default font.To test it you just need to copy and paste everything back into Actinic Online and then refresh the preview.

Next I needed to stick my graphics in. To actually get my graphics online I went to ‘Gallery > Files’ in Actinic Online. You just click the ‘Add’ button to add them in, it’s quite easy.

Then I needed to figure out where to point to my images in the CSS file. Fortunately, the main container classes all have terribly sensible names:

.maincontainer – the wrapper that goes around the whole design

.headercontainer – the wrapper around the header

.bodycontainer – the wrapper around the sidebar and main content area

.footercontainer – the wrapper around the footer

My design has a stripey pattern that went down each side (see design here)  so I set the width of ‘maincontainer’ to 1200 (the width of my whole design, including the stripes down each side)  and set my stripey image as the background to the div. The tag ended up looking like this:

#maincontainer {
text-align:left;
margin: 0 auto;
background: url(‘/Files/44633/stripes-background.gif’) repeat-y;
height: auto;
width:1200px;
}

Note how when you reference a file you need to start the path with a ‘/’

Then I set the margins of headercontainer, bodycontainer and footercontainer each to:

    margin: 0 110px;

Which then meant I had a 110px gap either side of the design so my stripes were visible.

Next, I changed the height of ‘headercontainer’ and placed my wavy line (and logo) as the background to the header:

#headercontainer {
height:197px;
position:relative;
z-index:100;
background: url(‘/Files/43505/main-background.jpg’);
margin: 0 110px;
}

It’s not rocket science, I was just playing around and trying things out.

Hopefully that’ll be enough to get you in the CSS, in the next article we will deal with the wonderful world of menus.