Smashing Daily #29: Retina, Pixels, Color Management

This weekend edition of The Smashing Daily has some very valuable resources and articles for designers: styleguides, design systems, visuals on retina displays, and an excellent article about color management. Not a designer? Those articles are still well worth the read, just like the ones about responsive JavaScript, pixel-fitting, the history and future of CSS, and The Incredible Descriptive Camera. Enjoy!

In Flux1
A while ago the new iPad was released, and the thing that struck people the most was that images on websites suddenly looked blurry. Trent Walton was one of these people. So he wrote down his—smart as ever—thoughts about this issue, suggesting to use as much CSS as possible, and asks the question if we need to optimize all out images for retina displays (are crispy visuals more important than a crispy performance? Sometimes, but not always).

Retina or not2

Forget the perfect logo3
I completely agree with Mads Jakob Poulsen, design is not just about the logo, that the combination of all elements should form the identity. He calls this system based design. I came to the same conclusion by the simple observation that you have to be able to recognize the website you’re on wherever you are (especially when viewing a long, single column, mobile website). It’s an important insight, and all designers should probably read this article (it will definitely not hurt them).

Pixel-fitting4
You should not use vector graphics for logos or icons if you don’t know the exact dimensions, explains Dustin Curtis. You might think that vector graphics are exactly the right format for these kinds of things, but Dustin shows us that humans are much better at pixel-fitting than machines… unfortunately.

Oh pixels5

OnMediaQuery—Responsive Javascript6
A while ago Jeremy Keith explained why matchMedia can be a rather clumsy way of working with media queries in CSS and JavaScript at the same time. He came up with a very clever solution7. Josh Barr took this idea and created a “super lean JavaScript module, engineered with mobile loading times in mind”. Excellent!

Simple CSS color management with SASS8
I definitely have to get used to some features of SASS, like color management. But designers really must learn this clever and extremely powerful way of working with colors that Chris Hart explains in this article. I don’t believe all designers must know how to code, but I do believe they have to know how to make a basic color pallete, like this one.

Color management9

paulrobertlloyd/barebones10
If you need a solid style guide for your project, then Barebones (a project by Paul Lloyd), might be exactly what you’re looking for. Not too complicated, but not to simple, either.

The Evolution of CSS Layout: Through CSS 3 and Beyond11
If you have an hour to spare, you might be interested in watching this presentation by Elika J. Etemad about the history and future of CSS layout, a very interesting and important subject. I can’t wait for that future to finally be here…

Link Dump12
Do you need more to read? Here’s another eclectic link dump by Blair Millen.

Last Click

Descriptive Camera13
If you need something to do for the weekend, here’s a brilliant idea for a camera: a descriptive camera that outputs a description of the picture, instead of the picture itself. A fantastic idea!

A descriptive camera14

Previous Issues15

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

Footnotes

  1. 1 http://trentwalton.com/2012/05/08/in-flux/
  2. 2 http://trentwalton.com/2012/05/08/in-flux/
  3. 3 http://www.computerarts.co.uk/features/forget-perfect-logo
  4. 4 http://dcurt.is/pixel-fitting
  5. 5 http://dcurt.is/pixel-fitting
  6. 6 http://www.springload.co.nz/love-the-web/responsive-javascript
  7. 7 http://adactio.com/journal/5429/
  8. 8 http://blog.12spokes.com/web-design-development/simple-css-color-management-with-sass/
  9. 9 http://blog.12spokes.com/web-design-development/simple-css-color-management-with-sass/
  10. 10 https://github.com/paulrobertlloyd/barebones
  11. 11 http://emergingtech.chariotsolutions.com/2012/05/ete-2012-elika-j-etemad-the-evolution-of-css-layout-through-css-3-and-beyond/
  12. 12 http://theletter.co.uk/index/6391/link+dump
  13. 13 http://mattrichardson.com/Descriptive-Camera/
  14. 14 http://mattrichardson.com/Descriptive-Camera/
  15. 15 www.smashingmagazine.com/the-smashing-daily-archive/
  16. 16 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. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

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