Advertise here via BSA

Danny King has designed an interactive placeholder thing for his forms and wrote it entirely in CSS. He has shared how he designed that placeholder and how it manages to adapt to user input.

Before he came up with the Adaptive Placeholder, it was just using a normal one. he liked the simplicity of using a placeholder as a label. It actually made a pretty crappy interaction for the user though. A user would type and the text disappeared. The person who enters a value first isn’t always the same person who sees it later. To solve this problem he tried making the placeholder persist through the typing.

Requirements: CSS
Demo: http://blog.circleci.com/adaptive-placeholders/
License: License Free

Sponsors

Professional Web Icons for Your Websites and Applications

A group of MIT scientists have created a new material that can be both a mirror and a window, and no it's not a one-way mirror.

This new material can filter light depending on the direction of the light beams. In the image above light that hits from one angle goes straight through (white beam) but light that hits the material at different angle is reflected back (red beam). For designers it might make for interesting new tricks for walls or new forms of windows.

To filter light one must alter either it's frequency or polarization. In terms of frequency, stained glass windows are a good example, where the glass lets specific wavelengths pass through.

Polarized glasses, like the 3D glasses you wear at the movies, are able to let light through that oscillates in a specific way. But the idea of filtering light based on the direction it comes from has always been tough.

Somebody please build a time machine so we can travel back a decade and tell 2004 John Gruber that 2014 John Gruber would star in a promotional video for Microsoft.

∞ Permalink

Yesterday’s article has been on the front page of Hacker News for a while, ¹ and in the middle of the onslaught, I modified my Google Analytics code to start counting high-DPI screens. Why they don’t already count this is beyond me. They can, however, tell me what percentage of visitors support Java applets — 59% — or have less than 24-bit color — 0.5% — which, unfortunately, aren’t nearly as useful for informing modern web design as high-DPI displays.

I’ve been wondering for a while whether it was worth having separate 1X images instead of my current method, which is just making most images 2X-sized and letting the browsers scale them down. ^{1 2}

Based on this, I added these lines to the Analytics embed code: (it’s at the very bottom of this page’s source code, if you want to see it in context)

var pixelRatio = (window.devicePixelRatio >= 1.5) ? "HiDPI" : "1X"; if (window.devicePixelRatio) _gaq.push(['_setCustomVar', 1, 'DevicePixelRatio', pixelRatio, 2]); 

Since making the change, Analytics has tracked 21,122 visits from supporting browsers ^{2 3} (mostly from Hacker News), and the results are pretty great:

• 51.4% HiDPI
• 48.6% 1X

It certainly helps that 46% of my traffic is from smartphones and tablets. Within each category:

• Smartphones: 98% HiDPI
• Tablets: 66% HiDPI
• PCs: 18% HiDPI

These are much higher ratios than I expected.

Obviously, this audience isn’t representative of the world’s entire web-browsing population, but given how important mobile browsing is to every site and how lopsided this data is for mobile devices, I think the results are clear: assuming everyone is high-DPI and designing accordingly is not only a safe bet — it’s a requirement. And serving 1X images isn’t something that small sites (for which bandwidth costs aren’t significant) need to worry much about.

(And that’s what I think.)³