Monthly Archives: Nov 2008

Code

Why You Shouldn’t Use Tables for Web Layouts

During my whole lifetime as a web designer or better as a front-end developer, I have coded only one site using tables for layout, the first one. It was the time when I had just began to do web stuff and I did not know very much about CSS and its potential, if not nothing at all. After that, I got introduced to CSS and ever since I have never used table in any of my site development projects I have worked on. I thought it would be a good idea to write something about this subject for the guys who still use tables for web design layouts, especially those that develop wordpress themes. So, let’s begin:

1. Tables are hard to code and difficult to maintain

Let’s suppose you are a hand-coder, how do you manage to write all those <tr>’s and <td>’s without errors? It is a common error when you code with tables to have missing tags or misused ones. It is even more difficult when one uses a WYSIWYG. WYSIWYG editors operate with table layouts and usually, the code that they generate is very messy. The same occurs when you slice a design with Photoshop or GIMP. Using CSS, you will code at least half less tags than coding with tables. Managing <div>’s through CSS is a far more easier, fun and creative process.

2. Tables are slow to load

The web site created in tables will take more time to appear on the screen

that CSS based one.When using using tables, the page won’t show up until the browser parses the last closing </table> tag. Moreover, the more table you nest within each other, the more the content will break until the images and text figures out where they belong to in the site. Well, this is a solved problem with CSS, just tell it where to be and there it will.

3. Tables can hurt your SEO

The more code that is in the way, the more junk they have to plow through to get to your content. Nested tables, which are usually used in table-based website layouts, would hurt the content that is inside it. There are more HTML tags than content.

There is another widespread idea about tables that use left-hand navigation (very common in table layouts) hurt the SEO, by telling the search engines that content is less important that navigation which appears before the main content in the HTML. This will distort search engines and mislead them in indexing your site. On the other hand, with CSS, you can make the navigation bar appear on top, but you can put it at the bottom of your HTML.

4. Tables lack accessibility

The same as it hurts SEO, it distorts screen readers. Most screen readers read pages in the order that they are displayed in the HTML. If a screen reader were to read the same page described above, it is possible that the customer would hit the back button before the reader had even read through all the navigation. Through CSS, you can display the anything on the top, but leave the most important part at the top of your HTML.

5. Tables don’t print well

Another problem with tables is that they don’t print well. With CSS, you can use a print style sheet to give another look to the page. You can also have elements that only show up when rendered to a screen, but not to a printer such as headers and footers. CSS is great for printing.

6. Tables make site redesigns much harder than semantic HTML+CSS

Through CSS, you can twist your site look so much, that you won’t resemble with the old site at all. The most important part is that, all this can happen without touching the HTML part at all. You can even have several different skins for your site and allow your users to select one of them. This can happen only in dreams, if you are using tables. You cannot alter the layout at all, expect colors and font size, when you are using tables, even though you might be using CSS. Get rid of tables.

7. Conclusion

It might be hard to make CSS-controlled layouts cross-browser compatible, which is often used as the main argument against switching to pure CSS. True. But as soon as you finally do it, the experience is great. The more CSS tricks you learn, the funnier it becomes to test them and play with them to see what other effects you can achieve. Tables could never be so much fun.

Read More
Code

WordPress Bug: Tags do not appear under WP_Query

WordPress has been perfect and bug-free for me. However, I discovered one lately. Firstly I came across this bug when I was developing an Gawker-style WordPress theme for a client of mine. I used custom WP_Query loops several times there and I was asked to display tags inside them too, the way Gawker does. This did not happen, of course, that is why I am writing this post. By that time I thought it was my fault that tags did not appear.

A couple of weeks ago, I coded a new theme for my blog. I used several custom loops there too, powered by the famous WP_Query. When I tried again to show the tags inside them, they did not show up. That made assured me that it was a bug. To have more context about this, please have a look at the following WordPress loop:

{code type=php}

<?php $my_query = new WP_Query(‘category_name=featured&showposts=1’);
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate[$post->ID] = $post->ID; ?>

<div class=”featured_post” id=”post-<?php the_ID(); ?>”>

<img src=”<?php echo get_post_meta($post->ID, ‘Featured_Image’, true) ?>” alt=”” id=”featured_img” />

<h3 class=”title”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a>  </h3>

<div class=”meta”>By <strong><?php the_author();?></strong> &raquo;

<?php comments_popup_link(‘0 comments’, ‘1  comment’, ‘% comments’); ?>

<?php the_tags(); ?>

</div>

<?php the_excerpt() ?>

</div>

<?php endwhile; ?>

{/code}

As you can see, the tags code is included in the loop, but nothing appears. This does not work only under the WP_Query powered loops, whereas in a normal loop, it works. I would appreciate very much that everybody contributes to make this bug known to the WordPress team as soon as possible so that they can have it fixed. Thanks very much!

Read More