My Responsive Web Design workshop at Smashing Magazine is getting closer and some tickets are still available. In the meantime, here are three useful new resources for responsive layout using CSS3:
Blog And All That Malarkey
Since 2004, our blog’s been a favourite destination for designers and developers.
◎ Stu Robson’s Sass Media Query mixin
An interesting media query mixin that also deals with legacy Internet Explorer. I need to play some more, but this looks promising as a better solution than mine for Rock Hammer.
🔗 Smashing Magazine: Goodbye, Zen Coding. Hello, Emmet!
◎ This could be most essential CSS3 media query you’ll need today
We know that it’s only web designers who habitually resize a browser window to see if a site’s responsive. But why not reward their dedication with a little something special? Add this to your stylesheet:
@media only screen and (min-width: 960px) and (max-width: 970px) {
body {
-webkit-transform : rotate(180deg);
-moz-transform : rotate(180deg);
-o-transform : rotate(180deg);
transform : rotate(180deg); }
}This could be the most essential CSS3 media query you’ll need today.
🔗 Louis Lazaris: Modular CSS with Media Queries and Sass
This couldn’t have come at a better time (for me.)
◎ Quotes & accents (& Dashes) and TextExpander
Jessica Hische made Quotes & accents (& Dashes). Remembering keystrokes for these characters is hard, but for me remembering character entities is downright impossible. So I made TextExpander do the remembering for me. Here’s how I did it:
🔗 CodeKit and The Kit Language
You should know by now that I’m a huge fan of Hammer For Mac. I couldn’t and wouldn’t start a project without it as I’d miss its variables and partials and includes too much. I like Hammer so much I moved from LESS to Sass because of it.
If you’re a CodeKit user — and many are — you can get some of Hammer’s functionality in that too. I haven’t had the need to try CodeKit and The Kit Language myself yet, so I’d be keen to know if you have and what you think? Let me know on Twitter @malarkey.
🔗 modern.IE
Testing on all versions of Internet Explorer will be much easier from now on thanks to their new suite of testing tools, modern.ie.
The included tools look impressive on their own, but the website is also full of helpful information. Scanning this site revealed not only that I’m running an outdated version of jQuery but that I can help Windows 8 touch users simply by adding canvas {
-ms-touch-action: double-tap-zoom;}. Handy.
If you don’t develop on Windows (I don’t) Microsoft are offering three months BrowserStack virtual testing free. I’m baffled by the fact that to get the free offer I have to login using a Facebook account (that I don’t have,) but BrowserStack have their own (shorter, I think) free trial.
Hats off to Microsoft. modern.IE may just let me ditch the 63Gb of virtual machines I use just to test Internet Explorer.
◎ Patting myself on the back
After I boasted how nice my site looks in IE10 on a Microsoft Surface tablet (it really does), Grant Hutchinson thought he’d put it through its paces on an Apple Newton MessagePad 2100. Turns out it’s not too shabby.
🔗 Brett Jankord: Cross Browser Retina/High Resolution Media Queries
Good work by Brett Jankord:
You can replace, the min–moz-device-pixel-ratio, the -o-min-device-pixel-ratio with a resolution media query. You can also just remove the unprefixed min-device-pixel-ratio.
◎ Seven
You might think — because all the talk at the moment is about seven inch tablets, in particular the iPad mini vs Google’s Nexus 7 vs Amazon’s Kindle Fire HD — that a seven inch tablet was a seven inch tablet was a… Right? Wrong.
◎ Labeling home screen bookmarks for iOS6
Speaking of proprietary Apple meta elements, here’s a little gem for labelling a site’s home screen icon on iOS.
◎ Don’t confuse design testing with device testing
There’s been a lot written about device testing over the last year. Jeremy instigating open device testing labs has rightly generated a lot of column inches like Smashing Magazine’s Establishing An Open Device Lab. However, I think we need to be clear just what we mean by testing.
🔗 Mobitest
Brad Frost mentioned Mobitest during his talk last week at Smashing Conference. I’ve becoming more aware of performance issues these last few months, and tools like Mobitest can only help me do better. (This site’s home page, crammed full of retina quality bitmaps, weighs in at 649.36kb and 10.22s average load time. I need to halve that. At least.
◎ About those long line lengths
Thank-you to everyone who tweeted and emailed about the site. The reaction was overwhelmingly positive. More than I’d hoped for. And I’d hoped for a lot. Some of the comments came with bugs I need to fix and suggestions for improving the site and its performance overall. I’m really grateful for that. A little bit of follow up from yesterday’s site launch.