Why a CSS website layout will make you money

Although CSS layouts have been around for years, they haven’t become so commonplace until recently. This was basically due to limited browser support (especially from Netscape 4) – nowadays though, CSS 2.0 (which introduced positioning) is compatible with over 99% of browsers out there (check out the browser stats over at The Counter⁵).

So, why should you convert your website from its current table-based layout to a CSS layout? It’ll make you money. Simple really. And here’s four reasons to explain why:

Reduced bandwidth costs

Web pages using CSS for layout tend to have much smaller file sizes than those using tabular layouts. It’s not unusual to see reductions of 50% or more in file size when switching from tables to CSS. Smaller file sizes obviously mean reduced bandwidth costs, which for high traffic sites can mean enormous savings.

The main reason for this dramatic decrease in file size is that presentation information is placed in the external CSS document, called up once when the homepage loads up and then cached (stored) on to the user’s computer. Table layouts on the other hand, place all presentation information inside each HTML, which is then called up and downloaded for every page on the site.

Additionally, CSS can be used to replace JavaScript image rollovers, again allowing a large reduction in overall page size. See the article, CSS navigation menu6 for more on this.

A higher search engine ranking

A CSS-based website will appear higher in the search engine rankings for three reasons:

• The code is cleaner and therefore more accessible to search engines
• Important content can be placed at the top of the HTML document
• There is a greater density of content compared to coding

A higher search engine ranking means more site visitors, which, provided your website is usable, should lead to an increase in enquiries or sales.

Faster download speed

A faster download speed will make you money? Well, yes. Slow download speed is often cited as one of the biggest usability complaints for websites. A faster download speed therefore leads to increased usability, and a web usability redesign can increase the sales/conversion rate by 100% (source: Jakob Nielsen¹⁵).

CSS downloads faster than tables because:

• Browsers read through tables twice before displaying their contents, once to work out their structure and once to determine their content
• Tables appear on the screen all in one go – no part of the table will appear until the entire table is downloaded and rendered
• Tables encourage the use of spacer images to aid with positioning
• CSS generally requires less code than cumbersome tables
• All code to do with the layout can be placed in an external CSS document, which will be called up just once and then cached (stored) on the user’s computer; table layout, stored in each HTML document, must be loaded up each time a new page downloads
• With CSS you can control the order items download on to the screen – make the content appear before slow-loading images and your site users will definitely appreciate it

Increase in reach

The more people you can reach, the more visitors you’ll get to your site and the more enquiries or sales you should get. A CSS-based website is compatible with PDAs, mobile phones, in-car browsers and WebTV. Don’t underestimate the importance of this: In 2008 alone an estimated 58 million PDAs will be sold (source: eTForecast¹⁶) and one third of the world’s population will own a wireless device.

You can make an additional CSS document specifically for handheld devices, which will be called up in place of the regular CSS document, thereby ensuring your website is accessible to this lucrative market. This isn’t possible with a tabular layout.

Conclusion: Switch to CSS!

Switching your website from a table layout to a CSS layout can be a long, arduous process, especially for large websites. Given the money making possibilities though, it could very well prove to be well worth it.

This article was written by Trenton Moss. Trenton’s crazy about web usability and accessibility – so crazy that he founded Webcredible, an industry-leading user experience consultancy¹⁷, helping to make the Internet a better place for everyone. He’s very good at running CSS training¹³ and spends much of his time working on the world’s most accessible CMS¹⁸.

Gmail Desktop Gadget Now Available

Google has released a new Gmail desktop gadget, for Windows only, that provides access to your Gmail account with all the features you’d find by logging into Gmail directly. With the new Gmail gadget you can read, search, send, star messages, archive, open, report as spam, and more. Right click is also enabled for more options. The shortcut options found in the web-based Gmail are also available. To log into different accounts you can run multiple instances of the gadget.

The Gmail gadget only works with Google Desktop 5 for Windows. Click here to download.

15 must have web developer tools for beginners

Here are 15 handy web developer tools.  Some are very well known others not so, however, one thing they all share is they are very useful when developing websites.

1. Adobe Photoshop

The Adobe Photoshop family of products is the ultimate playground for bringing out the best in your digital images and transforming them into anything you can imagine.

More about Adobe Photoshop…

2. GIMP

Very much a Photoshop esc application but free. GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.

More about GIMP…

3. Adobe Dreamweaver

Quickly and easily design, develop, and maintain websites and web applications – from start to finish – with Adobe Dreamweaver CS3 software. Built for both designers and developers, Dreamweaver CS3 offers the choice of working in an intuitive visual layout interface or a streamlined coding environment.

More about Adobe Dreamweaver…

Crack that job interview!

An interview is a harrowing experience in any job-seeker’s life, but in this day of cost-cutting, it can be even more of an ordeal. Sweaty palms, nervous fidgeting and urgent prayers are all just part of the process.

However, interviews are not the inquisition they are made out to be, and if you play your cards right, chances are you’ll return with the job in your bag. Here are some tips that will help you gain that extra edge and bring you closer to cracking that interview.

20 Excellent Free Rich-Text Editors

Rich-text editors, also known as online rich-text editors, are web components that allow users to edit and enter text within a web browser. Rich-text editors are used in numerous ways such as in enhancing your comment input form or as part of a web application that allows entry of user-generated and formatted content. Rich-text editors are essentially web-based WYSIWYG (”what you see is what you get”) editors.

There are many rich-text editors out there. What’s even better than a lot of choices? Many of the best rich-text editors currently in the market are free.

Click to read the full article here

20-excellent-free-rich-text-editors

Free Online Web Form Builder

Whether you are a novice web designer or a professional programmer, JotForm saves both time and energy and helps you create a form in seconds.

This WYSIWYG editor allows you to add/delete fields in your form without writing a single line of code. You can also set restrictions and change the label and size of any of the fields with just one click. Once you are done creating the form, just copy the code and paste it on your website or blog. If you really want to play with the code, it also allows to edit the actual CSS behind your design and make changes to it.

The also have a few themes that you can chose from. For example the “Baby Blue” theme or the “Jot” theme.

You also have the ability to save your forms and come back to them. It also allows you to email the form to your friends, in case you want a second opinion before publishing it. All these features are available for free, however, there is a limit of 100 submissions which can be removed by paying $9 a month.

Over all, I think it is a pretty handy tool if you don’t have the skills or the time to create a custom form. However, you might have to play around with the CSS a little bit to integrate the theme/colors of the form with your website.