A page’s loading speed is affected by 4 major things, server-side processing, client to server communication, size of data to be downloaded and rendering time.
This article will focus on the latter two – minimizing the data to be loaded and reducing browser rendering time. Here are some great tips and tricks:

1. Analyze your site’s performance

First of all use this free online tool to analyze the performance of your page. It will provide you with some performance analytics and offer advice on how to improve your page’s loading time.

Web Page Analyzer at WebsiteOptimization.com

2. Some obvious performance optimizations

These solutions are so old or obvious they are becoming overlooked by newcomers, so I thought I’d mention them upfront:

Remove anything you don’t necessarily need
The mother of all optimization – remove those silly widgets , backgrounds, cursors, scripts and content you do not actually need from your website. Observe miraculous improvement!

Use external files for reusable code
If you are using any JavaScript or CSS code on more than one page, pack that into a separate external file and include it in all of the pages that depend on them. These external files can then be cached by your browser instead of read each time for each different page that uses it.

Do not rely on public web hosts for content hosting
Public web hosts can get really bogged down, especially during high-traffic hours and can add to loading time significantly. Avoid using external hosting services for images, scripts and widgets, instead try to host as much content on your own dedicated server. If you absolutely need those, you can use source ordering to position the source code of those items further to the bottom of the page’s source code. Some widget providers (like Google) openly endorse this for better user experience.

3. Use CSS and produce valid XHTML code

Avoid nested and full-page tables
This is probably the tip that will give you the most significant boost in browser rendering time. In order to render a table correctly, browsers must usually read the complete data of the table from start to end, thus large tables with lots of data will increase the perceived loading time of a page. The biggest bottleneck is if your whole web page layout in a single full-page table, which is forcing the browser to read through your complete page before it is able to render it correctly. You can eliminate the use of tables by designing tableless layouts with CSS, or at least eliminating full-page tables and breaking up large tables into smaller ones. This will not only optimize the page loading time for web visitors, but for mobile devices and other readers as well.

Source ordered content
Source ordering the content (or SOC for short) is a very useful and at the same time simple technique involving placing more important content to the top and less important content to the bottom of the source code and then laying it out using CSS. This will ensure that useful content (e.g. text and navigation) will load and display first, leaving the less important content (ads, footers) for last. Another benefit of this technique is that pages are more accessible to non-conventional readers and it is also reported that this technique adds to a page being more optimized for search bots and even producing better rankings.

Write valid code
Having all of your HTML code valid by W3C standards will eliminate the need for browser error-correction and thus speed up rendering time. You can use the W3C validator to check your site for any code formatting errors. No need to get obsessed with this though, there will always remain a few errors (external scripts, etc), however do try to keep your code as clean and valid as possible.

4. Speed up image loading time

1. Minimize the number of images on your pages
- First of all, try to exclude from your page any images you don’t necessarily need. This is a pretty obvious tip, but many times the hardest thing to do
- Using CSS techniques like CSS sprites enables you to use only one big image which contains all of your navigation’s icons and backgrounds for example. This means only one request call must be made to the server to load a dozen of images!

2. Reduce the size of images on your pages
The most obvious ways to reduce the size of images is to reduce the actual width and height of the image files and use image compression, both methods producing smaller files for the client to download.

3. Use Height and Width tags
Specifying the width and height attributes of each image used on your page is vital in helping the browser render images faster (no need for the browser to read each image’s data and determine its size). Another benefit is that the page’s layout won’t change as the images load.

5. Compress Your Code

Just like any other data, CSS stylesheets and JavaScript code can eat up your bandwidth, especially on complex sites. Compressing and optimizing code will reduce it’s size by up to around 75%, which can be a great performance boost. However, make sure you always keep the original files archived and intact, because most compression tools are one-way solutions. These online tools will do the job in a simple and effective manner:

• CSS and JavaScript Compressor by Sergej Müller
  This compressor will reduce the size of both your CSS and JavaScript code down to 60%. It’s also extremely simple to use, just paste the code and select “basic” or “powerful” compression and it will output the optimized code, copy-paste ready.
• CSS Compressor by CSS Drive
  This nifty little utility is very simple to use and can compress your CSS files by around 30%. It gives you a bit more control on how it compresses the code.
• CSS Formatter by teenage.cz
  Similar tool to CSS Compressor, however it provides additional compression options, optimizing CSS code by up to 40%.
• PHP CSS Compressor by iBloomStudios
  If you would like to keep your CSS files untouched and compress them on the fly at server-side, this little script will do just that.
• ShrinkSafe by DojoToolkit
  This tool provides a safe way to compress your JavaScript code, based on Mozilla’s Rhino interpreter. Compresses the size by around one third of original.
• JavaScript Compressor by Creativyst
• JS Minifier by Franck Marcia
  Provides a Minimal, Conservative and Agressive option and compresses code by around 45%.

Further reading:

• Site optimization tutorial at WebMonkey
  A great tutorial covering most of the above and more, a must read!
• Ten ways to speed up the download time of your web pages at TheCodeProject
  A great tutorial expanding on the subjects in this article
• 5 Ways to speed up your site by Paul Stamatiou
  Another nice article on simple speed optimization

Thanks for reading, please leave any questions or suggestions in the comments below!

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

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

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

Daily updated gallery showcasing beautiful CSS designed websites.

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

- WebCreme
- DesignSnips
- CSS Zen Garden
– DesignCharts
- DesignInEurope
- DesignMeltdown
- Xhilarate
- DesignSnack
– ScreenFluent
– PurePleasureDesign Blog
– TheWebAward Highest Rated
– CSS Elite
– WakeUpGallery
– Kool Sites @ Kirupa

The last one is a plug for Kirupa.com, 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!

Your cousin can draw some really nice pictures (besides, pencil strokes are simple and clean, just what you would like your website to be). Your friend knows some Photoshop (she uses it to make her pictures look prettier on social networking sites and she sure does a great job!). Your neighbour’s son is an avid blogger and his blog about iPhone over-clocking-or-something is quite nice. And all of these people have offered to design your website for free. Why would you even bother searching for and worst of all paying for a designer?

While a website designer’s job is indeed all of the above, web design encompasses much more than just drawing pretty pictures, editing photos and knowing HTML code. It’s not just a profession, it’s an art - therefore, not only does being a designer require deep industry knowledge, it also requires a touch of talent.

Let me point out a few important reasons why you probably need an experienced designer.

1. User Experience

A good web designer can predict how users will behave on a website from the moment they enter, what they will likely be looking for (and where they will be looking for it), can predict their interaction and movement around the site and optimize the site’s content and navigation accordingly. In some cases it is also important to optimize the site for different types of users, and the designer must be able to see into their minds (not literally as in telepathy, although it would help).

Each function or part of the website (e.g. newsletter sign-up) will work much better when presented in a compelling and straight-forward manner – in respect, poorly presented functions will be overlooked, or worse – ignored. User experience is thus one of the most important parts of web design, and an integral part of getting your message across to the customer (whether the message is “buy this now” or “come back later for new stuff”, it will be more – and in some cases only effective when presented in a clear and concise manner).

A designer’s task is to communicate an idea to the end-user, visually. So, if you think of it like that, bad design is bad communication.

2. Aesthetics

A nice web design can make your website look professional , trustworthy, and make it stand out of the crowd. The first few seconds a visitor looks around a website are usually the most important, because that is when the visitor forms his opinion, especially if he’s new and has never heard of or had any past experience with the company.

A bad web design will make visitors leave your site and never come back. The ‘net has been around long enough, and websites looking like 1995 simply don’t leave a positive impression on visitors anymore. Unless the visitor really is interested in something only you can offer, chances are he/she will look further.

If you don’t care how your company and your products/services are presented, how much do you really care about quality? It’s not enough if you know the answer to that question. Let your site’s visitors know too.

3. Innovation

Good designers strive to innovate, and even if your business is as old as the pyramids, the designer will find a new and interesting way to lure customers in, and to separate your website from the thousands of competitors it might have.A good looking and innovative website will get more traffic and that means more potential buyers. In fact, it might get so much traffic that you won’t need to spend that much on printed ads and other forms of advertising! – And that’s a good thing!

So, you’re ready to take your business online. But are you prepared for the process?

Here is a checklist of things you need, before you even start thinking about pretty designs.

1. A very clear vision of what you as a business expect from your website

Believing that you “just need a website” is one of the most common and also one of the worst mistakes.
Here are a few questions you need to answer before you start looking for a developer.
Take a minute and think about your website’s target audience and what they’ll likely be expecting to find on your website.
Will it act only as a presentation of your company and your services?
Or do you also plan on selling your products online, or do you just want to inform people about them, or both?
Do you want to keep in touch with your customers and/or provide online support for your products?
Will you provide constant updates about your company’s services and products, or will it be a static website?
Will your site be multi-lingual or aim at different markets?
Are you interested in business-to-business dealings? If so, what information and online tools will you offer to other businesses?
What content are you planning on providing your visiting customers – user manuals, product specifications, software updates, etc?
I could go on, but if you put yourself in the role of a clueless customer, I’m pretty sure you will find other important things specific to your case.

A good tip is to check out websites of your competition (or better yet websites of established businesses) for inspiration and see what content and tools they offer their clients / website visitors.

If you have a clear knowledge of what you need and what you aim for, you will make work much easier for the developer and this will save you precious time and money. And that’s a good thing!

2. Content for your website

Depending on the purpose of your website, you will need to prepare written and photo material to populate the content of your site.
The developer will usually give you a list, but here are the most common things, just in case:
- your company’s logo / slogan (if you don’t have a logo or a slogan yet, get it!)
- a well written description of your company (about us), company goals, accomplishments, etc
- a small description of key personnel and your company’s references (this is good for building customer trust in your company)
- a full list of services you offer with short descriptions
- a list of products you offer including descriptions or specifications (at least your featured products)
- if you intend to sell those products online, a picture of each product is a must, as well as the current price list
- your company’s contact and legal details (a map to your headquarters/shops is also very useful)

These are just a few pointers, but in general, think of what is useful information for your audience and add that to the list.

3. Money

Have a budget ready, because what you pay is what you get!
Seriously, if you have a strict budget, communicate with your web developer and see what you can get for your set budget and maybe discard some of the things that are less important to your audience.
If you are completely clueless about web design be careful – some web developers will try to bundle in as much as they can (things you might not even need!) to raise their total price.
Of course, the bigger the budget, the more functionality will be added to your website, things like content management, e-commerce, user community, etc, and generally more time will be spent on polishing all of the details.
If your needs are bigger than your budget and the local prices are too high for you, try outsourcing the development to countries where web design services are much cheaper (http://www.getafreelancer.com is a good start).