Splash pages

In a world where content is king your homepage is one of the most important pages on your website, so forfeiting this prime space for a splash page is something we would advise against. Instead, we would recommend clear messages that sum up your company so that visitors can instantly see what you have to offer.

Related content and accessible navigation are key and play a big part in your SEO campaign too, if search engines can’t find your content or your navigation because you’ve got a splash page in the way then your site is less likely to be crawled and indexed.

Pop ups

There are a number of reasons why pop-ups are not recommended, the main one comes down to user control. Using links to open new windows, pop-ups etc without first informing the visitor can be extremely annoying; the user no longer feels in control of their browsing experience. I feel this annoyance is by association, as pop-ups are commonly used by spam posts and advertisements.

As well as this, many browsers will block pop-ups through spam filters, so if it’s important information don’t run the risk of your visitors not seeing it. If it’s additional information, consider using a tooltip or similar instead.

Auto sound

A pet hate of mine is sound that plays automatically when the website loads. My reaction is to instantly navigate away from websites that do this, and if that’s your website then you’ll be losing out on potential customers. It will also do no favours for your website’s bounce rate.

If you must have sound on your website then put the visitor in the driving seat and give them the option to play / stop any sounds.

Flash websites

Flash can be a sticky subject, there have been many improvements over the years from the first instances of flash websites so not all drawbacks still exist. However, for the most part these improvements are not implemented.

The main issue with flash websites is that it’s not fully supported across the board, and if you want to reach as many potential customers as possible then your website needs to work on all the main browsers, and all platforms – this includes mobiles, pcs, macs, tablets, netbooks etc.

But then, even if your website does load, using flash has set backs in terms of SEO. For the main flash is typically image based so for search engines to index your website they’re going to need some alternative content to crawl. This has an impact on search engine positioning.

So, what’s the alternative? There are a couple of different options that will recreate some of the desired effects; one is to use jQuery which will allow you to add a bit of movement to your site. Another is to just use flash for certain elements on the page and not for the whole website. One alternative which is taking the web and turning it on its head is the new developments with HTML5, though this one may need a little more time to be totally compatible.

Summary

As with most topics related to website design, there’s a time and a place. I’m not ruling out any of the features outlined above but their use should be limited to where it’s effective / required. Use them wisely and your website will be an accessible, crawl-able, user friendly place to be.

- Marqiis, individually tailored property solutions
- Chefmate Ltd, catering engineers in Nottinghamshire and Derbyshire
- ExecAmourDating, a dating site for the over 30s
- Unique Soles, independent shoe shop specialising in children’s shoes
- Merlin Fibreglass Technology, fibreglass installation and repairs
- Grapevine Network Management, IT company specialising in IT support around Nottingham
- Lotus Hats, hats and fascinators for special occasions

What are the advantages?

• Break the progress of your website up into bitesize development cycles allowing it to stay fresh and relevant at all times.
• Avoid large redesign costs which may be difficult to get financial approval for.
• Take the pressure off your in-house web staff by letting them get on with the day to day changes, while you and your design firm can take a more objective view on things.
• Build a positive relationship with your design house. The small design cycles also give you the opportunity to move to a different company if you are not happy with the results.
• Work on immediate fixes as well as long term strategy.

If you’d like to discuss working with WebCatch, contact us on 0115 9738074. We’ll be happy to make your acquaintance!

1. DO – Take your time to read the application requirements in full, and make sure you meet them before applying. If you’ve been asked to supply particular information don’t overlook this as it could be seen as a lack of attention to detail.

2. DON’T – Forget to spell check!

3. DO – Provide a well written cover letter specific to the role. Avoid using generic cover letters for your applications as the company will see straight through this.

4. DON’T – Apply more than once. It sounds obvious but only apply for a job once. If you’ve not heard anything back be patient, the company has probably received a ton of applications.

5. DO – Work on your portfolio. Your online portfolio is one of the most important parts of a web design application and could make the difference between getting an interview and not. Show off your skills and any previous websites you’ve completed.

6. DON’T – Apply after the closing date. You’ll most likely be discounted on the spot.

7. DO – Research the company you’re applying to. Showing an interest in the background of the company lets them know you’re keen.

8. DON’T – Use humorous email addresses. There are many free email accounts around so get yourself a professional one to use for job applications.

9. DO – Tailor your CV to the role, if you’ve got previous experience in areas required beef these details up in your CV and perhaps leave out information which is irrelevant. Try to keep your CV to a maximum of 2-3 pages long, putting the most important and recent information first.

10. DON’T – Lie. If you get the job you’ll soon be found out.

Modification: Template File

Q:

I am a newbie at Magento and i need help. Can anyone guide me how to display the search form at the header?

A:

Put this code:

<?php echo $this->getChildHtml(‘topSearch’) ?>

Inside /app/design/frontend/default/your_skin/template/page/html/header.phtml. Then style it so that it appears exactly where you want it. It’s as simple as that!

Modification: Template File

Q:

I’m new to magento, and I would like to know if there is a way to hide the price of a product when it is 0?

I have a few free virtual product, and they have 0 as price. so the customer can order them for free. But I would like to hide the 0.

A:

That is fairly easy to do. You will need to modify the template file /app/design/forntend/default/your_skin/template/catalog/product/view.phtml.

In there you need to look for the piece of code responsible for displaying the price and surround it with additional code:

<?php if($_product->price==0): ?>

<?php echo 'FREE'; ?>
<?php else: ?>
<!-- code that is currently displaying the price in your template -->
<?php endif; ?>

In order to find the core changes you would need to download a clean copy of magento. Be sure to download exactly the same version that you are currently running (you can check your current version in the admin panel’s footer). After download you need to extract the ‘app’ folder and place it somewhere in your filesystem. For the purpose of this example, lets assume that you put the original app file in the magento root folder and rename it to app.org.

Now you will need to make use of the linux console. The tool you will use is diff. It is a standard program for comparing files that should be present in all linux distributions. The only parameter that would need to be added is -r which switches the tool to recursive mode. The final command looks as follows for:

diff -r magento_root/app/code/core magento_root/app.org/code/core > ~/core_code_modifications.txt

diff -r magento_root/app/design/frontend/default/default/ magento_root/app.org/design/frontend/default/default/ > ~/core_design_modifications.txt

After executing those two commands you will have two files created in your home directory:

• core_code_modifications.txt, which will list all the modifications in your core code files
• core_design_modifications.txt, which will list all the modifications in your default template

With that knowledge your job of upgrading magento will be much simpler. Again, after you have successfully upgraded your magento store to version 1.4, do take some extra time and move the changes to the local code pool and/or your custom template. This will save you a lot of time and trouble in future upgrades and will also ensure that your store is easier to maintain by your developers and designers.

- Positioning of the website logo or name; typically this can be found in the top left hand corner.
- A business phone number; typically found in the top right hand corner.
- Navigation near the top of the page
- The underlining of links, making sure not to underline text which is not a link

Of course website conventions will depend of the style of website being produced, if you’re trying to push boundaries then look at your target audience. Different styles of sites will work better for different age ranges, or the level of computer and Internet literacy. These are aspects that your web designer will need to know before starting a project in order to provide you with the best possible solution.

At WebCatch for example, we ask our clients to fill out a creative brief which gives our designers the information they need to design a website that meets our clients requirements. We’ll then apply the website conventions that count.

Fortunately there is a built-in Magento feature that is designed exactly to help any programmer/designer in this situation. The feature is called template hints. You can activate it in your shop’s configuration. It is a bit tricky, however, because it is not visible by default. You need to go to System->Configuration->Advanced->Developer and open the Debug tab. By default you will only see an option to enable the Profiler. If you choose your store view from the ‘Current Configuration Scope‘ box situated in the top left part of the page you will get two extra options – ‘Template Path Hints‘ and ‘Add Block Names to Hints‘. Enabling the first option will display a path to the source file inside each block on the frontend. The second option will also add a Block Name, but it is not that useful and I would advise to keep it off for the sake of clarity.

There is one more thing worth noting here. If you would like to enable template hints on your live server you have to somehow limit them, so that they are shown only to you and your developers and not your customers. Well, you’re in luck again, because this option is also built-in. Just above the tab where you can set the template hints you will find a block called ‘Developer Client Restrictions‘. In there you can insert the IP addresses of all the machines that are allowed to view template hints. This way you can prevent your customers from seeing those hints and inevitably getting confused with your web shop.

Google have created a tool to help website owners see how much of their website their visitors can see depending on their browser size: http://browsersize.googlelabs.com/. The main aim of this tool is to allow website owners to improve conversion rates and engagement. Have a go with your website and see if it’s optimised for the average browser size.

Of course at WebCatch we design all of our websites with this in mind, if you have an existing site but are worried that you’re missing out on potential customers due to the layout then get in touch and we’ll see what we can do.