Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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 to, which actually breaks apart on many resolutions. I’m not sure what’s good about that.

The iOS App Store Runs on Web OS5
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 comment6. Performance is another good reason: not all assets are always downloaded, which can result in unexpected layouts.

Looks good!7

Optimizing content for different browsers: the RIGHT way8
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 gestures9
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 this10

“We’re in an icon-sharpness limbo”
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 too11.

Common mistakes that broke Launchpad’s browser compatibility12
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 Transitions”
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 Garden13, 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.

Previous Issues14

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

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://blog.cloudfour.com/the-ios-app-store-runs-on-web-os/comment-page-1/
  6. 6 http://blog.cloudfour.com/the-ios-app-store-runs-on-web-os/comment-page-1/#comment-3225
  7. 7 http://blog.cloudfour.com/the-ios-app-store-runs-on-web-os/comment-page-1/
  8. 8 http://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers%3A_the_RIGHT_way
  9. 9 http://eightmedia.github.com/hammer.js/
  10. 10 http://eightmedia.github.com/hammer.js/
  11. 11 http://boagworld.com/design/why-your-site-graphics-look-crap-on-the-iphone/
  12. 12 http://curtis.hovey.name/2012/05/22/common-mistakes-that-break-browser-compatibility/
  13. 13 http://nerd.vasilis.nl/adaptive/zengarden.html
  14. 14 www.smashingmagazine.com/the-smashing-daily-archive/
  15. 15 www.smashingmagazine.com/the-smashing-daily-archive/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

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.

  1. 1

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

    0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top