Every Eid vacation I end up with an extra free time, I usually use it to learn new stuff, the latest vacation I decided to learn Drupal. Drupal is a Content management system (CMS), it is basically a software to help you manage your content.

Drupal is a modular and customizable CMS, you can use it to build different types of web sites, a Blog, company or organization web site, community website, you name it.

If you still use tables to build your web site you really need to go back to school to learn CSS, and understand why CSS should be utilized to design your web site.
Here are some resource I found most useful to understand and start using CSS for layout, enjoy:

• Learn CSS Positioning in Ten Steps: Teach you about CSS “position”, “float”, “clear”, very important in CSS based design.
• No More Tables CSS Layout Techniques: layout using table is old and bad practice, learn why and how to move to CSS based layout.
• Listamatic: create horizontal and vertical menus using simple <li> elements.
• Yahoo UI Library Fonts and Reset: Library to make your design and fonts look the same in all browsers.

Warning: It is the same design converted to CSS.

After 5 weeks of development and testing, Alriyadh.com is now converted to CSS based design, it still not 100% complete.

You can view the design by using this URL:
www2.alriyadh.com

Some benefits of moving to CSS:

• Fonts look the same a cross browsers: I am using Yahoo! User Interface Library fonts file to guarantee that font have the same size a cross browsers.
• Page are bit smaller: because many presentation tags are now removed from the HMTL and put in the CSS.
• Printer friendly by default: we now have have separate CSS file for printing, so no need for printer friendly page since all page are automatically are.
• PDA friendly by default: same as printer CSS, not implemented yet.
• Rendering is faster.
• It will simplify future redesign. (since we are talking about redesign, suggestion are welcomed 🙂 )

When you build AJAX based form, you need to provide visual feedback to tell the user that something is really happening.

I created small template for this purpose:

Ajax Form

Hopefully you will see it in the next alriyadh.com CSS based theme 🙂

These sites collect links to CSS designed websites, great if you want to get some inspiration, it also give some idea on the capabilities of CSS:

• css thesis: sites, that’s all
• CSS Import
• CSS Beauty
• Unmatched style

Alriyadh.com introduced new style to display comments, see the Sample Article

The new style uses CSS instead of tables, which make it much smaller and cleaner.

A link to each comment is also added -the time of the post- to allow bookmarking and sending URLs to specific comment.

The posting form is now viewed in the same page, it is hidden by default but after clicking “Post Comment” it will appear thank to the power of Javascript.