Archive for the ‘Web Design’ Category

« Older Entries

Wordpress Plugins – Have You Converted Yet?

Wednesday, September 2nd, 2009

I confess to being a late convert to WP Plugins. For those who do not know what a plugin is… it is an ‘add-on’ that is used to add functionality to a WordPress blog or site.

In the past when I have wanted to add something to a blog, I would commence battle and try to hard code the elements into it. That was until I tried to put a form into a post. I stubbornly tried and tried to find a way of doing it, before deciding to take a look at some forums. I then conceded to go the plugin route and have since been a little addicted to them.

It was a bit like discovering Aladdin’s Cave, all these add-ons that people had sweat, bled and cried over when building, available to simply browse and install at will. There are plugins for all sorts, from funky image galleries to e-commerce solutions. You have to be prepared to sieve through a fair amount of results and sometimes the plugins won’t have the desired outcome but you have to remember, you are getting cool functionality for free and ultimately less work than building it yourself!

There are quite a few sites that offer WP Plugins, I find the best way is to go to WordPress’ own plugin directory http://wordpress.org/extend/plugins/ . There are over 6000 plugins to search through and each display information like how many downloads it’s had, version compatibility, screenshots and a star rating system.

Implementing WP Plugins is relatively easy. The traditional way of doing it is to download it and then upload it to the plugins folder (wp-content/plugins).  You can then activate them in your admin area. However WordPress have made it even easier to install plugins if you have or have updated to one of the later versions (2.8.2 onwards). You can now search install and activate plugins all from your admin area (you will need your ftp details to complete the installation).

Plugin Menu in the WP Admin

Plugin Menu in the WP Admin

Just before you go down the rabbit hole and into the wonderful world of plugins;  as with everything good there are always some downsides and here are some that I have noted.

1. Some plugins are only compatible with certain versions of WordPress. So you could update your wordpress only discover it has broken one of your plugins. Remember to check version compatibility before installing a new plugin.

2. It can take a lot searching and trial and error to get a plugin working how you want it to. Try and consult the installation instructions.

3. Because they are free some plugins might not have as much support and guidance as you may like.

4. Whilst plugins appear to provide general solutions for most things. They might not provide the exact solution you are looking for and you may find you have to compromise or end up trying to customise it yourself.

That’s about it I reckon; now go get stuck into some plugins!

Image credit Whatleydude

Tags: , , , ,
Posted in Blogging, Web Design | No Comments »

And the answer is…

Friday, August 7th, 2009

Thank you to all who submitted your answers on my previous post Which One Would You Choose; where I asked visitors to select from a choice of four site snapshots, which site they would complete a ESTA form on.

The lines are now closed and the votes are in…  Let’s see how the people chose…

Results from questionaire

Most people chose A.

The official site to complete an ESTA on is D. If you completed a form on D it would of been free and would be guaranteed to be processed. If you completed a form on any of the other three you would of had to pay approximately £30 – £40. These 3 sites are typical of many that are charging people to complete ESTA forms.

 

Official Sites Versus Unofficial Sites

The results here reflect reports that more people are paying to complete ESTA forms from unofficial sites. It’s important to note that the people who complete the forms and end up paying for them are not stupid. They are victims of well worked campaigns combined with efficient design.  Here are some design related reasons I believe people are paying to complete forms on the unofficial sites rather than for free on the official site:

 

Colour Schemes/Look & Feel

A lot of the unofficial sites appear have utilised ‘American’ colour schemes (reds and blues), flags and American imagery:

esta-us

estauk.com

travel-authroziation.org

Whereas the official site is prodominently green which most would not immediately associate with America:

official

It’s possible that some people are electing to use the ‘unofficial’ sites as the appear to have more synergy with the USA, and therefore people think that they look more official.

 

Calls to Action & Usability
There are clear calls to action on the unofficial sites. Well placed and noticeable buttons labelled:  Click Here, Instant Download, ESTA Form or Continue, help make it easy for the site visitor to complete what they want to do, in this case fill out an ESTA form.

buttons-links

The buttons and links are placed in a combination of places some at the top of the web page, some at the bottom but they all have at least one call to action that appears on screen as soon as the page appears on screen.

However, the official site has no clear call to action; you have to work really hard to discover what you have to do next.  In fact (as illustrated below) you have to scroll about 1600 pixels down the page (i.e. well below the fold – if you consider that the average screen displays 1020 pixels) before you even see the apply button! Ordinarily we’d recommend that calls to action appear both above and below the fold.

 

embassy-call

It’s possible then that some come to the official site, but lose confidence as it’s not immediately apparent what they need to do.

 

Assurance and Confidence
Here, both the official and unofficial sites do pretty well. Most of the sites in this example use checklists or step by step examples . Each help to give an impression of transparency and encourage confidence in the site.

Example1:

travel-authroziation-org-confidence

Example 2:

esta-us-confidence

 

Conclusion

One of the most important things to learn from this example is the importance of call to action and usability. Although  27% chose the official site based on a snapshot. Had the test been based on visiting the sites it may have been even less, seeing as visitors have to scroll down nearly twice the length of the screen to even find the apply button.

Every site needs a call to action whether it is to fill out a form, generate a phone call or submit a vote. The clearer the call to action is, the better the site will convert.

Similarly, consideration needs to be given to site look and feel. Use of colour and imagery, and theming to meet visitor’s expectations of how a site should look are key.

 

Suggestions for the Official Site

If I was tasked with redesigning the form on the official site, I’d look specifically at the following areas:

  1. The essential difference between the official site and the others is that it is free to complete the ESTA form. Yet this is not mentioned on the the official site . The first thing I would do is alert the visitor that the form is free to complete on this site.
  2. I would also address the call to action. I would place an apply now button close to the top of the page with enough white space around it for it to stand out.
  3. I would also look to address the design / colour scheme in order to reflect an outsider’s perception of “America”

Tags: ,
Posted in E-Commerce, Web Design | No Comments »

How to Set up 301 & 302 Redirects

Monday, July 20th, 2009

Within this post I’ll be explaining what a redirect is, the difference between a 301 and a 302 redirect lumaxartand how to set up redirects yourself. Right, let’s go:

What is a redirect?

A redirect is a command which automatically sends visitors to an alternative web page rather than the one they typed into their browser.

Why do you need to use redirects?

From time to time you may need to either delete a page, or change it’s URL. If you just go ahead and do this without a redirect, any visitor to the page will get a 404 which can be bad for users and for SEO (see our really rather good guide to managing broken links and 404’s and  for more information).

Why are they important?

Redirects help users by automatically taking them to an alternative page, or indeed the same page if you’ve simply changed the URL. Likewise, redirect also tells search engines that the page has moved.

Plain English Definitions of those Pesky Numerical Wotsits

What’s the difference between a 301 and a 302? What’s a 404? How’s a 404 differ from a 500? Be confused no longer:

301 – Permanent Redirect: This tells the search engines that the page has moved permanently. Over time authority from the old page will pass to the new version.

302 – Temporary Redirect: This tells the search engine that the page has moved temporarily. As such no authority from the old page will pass to the new version.

404 - Error Page/File Not Found: This tells the search engine that the web page cannot be found

500 – Internal Server Error: This means there is a problem with the code which is affecting the server. This may have been caused by incorrect coding or command set up. 

 

To 301 or 302… Which Redirect Should I Use?

  1. 301 – A permanent redirect should be used if you’ve changed the URL permanently. For SEO purposes it rocks as it helps maintain your natural search listing and indexing by the search engines (NB you might see a drop in rankings initially, but they should recover).
  2. 302 – A temporary redirect should be used only in the event that it’s a temporarily URL change. For SEO purposes it sucks as it passes no authority – therefore you might find that your lose rankings.

 

How do you set up redirects?

1. Open Notepad to create a new document.

2. Insert one of the following commands into notepad with your website URL address.

Temporary redirect
redirect 302 /old-webpage.html http://www.website.co.uk/new-webpage.html

Permanent redirect
redirect 301 /old-webpage.html http://www.website.co.uk/new-webpage.html

slide2

 

3. Save the notepad file as an HTACCESS file. You can do this by saving the file with the name .htaccess.

slide31

 

 4. Make sure to select ‘All files’ in ‘Save as type’.

save-slide-2

 

5. Open your FTP for your website. (Note: You will need to open the file in SFTP to be able to upload your HTACCESS file. You may need to enter a password to be able to log into the server.)

6. Upload the HTACCESS file to the root of your server. This is usually in the www folder on the server.

7. Test the web page to see that it is redirecting. (If the web page redirects from the old address to the new address, then the redirect is working.)

 

Having problems?

I’m still seeing the same web page even though I have uploaded the htaccess file. Have I done something wrong?

The redirect to the web page is probably incorrect. Check that you have put in the correct web page address. Also check your slashes ‘/’ and the web page language extension – htm, html, php, asp, aspx etc.

I’m receiving a 500 internal server error. What did I do wrong?

There is probably incorrect formatting in the HTACCESS file. Check the file for spacing and typing errors.

 

Hopefully now you’re good to go, but of course if you do have any queries please let me know via the comments.

 

 

Image source: Lumaxart

Tags: , , , , , ,
Posted in SEO, Web Design | 3 Comments »

Which One Would You Choose?

Friday, July 10th, 2009

Scenario:

You need to complete an ESTA (Electronic System for Travel Authorisation) form in order to travel to the States. You don’t know the official site, so you type esta form into your favourite search engine. Below are four screen shots taken from the top sites that appeared on Google for esta form:

A)

A)

A

B)

B)

B

C)

C)

C

D)

embassy-easta1

D

Now without cheating (i.e. don’t go and find out which is the official site) please select the one you would choose to submit your ESTA:

 A) Besta ESTA  B) ESTA Rantzen C) ESTA Egg D) ESTA Suprise

I’ll publish the results of the survey, reveal which is the official site and examine why choosing the wrong one of these four could prove costly next week…

Tags:
Posted in Web Design | 2 Comments »

How To Manage Broken Links & 404 Error Pages

Friday, July 10th, 2009

Within this post we’ll be looking at broken links and 404 error pages – what they are, how they impact users and SEO, how to find them and perhaps most importantly, some ideas on how you might go about dealing with them.

What are broken links & 404 error pages?404

Broken links occur when web pages are deleted or moved but the link to the old address still exists.  When a user clicks on the broken link, the page cannot be found, so a 404 error page is displayed.

What does a 404 error page do?

A 404 error page tells the search engines and your web server that a web page cannot be found, this might be because it no longer exists or the url has been changed.

What do 404 error pages mean for SEO?

A 404 page tells the search engine that the page no longer exists. If the page genuinely no longer exists, and you no longer wish to rank for the terms targeted on the page, then that’s fine – over time the search engines will remove the page from their indexes. However, if the page does still exist and you still wish to rank for the terms targeted then you have a problem.

In the event that the page does still exist, but you have moved it, (or changed the url), then in order to preserve your ranking, and avoid returning a 404 error page, you will need to redirect the old url to the new one. How? If the page is moving temporarily, you should use a 302 redirect. If the page is moving permanently you should use a 301 redirect.

What do 404 error pages mean for users?

404 error pages can annoy users and cause them to leave your site as they are unable to navigate to the page which they wish to view. Clearly for this reason alone it’s best to minimise the number of broken links on your site.

How to find broken links on you website:

So how do you know if you’ve got broken links? There are many broken link checkers out there, but I tend to use Google Web Master Tools. If you haven’t done so already, set up a Google Web Master Tools account , then submit your sitemap. Google will crawl and index your website, and if there are any broken links, Web Master Tools will show you which links are broken and returning a 404 web page error.

So now you know which pages are returning 404 errors, what next?

How should you deal with 404’s on your site?

From time to time, you will need to delete pages from your site. For example, if you are an ecommerce site, and you stop selling a particular product. In this instance, it is conceivable that a visitor may have bookmarked the page, in order to return later to purchase. However as you no longer sell that product, the page may no longer exist.

In this instance you have a couple of options:

1)  You might choose to 301 redirect an old product page to a similar product which you still stock; or a page which references the fact that you no longer sell the old product line, but this is the new product which will replace it.

2) Let the default 404 page be displayed.

3) Provide users with a custom 404 page, rather than the default one.  Custom 404 pages are a little more user friendly, and if you create a good one, hopefully you’ll keep the visitor on the site.

How to Create a Custom 404 error page
You can configure a custom 404 error page by inserting a default error page command in the HTACCESS file that is on your server. The HTACCESS file can normally be found in the root of the public html folder – an example is shown below:

files-list1

You will then need to configure your HTACCESS file to display your custom 404 error page as the default error page for your website. Below is the code command to put in the HTACCESS file.

error-code1

Once you have uploaded the custom 404 web page and configured the HTACCESS file, test it with URL address errors associated with your domain to see that it is functioning correctly.

For example; type www.(yourdomain).com/404test . Your customised 404 error page should display.

Custom 404 error page designs

When it comes to 404 pages, ultimately you can be as creative as you like. However, ideally the custom 404 should be in keeping with the design of the rest of your website and should aid your visitors in finding what they are looking for.

Examples:

1. Apology with a home page link
You can offer website users a brief apology and lead them back to the home page.

2. Apology with a drop down menu
We’re sorry, but the web page that you are looking for is no longer available. Please select a product from the following menu.

3. Apology with a link list option
We’re sorry, but the page you were looking for no longer exists. We recommend you try:

a) Option A
b) Option B
c) Option C

Below are a few examples of custom 404 error pages to get those creative juices flowing!

luminous-file-not-found2

Image source: Luminous

 

custom-404-mozilla

  Image source : Mozilla

 

Seen some great custom 404 error pages? Hit up the comments and share them. Likewise let us know if you’ve got any further questions, or tips you’d like to share.

 

404 image credit : cbede

Tags: , , , ,
Posted in SEO, Web Design | 1 Comment »

« Older Entries