Web Developer Toolbar

This is a great addon for Firefox with a huge array of tools for analysing, viewing, editing and validating whatever webpage you are viewing. There are a variety of tools and bookmarklets that accomplished the same tasks, but having them all (and more) in one place is a godsend.One of the most useful tools is the CSS editing window which allows you to edit stylesheets and see the results onscreen immediately - very useful for editing dynamic pages.

You can also disable stylesheets and javascript, view info about images and links, outline various elements, use a ruler to measure sizes on screen, validate the document… you name it, it does it.

So, it’s great for development, but also for seeing how other sites achieve their design and layout.

I highly recomend it! http://chrispederick.com/work/webdeveloper/

Get in Contact

Many websites seem to make it hard for you to contact them, sometimes in an effort to fight spam and sometimes through bad design or lack of thought.

They make you use a really complicated form that asks for the information they want, rather than what you want to give. Forms have required fields that a casual browser doesn’t need to fill in or confusing anti-spam captcha’s. Email addresses are hidden or obscured in an effort to confuse email scrappers. You can’t find the phone number or address of the company.

Many web designers, both professional and amateur, forget that everyone else doesn’t spend 10 hours a day using the internet. A lot of internet users don’t understand why you might want to protect yourself from spam and may not be great at typing. Some people don’t have the patience for forms or have a unique enquiry that a form can’t handle and want an email address, or they may just want to pick up the phone and speak to someone.

Web designers and internet marketers should make the most of the hard work involved in getting visitors to a site and make it easy to convert them. This is obviously very important if they are selling a product or service that requires potential customers to get in contact. Nothing should hinder them in any way.

So here are a few ideas.

Provide a phone number, email address and enquiry form(s). Anti spam measures should be hidden and take place in the background.

Link to a privacy policy wherever contact information is shown. Make it very clear that a user’s information will not be shared.

Don’t write email addresses in a none-email format. If you must do something, make the email address an image and encrypt the mailto: link. (And beef up your server side spam protection and the filters in your email client).

Provide multiple forms, one for casual enquiries (e.g. with only name, email and message fields) and a more detailed form for more serious enquirers (it could be linked from a product detail page) - call it an order form. Protect these forms from spam bots with server side scripting, or dummy form fields.

Try providing a form with only one field where users can submit their email or phone number so you can contact them.

A Working Javascript Back to Previous Page Link

In a recent project, I wanted to mimic the ‘back’ button of the browser using an on page link.

Replicating browser functions and unnecessary javascript are usually things you should avoid, but this was a special case. These were single pages that needed to be accessed from several different sections of a site and the ‘back to previous page’ link helped to keep the on-page navigation logical.

The problem was, I couldn’t find a version of the code which worked consistently across browsers. I tried a number of combinations such as javascript:history.go(-1); and history.back();, in the href attribute, onclick event or in an external function, but many didn’t work at all or behaved differently in different browsers.

After wading through several search results pages listing other people with the same problem, Google provided a solution: www.irt.org/script/911.htm. It seems to work well (tested in FF 1.5 and IE 6).

The Solution:

Add the following code to a HTML page:<a href="go-back-javascript-error.htm" onClick="this.href='javascript:GoBackLink()'" title="Go back to the previous page">« Go Back</a>

(go-back-javascript-error.htm is a page that will be shown if the javascript doesn’t work. It explains that the user should use the back button instead.)

Add the following code to the javascript file:

// go back to previous page function
function GoBackLink() {
history.back();
}

I don’t know why this particular code works in an external function. Maybe a passing javascript expert will be kind enough to leave a comment to explain….

Close
E-mail It
Socialized through Gregarious 42