Where are the bugs?

.. or are they typos on a weird keyboard?

In one of his articles John Dvorak explains why CSS bugs him. It is a relatively short article but it stirs up quite a vivid list of comments (five pages and counting).

And rightfully so, the article is a very bad piece of writing considering the aeons of experience the man has in the computing industry. It seems that he has taken a stab at CSS and couldn't get it to work for him. Or not in every browser.

This no big surprise as the learning curve is quite steep and you need quite a bit of time first understanding the styling options and after that all the weird ways various browsers render these. Finally you will have to learn the hacks to fix these inconsistencies. A little too much to grasp on rainy Sunday afternoon before tea.

Let's dissect

Now let's pull some quotes out of context and try not to laugh but stay positive and objective. Well, hardly objective.

John Dvorak

The first problem is the idea of "cascading." It means what it says: falling as in falling apart. You set a parameter for a style element, and that setting falls to the next element unless you provide it with a different element definition. This sounds like a great idea until you try to deconstruct the sheet. You need a road map. One element cascades from here, another from there.

Using the DOM inspector in Firefox or Netscape Navigator will help you to keep track which rules apply to an element and even in which order. Also some basic understanding of CSS is handy. And BTW this is not cascading but inheritance that is discussed here.

John Dvorak

One wrong change and all hell breaks loose.

That is programming for you. One wrong change and all hell breaks loose. When you can then put out that fire again you show programming skill.

This is hardly a problem or bug of CSS it is an inevitable part of any programming language. If you can make it, you can break it.

John Dvorak

If your Internet connection happens to lose a bit of CSS data, you get a mess on your screen.

John, are you still using a good old 14K4 modem with occasional static? I have not yet experienced this problem and have never heard of any one who had this. So you are the first to report the problem.

John Dvorak

That's not the worst thing. You can live with the basic cascading mess; it's a matter of debugging. The real problem is that no two browsers, let alone no two versions of any one browser interpret CSS the same way! ... Can someone explain to me exactly what kind of "standard" CSS is, anyway?

Hello John, this is not the problem of CSS but rather of the different interpretations or lack there off by different browser manufacturers. You can not blame CSS for this.

My conclusion

The lack of understanding of CSS and the problems presented by the different browser in rendering that CSS is what most struck me. I was disappointed to read an article by quite a big name in the industry.

Some comments are worse

Although many people have commented on the article in much the same way as I now do there were also a great many people who blindly follow John Dvorak. Or had even stronger opinions against using CSS.

The arguments for sticking to tables astound me as there are so many reason to getting rid of all these useless <table> <tr> <td> tags. The simplest being a complete waste of bandwidth and also making the page more accessible and maintainable.

It amazes me how many people just stick to the trick they know and just do not want to learn new stuff. I think learning new stuff is one the great challenges but also satisfying pleasures of working in IT. You'll never stop learning in IT! I don't mean to say that you should learn ALL the new things out there. There is simply too much. No, one should take a look at the toolbox one has and then look to see if there are newer and better tools around and use the tools what they are intended for. You can hammer a nail in with the handle of a big screw driver but a hammer works way better.

It's wrap up

When you type with two or three fingers like I do you should not write an article about the special Dvorak keyboard and comment on the awkward places the keys have gone. But when you take the time to properly learn to type on it, it might be different story and then review can be valuable. Otherwise stay well away from it.

When you know little of CSS and browsers rendering it then you should not write an article about the CSS and comment on the awkward things happening to your page layouts. But when you take the time to properly learn to code in it, it might be different story and then review can be valuable. Otherwise stay well away from it.

UPDATE: I have written a new, longer post on what is and what isn't wrong with CSS.

Tags:

• dvorak
• css
• dummy
• humor

What's wrong with CSS?

.. or is there nothing wrong with CSS?

The article by John Dvorak on the PcMag website about hat's wrong with CSS has stirred up quite a bit of dust. Although, I think the article it self is pretty bad and flawed and lacks arguments and facts supporting its conclusion I feel there must be something that makes people comment with such vigor. Even I did already comment on it. Yeah, guilty as charged.

The comments are getting close to the eternal discussion why one OS is better than the other or why browser X is better than browser Y and why you are completely lost when you still use browser Z. But it still a flow of comments that stay within the normal way of conversation. No flaming yet. But hardly a discussion.

Still, there was some non-understanding flying hither and forth, but also there were some more or less valid points about CSS and what it is not so good at.

Dissecting the critique

When going over the article and the all the comments I rake out the following points.

CSS is good for formatting text

Yes, I do agree. Setting a font type and size is really smooth. You can define that at the top most level in your CSS and all text will be formatted accordingly. Yes, there are differences between browsers and operating systems, but we can live with that.

CSS is good for formatting text and nothing else

No, that is not the case. CSS can be applied to much more than just formatting text. It is quite easy to set background colors and images and define the way links behave when the mouse is hovering over it.

Although, this is really close to formatting text in my opinion. But the next point that was raised put my hair upright.

CSS should not be used for layout

I was never a fan of using table based layouts. To be honest, I missed that part of web design. I made some sites with frames and feel a bit ashamed to admit that. But for the most sites I made I have always hand coded them in a simple text editor and hand coding table based layouts is just short of Chinese Water Torture.

Layout with CSS has many possibilities. There are quite a number of methods to create a page with three columns and a header that looks the same, but has different XHTML and CSS underneath. There are some limitations, but for most of these there are solutions available. Many, many sites offer standard layouts with 2 or 3 columns with or without a footer and cover most of the used layouts that are out on the World Wild Web.

You can try to reinvent the wheel, but you do not need to. Go ahead if you like.

CSS is inconsistent across browsers

Well this is turning things around a bit. The different brands and versions of browsers do not render CSS the same way. A big chunk of CSS is consistent (the "text formatting stuff" mentioned before.) and some is not.

The text formatting stuff works across the board. Hence the perception that it is the only true purpose for CSS. But it also drives the point that when more browsers support the CSS standards it will possible to do more with CSS without all these hacks.

CSS is impossible to maintain

Because of all the necessary hacks and various ways to achieve a layout from almost the same HTML source it can become quite complicated to decipher a CSS file. Especially when multiple files are used and inherentence is (ab)used extensively and NO COMMENTS and no logic et cetera, et cetera, et cetera. Well, then you are talking about a badly put together CSS file. Made by a bad developer. You can best start all over from scratch.

But on the other hand when CSS settings are grouped and comments are used to identify the various sections and the horrible hacks then things become much friendlier.

Also maintaining code created by someone else should also mean that we should be talking about a development process with documentation. And yes, one should document CSS as well as other code used. I know, that would be a perfect world. In practice grouping and commenting code makes life for the ones who come after you a lot easier.

CSS maintenance and redesign are two separate subjects. If maintenance is close to redesigning a site, like completely changing column widths and order and a complete visual overhaul is not something that can be taken lightly. But it can be done.

When only a new widget is added to a website you should best start from finding a widget that more or less resembles what you are aiming for. Try to use the HTML as basis and then add some CSS to style the widget. With a well organized CSS file, things could then be a breeze. But if your CSS file is macaroni then you are in for trouble.

CSS Zen Garden is bad HTML and CSS

The CSS showcase site Css Zen Garden is great. It shows how you can have a site with the same HTML look completely and utterly different by just using another CSS file. Some of the designs are absolutely gorgeous and it is hard to understand that still the same HTML is rendered by your browser.

The Zen Gardener

The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.

And then you look at the HTML. Oops. This looks all over the place. This is not what we call semantic HTML. There are loads of empty <div>s in the code. Why?

What we must remember that Css Zen Garden is a showcase site. It shows what is possible using (clever) CSS. It does not show you best practices of CSS. It does not show best practice in HTML. It's a place for designers and CSS wizards to show what they can do.

I would not call it bad CSS and bad HTML, but it is not the proper way to use it in day to day practice. But it is great to look at what can be achieved with CSS.

There are problems, though

So, reading the following one can say that some time to thoroughly learn CSS and the browser quirks and using best practices in developing CSS, it is possible to use CSS to layout web sites.

However, some problems still exist.

Layout in columns is not in the standard CSS specification yet

Even though there is some support in CSS 3 this is very far from a standard (CSS 2.1 is still in draft) and browser support is (nearly) zero. One has to fall back on the various methods of laying out pages. These usually involve various extra <div>s wrapped around the content to position all the elements.

New CSS properties could potentially fill that gap.

There are hardly any tools

In the old days you could draw a page layout in Photoshop and then export a complete table based layout HTML file and that was that. You had a great looking page. Trying the same thing nowadays and hoping to come up with neatly set up semantic HTML and a separate CSS file that handles the layout of the page is Utopia. I do not foresee any WYSIWYG tool in the near future that can handle all well known CSS patterns, like for instance the Sliding Doors Principle.

HTML and CSS standards are lagging

There has been quite a bit of criticism on the W3C Org lately. One the points is that it takes so long for new standards to be ready. In the fast moving Internet world they are centuries behind the recent developments. Seeing that they are a standards body that have to deliver products for all kinds of machines and software that connect to the web it is quite understandable that it takes a long, long time to finish new standards.

But this slow progress hinders progress of all browsers manufacturers and software and web developers who want to keep improving the products they are delivering.

Conclusion

Yes, there are things not perfect with CSS (and the same goes for (X)HTML), but that does not mean that you should avoid it.

The pros win it from the cons by a long way, even considering it takes time to learn to apply CSS and the lack of good tools.

CSS is here to stay and it will evolve. And as always, evolution is slower than revolution, but it is also a smoother form of progress.

Tags:

• tcss
• tools
• shortcomings

Capturing the real world in microformats

.. taking the semantic web a step further

Only the very alert reader may have noticed that I dropped the word "microformat" carefully in my post about implementing the Google Mini. It is too much asking of anyone out there that this is a sign that I am slowly being won over by the movement that promotes the use of microformats on the web.

What are microformats?

Explaining the Big Idea behind microformats has been effectively covered by the wiki at Microformats.org, but to keep you here I will briefly pull a quote from said page: "Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards."

IMHO the main drive behind the microformats idea could be that there are over a million ways to markup data like business contacts and that they usually produce easily human readable information, but because of the varying underlying html it is hard for machines to understand what the data is about.

Chris Messina

Microformats are simple codes that you can use to identify specific kinds of data, like people or events, in your web pages.

How does it work?

Microformats are based on standard html tags that are improved by adding standard class attributes. In the example below there is the part of an hCard microformat that holds the postal code.

<span class="postal-code">8332 KS</span>

CSS can be applied to this quite simply to make it visual appealing to the human and the standard html can be understood by the browser or an extension / plugin that automatically can add the contact to the address book, start an email, make a call or shows the location of the contact on a map. Anything could be done. No cutting and pasting involved. Simply scan the page for the specific html tag with the class name and do whatever you like with the information found.

Search engines could also use this to automatically gather all sorts of information.

More benefits and drawback

The possibilities of giving more ease of use to the visitors of a page seem endless, but also for web designers / developers it means that there are more common solutions to common problems. More patterns.

Yep, here's a drawback, that means that after learning about CSS and all the browser inconsistencies and hacks and XHTML and unobtrusive JavaScript we know must also start to use microformats. It's the ultimate curse: you never stop learning in IT. But it is also one IT's charms.

A new standard is emerging

The microformats are not part of any W3C standard and I don't think they will ever be. The amount of critique on the W3C has been increasing lately. More and more voices are stating that they are getting more and more enstranged from the developers community that promoted standards based design. Likely, we will see more standards being developed out in the wild and slowly but surely these standards will be adopted by more and more developers until it is absolutely insane to not use them.

Now is the moment

For early adopters or people who want to get at least a sniff of things to come the time has arrived to start reading up on microformats and start implementing them here and there. Or maybe build a first Firefox extension that makes clever use of the data held in these microformats.

Go on you developers, go and do the right thing!

Tags:

• microformat
• semantics
• web
• xhtml

I don't like Mondays

.. but there are exceptions

Coming back to the office after a long weekend spent DIY-ing around the house I looked at Google Analytics for this blog and noticed a little spike in the visits. This usually happens after a new posting but this time there was some days delay.

I appeared that my post about the Google Mini implementation was picked up by Rodrigo Vaca from the Official Google Enterprise Blog. I found a lot of hits coming in from the article: Rob, we're glad you had fun.

Wow! I feel honored! Yep, it was fun and today I will be setting up the test environment so within a week or two things should be live.

Tags:

• Google
• honor
• blog

Implementing a Google Mini

.. if only everything in life was this simple

The Google Mini implementation together with a redesign (or rather re-alignment) of our website will be put in production on the 24th October. It took longer than this post suggests because of other higher priority projects that were implemented in the past few weeks. But hey! It is coming at last.

As briefly mentioned in my previous post I am working on the incorporation of a Google Mini appliance in the Univé website. I will go into this a little bit more detailed.

Side stepping

I am a sort of a DIY-person. I like to do things myself. That means most of the time that things take longer before it is finished, but when it is finished the feeling of pride and self esteem pays for that. Also along the way of any of these DIY projects I get to stages that I have to do something new with some new tools or materials. Most of these have words on the packages like "can be assembled in 5 minutes" and over time I have learned that that is the moment to be aware, to be very aware of pit falls. Usually I have picked something to use it in a slightly different way or want to use it inside a small space so it is impossible to use a screw driver to fasten it.

I think that these problems are directly related to my lack of skills, because usually (after some tears and sweat from me and cursing the people who ever designed the stuff) I can use it for the purpose that I had intended. I think of myself as a reasonably well DIY person.

The same applies in my IT skills. I sometimes wander about and pick the wrong route at first, but usually I get stuff working, again after some tears and sweat from me and cursing the people who ever designed the stuff.

But these marketing words: "up and running in NO time" still put me in a special mode. When something can not fail I know it will.

Stepping back

So, when we had wheeled in the Google Mini appliance I was ready for weeks of administering and tweaking to finally get some search results on my screen that vaguely would like what we would want to see.

I know I have been very enthusiastic about the stuff coming from Google in the past months, years and maybe it seems like I am a blind follower of the company at Mountain View, but I am not. But I am of the opinion that have created some very good stuff in recent years. And when they haven't created it themselves they give it a twist by presenting it for free, like Google Analytics.

Back to the topic

After these lengthy opening paragraphs I am now returning to the subject of this post: implementing a Google Mini.

During the build of our new website we had dropped search as one of the deliverables for Go-Live. It was postponed to the Point One Release. You can have a nice long discussion about that, but don't bother we did as well and management decided to drop it and so we did.

We had acquired a Google Mini to facilitate the site search and had it hanging in a server rack for a couple of months gathering dust, but once we were ready for launch I was given time to explore its potential. I must admit, that I was a bit afraid to have a stab at it. To me it was a black box (although it's happily blue) and I did not see an opening. And misplacing the manuals was another hurdle we had to take and after some Googling on Google we found a way to download the stuff and have a go at it. Then a colleague opened his drawer and said that he had secured the manuals. Sigh!

Initial setup

The first things you have to do is some basic setup like giving a IP address and an administrator password. This was done very simple using a laptop connected directly to the box. Then using the web interface it was really easy to configure the crawling and after the first crawl see the first results through the familiar Googlish interface. Tweaking a bit of XSLT brought out the company colors and logo and I was ready to be enthusiastic again. This machine would provide an easy site search for our website. And so we moved on.

Integration into the site

Well, we did not want to give visitors direct access to the Google Mini, but we wanted to really integrate search into the site context. We have added a search box to our menu bar and created a new search container or template. Communication with the Google Mini is managed through a Web Service.

Since, the Google Mini already came with an API it was relatively simple to set this all up. Cutting some corners we decided to stay with a plain search screen and leave out the advanced bits for the moment. This meant that we needed a simple Web Service method that would only take a string as the search query. Added to that we wanted have navigation from one page of search results to the other and we another method was needed for accepting the (more complex) query with page indication and the like. This second method was also used for the spelling suggestions and the keymatch results (aka Sponsored Links).

Communication with the Google Mini

The Google Mini API is very simple in nature. All one needs to do is build a long URL with query parameters and you are provided with XML string that holds the outcome of the search request.

The XML string is then returned to the site and there it is loaded into an XmlDocument and then parsed using XPath queries and presented to the visitor in simple XHTML.

Presentation to the user

First of all, we did not want to reinvent yet another better wheel. We feel that Google does a great job of presenting search results. But being a web developer I also know that the code used to produces the list of results is not exactly what we call modern or semantic web design.

So, we liked what it looks like on the outside and decided to change the inside.

Show in the screen shot is part of what the page will look like. The similarity with Google search result pages should be obvious. We even have space for AdSense ;-)

The search results are presented in a <dl>, with the linked title in a <dt> and the snippet from the page in a <dd>. This seems to me a reasonable microformat for this purpose. Keeping the pages lightweight was and is one of our primary goals.

Looking back

When I now look back at this project (just before it is moved into the final test cycle and put online) I think that we did a great job. And the Google Mini is a great way of providing site search. Implementation went smooth and the only challenges were again in getting the .NET Framework work as we want it to work.

The Google Mini once configured does not need any real maintenance. If the machine should lose it's complete settings and database then setting it up fresh and let it crawl our site can be done within an hour. The Google Mini really lives up to its expectations. It was great fun to do.

Looking forward

After putting it in production we have a very strong tool for our content writers to see how a search engines sees our site and how Google presents the results. I plan to work with them to make the site even better than it is already.

In that way the Google Mini will work as a benefit by providing search to the visitors, but also as a tool to improve the search engine performance of our site. Not bad for a little blue black box.

Tags:

• Google mini
• corporate seach
• site search
• xhtml
• xml
• webservice
• microformat

Been busy lately

..no time to blog

The last few weeks have been weeks with enough work, unlike the weeks, months before. I have been fixing minor issues with the new website and also working on some new extensions for it.

If all testing goes well we'll soon move to an 1024px based layout instead of the present 800px width. Also in the same release the site search will be brought back to the site. We already had search on the old site, but during the build of the first release this was delayed in favor of other features. But now it is coming back in full force: I am implementing a Google Mini.

And apart from that I am busy finishing my home office and that is getting close to completion. I have taken a couple of days off this week to race the final stretch to the finish line. I should be in business before next Monday.

So that's the reason why I have been slow with writing posts. Hopefully, I will find more time in the next weeks. I think I will as the workload is drying out again as some projects have already been postponed.

Tags:

• busy
• Google
• office