Smashing Daily #16: Money, Approval, Devices
Icon designers, performance nerds and people who are looking for a new but acceptable responsive workflow should definitely read edition #16 of The Smashing Daily. The rest? You will probably enjoy the animated CSS Zen Garden, you might enjoy a post about a curl and you’ll definitely learn a thing or two about developing good cross-browser websites. Enjoy!
Performance is important for everybody but it always seems a bit like an abstract thing: can you actually measure how important it is? Luke Wroblewski collected some stats that show how performance is clearly a great influence for e-commerce websites. I would conclude that performance should be a major part of your design strategy.
“Name that mark: the “approval curl”2”
The ever interesting Shady Characters blog has a whole post about the approval curl, a curl that I’ve seen a lot when I was a kid at school (although others have definitely seen more… I was always a lazy student). I never gave it much thought, it always seemed like a logical thing to me, with unknown origins. Keith Houston takes a look at it. There are a lot of theories in the comments, but none give definitive answers (I think). Maybe you know it?
“Some lessons learned while creating a cross-device design4”
James Abbott argues that content first is the right way to go and not mobile first: you should be thinking about all devices and screen sizes when designing. Another thing he argues is that you should follow established principles of print typography. I agree to a certain extent with that opinion, but I do not agree with the conclusion he draws. James concludes that the line width of an article should be a fixed size, while he explains that the ideal width is actually a range. A range is easily created using percentages: that’s a great advantage the Web has over paper, an advantage we should be using. I understand that it’s hard to think in percentages when you’re used to pixels but that’s not a good reason to create second-best designs. One of the problems with fixed sizes is clearly shown in this example he links to5, which actually breaks apart on many resolutions. I’m not sure what’s good about that.
“The iOS App Store Runs on Web OS6”
Here’s an interesting screenshot from the iOs App Store viewed with a flaky internet connection: most of it is built with Web technologies. This is interesting for several reasons and Jason Grigsby explains most of them in this comment7. Performance is another good reason: not all assets are always downloaded, which can result in unexpected layouts.
“Optimizing content for different browsers: the RIGHT way9”
Somehow a lot of developers still have a hard time supporting different browsers, even though we’ve been doing that for over 20 years now. Here’s a good article which explains the different ways to tackle different cross-browser issues. The part about progressive enhancement is too minimal for my taste, but apart from that, it’s a great read and a great resource—a definite must read.
If you want to support complex multi-touch gestures on touch devices, this library might be what you’re looking for. The issue with a library like this is that most of the time you only need one or two of these gestures, not all of them. It would be great if this was set up in a modular way so you can pick and choose what you need. But the good thing is that support for different browsers is actually pretty good; it’s not just another iOs library!
“We’re in an icon-sharpness limbo12”
With the rise of retina displays we suddenly have a new problem: images look blurry on these shiny new devices. Two often-heard solutions are using icon fonts or using SVG. Simon Uray shows us that both solutions do not result in the sharpness you might expect. I think that not all has been said about these technologies—more people should experiment with SVG and publish about it, as there are probably many more possibilities with it than what we already know. Paul Boag wrote something about this issue too13.
“Common mistakes that broke Launchpad’s browser compatibility14”
Many developers don’t want to support older browsers, they say it is a waste of time. Curtis Hovey argues that most of the time an attitude like that only shows the complainer is inexperienced: if you understand the problem most of the time it’s not so hard to fix it. Often fixing the problem is even easier than writing an exception for old browsers. A great read with some great tips for determining the exact problem and finding the right solution. A must read for all Web developers.
“An Animated CSS Zen Garden: The Beauty in CSS Transitions15”
Oh wow. The CSS Zen Garden has been of great importance, and a huge inspiration for most Web developers who have worked on the Web for over ten years. Many silly things have been done with it (like this adaptive Zen Garden16, just resize the window) but this animated CSS Zen Garden by Maurice Svay is probably the best silly thing that’s been done with it so far. Trippy, addictive and probably the best use of CSS transitions ever.
- 1 http://www.lukew.com/ff/entry.asp?1553
- 2 http://www.shadycharacters.co.uk/2012/04/name-that-mark-the-approval-curl/
- 3 http://www.shadycharacters.co.uk/2012/04/name-that-mark-the-approval-curl/
- 4 http://jamesabbottdd.com/design/lessons-learned-in-cross-device-design
- 5 http://jamesabbottdd.com/literate-code.html
- 6 http://blog.cloudfour.com/the-ios-app-store-runs-on-web-os/comment-page-1/
- 7 http://blog.cloudfour.com/the-ios-app-store-runs-on-web-os/comment-page-1/#comment-3225
- 8 http://blog.cloudfour.com/the-ios-app-store-runs-on-web-os/comment-page-1/
- 9 http://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers%3A_the_RIGHT_way
- 10 http://eightmedia.github.com/hammer.js/
- 11 http://eightmedia.github.com/hammer.js/
- 12 http://simurai.com/post/19895985870/icon-sharpness-limbo
- 13 http://boagworld.com/design/why-your-site-graphics-look-crap-on-the-iphone/
- 14 http://curtis.hovey.name/2012/05/22/common-mistakes-that-break-browser-compatibility/
- 15 http://svay.com/experiences/CssZenGardenAnimated/
- 16 http://nerd.vasilis.nl/adaptive/zengarden.html
- 17 http://svay.com/experiences/CssZenGardenAnimated/
- 18 www.smashingmagazine.com/the-smashing-daily-archive/
- 19 www.smashingmagazine.com/the-smashing-daily-archive/