Tags: placeholder

20

sparkline

Don’t Use The Placeholder Attribute — Smashing Magazine

A lot of the issues here are with abuses of the placeholder attribute—using it as a label, using it for additional information, etc.—whereas using it quite literally as a placeholder can be thought of as an enhancement (I almost always preface mine with “e.g.”).

Still, there’s no getting around that terrible colour contrast issue: if the contrast were greater, it would look too much like an actual pre-filled value, and that’s potentially worse.

UX In Contact Forms: Essentials To Turn Leads Into Conversions — Smashing Magazine

The answers to these questions about forms are useful for just about any website:

  1. Is It OK To Place A Form In Two Columns?
  2. Where Should Labels Be Placed?
  3. Can We Use Placeholder Text Instead Of A Label?
  4. How To Lessen The Cognitive Load Of A Form?
  5. Are Buttons Considered Part Of A Form’s UX?
  6. Is It Possible To Ease The Process Of Filling A Form?
  7. Does The User’s Location Influence A Form’s UX?

Using SVG as placeholders — More Image Loading Techniques - JMPerez Blog

Here’s a clever to technique to improve the perceived performance of image loading with a polygonal SVG placeholder.

microicon

These icons-as-a-service could be really useful for making quick’n’dirty HTML prototypes.

Revisiting the Float Label pattern with CSS — That Emil is Emil Björklund

A clever technique by Emil to implement the “float label” pattern using CSS. It all hinges on browsers supporting the :placeholder-shown pseudo-class which, alas, is not universal.

I was hoping that maybe @supports could come to the rescue (so that a better fallback could be crafted), but that tests for properties and values, not selectors. Damn!

SpaceHolder – A space-themed image placeholder service.

We’ve got Space Ipsum for text. Now we have SpaceHolder for images.

Label Pattern - CodePen

This looks like a nifty take on the ol’ using-labels-like-placeholders pattern for forms. I still prefer to have a label visible at all times, but this seems like a nice compromise.

Space Ipsum

This is officially the best lorem ipsum generator yet.

Latin Text Generator for Mac OS X - LittleIpsum

A cute little lorem ipusm generator for the mac.

Fillerama: A Filler Text Generator

One more alternative to lorem ipsum.

Vegan Ipsum

A veggie alternative to bacon ipsum.

Bacon Ipsum | A Meatier Lorem Ipsum Generator

A meatier alternative to lorem ipsum placeholder text.

{placekitten}

I may have to start using this for placeholder images—it won’t be distracting, right?

HTML5 Accessibility Chops: the placeholder attribute | The Paciello Group Blog

A nice succinct description of the placeholder attribute, with an emphasis on accessibility.

Fillerati - Faux Latin is a Dead Language

The best alternative to lorem ipsum yet.

Yet Another Placeholder Generator

Look what Norm! built: it's another placeholder image service, but this is one that you can install and run on your own machine.

Placehold.it - Quick and simple image placeholders

This will be very, very handy for my day-to-day front end development work.

malevole - Text Generator

An excellent alternative to Lorem Ipsum ...possibly even better than Anguish Languish.

Lorem 2: An all-around better Lorem experience.

Lorem 2 is a simple and better way to grab Lorem Ipsum text content. I still like using Anguish Languish.