Pressplaymedia’s Blog

Archive for the ‘User friendly web design’ Category

Time to replace your boring text-only site navigation with something more pleasing to the eye?
How about beautiful CSS-based tab-like navigation? With free customizable source code?

Here are a few nice resources for CSS navigation as well as my selection of cool menus and tools:

1.
A selection of ready-made CSS menus

All of these come with functioning previews and downloadable source code.
Click the preview image for a demo or the link to visit the download page.


Pure CSS Horizontal Menus with Images by WebDesignInfo – click here for preview



12+ Free CSS Menus
by Exploding-Boy – click here for preview



Inverted Tabs
@ DynamicDrive


Dolphin Menu
@ 13Styles


Style #4
@ 13Styles


Mini Tab Shapes by SimpleBits – click here for preview



Float Mini Tabs
by Alessandro – click here for preview



14 Free Vertical CSS Menus by Exploding-Boy – click here for preview



Advanced CSS Menu by WebDesignerWall – click here for preview


2 level horizontal navigation with images by Veerle – click here for preview



CSS Dock Menu (includes simple JavaScript) by NDesign-Studio – click here for preview

2.
CSS Navigation Resources

A collection of links to more CSS navigation:

Top 71 CSS Menus Navigation Tabs @ E-consultant

30 Free CSS Based Navigation Menus @ CSS Juice

Tabs and Pure CSS Menus @ Alvit.de

A Big Bunch of Various CSS Menus @ CSS Play

3.
CSS Menu Generators

You can also create nice looking CSS navigation using online/software generators. Here are a few (free!) generators I like:

CSS Tab Designer by Overzone

CSS Menu Generator @ Webmaster Toolkit

CSSMenuMaker.com @ CSS Menu Maker

List-O-Matic @ Accessify (inspired by Listamatic)

4.
TUTORIALS

These tutorials will provide you with an in-depth view of techniques used for creating CSS-based navigation and help you understand how it all functions:

Nifty Navigation Using CSS – @ SitePoint

Sliding Door Technique @ AListApart

SuckerFish Dropdowns @ AListApart

CSS Express Dropdown Menus @ PVII

If you have any suggestions, please let me know by posting comments. Enjoy 🙂

Contact forms are a must for practically any type of website. Most likely, the first contact you will have with a potential customer will be through the contact form on your site, thus it is one of the most important parts of the website. Here are a few tips and guidelines for making a good contact form.

1. Use as few input fields as possible

The only fields you really need are for the visitor’s email address (so you can reply to them) and for the message body. Since it’s nice to reply to the visitor using their real name, you should also add the name field. However, do not have separate fields for first name, last name, middle name, etc.. Just use one simple field: Your Name. If you are logging each inquiry to your database you can separate their name into parts using server-side scripting. Use a description text to let them know the correct order (e.g. first name, middle name, last name). Discard all other fields like phone, fax, address, and any other details, unless you absolutely require them. And even in that case, make those fields optional. If you are gathering information about visitors and need other information about the user, please see the tips section below. Also avoid having a subject field, instead use a dropdown with preset options. See below for tips.

2. Have the message field big enough

Message body field should be big enough to fit a standard short inquiry. In my experience it counts to about 8-10 rows. This will enable most users to see their full message in one piece, which is desirable, and this also helps them spot any spelling errors and format their message into something readable.

3. Newsletter signup should be off by default

If you have a “sign up for the newsletter” checkbox, have it turned off by default. This is much less intrusive and in my experience much more effective. If they are really interested in your product or services, they will sign up. In the end, why would you want have random people on your list? Trust me on this one and save your server’s resources.

I have personally made tests on various websites with this checkbox on and off by default. I was quite surprised to find out that 60% of users that saw this checkbox on by default turned it off, while 80% of people that saw this checkbox off by default turned it on.

4. Spam protection and security

At first, I suggest you setup the contact form without any spam protection, and add that later if you get attacked by spam bots. You can use CAPTCHA protection or any other alternative, including adding a simple “Are you human?” checkbox. Be sure to add short instructions for your spam protection.

If you are saving any data to a database, make sure to protect your form from sql-injection and other malicious techniques like cross site scripting. Failure to do so might result in attacks to your site or database and data loss and data theft. If you google those terms you will find many tutorials on how to protect your form against those.

5. Positioning the elements

Field names should be above or left of the field and the “required” tag right of it. Field descriptions can be below the field name or right of the field if there is room. The submit button should be at the bottom of the form, aligned to the right. No need for a reset button as it is proved to be useless. Of course any other good design guidelines apply, like having visible borders around fields and avoiding small or hard to read fonts, etc.

6. Provide other contact options

Always try to provide your other contact options like phone numbers next to the form. Having a normal “mailto:” link is good for people who are more comfortable using their email program like Outlook, Thunderbird, etc. It is however a spam risk and is best done with javascript for example, so that a bot cannot collect your email address easily.

TIPS

1. Collecting additional information

If you want to gather additional information about the user such as age, gender, location, profession, etc, best way is to simply ask the user nicely upon submitting the inquiry. Have a second page with a form nicely asking the user for more information (e.g. “to better know your customer”), but I would suggest doing that only if the user has signed up for the newsletter. That is because in my experience signing up for the newsletter (if you have one) is a sign of interest and trust, besides, it is pretty useless to gather data about uninterested parties.

2. Sending to different addresses based on the subject

If you’d like to send product related questions to one address, site related questions to another for example, you can make a drop down field with these choices (labeled “Subject”) and then make a script which sends the message to the chosen department (information, sales, marketing, etc). Most common are: General Information, Website Feedback, Contact Request, Price Quote, etc.

EXAMPLES

A few examples of good contact forms. Source: CSS Contact Forms

contact12.jpg

contact4.jpg

contact25.jpg

contact27.jpg

Further Reading:

Sensible Forms: A Form Usability Checklist
A great article about designing forms for the end user by Brian Crescimanno at AListApart

Thanks for reading, any questions / comments are welcome!