Pressplaymedia’s Blog

Archive for the ‘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:

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

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 @

A Big Bunch of Various CSS Menus @ CSS Play

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 @ CSS Menu Maker

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


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.


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.


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





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!

When I’m creating or redesigning a website, I usually take some time to crawl around the web and seek out sites that fit in the same category for ideas, or just check out the newest sites on various top-lists for innovative approaches. Besides checking out my favourite designers’ portfolios for latest creations, these are the bookmarks that never let me down:

My top 10 sites for inspiration

I’m pretty confident you’ll bookmark at least a few of these, as they are awesome resources for cool new websites:

1. TheFWA
The Favourite Website Awards (web awards at the cutting edge) is my primary source for finding new web design techniques, and modern / abstract design ideas.

2. DopeAwards
Dope Awards

A great resource for cool flash sites, which are sorted in four groups: Dynamic, Original, Professional and Effort.

3. BestWebGallery

A nicely designed site listing nice designs.. What more can you want?

4. TheBestDesigns

A good resource for interesting CSS and Flash sites.

5. WebsiteDesignAwards

Regularly updated site for progressive CSS and Flash designed websites.

6. CSS-Designed
CSS Designed

Daily updated gallery showcasing beautiful CSS designed websites.

7. CSS Artillery
CSS Artillery

Another showcase of inspirational CSS-based sites.

8. LightOnDark

I love dark designs and this site is all about those! A feast for my darker side if you will..

9. FaveUp

A very nice site, not only listing cool CSS and Flash sites, but other designs like logos and business cards as well, a useful resource indeed.

10. TemplateMonster

Although I never base my designs off templates, the designers at TemplateMonster have a touch for keeping things clean and simple, so I check out their new designs from time to time

And then some

Other inspirational sites I check out often:

CSS Zen Garden

PurePleasureDesign Blog
TheWebAward Highest Rated
CSS Elite
Kool Sites @ Kirupa

The last one is a plug for, one of my favourite resources for tutorials, their forums have a great community of designers, so I usually check out their favourites too.

That’s it for now..

With these links you should be able to find some pretty awesome sites for fresh ideas. But remember, professional designers don’t have to look for inspiration outside, they just have to look inside 😉

Happy browsing!

And if you think a great site is missing on my list, let me know by leaving comments / feedback!