« Introducing Teppefall DevGrid | Main | A test too far »

Designing for touch devices and HTML5

I forgot to mention it, but Teppefall DevGrid looks the way it does because it has been designed for mobile devices and tablets.

The clue to getting it right is this HTML meta tag:

<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0"/>

You also need to use min-width and max-width CSS values instead of fixed values and sometimes use percentage based layout that floats to the left. I also add extra CSS if a mobile device is connected to reduce vertical space requirements. Overflow rules are used to hide wide images.

Check out Jan Erik Paulsen on Twitter.