Smashing Daily #41: Floats, Margins, Noise
What should be the new default input method, now that the mouse is not that dominant anymore? Where should your margins and padding be—all around each element or only below them? How can you manipulate live data from your camera? Some complex questions are answered in this edition of The Smashing Daily, but also some easy ones as well, like how do you generate a noisy PNG? Enjoy!
The mouse should not be the dominant input method anymore. Interfaces that rely on
:hover interactions were always broken on many devices, but this list of devices is growing by the day. Smart designers have already switched to touch as the new default. But for developers, things are unfortunately not that easy: it can be pretty hard to support both touch and mouse events. Boris Smus tries to solve this issue with pointer.js2 and he explains it in this post. You should read it.
Floats are some of the hardest CSS things to truly understand. They are weird, and the fact that we abuse them to make layouts doesn’t make things easier. Here’s an excellent presentation by Thierry Koblentz in which he explains everything there is to know about floats.
Luke Wroblewski explains that responsive Web design is great. He also explains that if you are certain about the capabilities of a device, you can send optimized assets to that device. This is a good idea if you have the time (and the money).
Here’s a list with (almost) all prefixed
-moz- CSS extensions. An enormous list!
Some browsers start supporting
getUserMedia, the API that gives you access to the camera as well as the microphone. Stoyan Stefanov explains how it works, and how you can manipulate the live data in this great little tutorial.
CSS margins look pretty easy, but they can actually be pretty complex. For instance, they sometimes collapse and sometimes they don’t. Harry Roberts shows us that the easiest way to work with vertical margins is by only declaring the bottom-margin of each element. It definitely works, but I’m not sure if I want to use it (I like collapsing margins).
Here’s an amazing article by Mike Sall about designing data: different ways to visualize numbers and different graph types. There are some excellent examples, and not just for what kind of graph is best for different kinds of data, but he also explains clearly what not to do (remember those tricks, they are used everywhere to manipulate the perception of numbers).
Should you use margins or paddings, and should you use them on the parent or on the child elements? Niels Matthijs had a look at the different possible options and concluded which one is best.
An oldie but a goodie, a website that helps creatives—print designers, photographers, fine-artists, etc.—getting used to the internet. All lessons on this website are pretty basic, so most of you will not learn much. But you can still take a look (the website itself does look good).
Here’s a nice, simple tool that does one thing and does it well: it generates noisy PNG images.
- 1 http://smus.com/mouse-touch-pointer/
- 2 https://github.com/borismus/pointer.js
- 3 http://smus.com/mouse-touch-pointer/
- 4 http://www.css-101.org/articles/floats/
- 5 http://www.css-101.org/articles/floats/
- 6 http://www.lukew.com/ff/entry.asp?1562
- 7 https://developer.mozilla.org/en/CSS/CSS_Reference/Mozilla_Extensions
- 8 http://www.phpied.com/canvas-pixels-3-getusermedia/
- 9 http://csswizardry.com/2012/06/single-direction-margin-declarations/
- 10 http://blog.typekit.com/2012/06/12/designing-data/
- 11 http://blog.typekit.com/2012/06/12/designing-data/
- 12 http://www.onderhond.com/blog/onderhond/margins-paddings-solution3
- 13 http://www.dontfeartheinternet.com/
- 14 http://noisepng.com/
- 15 http://noisepng.com/
- 16 www.smashingmagazine.com/the-smashing-daily-archive/
- 17 www.smashingmagazine.com/the-smashing-daily-archive/