I decided to tear down the heavy javascripting I have been doing lately and dove into CSS3 and HMTL5 again. This website is the result of that research.

I attended a great presentation by Vasilis van Gemert that inspired me to use the new layout techniques offered by CSS3. Vasilis talked about the transition of fixed websites into scalable (fluffy) websites that are very flexible and work on multiple devices and resolutions.

I realized that there is great power in using @media-queries and a percentage based layout. Try resizing your browser window right now, and see what happens. Note that IE6/7/8 cannot handle this nifty stuff so switch browsers if you have to.

When you buy a new (desktop) computer nowadays, you usually get a nice big screen. So, next to making this website work on small screens, I also wanted to give people a full-window experience. The bigger your screen, the more wide and fancy the website.

For now the maximum width is 1900px. I used HTML5 markup for the layout and outline. The columns are styled using "inline-block". This was a sweet find because I didn't have to worry about float and clearfix problems anymore! In this case it's just bad luck for old IE users. This is my personal site and I want to be able to experiment with innovative technologies.

Is this the perfect solution?

You hear loads of people that say that @media-queries solve 'all' our problems. With this new magic niftiness we can build 'one' website that works on all screen sizes and devices.

But what happens when we use this technology is that we actually add more code in order to optimize for small, mobile devices. That's a little weird don't you think? Especially when we all know that speed matters a lot on mobiles.

I read a great article on fluid images by the Ethan Marcotte. In this website I used a small bit of the techniques described by the Ethan. Every image scales when you resize the browser. This very fancy stuff on one side. But on the other side it's a bad practice. Why load big images that get scaled down when you visit the website on an iPad or HTC device?

Why did I use fluid images?

Because I did not design a dedicated mobile site. I made a site that looks good on most screen resolutions. This way my visitors do not have to zoom in. I actually use 'display:none' for images when you visit this site on a mobile device with a screen-width of 280px.

If you think about that, it really is against the 'speed matters' rule for mobile websites. Luckily this is a very simple layout with hardly any images and it's backend system is the fastest I've ever seen (Zotonic). So, no problems in the speed- and data usage departments.

A final tought

I have one final thought on just using @media-queries to transform your site into a mobile website. This is also mentioned in several articles on the wobbly web and by developers around me.

You should show different content on a mobile device then on a desktop screen. The mobile context is way more hands-on and goal focused. For example when you want to check the train times when you are running towards the station with a coffee in you hand. At that moment you do not want the corporate history of the train company in a slideshow on the homepage. You need those frakking departure times!

@media-queries are a great aspect of the responsive design movement out there. I love the fact that we design for multiple devices and think about the future. I hope to see more examples of experiments like mine and would love to see some best practices on responsive design of websites.

The future of web development is a bright one and I love to being a part of it!