Menu Search
Jump to the content X X
Smashing Conf San Francisco

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 San Francisco, dedicated to smart front-end techniques and design patterns.

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 Web1

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.

Same Events Everywhere Please3


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

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—MDN5

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

Canvas Pixels #3: getUserMedia6

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 Declarations7

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 Data8

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 Data9

Margins And Paddings10

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 Internet11

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

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

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