Champagne
Pedaling in the dust of rocket designers such as Ethan Marcotte or Andy Clark, I made this website's layout react to your browser window's width. If you play with the resize handle, you'll figure out what that means it if you haven't already. If nothing happens, download and use a modern browser. Blondes will smile at you in the street. It's very heartwarming, you'll see.
Through the use of the mighty CSS3 Media Queries, three different layouts are at your disposal on the desktop (design choices will be detailed in a coming post). If you use an iPhone or an iPad, lucky you : there's a layout for each orientation of these two devices. I'm aware this looks Apple centric and not really opened to other existing terminals, but if I had some other mobile devices at my disposal I would have worked to ensure a compatibility towards them. If somebody in Paris is reading this and owns an Android device, I'd be happy to have some feedback and/or borrow some minutes with the device. Same goes for the "Retina Display" optimizations : they won't be there until I get a hand on one. My birthday is coming though, there's hope.
Anyway, every layout was optimized for your reading comfort. In the case of the iPad, I made sure that there was a sufficient margin on both sides of the text for comfortable thumb swiping, in either orientation.
It still needs polish, but I needed to publish. Improvements will happen, iteratively.
Here are some useful links I found while putting this all together :
- A list apart : responsive web design – the article that started it all, with one excellent illustration.
- Safari reference for web content – essential if you want to understand how web pages are rendered on the iPhone/iPad, and what you can do to control it.
- Fonts for iPad and iPhone – nice and handy list of fonts available for both platforms. I was going to go for Palatino bold on the headings, but does the antialiasing sucks on the iPad for this one.
For any comments, please use the Twitter, thank you.