Webdoodles

May 29, 2007

Essential Web Developer Toolbar

Filed under: CSS, Design, Javascript, Tools — ukmagician @ 11:57 am

I have recently started using the Web Developer extension for firefox by Chris Pederick and I wonder how I ever managed without it.

It adds a toolbar to Firefox with a huge array of tools for analysing, viewing, editing and validating whatever webpage you are viewing. I had other 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/

May 15, 2007

Styling Form Submit Buttons

Filed under: CSS, HTML Form, Javascript — ukmagician @ 4:13 pm

The default form submit button looks ugly on almost any website. Wouldn’t it be nice to be able to style it to fit in with your design?

Even better, how about adding a hover effect to make it clear that clicking on it does something?

After a bit of searching, I’ve found the solution at www.digital-web.com – using the <button> tag. With the addition of some javascript to cope with IE’s lack of support for the :hover pseudo class, you can even have hover effects.

Check out the excellent virtual Christmas card example at digital-web.com to see how far you can go with this.

May 1, 2007

Contact Options

Filed under: Design, HTML Form, Website Accessibility, spam — ukmagician @ 9:40 am

A lot of businesses on the web seem to make it hard for people to contact them, sometimes unintentionally, sometimes in an effort to combat spam.

They make the user use a contact form on their website, which can be over complicated or require information that a casual enquirer doesn’t want to give. Email addresses are obscured in an effort to confuse email harvesters and succeed in confusing users as well. Or contact information is just too hard to find.

In my opinion, if you are selling a product or service that requires people to get in contact with you, you need to provide every opportunity for them to do so and not hinder them in any way. Provide a phone number, email address and enquiry form. Any anti spam measures you need to take should happen in the background.

A lot of web developers and web designers (professional and amateur alike) forget that not everyone is as web savvy as them, not everyone is great at typing or filling in forms, or has any idea why you might want to protect yourself from ’spam’ (tinned processed meat?). Some people may think that their enquiry is so unique a website form just can’t handle it and will want a simple email address, or they may just want to find a phone number and speak to someone.

Make the most of all the hard work involved in getting users to your site and make it easy to convert them.

So here are a couple of ideas. 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).

Have a form for casual enquiries (e.g. with name, email and message fields) and a more detailed form for more serious users (maybe 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.

And finally, how about providing a single field form where users can type in their email or phone number, and send it to you so you can contact them.

Blog at WordPress.com.