Menu Search
Jump to the content X

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!

Generalized Input On The Cross-Device Web

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.js and he explains it in this post. You should read it.

Same Events Everywhere Please


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.

Everything About Floats

Multi-Device Adaptation vs. Optimization

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).

Mozilla CSS Extensions—MDN

Here’s a list with (almost) all prefixed -moz- CSS extensions. An enormous list!

Canvas Pixels #3: getUserMedia

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.

Single-Direction Margin Declarations

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).

Designing Data

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).

How to Design Data

Margins And Paddings

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.

Don’t Fear The Internet

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).

Last Click

Generate Noisy PNG-Images With Alpha-Transparency

Here’s a nice, simple tool that does one thing and does it well: it generates noisy PNG images.

A Tool for Generating Noisy PNG

Previous Issues

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

Smashing Book #5

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? For example, Smashing Book 5, packed with smart responsive design patterns and 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. 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 all fields are mandatory, 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!

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