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!

E-commerce Performance1
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?

A curl3

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.

Looks good!8

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.

A JavaScript library for multi-touch gestures10
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!

You actually can touch this11

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.

Last Click

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.

I couldn't capture the animation17

Previous Issues18

For previous Smashing Daily issues, check out the Smashing Daily Archive19.

Footnotes

  1. 1 http://www.lukew.com/ff/entry.asp?1553
  2. 2 http://www.shadycharacters.co.uk/2012/04/name-that-mark-the-approval-curl/
  3. 3 http://www.shadycharacters.co.uk/2012/04/name-that-mark-the-approval-curl/
  4. 4 http://jamesabbottdd.com/design/lessons-learned-in-cross-device-design
  5. 5 http://jamesabbottdd.com/literate-code.html
  6. 6 http://blog.cloudfour.com/the-ios-app-store-runs-on-web-os/comment-page-1/
  7. 7 http://blog.cloudfour.com/the-ios-app-store-runs-on-web-os/comment-page-1/#comment-3225
  8. 8 http://blog.cloudfour.com/the-ios-app-store-runs-on-web-os/comment-page-1/
  9. 9 http://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers%3A_the_RIGHT_way
  10. 10 http://eightmedia.github.com/hammer.js/
  11. 11 http://eightmedia.github.com/hammer.js/
  12. 12 http://simurai.com/post/19895985870/icon-sharpness-limbo
  13. 13 http://boagworld.com/design/why-your-site-graphics-look-crap-on-the-iphone/
  14. 14 http://curtis.hovey.name/2012/05/22/common-mistakes-that-break-browser-compatibility/
  15. 15 http://svay.com/experiences/CssZenGardenAnimated/
  16. 16 http://nerd.vasilis.nl/adaptive/zengarden.html
  17. 17 http://svay.com/experiences/CssZenGardenAnimated/
  18. 18 www.smashingmagazine.com/the-smashing-daily-archive/
  19. 19 www.smashingmagazine.com/the-smashing-daily-archive/

Vasilis van Gemert is the Principal Front-end Developer at Mirabeau in The Netherlands and a board member of Fronteers. His aim is to close the gap between design and (front-end) development. He believes the excess of knowledge he has can be better used by others, by more creative and smarter people. You can follow him on Twitter.

Advertising
  1. 1

    The zen garden links don’t work??? :(

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top