I’ve been playing a bit with CSS3 Media Queries to get this blog’s layout adaptive. I’m not going into the details because I used a trial-and-error process and I’m not yet 100% sure everything works. I considered these aspects:
- the sidebar with the bio, archives and so on is of least importance, so it’s hidden when the viewport is smaller than a certain size
- some elements are hidden with the same criteria, most notably the Twitter, Google+ and Facebook share buttons (which are also not rendered at all on mobile browsers to save bandwidth and processing power, and it shows, even on a dual-core Android 4 device)
- some elements are moved, or their style is changed (post date/time, search bar)
- main margins are reduced to save space on smaller screens.
To experience the result even without a mobile device, simply resize your browser window. In case you’re lazy, this is the result: