.mindgarden is the digital playground of marc tobias kunisch

.opinions on this website are in not necessarily those of my employer

.send an email to info 'at' mindgarden 'dot' de

.follow the mindgarden on twitter @mindgarden_de or @tobestobs
.occasional guest bloggers are @lwsrc, @dheeva and @idrathernot


On Problems

I was part of a discussion with an esteemed friend of mine recently. My argument being that responsive design is great and that we should consider using it on our own pages.

His view of things was that as long as there is no problem with how we currently do things then we shouldn’t come up with a solution.

This premise that every change in how we do things needs to be triggered by a problem that needs solving to me is a very depressing thought. Of course it’s very easy to come up with all kinds of problems that suit pretty much any solution (to stay in the terminology). But I don’t think that is what he has in mind as he probably wouldn’t let “pages as we build them now are not as good as they could be” count.

Where my philosophy differs is that things do not have to be broken in order to try to make them better. I don’t think Mercedes would claim there is a problem with their cars. Still they aim to make them better with every iteration. The same should be the case for the web sites we build.

When I sit down to build a website I try to build the best website possible. That’s called quality. Good enough is boring. I don’t think I’d be doing what I’m doing if my professional life would consist of waiting for problems to arise and then fix them.

What’s great about what I’m doing is that there’s inspiration all the time. Sometimes it’s almost too much. Things are moving and getting better. And technologies are still evolving in a medium that’s still in it’s early days. People are coming up with new techniques all the time. Some are useless. Some are just not a good idea (why would I want to build an iPhone icon with CSS for example?). But it is good this is happening because inbetween there are great ones. This makes the web better in general.

To look at the example of media queries and Jon Hicks in particular, it is easy to say “oh, I’ve used media queries a long time ago” (I’ve done that here on this blog ) or “this could have been done using floats”. The point is doing so doesn’t make this less inspiring to people. It doesn’t make it less of a good idea.

I think media queries are a great step forward. Not a solution but an innovation. And one that makes sense as well. It would be narrow minded to ignore the bigger picture of how the web is changing to be at home on a much wider scale of devices. And if you absolutely have to think in negatives in order to to something positive, here’s a problem:

Websites as we build them now don’t work well on devices that are not a desktop or laptop computer.

[update:] I got Mr. HIcks’ first name wrong in my post. I just corrected the mistake. Apologies to Jon Hicks, mistakes like these shouldn’t happen.


Using CSS3 media queries to achieve multiple columns on browser resize

For the new mindgarden layout I’m using the CSS3 module called Multi-column layout in combination with Media Queries.

This means that if you have your browser at a relatively small size you are presented with one regular content column. If you resize you browser window to more than 1008px though this changes and the column is split into two. For window sizes wider than 1440px the content is split into three columns reminding a bit of a newspaper layout.

screenshot of the layout with two columns

the media query part

This is how the W3C spec (rather elaborately) describes media queries:

By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

Sounds more complicated than it really is. Here’s the CSS that I’m using for my layout:

Firstly I’m setting my default styling for my element.

.entry-content { ... }

Nothing unusual or surprising here. But then I want to specify some styling for larger window sizes.

@media all and (min-width: 70em) { .entry-content {... } }

I’m using “@media all” as I want to apply my rules to all output devices (screen, print, etc.). The min-width part is used so it only effects windows that have a minimum width of 70em.

Then I’m doing the same again for even larger windows.

@media all and (min-width: 100em) { .entry-content { ... }}

multi columns

So far so good. Now we have the means to differentiate between different browser sizes. Let’s use this to do some column-magic. Let’s add some style rules:

.entry-content {
font-size: 1.2em;
line-height: 1.8em;
color: #444;

Again, no surprises. Alas, here come the columns:

@media all and (min-width: 70em) {
.entry-content {
-moz-column-count: 2;
-moz-column-gap: 4em;
-webkit-column-count: 2;
-webkit-column-gap: 4em;

First of all, notice the namespaces used for Firefox and Safari. CSS3 is not a finished standard yet and for the time being this is how browser manufacturers like to implement CSS3 features. If Opera supported the multi-column module there would be something like “-o-column” as well. Unfortunately this feature hasn’t made it into Opera 10.

Creating our columns is quite simple. column-count marks the number of columns specified and column-cap the with of the spacing between them. The available space is distributed accordingly. Notice how the copy text flows from one column to the next when you resize this browser window.

I could have uses column-width instead to get a fixed with for my columns. Then the browser would have generated the number columns for me. There’s also column-rule which I haven’t used. With column-rule you can create a border in between you columns.

@media all and (min-width: 100em) {
.entry-content {
-moz-column-count: 3;
-webkit-column-count: 3;

For really large window sizes I’m adding another column here. I don’t have to repeat my rules for the column-gap because if my window is wider than 100em, it is also wider than 70em and those rules get inherited.


Safari cutting off the images

Unfortunately, Safari isn’t playing along entirely with my cutting-edge-css3-goodness-showcase. Browsers that don’t understand media queries or multi-columns will just degrade gracefully and show the one default column. Safari on the other hand will display the columns just fine as long as you don’t use images or embedded flash content.

If you use images or flash in your columns Safari sometimes has the nasty habit of cutting them in the middle and showing one slice in one column, the other in a second.

example of a sliced flash movie

There’s already a ticket created for this in the webkit ticketing system So far I couldn’t a workaround for this so let’s hope it will get fixed soon.

No support for column-span

A good way to prevent the Safari bug from happening would be to use column-span that is part of the CSS3 spec. Similar to col-span for tables column-span would make it possible to say for example

h2 { column-span: all; background: silver }

example for column-span
(example from the W3C document)

Unfortunately column-span is not supported in any browser yet.