Archive for the ‘css’ Category

The Adaptive CSS Zen Garden

In my talks and workshops about responsive web design and adaptive layouts I always take some time to take a look at CSS Zen Garden, since a part of building an adaptive layout is based on the same principle as the Zen Garden has been promoting all these years: the same content can be styled differently by using CSS. I always wanted to make a version of the CSS Zen Garden where a different layout is shown on every different resolution. I never built that thing because it would be way too much work for me, I’m not a very good coder.

Today I talked about this idea while I was giving a workshop. From that moment on Roy Tomeij, who was attending, was more silent than usual. Ten minutes later he interrupted me with this masterpiece. Ladies and gentleman, I present you the Adaptive CSS Zen Garden. Resize your browser window at your own risk!

Design for users first, not just for good looks

I’m beta testing a new real time analytics app and it looks absolutely beautiful. A subtle design, a clear navigation, nice looking forms and some clever looking scrolling effects which remind me of framesets, just better looking. So far so good. I bookmarked it, imported the url into iCab on my iPad (my favorite browser for managing online apps) and logged in to change the settings while lying on the couch. This is where the happy part ends. I really tried to make this a positive article but I just couldn’t. Sorry.

Rant starts here

Scalable gradients without the performance issues

While working on an extreme css3 test- and show case I found out that there are some issues with the new css3 gradients. First of all, the syntax is harder to remember than the xhtml strict doctype but more importantly, since there are tools to generate these gradients, these gradients are a performance issue: scrolling can be sluggish. But still, somehow webdesigners want scalable gradients so I came up with an alternative solution: using a png in combination with background-size.

Sure this technique is not as flexible as the css3 notation, every change to the design of the gradient means firing up a pixel editor, building the new png, saving it, turning it in to a data-uri and copy pasting that code to your stylesheet. But if you’re sure about your gradient this is a fine way to build simple scalable gradients. I’m sure that with some clever slicing and tiling and with the help of multiple backgrounds more complex gradients are possible.

Now, browser support. This works in all modern browsers but it doesn’t work in older browsers like camino 1.6 and all versions of IE before version 9. If you agree that websites don’t have to look exactly the same in every browser you can easily hide the png for these browsers by setting its background-position-x to something negative and its background-repeat to no-repeat.

Display everything

I just discovered a nice feature for minimalist frontend developers. You can use all elements with content for styling simply by using

* {display:block;}

Or display inline, or table-cell or whatever. All elements, including title, style and head can be used for styling now. Have fun with it!

(I have only tested this on FF3.5 and Safari. I guess it works on more browsers).

Centered images in the middle of a block without (total) loss of usability

The designer wants all images to be centered inside a square box with defined dimensions. The longest side of each image is the same length as this dimension but the smaller side is unknown and variable. Easy you say.

<div style=”background:url(path/to/image-w100xh75.jpg) no-repeat 50% 50%;width:100px;height:100px;”></div>

Easy it is. Unless the usability expert comes knocking on your door. Background images don’t behave the same as normal images. In most browsers, for instance, you can’t easily download a background image by right clicking on it.

So you do want the background positioning but you also want some important behaviour of a normal image. Here it is: Centered images in the middle of a block with normal usability.

It does not work in fluid or flexible layouts of course. But it does work in all serious browsers and in IE7. Haven’t tested it in IE6 but there’s no reason it wouldn’t work there. I’m not sure if it creates a performance issue. The images are downloaded only one time, so that’s not an issue. The only problem might be double memory usage. I haven’t tested that.

Equal height boxes with flexible widths

My design buddies @work came up with one of the most complex layouts I ever had to build. You could desribe it as an elastic layout with boxes with a flexible width which should have the same height as it’s siblings. With rounded corners and dropshadows offcourse. But that would be too easy a description. There are templates with 2, 3 and 4 boxes next to each other and these boxes can be contained within containers with different widths. A cynic would ask me why I didn’t use tables and he would be right. It might have saved me a lot a hassle. But forget about tables.

Ok, no tables

Using position:absolute to avoid inline styles

A few weeks ago I upgraded an old Pivot weblog to the latest version of WordPress, a weblog system which is a bit more flexible, I think. One of the things I dislike though is some of the HTML that comes out of it’s core functions. For example an image with a caption.

The known problem with an image with a caption below it is that it is impossible to make the text as wide as the image without setting the width of the image on the caption.
This is fascinating!