CSS Layout

Designing a validated CSS layout is not an easy task. Coming out with a comfortable validated layout is much more difficult. The CSS layout, Good Morning, gives me a very comfortable, refreshing feeling when I first saw the demo.

Created by In obscure, this layout is XHTML and CSS validated. It has also ben tested in Mozilla Firefox 2.0, Internet Explorer 6 & 7, Opera 9, and Netscape 7.2.

With a total file size less than 300KB, it loads pretty fast for most Internet users. You can optimize the current set of images for even greater performance.

The overall design is neat and clean with soft background and a right side bar. The lists in the side bar also has a nice hover effect when you move your mouse over the links.

Although there is not much comments in the main and CSS files, Webmasters should have no problems locating the desired elements for customization (if there is a need). The designer of this layout has also made an effort to utilize the headers and list tag to facilitate Search Engine Optimization.

Overall Rating:

Try out the DEMO here.

I have to admit that FreeCSSTemplates.org has been doing a great job in designing beautiful layouts from the time they launched.

This time round, let us put our attention on the new eye candy layout - Cultivated.

This elegant three-column layout is easy on the eyes and manages to separate the content in a graceful way. You can easily upload your sponsor’s banner on the right of this layout while not disturbing the rest of the content. The left column is meant for all your internal links to your site or blog.

The designer also takes time to ensure that all the CSS blocks are named to its purpose. Therefore, any Webmasters should have no problems changing the layout to suit any theme. The CSS file is also coded for easy adjustment. All the necessary elements are well-named to avoid problems locating a certain element.

In terms of Search Engine Optimization, this layout has used the header tags appropriately to facilitate the SEO efforts. Hence, there is no significant rework needed for this layout.

Overall Rating:

Try out the DEMO here.

Dynamic Drive has recently released the CSS Glowing Tabs Menu for free to the worldwide users. The following shows a preview of what it looks like:

This script does not use the JavaScript pre-load technique and it can therefore achieve a better performance (with the hover ability).

The images are also available on the site and anyone can easily change the colors by editing them using appropriate software like Photoshop or Fireworks

Enjoy!

Pomodoro is an exciting layout that is suitable for any nutrition related sites or blogs. This layout is designed by freecsstemplates.org and receives high popularity in most open source layouts provider.

It has a fixed width layout with three columns. The text in these columns might not be clearly identified if the site designer does not put in extra effort to differentiate the areas.

In terms of file sizes, this theme has managed to achieve a good result at less than 300KB. It can be further reduced if the images were to be optimized. Pomodoro also comes with a highly portable CSS file which weighs only 3KB

I find that customization of this layout is pretty easy since all the div blocks are clearly named.

Lastly, this layout also facilitates Search Engine Optimization by utilizing the headers such as H2 and H3. This will save the Webmaster some time to perform any further optimization.

Overall Rating:

Try out the DEMO here.

This blog layout is perfect for any sea lovers such as divers

Based in dark blue background, the white font used in this layout stands out clearly without any strains on the eyes. The side menu on the left also fall in nicely with the whole design. However, I feel that the header takes up too much space vertically.

Customization will not be too difficult for the new layout users as the various blocks are named properly. The CSS file is small but short of useful comments for the users. Despite of this, the whole layout only takes up 320KB. Hence, it loads pretty fast in almost any connection speed.

This layout can be further improved by utilizing higher levels of header tags to help in Search Engine Optimization. The current layout only uses H3 tags. Overall, its a nice desgn CSS layout with great appearance but needs to improve on the SEO.

Overall Rating:

Try out the DEMO here.

The Nautica series has always been my favorite since its first layout, Nautica01. The newly designed layout, Nautica X, has managed to capture my attention upon its release

This new CSS blog layout has adopted a top horizontal navigation menu together with a nicely placed sidebar stretch. The footer is also nicely done to display clearly the necessary credits.

The CSS file is very well-documented to help the users in customizing the template to their own needs. This is by far the most comprehensive comments I saw in a CSS file What surprise me further is the small file size of the entire template.. with only 480KB including the images, this template is designed to pump out at the fastest speed to your users’ screen.

In terms of Search Engine Optimization, this layout also fare nicely with the usage of standard headers for the headlines. Just create a unique title for every page and your blog will be ready for the bots visit

Nautica X comes with valid CSS and XHTML. It has also been tested to work in IE6-7, Firefox, Opera, and Safari for OSX.

Overall Rating:

Try out the DEMO here.

TerraFirma has been around for quite some time but it is still one of my favorite CSS layout Created by NodeThirtyThree, this blog based design is clean and compact. With an overall file size of only 600 KB including images, most users should not have loading issues with this layout.

The creator of this layout has also made an effort to ensure that the layout is highly customizable. All the div elements are properly named so that webmasters will not have any problems identifying the respective areas.

Apart from its high level of compactness and customization, TerraFirma also utilize proper headers tag throughout the whole design which is good for Search Engine Optimization. Overall, it is a nice fixed layout that suits most themes

Overall Rating:

Try out the DEMO here.

Designed by Ginger Ninja, this excellent layout catches my attention immediately upon the loading of a list of layouts.

This two column layout is neat and the colors fall nicely on the eyes. The designer has also made the CSS blocks easy to customize by naming them conventionally (sidebar, content and footer etc). In addition, the CSS file is also well commented to ensure that the Webamsters can identify the respective areas easily

As the overall file size of this layout is 2.65 MB, it loads reasonably fast on a broadband connection.

This fixed layout is also spacious to hold any possible content. It is ideal for both blogs and anime related sites.

Overall rating:

Try out the Live DEMO