CSS Layout

Smashing Magazine has recently published a very useful post on 10 principles of effective web design.

In the post, they discuss the movement of the users’ eyes and how people scan through a typical web page. One very important factor that I find is the effective web writing factor. This is extremely important as we all want our visitors to know what we offer is what they want within the first minute they visit our site.

The first principle touches on the golden rule, Don’t make users think I would say most visitors will exit your site if they find it difficult to find what they want. Keeping a web design simple is often the safest approach to start off.

Do take a look at this great post on the other 9 useful principles

Deziner has once again impressed me by creating a very neat tutorial to help keen designers to create their own Wordpress themes

The first step is to create a new folder under the wordpress directory path, themes folder. In this detailed tutorial, it mentions what are the necessary files to create such as the header.php, index.php, sidebar.php, footer.php and style.css etc.

What I like about the tutorial is that Deziner covers in great depth on how to go about creating each file and additional tips on further customizing the new theme using DIV(s).

Make sure to visit this wonderful wordpress theme creation tutorial and you will like it

I would like to recommend a great site today for downloading free CSS templates if you cannot find any suitable themes from the search engine listing. Known as StyleShout.com, this popular site is managed by Erwin Aligam, Calamba City, Philippines. This young web design hobbyist is a big fan of CSS, XHTML and open source web design

The free website templates section of this site features some of the greatest design that cannot found in other sites. Erwin has made an effort ensuring that all the templates are valid xthml(strict) and valid CSS so as better facilitate the usage of the Webmasters.

Besides the free CSS website templates, the site also lists down a great list of premium CSS templates and is especially useful if you cannot find a suitable template in the free listing. Most of the templates only costs less that $30

Lastly, you can find a list of CSS related resources that you will find it very useful. This CSS resources list contains links to CSS hacks, layouts, learning and techniques like positioning.

Feel free to visit StyleShout for some inspirations as well!

Mike Cherim has recently blogged about the different types of CSS layouts that we have been using and their respective pros and cons. I think that this is a good article to share as it covers most of the benefits and areas that the Webmasters must consider when utilizing different types of layouts.

Besides the pros and cons, Mike also shares some advices on every type of layout for the designer to consider. For example, he advised that if you are going to design an Elastic layout, make sure it works on small monitors. Make sense

Fixed layout is the most common template used by the bloggers nowadays. A few advantages that I can think of is that fixed layout loads much faster as the browser does not need to calculate the sizes before showing to the users. Another advantage is that it seems to be much easier to design with less considerations

You can read Mike’s blog on the different CSS layouts over at his blog.

If you have been downloading and buying web sites templates, you may most probably come across blocks of unreadable paragraphs starting ‘Lorem ipsum..’ Before you start wondering what these blocks of words mean, allow me to elaborate further.

It is very difficult to come up with dummy words for layouts or templates as totally random generated words will have irregular distribution of content and make the whole layout looks unnatural. Hence, CSS designers use Lorem ipsum.. to fill the layout.

The reason why these words are used is because they have a high words distribution ratio and looks like readable English. You can refer to lipsum.com for a brief history of Lorem ipsum. In addition, this useful site also allows you to generate some Lorem ipsum content

There have been many list created in the popular blogs on web design resources recently. However, there is little notice given to this useful list at DesignVitality

This list of 100 starts off with the popular web layouts directories that always stays in the top 10 of Google results. I am surprised by one of the tool in the Open Source Web Design Programs section. Inkscape is the tool that catches my attention. Inkscape is an Open Source vector graphics editor, with capabilities similar to Illustrator, Freehand, CorelDraw, or Xara XI should have found this site long ago!

This post also contains a list of automated CSS tools and generators that allows the users to create their own CSS layouts and wordpress themes. With the emerging of more and more blogs, the last section will definitely helps existing or future bloggers to choose a design that suits them.

Proceed to read the The Open Source Web Design Toolbox: 100 Tools, Resources, and Template Sources. A great post overall

Paul OB has written another great article lately on creating a star rating system. If you are not aware of this system, refer to this demo for an illustration. This rating system is commonly used in blogs where readers can rate a particular article.

Paul illustrates clearly every obstacles encountered and how to overcome them when designing this in CSS. Although there are a lot of other quite similar tutorials on this topic, Paul takes his time to make sure that every concept in his article is illustrated clearly for the benefits of all levels of readers.

A highly recommended article for anyone interested in this rating system.

Go ahead and read the article

I recently received a review request from Blogge which is a techno-blog launched by Dassnagar Infosystems. As I seldom review a blog but more on pure CSS layouts, I thought to drop by their site and check out their offers

The first page I that I visit to find out more about them is the Who are We section. It seems that they have a greater vision than any other average web solution companies. In addition, they judge their success by When our Customers Win - we Win Too

This blog also provides several very useful information such as CSS Tips, AJAX technologies, browser, web graphics and Search Engines issues for the readers, what a broad coverage Averaging one post every two days, this is a pretty active blog with good content. You should be able to benefit from reading this blog frequently.

Overall, it is my pleasure to review such a nice blog that bears great vision. All the best to BLOGGE and make sure to pay them a visit

I have always been visiting Dynamic Drive for their CSS library for quite some time now and thought that it would be nice to share this great resources with you

So what does Dynamic Drive has in store for us? The great CSS library contains navigation menu, form effects, cool links and button effects as well as CSS powered images gallery.

I have used their CSS horizontal navigation menu for some of my sites before and they never let me down I am sure you will certainly find some great menus in their Horizontal CSS Menu.

In addition to the above great stuff, you can also find lots of CSS basic layouts in Dynamic Drive as well. They provide download for different CSS layout types such as fluid, fixed, two / three column. Hope that you will find the site useful

I have come across some great CSS tutorials and thought that it will be good to share it here as well

CSS Drop Shadows tutorial by Sergio Villarreal is a very good guide for anyone that wants to pick up CSS Drop Shadow technique. The tutorial is comprehensive and should not pose a problem for most Web Designers.

If you are having some problems understanding how float works, the Float Tutorial by MaxDesign is the perfect resource to refer to. It illustrates the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.

Learning CSS positioning in ten steps is an essential guide for anyone who wants to grasp the concept of this powerful technique. This tutorial arranged in an easy-to-read format so as to facilitate learning.

Hope the above tutorials help a bit