From WordCamp Norway 2012, earlier this year, an awesome presentation by Wilhelm, who takes us through the world of responsive wed design. It isn’t something new, I agree, and as he mentions media queries have been around for over 10 years. However, it’s very nice to catch up on things, since a lot of WordPress theme developers are still overlooking all of this.
One important aspect that Wilhelm mentions is that your printer is a device as well. Nothing to do with media queries, but reminds me of the importance of the print stylesheet. Also to keep in mind is that responsive doesn’t necessarily mean device, but the browser width too. It’s nice if you can shrink your browser width and still be able to read without scrolling left and right, I wish we had this in the PHP functions reference and the WordPress Codex — would save me a bunch of Cmd+Tab hits back and forth.
Anyway, how are you using responsive web design? What are your favorite examples? What grids and/or CSS frameworks would you recommend for responsive web design? Have you tried changing the browser width on my blog? Thank you for taking the time to read/watch this, and feel free to subscribe for more goodies!
Hi Konstantin,
I like the responsive work of elmastudio. Ellen and Manuel offer free and premium WordPress themes [1].
Moreover, Ellen’s blog about responsive web design (German) is a good read.
I personally like the theme Nilmini which I’ll use for my site.
[1] http://www.elmastudio.de/wordpress-themes/
I’m a fan of their Yoko theme, and have used it as the parent theme on a few projects. One problem though is that, at least in Yoko, they embed an import in the CSS file to import the Google font, and if you want to use a different font in the child theme, or not use Google fonts at all, that can be a problem. A different technique for using Google fonts in that situation is described here: Using Google Web Fonts with WordPress, the Right Way
I’ve been using responsive web design exclusively this year, and have tried many different grids, CSS frameworks, and techniques. One of the main issues is testing. I’ve heard good things about browserstack, although I believe that you have to have a paid plan in order to test the mobile device sizes. I eventually used the Responsive Design Testing project by Matt Kersley mentioned in the article “Twenty Useful Tools for Responsive Web Design“.
That article also has a number of grids and other resources people might find helpful. Note that the original GitHub repository might be a little behind some of the forks.
Also, something that is becoming an issue is serving high-resolution website images for retina displays. A couple of resources that might be of interest are: Website Design: How to serve high-resolution website images for retina displays (new iPad/iPhone4) and a slightly older article: Supporting high-dpi pixel-dense “Retina” Displays like iPhones or the iPad 3 with CSS or IMG.
Hey Michael, wow that’s a bunch of useful links you have there, thanks so much for sharing these, I really appreciate it!