Finally, I decided to try WordPress. And I was
surprised with simplicity, elegance and power. The first thing that came to my
mind-I want my own template for WordPress.
As I told you some time ago, I’m definitely
not Picasso, nor Dali. This means that people would not come to my web place,
looking for fine art. All that I really want is a simple light design, easy to
navigate, semantically correct, three columns with flexible width content area.
I decided to have flexible width main area for content and 2 right sidebars
with fixed width. I also wanted content area to load first, providing
semantically optimized design.
Semantically correct design may give you
some SEO advantages. What is more important, semantically correct approach may
increase usability of your website. In our fast changing web environment, with
thousands of websites, competing for the same search term, people are looking
at your page for a couple of seconds. The sidebar may contain some slowly
loading items. Some ads from your sponsors and etc. In this case your web page
will load slowly and even choosing the fastest web hosting would not help. You
may not be able to show your content and people may leave before page will
load. The other advantage of semantically correct design is better indexing of
your content. Do you know how long Google, Yahoo or MSN web spider will wait
before it will try to capture your content? If it would not be able to get fast
response, your content would not be indexed very well.
I tried this design concept before and
described it in In
search of the Holy Grail. True 2-3 columns CSS layout that works. Can’t say
that I was completely happy with results. What I learned was: CSS is not suited
very well for positioning and all major browsers are treating CSS rules
differently. You may argue with me about these statements. You may tell that
there are a lot of designs that involve CSS positioning and properly rendered
by Firefox, Internet Explorer and Google Chrome. However, majority of proper
designs with CSS positioning are fixed width CSS designs. Things are getting
much worse when you try to combine flexible and fixed width columns of
different height, header and footer.
I made new research and found Matthew James
Taylor’s article: Ultimate multi-column liquid layouts (em and pixel widths). I
used his technique in my design approach. This resulted in Gadget Deals
template for Wordpress. It is 3 column design with flexible main content area,
2 fixed width sidebars (both are right side sidebars), semantically correct,
SEO friendly light blue template. By SEO friendly I mean some modifications to
common template meta tags, content tags, better H1 and H2 tag usage (no H1 tags
in the header, H1 is used in content title only). Together with proper link
structure, supported by Wordpress, this gives good enough SEO structure to
start with. You may want to make more aggressive SEO modifications but they are
out of our scope for today.
Follow this link to check live example of
Gadget Deals template for WordPress. I tested and tweaked it to work in
Firefox, Internet Explorer 6, Internet Explorer 7, Google Chrome and Safari for
You can download Gadget Deals template for