Should I use tables for layout?
In case you were wondering... this website answers the question: should I use tables for layout?
I just wanted to share the link; I found it quite amusing.
Now that you have a definitive answer that you should not use tables for layout, here are some CSS resources to help you establish your new layout:
- 15 Places to Find Your Next CSS Layout
- Dynamic Drive CSS Layouts- Tableless, CSS based templates
- The Perfect 3 Column Liquid Layout
The Perfect 3 Column Liquid Layout
15 Places to Find Your Next CSS Layout
Creating a theme is a multistep process. You have to pick the color scheme, decide how many graphics to include and what purpose they will serve, as well as decide on a layout. Sometimes it isn't easy to decide on a layout and it would be nice to have some examples and ideas to look at. That is what I'm focusing for this post. Here are 15 great resources to help you pick your layout and download the CSS to get you started.
Free-CSS offers over 250 different free CSS layouts for you to use. You can browse them and preview them as a thumbnail as well as click on each to see a demo in a GreyBox. Their terms of use are available in each zip file as well as on the website. The authors give this general explanation "All of the CSS layouts that are featured within Free CSS are distributed under some form of GNU/GPL License or under a Creative Commons License or are free" (free-css.com).
IronMyers offers three different layout collections. They are the 750px collection which includes 56 different layouts, the 950px collection which includes 56 layouts, and the 100% collection which also includes 56 layouts. You can view an image of the layout as a preview or you can view all the layouts in demo format.
Code-Sucks.com has created a number of different examples of CSS layouts. You can see simple images of them or view them as a demo layout. All 95 of their layouts validate against the Strict DOCTYPE.
Layout Gala offers 40 different layouts that are viewable as thumbnail image previews or demos of the actual layout. You can download each layout individually or download all 40 in a zip file if you want. All of the layouts are based on five sections; they each include a header, content, navigation, other stuff and footer section.
Max Design offers a number of CSS layouts covering the typical ones like two and three column layouts. The main advantage to this site is the addition of tutorials to each of the layouts. There is an explanation and help offered for each layout to help you learn a little more than just looking at samples, demos, and code. The code is available to copy and paste for your use.
Nice and Free CSS Templates offers a number of layouts including three columns, four columns, and box layouts. Each template is available as a thumbnail preview, a demo, and the CSS code is available to copy and paste for your use. All of the templates validate to W3C standards for XHTML 1.0 and CSS.
CSS Play offers 14 different CSS layouts including three column and fixed. You can view demos of the layouts and the CSS code is displayed to copy and paste for your use. The copyright and usage policy is listed on the bottom of the main page.
For those of you who already own Dreamweaver CS3, it has a number of CSS layouts built in. You can easily find them by simply creating a new HTML file and choosing one of the templates provided. They offer previews next to the choices as a selection is made.
About.com offers a huge wealth of information including a number of CSS layouts. There are more than 25 layouts available, each with a demo to look at as well as a detailed description about the layout. You can save the templates for use in your websites. They also have listed the terms of use on their website.
SSI Developer offers CSS layouts in three different categories. They have created two column, three column, and general templates. You are able to view an image preview, view a live demo with some generic content, and download the layouts as a zip file.
The Dynamic Drive CSS Library offers a number of great CSS layouts, among other great resources. They have created almost 50 different layouts in five categories. You can choose from two column, three column, fixed layout, flexible layout, and CSS frames. Once you decide on a layout, you can view an example and get a copy of the code.
Mitch Bryson has created eight basic CSS layouts. Each layout has a thumbnail image preview, a demo page, and a download link to the layout zip file. The layouts include one column, two column, three column, fixed, and fluid.
The Layout Reservoir offers two main CSS layouts. There is two column and the the three column layouts available. The two column layout has an example with a left hand menu and a right hand site menu. Each layout has the CSS code available to copy and paste for your use.
Glish has compiled six of the most common CSS layouts used on the web. They give examples and the CSS code for 3 columns, the holy grail, 2 columns, ALA style, 4 columns, all fluid, 3 columns, static width and centered, and nested float. The offer the code in a textbox at the bottom of the examples for you to copy and paste for your use.
WebDev offers two column and three column CSS layouts licensed under a Creative Commons License. Each layout has a demo available to check out. Along with the typical two and three column layouts, there are also some discussion board layouts, threaded and unthreaded, as well as some random template layouts. You can download all of the layouts in one zip file.
Cuil Rethinks The Typical Search Results Layout
Cuil was released yesterday and has had a great deal of coverage already. Most of the coverage has been about its index size (121 billion) in comparison to Google's (40 billion) as well as its search results in comparison to Google's. So I'm sure most of you, like myself, aren't interested in reading anymore comparisons between Cuil and Google in terms of index size and search results; TechCrunch has a great post if you want to catch up on those findings. I'm here to offer a comparison in layouts. These are a few things I found interesting when checking out Cuil:
- Google at Night - Cuil took the simplicity and elegance of the Google homepage and turned out the lights. The Cuil homepage is very similar to the Google homepage in that it has simply their logo and a search bar with a few other text snippets below. Behind these items lies a pure black canvas. This decision keeps what everyone loves about the Google homepage: it's right to the point design, but they still made it their own.
- May I Suggest? - The Google suggest feature is one that I have come to love. It saves time and helps when looking for the search string that will retrieve the results I am looking for. Cuil not only uses a similar feature in the search bar, it creates one click suggestions in a toolbar directly below the search bar. Cuil has taken a great feature and expanded it. One click recommendations is a pretty cool idea and can be very useful if the recommendations are relevant.
- Columns of Results - One of the more drastic changes to typical search results are the columns of results. When the search results are loaded, they are printed in the color scheme we have all come to expect from a search result, a blue title, a black description, and a green link. Among this commonality, Cuil displays the results in two or three columns (it appears to be three by default). This stands in contrast to the typical 10 rows of results printed by Google and countless other search engines. I believe this is a good idea. We'll have to see how it plays out, but I like the change. I am able to view almost all of the results on one screen. I barely have to scroll. I wish that the results were lined up in a more linear pattern from left to right in order for easier skimming however. I may get used to it quickly though.
- Categories of Information - Cuil has a feature on the top right of the search results page that is an "Explore by Category" box. The categories are intended to be relevant to the keyword(s) searched and then allow you to drill down into other keywords within that category. Once you click on a keyword within a category, that keyword gets added to the end of your string. For instance, searching for "webmasters" will display a category of "Search Engine Optimization." Clicking on the suggested keyword "PageRank" within that category will now make your search be "webmasters PageRank". I believe this is intended to work like a drill down function, where each additional click of a keyword narrows your results to a more fine grained result set. Some of my tests provided relevant results as I drilled down, but others didn't.
- Picture This - By default, Cuil results show a picture next to some of the results. This feature works a lot like the pictures displayed with a Google News item. Of the test keywords I searched, a very large percentage of results had a picture next to it. The relevance of the picture was not as high a percentage however. A lot of the pictures that were displayed didn't have much to do with the result. Some were totally irrelevant, and others were hanging on by a thread. This feature will get better in time and will be a nice change to the all text results. Showing image and text results on the same page could be nice in some cases. For instance if I was looking for a specific model laptop, it would be nice to see the picture next to the result.
- My Preference - The ability to customize the results is very limited. In fact, there are only three options that I can find currently; they are the number of columns to display, whether or not to use suggestions, and a safe search filtering feature. This is most likely because it is still very early in the release. I hope that there are more options in the future for advanced search features and the number of results displayed. Although I like being able to see almost all 10 of the results without scrolling, I would prefer to scroll through 10 screens to see one hundred results, rather than click the next results button ten times. I am guessing I'm not alone in that.
Overall I like Cuil. I think it has some great potential and could be very useful. I like some of the new layout changes, and I hope that the results and relevancy can improve rapidly so I can continue using it productively.