SEO, CSS, Web Design and stuff

The new “display: table” syntax in CSS 2.1 opens for new simple layout techniques for otherwise complex designs, such as the fixed-strechable-fixed layout that many seem to want, and makes it easy to get columns of equal height. A few simple lines of code is all it takes – no faux columns, no huge bottom paddings and negative margins, or other sophisticated CSS design exercises and tricks.

This is a CSS layout any beginner can create, just as the table designs of the old days. And it is very robust and scalable. So my guess is that it will become very, very popular. Here is all it takes (non-essential rules omitted). First the CSS:

body  { font-size: 100%; text-align:center;  }
#wrapper  { width: 500px; margin: 40px auto;  }
#main {display: table-row;  }
#side-left,#content,#side-right {display: table-cell;}
#header  { background: gold; height: 100px;  }
#footer  { background: gold; height: 100px; clear:both;   }
#content {  background: blue;
width: 300px; }
#side-left, #side-right  { background:yellow; width: 100px;  } 

And here is the essential markup (load order of elements given by the numbering):

<div id="wrapper">
<div id="header">
<h1>1.</h1>
</div>
<div id="main">
<div id="side-left">
<h1>2.</h1>
</div>
<div id="content">
<h1>3.</h1>
</div>
<div id="side-right">
<h1>4.</h1>
</div>
</div>
<!-- main -->
<div id="footer">
<h1>5.</h1>
Nekkidblogger CSS-fun
(c) Nekkidblogger (2010)</div>
</div>
<!-- Wrapper -->

This produces the layout in the figure below. (Here is the web page, with source code, including some fixes.)

There are two problems with this. The first is that IE 7 and earlier does not support the “display: table” and similar CSS (display:table-row, display:table-cell). However, this can easily be dealt with, and I have included the necessary conditional style to IE lte 7 browsers in the source code for the figure.

The second is a SEO concern. Many authors, such as Rachel Andrew and Kevin Yank in “Everything you know about CSS is wrong!” and others on the internet, express some concern about the fact that it is impossible to load content first unless the content is in the first column. That is, the content loads in the order indicated by the numbers in the image above. The reason is that as the current implementation of the new CSS syntax does not support “rowspan” and “colspan”, “table hacks” like the one I wrote about in a previous article can not be implemented.

And this seems to be very true. I have tried to twist and bend the order of the columns a lot without result. There are no true hacks, as far as I can see. But there is a way to “hack it” even so. If you really want the content (the middle column) to load first for SEO (Search Engine Optimization) reasons, it can be done. But not by a hack, more something like a “semi-hack” (see also G. Sørtun’s method, based on relative repositioning, which is very nice but has some severe limitations):

First we place a container behind the three main columns and make it relatively positioned. Then we use a new div that we load (in the markup) after the three columns and that overwrites the original left column. The purpose of the extra container is to easily and precisely position the new column absolutely.

What this means, is that you do not load content in the original left sidebar, but leave it without content. Instead you load the sidebar content into the new absolutely positioned column. Doing this, you have, in effect, made your content in the middle sidebar load first. In the table hack (see above) we similarly fill the first cell only with the spacer.gif – and leave it empty of content – so there is a clear similarity.

Here is the new CSS for a new container and the new column:

#contain { position: relative; }
#side-left2  { background:red; position:absolute; overflow:hidden;
top: 0; left: 0; height:100%; width: 100px;   }  

And the new markup (I have also re-numbered the footer)(essential rules only), still short and sweet:

<div id="wrapper">
<div id="header">
<h1>1.</h1>
</div>
<div id="contain">
<div id="main">
<div id="side-left">
<h1>2.</h1>
</div>
<div id="content">
<h1>3.</h1>
</div>
<div id="side-right">
<h1>4.</h1>
</div>
<div id="side-left2">
<h1>5.</h1>
Sidebar left content
(navbar) goes here!</div>
</div>
<!-- main --></div>
<!-- contain -->
<div id="footer">
<h1>6.</h1>
Nekkidblogger CSS-fun
(c) Nekkidblogger (2010)</div>
</div>

The result is shown in the image below (also, see demo here, with all the CSS in the source):

As you can see, the (red) new sidebar column numbered 5 – meaning it is the fifth element in the markup, has now overwritten the old (yellow) left sidebar. This means that the content column (element 3) now load before the sidebars with whatever SEO benefit this brings. This is all valid CSS and markup, and I have tested it in a number of browsers (see the demo).

Also, I have written the code so that it degrades into a table (with the semi-hack still working) for IE7 and earlier IE versions. And it is easy to turn it into a flexible width design with fixed sidebars (just set the width to a percentage or em’s, and the width of the middle column to 100% or em’s, and use “min-width” and “max-width” if desirable).

The design has some well known weaknesses due to the absolute positioning of the new left sidebar that I outline and discuss how to deal with in the demo file. Also, since this ends up as a hybrid design it has some of the advantages of the “display: table” layout, but not all, and may perhaps be viewed as involving a trade-off between the ease of use of the new CSS table design and SEO concerns. To keep it simple I have used the semi-hack here on a fixed layout, but it only really makes sense to use it on hybrid CSS layouts, as fixed CSS layouts are relatively straightforward.

{ 0 comments }

On the internet, and in books and articles about Web Design, a large number of writers keep telling me about the vast advantages of CSS-based site layouts over site layouts based on tables. Personally, I use both kinds of designs, and I really do not see any great advantage of one over the other. And I am getting quite a bit fed up by a lot of the assertions of the pro-CSS-crowd.

One of the often repeated, and seemingly decisive arguments in the eyes of the die-hard proponents of CSS layouts, is that “tables are for display of data” (see, for instance, “Why tables for layout is stupid“, stating that “Tables existed in HTML for one reason: To display tabular data”). The fact that this and similar assertions are made a 1000 times do not make them any more true. And it really is just a silly argument. Who cares what tables “were made for”? The more important question is what they are useful for, and where they are easier to use and more efficient than other syntax?

Alternatively, one could twist the argument around, and ask: Were DIVs made for layout? And if they were not, does that mean we shouldn’t be using them?

The same article I referred to above (really only one of a thousand saying the same things, and just used here as a representative of a set of false truisms) also claims that CSS-designs (the numbering is mine, they provide a longer list):

1. make your redesigns more efficient and less expensive
2. help you maintain visual consistency throughout your sites
3. get you better search engine results
4. make your sites more accessible to all viewers and user agents

1. Make your redesigns more efficient and expensive? Than what? Than a table-based design with layers of nested tables and no CSS? There is nothing preventing anybody from just using <td> </td> as a container just like a DIV and styling it with CSS just like DIVs are styled? Or using a DIV wrapper around the table, and fill the table up inside with styled DIVs, just as in a DIV-based CSS design! So the argument is just vacuous in the sensee that it only applies to a constructed (and not even well specified straw man).

2. Help you maintain visual consistency throughout you site? Exactly the same argument applies – relative to what?

3. Get you better search engine results? What is this based on? Does the author assume that search bots are unable to see what is inside HTML like <table><tr>.. </tr></table> whereas they perfectly understand and see content inside <div> .. </div>? If that is the argument, then it is just plain false. And if it is that DIV-based layouts can load content first, then it is equally false, as I and many others have shown that you can load content first in a table-based layout as well! What is more, I have not seen any research indicating that table-based designs are better or worse than DIV-based ones from a search engine optimization point of view, providing sensible and semantic markup is being used. It would perhaps be better if such claims were not made by the proponents of the purist CSS approach unless the claims are backed up by solid facts or research.

4. Make your sites more accessible to all viewers and user agents? What does the author mean? On standard browsers tables are just as accessible. On cell phones and similar devices both table-based and DIV-based designs usually need alternative style sheets to be max accessible?

It would be nice if those of the almost religous sounding claims by proponents of the one true way of Web designs that have no sound logical or factual basis were left out of the debates. They are quite stupid and quite annoying.

{ 0 comments }

We assume you want a three column or some multi-column layout. And that you want to have the main content in the middle column. Also, as before, we assume that SEO (Search Engine Optimization) is a biggie, and that it is desirable to have a design where the content column is the first to load, so that crawlers and bots indexing the page meet the content you want to be indexed before they meet your menu with lots of links and other non-essential stuff  (this assumption very likely to be flawed, but I will come back to that in a later post).

So the problem is that the crawler or bot reads your site like this:

That is, you have a nice layout (much nicer than my illustration). And when the crawler meets your site’s HTML, the first thing it sees is all the stuff you have in your left sidebar. Perhaps a navigation menu, some news, some advertisements, or something. That’s number 1 in the figure. But all your content, or most important content, the stuff you really want to be indexed on, is in box 2. And you may have some asides or more sexy stuff than in sidebar 1 in your other sidebar as well.

So what you want is that the crawler or bot reads the page like this:

Here the crawler reads first the main column, then the left sidebar, and finally the right sidebar. Just as you want. And hopefully in a manner that gives better indexing. Previously I illustrated how easy it is to do this in a CSS-based layout. And on the net everybody tells you that this is something that is a very, very important argument in favor of CSS-based layouts as opposed to table-based layouts. I have read it so many times I have lost count of it. And, even so, it is just plainly wrong! It is a platitude repeated ten thousand times, but no more true for that.

It turns out that it is just as easy to manipulate the sequence in which columns are read in table-based layouts as in CSS-based ones. Just look at this code:

<div id="wrap">
<table border="0" width="100%"><tr>
   <td id="sidebar1" style="padding: 0pt; height: 1px;">
        <img src="pics/spacer1x1.gif" alt="" width="1" height="1" /></td>
  <td id="content" rowspan="2">
        <h4>1</h4>
        <p>Content  is the first to load. Good for SEO!
        </p><p style="padding-bottom: 30px;">Columns are always equal in height</p>
  </td>
  <td id="sidebar2" rowspan="2">
       <h4>2</h4>
       <p>The second sidebar</p></td>
</tr><tr>
  <td id="sidebar1">
       <h4>3</h4>
       <p>First sidebar</p></td>
</tr></table>
</div>

It is short and sweet, no more messy than the Faux Columns
or The Holy Grail layouts. Perhaps less. And it reads the middle column first and has columns of equal heights, along with some other desirable qualities.

It rests on a very clever hack that I happened to find in Joe Clark’s Building Accessible Websites, and which according to him is due to Lauri Harpf of the Website APromotionGuide.com.

And it really is devilishly clever and simple: Instead of using 3 cells in a row, we use six. And in the first cell we use a 1×1 px gif. Then we use rowspan=”2″ to not have to bother with the extra cells, and end up with one extra cell that is 1px in height. And nothing looks different because the one-pixel spacer GIF is unnoticeable. But when you experience it serially, you get the content first, then I have let the right sidebar come second (note that I could have used the same hack and skipped the rowbar=2 there as well, to make it come third instead of second), and navigation (left sidebar) third.

It’s so simple and does the job so cleanly. So, using this smart table hack and some CSS (stylesheet here) we get the following result (see the page live here):

And now the crawlers and bots will encounter the content and the important stuff before they get to the navbar and ads and whatnot!

To conclude: I am actually a believer in CSS based layouts, but the choice between tables and CSS is not at all as clearcut and easy to decide as proponents of CSS-layout style tend to make it. You can do just about the same with tables as with CSS. Sometimes one is preferable, sometimes the other. It is possible to use semantic elements and DIVs inside a table, just as it is inside a DIV-based layout. And it is (almost) as easy to end up in a “DIV-ed nightmare” as it is to be tangled in nested table webs.

{ 0 comments }

In the past, I have spent hours and hours searching through my reference books and on the Internet to make my sites look as good in the various versions of Internet Explorer as in  CSS compliant browsers. And I have implemented IE version specific style sheets, IE hacks and rewrites of CSS to make layouts, div’s and other elements look as beautiful in Internet Explorer as in other browsers.

I have implemented the silly Microsoft “expression”-statements for IE-versions not supporting the standard CSS max-width syntax, I have applied Microsoft “filters” of all kinds because IE doesn’t support “box-shadow”. I have inserted extra inner div’s to boxes to make them look the same and have the same size in IE as elsewhere, and I have used unnecessary “clearfixes” (picture by courtesy of RobotJonny.com).

The picture, of course, is much too kind to IE7 (and perhaps even to Opera). It breaks things and messes up too. Even IE8 does that! According to rumors, IE9 will fix all of those things, but I will reserve the right to believe that when I see it. I seem to recall having heard similar things all the way up from IE5! And there are still plenty of bugs left …

No more. I have had enough. I am sick of seeing how bad beautiful typography looks in IE, how well-designed pages get messed up, how nice, discrete shadow effects mess up the fonts within the boxes they apply to in IE. But from now on, for the sites I operate myself, I am not going to bother any more. If Microsoft want to substitute my good looking fonts with thick, ugly looking letters, let borders collapse, and generally render my pages ugly, then let it be so.

From now on, I will consider all those things Microsoft problems that people using Internet Explorer should complain to Microsoft about or start using another browser. I will not help Microsoft by trying to make their inferior browser look good. There is no reason for me to spend lots of hours doing that. For design projects I do for customers I will do it if I have to, but only reluctantly and as little as possible.

That’s my new, radical design principle for 2010 and forwards. It is a very radical decision, as most people for some or other reason still use IE. But it feels very liberating. And it will be a huge time saver. From now on I will have fun and use all the new, wonderful properties of CSS3 and HTML5 as they get implemented in the good browsers. And let Microsoft worry about how IE supports the new standards.

To users with the wrong browsers I will only say this – go and get Firefox, Safari or Chrome if you want to see how sites really look! And now that new, very serious safety issues have been found with Internet Explorer as well, it definitely should be time to change!

{ 0 comments }

The title tells you what this book is about: Getting the No. 1 spot on Google. That’s where you want to be, and probably dream of being, if you’re doing SEM (Search Engine Marketing) of your site. That’s the spot that drives the most traffic by far! SEO Made Simple is a tell-all guide for anyone trying to reach this highly coveted position.

Michael H. Fleischner is an Internet marketing and Search Engine Optimization expert. For more than a decade, Michael has been working with companies across numerous industries to improve their Web site marketing and search engine optimization tactics to and produce tangible results. Michael has appeared on the TODAY Show, Bloomberg Radio, and other major media. He is the founder of MarketingScoop.com and more than a dozen Web sites and blogs related to marketing, search engine optimization, and Internet marketing.

What he is will tell you in this book, which currently in the top selling book in this category on amazon.com, and a bestseller internationally as well, are the specific SEO techniques that deliver top rankings in less than 30 days.

So, whether you’re a search engine optimization expert or new to Web site rankings, the techniques revealed in SEO Made Simple will give you everything you need to dominate the leading search engines. Generate tons of traffic to your website absolutely FREE with top search engine placement on Google, Yahoo! and MSN.

Links to SEO Made Simple by Michael H. Fleischner at Amazon US and Amazon UK

{ 0 comments }

This is a jewel of a book from one of the acknowledged grand masters of CSS and Web Design. There is a real connection between craftsmanship and Web design, and Cederholm and Marcotte show what this link resides in. That’s the theme running through Handcrafted CSS: More Bulletproof Web Design. It explores CSS3 that works in today’s browsers, and you’ll be convinced that now’s the time to start experimenting with it.

This book will also show you excellent tools to create the most flexible, reliable, and bulletproof Web designs. It shows and demonstrate progressive enrichment techniques over more traditional labor-intensive methods.

Some subjects covered:

• building for unanticipated future use
• progressively enriching designs using CSS3 properties
• modular float management
• crafting flexible frameworks
• fluid layouts using grid-based design principles
• craftsmanship details on typography, jQuery, and shifting backgrounds

This is an excellent work literally guaranteed to provide new insight. Also, the writing style is one that is easily read. There are new “tricks” galore in this book. The book is rated “intermediate to advanced” and deserves that rating.

Handcrafted CSS: More Bulletproof Web Design shows connections between artistry and web design and explores CSS3 for modern browsers. Web designers, project managers and artists alike receive an excellent progressive series of lessons on how to enrich designs using CSS3 properties. Color screen shots throughout provide excellent examples. This is an important book!

Links to books by Dan Cederholm at Amazon US, Amazon UK, and Amazon CAN.

{ 0 comments }

CSS3 supports a new “box-shadow” property that can be applied to shadow page elements such as images, SPANs and DIVs. This is great, since it makes it easier to produce good looking frames for images and to nicely off-set boxes in a number of different and stylish ways.

This new feature is currently supported in a number of browsers, for instance FF3.5, Safari 3.1+, Gecko and Google Chrome. Opera (including version 10.10) and Internet Explorer (including IE-8) does not support it (there are rumors indicating the IE-9 will). However, for IE there are some other methods available (that works from IE 5.5 and up).

So how does this work? The basic syntax is:

So, for example

box-shadow: 2px 2px 2px #CCC; 

is a 2px horizontally (right) and vertically (down) offset shadow with a 2px blur. The color is grey (#CCC).

Then, to complicate matters, Safari requires the prefix

-webkit

and FireFox the prefix

-moz

. Fortunately the syntax for these are the same.

If you want to achieve the same results in IE, it gets even more complicated. But tools do exist. A number of sites on the net shows that shadow and blur effects can be produced in Internet Explorer too. And, indeed, several writers/sites show that it is possible to achieve similar shadow effects with IE’s proprietary tools as with CSS3. I found four different possible methods for producing box shadows in IE, all using Microsoft-provided “filter”-techniques – in reality, variants of not-so-good proprietary Javascripts.

These tools are the Shadow filter (usage

filter:
progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45)

; the DropShadow filter

filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5,
Color='gray', Positive='true'

; the Glow filter:

filter:progid:DXImageTransform.Microsoft.Glow(Color=blue,Strength=5)

. A fourth possible tool is the Blur filter – I have tested it, and found it of little use for the purposes here. For these filters to work, the object must have layout, meaning they must have “height” or “width” set, or be absolutely positioned (or have zoom set – zoom=1).

The examples available online usually apply shadow effects to images or filled boxes (usually filled with dark colors), see for instance this example at the DynamicDrive CSS-library. However, for my own web designs, I wanted nice shadow effects on some simple bordered text boxes with white background.

To test the various possibilities I have set up four DIVs. The first is the text box as is for reference. Then I apply the following shading:

.shadow1 {
box-shadow: 2px 2px  #CCC;
-webkit-box-shadow: 2px 2px #CCC;
-moz-box-shadow: 2px 2px  #CCC;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#CCCCCC,
                 offX=3, offY=3, positive=true); }

shadow1 has only shadow, no blur. The IE code could have been given in a separate conditional IE style sheet (as some writers recommend), but that turns out not to be necessary (but see here for an example).

.shadow2 {
box-shadow: 3px 3px #CCC;
-webkit-box-shadow: 3px 3px 3px #CCC;
-moz-box-shadow: 3px 3px 3px #CCC;
filter: progid:DXImageTransform.Microsoft.Glow
      (color=#CCCCCC,strength=3)
progid:DXImageTransform.Microsoft.Shadow
     (color=#CCCCCC,direction=135,
strength=6); }

shadow2 has moderate shadow and blur with the same color. I also test the Glow and Shadow filters.

.shadow3 {
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter:
progid:DXImageTransform.Microsoft.DropShadow
      (color=#969696, offx=2, offy=2)
progid:DXImageTransform.Microsoft.DropShadow
     (color=#C2C2C2, offx=2, offy=2)
progid:DXImageTransform.Microsoft.DropShadow
    (color=#EFEFEF, offx=2, offy=2); }

And in the final DIV, shadow3, the shadow color is different, and both shadow and blur substantially larger. For IE, the Drop Shadow filter is applied iteratively (this method is from Ole Laursen).

The results for Safari, Firefox and Chrome are very nice. Opera just shows the original text box – it doesn’t support box shadow yet. The results with IE are not very good. See for yourself (here is the page that you can check yourself in different browsers – demo):

Boxes in Firefox:

Boxes in IE8:

{ 0 comments }

More and more readers  buy e-book readers, and the competition in the marketplace is getting more and more intense. Kindle, by Amazon, is a huge hit. And now Barnes & Noble has released its own e-book reader, the Nook. The third major contender among consumers is Sony’s e-book reader, the PRS-600BC and PRS-700BC. And more e-book readers are on their way. This is, of course, good news for readers: more alternatives to choose among and competition that reduces prices.

New York Times has published a comprehensive review of e-book readers, but Nook, Kindle and the Sony PRS-readers for the moment seem to be the major competitors.

Nook is the device on the top right, and below are pictures of Kindle and the Sony reader.

It’s hard to say which is the best. They all seem to be very good. Nook and the Sony readers have touch screens, Kindle has a keyboard. Otherwise they have fairly similar features. Their prices are fairly similar too. If you ponder buying one, I suspect that to a large extent it is a question about what your shopping and reading habits are and which company you have the strongest relationship to.

It will be interesting to follow what is happening in this area in the near future. Readers are faced with several good choices, and with more alternatives to come soon.

Links to the e-readers: Barnes & Noble’s Nook, Amazon’s Kindle, and Sony’s e-book readers.

{ 0 comments }

SEO (Search Engine Optimization) is a biggie. But it is seemingly extremely complicated, in the sense that a huge number of factors affect how a given page ends up in searches.

One of the factors some authors and discussants on the net point to, is how well your page is designed. Some point out that it is desirable to have a design where the content column is the first to load, so that crawlers and bots indexing the page meet the content you want to be indexed on first. So the problem is like this:

That is, you have a nice layout (much nicer than my illustration). And when the crawler meets your site’s HTML, the first thing it sees is all the stuff you have in your left sidebar. Perhaps a navigation menu, some news, some advertisements, or something. That’s number 1 in the figure. But all your content, or most important content, the stuff you really want to be indexed on, is in box 2.

So what you want is that the crawler read the page like this:

Here the crawler reads first the main column, then the left sidebar, and finally the right sidebar. Just as you want. Andd hopefully in a manner that gives better indexing.

To achieve this turns out to be very easy. Here is a picture of how it could look:

And here is a link to the 3 column frontloaded (or content-first) web page (use view source to see the HTML). This is the CSS for it – just the barebones. You can replace the fixed widths in the CSS with percentages and turn it into a flexible, strechable layout.

Please note that all this does is to show a way to make the content load first – there are other problems that have been solved elsewhere by far better CSS-ers than me that are not addressed here for the sake of simplicity, such as getting columns of equal length, and so on.

There is another way to achieve the same result – to load the content column first with a margin big enough for the left sidebar (eg. “margin-left: 185px”), and the later move the left sidebar into the content margin. If this is done with  sidebar-wide margins on both sides of the main content DIV, it opens up for hybrid layouts with fixed sidebars and a flexible content area (“negative margin designs). Personally I don’t like these designs because of the Dreamweaver rendering bug, but they are perfectly ok and display properly in all CSS-compliant browsers.

{ 0 comments }