spaceninja + placeholders   16

Avoid Placeholder Text by Animating Form Labels
We suggest one solution — you can see the code on our CodePen — that includes positioning the label element so that it overlaps the input field. In effect, making the label look like placeholder text. Then when the input receives focus, animate the label element out of the user’s way. Let’s dive into one approach using CSS positioning and transitions:
fridayfrontend  cssbasics  css  forms  accessibility  placeholders  labels  animation 
9 weeks ago by spaceninja
The Anatomy of Accessible Forms: The Problem with Placeholders
Instructions help users to submit forms successfully. However, if the instructions are provided with a placeholder attribute, then the user might not be able to use that instruction effectively.
fridayfrontend  cssbasics  accessibility  placeholders  forms 
june 2019 by spaceninja
CSS :placeholder-shown
The :placeholder-shown pseudo-clas targets an <input> element's placeholder only when it's shown, and thus I could select just the placeholder but not the input's text:
fridayfrontend  css  cssbasics  placeholders  placeholder-shown 
february 2019 by spaceninja
Building Skeleton Components with React
One of the advantages of building a Single Page Application (SPA) is the way navigating between pages is extremely fast. Unfortunately, the data of our components is sometimes only available after we have navigated to a specific part of our application. We can level up the user’s perceived performance by breaking the component into two pieces: the container (which displays a skeleton view when it’s empty) and the content. If we delay the rendering of the content component until we have actually received the content required, then we can leverage the skeleton view of the container thus boosting the perceived load time!
react  skeleton  design  layout  placeholders  performance 
october 2018 by spaceninja
Unsplash Source API
Simple embedding for Unsplash photos. For a more advanced integration, see Unsplash API.
stock  unsplash  api  random  free  photography  placeholders 
october 2018 by spaceninja
Pravatar - CC0 Avatar Placeholder
Generate fake avatars to fill your sample application.
avatars  images  placeholders  stock 
october 2018 by spaceninja
CSS Only Floated Labels with :placeholder-shown pseudo class
In this tutorial, we’re going to build a CSS only solution to the floated label technique using the :placeholder-shown pseudo class.
fridayfrontend  css  cssbasics  forms  html  placeholders  accessibility 
september 2018 by spaceninja
Is placeholder text a sufficient accessible label for form fields
In a mobile first world many websites use placeholder text to save space. Let's test to see if its a good idea.
fridayfrontend  css  cssbasics  html  accessibility  forms  placeholders  labels 
september 2018 by spaceninja
Design with Difficult Data
Stop designing for the happy path! Steven Garrity shows how to create more robust layouts by designing with difficult data.
fridayfrontend  design  placeholders  layout  ux 
september 2018 by spaceninja
How to use SVG as a Placeholder, and Other Image Loading Techniques
We have seen different tools and techniques to generate SVGs from images and use them as placeholders. The same way WebP is a fantastic format for thumbnails, SVG is also an interesting format to use in placeholders. We can control the level of detail (and thus, size), it’s highly compressible and easy to manipulate with CSS and JS.
fridayfrontend  svg  placeholders  images  lazyload 
november 2017 by spaceninja
Floating labels are problematic
We are often seduced by novel patterns that save space but this pattern is problematic. Here’s why:
design  usability  ux  accessibility  placeholders  forms  floats  labels 
june 2017 by spaceninja
Placeholders are problematic
Some designers go one one step further, and replace labels with placeholders. Either way, the placeholder is an Inclusive Design anti-pattern which causes problems for users. Here’s why:
design  usability  ux  accessibility  placeholders  forms 
june 2017 by spaceninja
Form Validation UX in HTML and CSS
"You can do an impressive amount of form validation with just HTML attributes. You can make the user experience pretty clean and clear with CSS selectors. But it does require some CSS trickery to get everything just right!"
html  forms  validation  css  placeholders  required  fridayfrontend 
june 2016 by spaceninja
Intrinsic Placeholders with the Picture Element
Intrinsic Ratios aren’t new, but paired with the <picture> element it’s a beautiful little technique with little-to-no extra markup. I built out a little “Intrinsic” Sass component that draws intrinsic ratio box to match your image’s aspect ratio.
css  intrinsic  ratios  responsive  images  placeholders  fridayfrontend 
february 2016 by spaceninja
Intrinsic Placeholders with the Picture Element
"I built out a little 'Intrinsic' Sass component that draws intrinsic ratio box to match your image’s aspect ratio."
css  intrinsic  placeholders  picture  html  performance 
february 2016 by spaceninja

Copy this bookmark: