Scarf*oo

Recently at my daily job I had the opportunity to work on a 100% fluid layout for a project management web application. During the process of cutting it up in XHTML and CSS, I learned a lot and definitely had a lot of fun moments while making it backwards-compatible with IE6. This article is a collection of insightful ideas and those moments I collected through the development of the project.

(more…)

“We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously.”
– Dean Hachamovitch, General Manager Internet Explorer

So the flames have extinguished? Read more on the subject.

After nearly two years of development, the WCAG Samurai Errata - corrections to the Web Content Accessibility Guidelines (WCAG) 1.0 - were finally released to the web development community three days ago.

The reason for the update is because version 1.0 was originally published back in 1999 and in that time both web browsers and assisting technologies have evolved considerably.

Note that the WCAG Samurai Errata is not a standalone document, you should really use it as an update along the original WCAG 1.0 guidelines.

Also note that there is a Web Content Accessibility Guidelines 2.0 working draft available, lastly updated in December 2007, which you should consider to use over the 1.0 counterpart.

After a week of unstyledness SimpleBits got its new dress and what does it bring to us followers of best web practices? Two words: elastic grid.

While Scarf*oo adopted an em-based layout last month, Dan shows us how to do that to the perfection using the 62.5% method for sizing text, which basically lets you work with a human friendly 1em = 10px font ratio.

Congratulations Dan for yet another simply beautiful redesign.

And what about you respectable readers, have you jumped into the bandwagon of “gridlasticness” yet?

Sooner than later we may be dropped into a world of version targeting and forward compatibility, when it comes to web development. The basic idea is to use a meta declaration to specify which browsers and versions our web page intends to support. For example, writing:

<meta http-equiv="X-UA-Compatible" content="IE=7;FF=2" />

… would say that our page was tested and works on IE version 7 and Firefox version 2, for example.

Now, the problem I see here is in actual browser support for backwards-compatibility rendering. Do we really believe that once IE 10 is out, our IE=7 will still work? If you ask me, this is a recipe for failure.

Read more on the subject on alistapart.com, for some enlightening articles on the subject.

So you have designed a beautiful and usable menu, provided breadcrumbs to backtrack your steps, designed a “you are here” marker, but your site is growing fast, providing hundreds - if not thousands - of pages of information. In that case, you might want to give your users something more - you might want consider implementing site-wide search. While many sites nowadays implement some form of search, it is surprising that only a few do it right. In this article, I’ll try to show you some common problems, and how to avoid them when implementing a search facility on your web site.

(more…)

Finally, I managed to create a custom theme for my blog. I opted for a darker clean look, which is based on percentages for both fonts and layout, so it scales nicely on a variety of screen types and resolutions.

It is not perfect yet, but I believe good enough to go live… I’ll be tweaking it as time permits.

If I could, I’d give you a special present this christmas - I’d tell you how to make IE on Windows behave like a grown-up browser. Sadly, reality sucks - as does IE on Windows - so I can only offer to share with you a couple of CSS tips to ease the pain of working with that piece of crappy software.
(more…)

I believe I owe some people a beer or two now that hell actually froze over. Believe it or not, but the current milestone of internet explorer 8 passes the unforgivable ACID2 test with full votes!

It seems the future of web innovation is a popular topic nowadays, as Alex Russel points out in his scortching hot “The W3C Cannot Save Us” Article. In the article, Alex pours down hot oil on standards working groups and incites browser vendors to stand out with new non-standard features as a means to get them recognized and standardized eventually.

Along those lines goes James Bennet with his elaborate essay The future of web standards, and I am pretty sure we are not over with the drama yet.

Now let us just cross our fingers and hope that all that stirring actually produces something edible in the foreseeable future.

Sometimes you need to use fancy fonts to represent a title or name a section on your web site and the usual bunch of browser-available fonts won’t do, because it is too limited. Traditionally you would create a good looking image in a graphics program and include it into the code as an image and append an alt attribute to it containing the title itself. While this is probably the most straightforward way of doing it, it has several disadvantages:

1. Images do not scale when you increase the text size
2. With images disabled in the browser, the meaning of the graphics gets lost most of the time, the alt tag helps of course, but is often not enough.
3. Somewhat related to the previous point, to the browser an image is just that — an image. It does not convey any information on what it represents, like for example, an html title element (h1, h2, h3, …) does.
4. Graphics-based text is not searchable.
5. Graphical text is not selectable.

(more…)

It looks like christmass came earlier this year, because Ruby on Rails 2.0 — 2.0.1 to be exact — has been released. A huge thank you to the Rails team is in order!

I am pretty sure that every web designer found himself stuck with one or more of Internet Explorer’s annoying bugs and usually he ended up using css hacks to isolate the problem(s). Well, I believe hacks should be used with caution, if used at all, since you never know what adverse effects it may have on your web site with future browser updates.

Fortunately IE developers provided us with a neat solution to this problem with conditional comments. Just what are conditional comments? Basically they are common html comments with an extended syntax. They are completely transparent to all non-IE browsers, so they validate and are much more future-proof than hacks will ever be.

(more…)

While far from finished, work on the next spec of HTML is rapidly progressing. The new draft brings lots of new elements to define a document’s structure, which must be currently defined with ids and/or classes. The spec also aims to simplifiy multimedia embedding, it features a direct-mode graphics canvas, server-sent events and lots of other goodies. Read the article at A List Apart.