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/

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.

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….

It should be easy to center a page horizontally in the browser window.

All you have to do is wrap your content in a div, give this div a width (say 760px so it fits nicely on a screen resolution of 800 x 600) and set the left and right margins to ‘auto’.

#centeringwrapper {
width: 760px;
margin: 0 auto;
}

This works in Firefox and other browsers which display CSS correctly, but of course with Internet Explorer nothing is that straight forward.

IE doesn’t interpret the automatic left and right margins. However we can use another incorrect CSS interpretation to achieve the desired effect in IE. If you apply a centering text alignment to the body tag, IE applies it to all divs within the body, thus centering them. However, this also centers all body text on the page so we need a further fix to reset the text to align to the left.

Finally, the body tag needs to have a minimum width equal to the width of the centering wrapper. This deals with an issue in older Mozilla browsers where reducing the size of the browser window results in half of your centered div hanging off the left of the page.

So the final CSS looks like this:

body {
text-align:center; /* IE centering fix */
min-width: 760px; /* Mozilla resizing fix*/
}
#centeringwrapper {
width: 760px;
text-align:left; /* Negates IE centering fix in other browers*/
margin: 0 auto; /* Ccentering in non-IE browers*/
}