Skip to main content

Home/ Web Development, Design & Programming/ Contents contributed and discussions participated by Vernon Fowler

Contents contributed and discussions participated by Vernon Fowler

Simple Middle Filter: All | Bookmarks | Topics
Vernon Fowler

Don't Use The Placeholder Attribute - Smashing Magazine - 4 views

www.smashingmagazine.com/...placeholder-attribute

inclusive input formdesign aria forms inclusivedesign hint accessibility form html

shared by Vernon Fowler on 27 Jun 18 - No Cached
  • To recap, the placeholder attribute: Can’t be automatically translated; Is oftentimes used in place of a label, locking out assistive technology; Can hide important information when content is entered; Can be too light-colored to be legible; Has limited styling options; May look like pre-filled information and be skipped over.
  • Move the placeholder content above the input, but below the label:
  • Development Here’s how to translate our designed example to code:
  • ...4 more annotations...
  • aria-describedby ensures that the p content will be described last, after the label’s content and the kind of input it is associated with.
  • By using aria-describedby to programmatically associate the input with the p element, we are creating a priority of information for screen readers that has parity with what a person browsing without a screen reader would experience.
  • The floating label effect, a close cousin to this phenomenon, oftentimes utilizes the placeholder attribute in place of a label, as well.
  • Content hidden by an on-screen keyboard. 3rd party keyboards with larger heights may have a greater risk of blocking important content.
  • Vernon Fowler on 27 Jun 18
     
    Not only argues for not using the placeholder attribute but also describes an inclusive input hint and how to code it.
Vernon Fowler

When to hide and show navigation | Gerry McGovern - 3 views

gerrymcgovern.com/en-to-hide-and-show-navigation

navigation webdesign journey task

shared by Vernon Fowler on 18 Jun 17 - No Cached
  • Another example of where hiding navigation makes sense is where your customers have a “super task”. This is a task that is way more important than all the other tasks, like booking a flight or a room.
  • The core purpose of navigation is to help you progress on the journey you have decided to go on.
  • when a customer has chosen a particular journey, it is usually a good idea to hide all the navigation that is not directly relevant to that journey
  • ...1 more annotation...
  • why has the hamburger menu got such a bad reputation? Because it was nearly always implemented from an organization-centric point of view
Vernon Fowler

Myth #2: All pages should be accessible in 3 clicks - UX Myths - 4 views

uxmyths.com/...ould-be-accessible-in-3-clicks

IA information architecture web usability webdesign UX

shared by Vernon Fowler on 22 May 17 - Cached
  • the constant scent of information along the user’s path
  • it’s not the number of clicks but the well-labeled links with information scent that play a key role in usability
  • replace the three-click rule with the one-click rule: “Every click or interaction should take the user closer to their goal while eliminating as much of the non-destination as possible
Vernon Fowler

Your Body Text Is Too Small - 0 views

blog.attackthefront.io/text-is-too-small-5e02d36dc902

typography font size body text web webdesign usability readability legibility

shared by Vernon Fowler on 23 Nov 16 - No Cached
  • Some examples of sans-serif fonts that work well for large body text include Atlas Grotesk, Futura, Lato, Maison Neue, Real Text, Roboto, and Suisse Int’l.
  • Some examples of serif fonts that work well for large body text include Equity, Franziska, Leitura News, Merriweather, Miller, PT Serif, and Tisa.
  • better to optically select a font size according to near-finalized colors, or in different color scenarios
  • ...6 more annotations...
  • a better starting point would be 20px on small desktop displays and greater. We should only have to resort to 16px for body copy on very small mobile devices
  • down to the eye again to optically adjust the letter-spacing and font size together
  • the optimal line length, or number of characters per line (CPL) in typography is around 55 to 75
  • line height should also be relative to the font size as it scales up for larger displays
  • This is not about having the biggest body text, because biggest isn’t best. It’s about optimizing for the best reading experience you can possibly give your users
  • sites that have adopted bigger body text even at small desktop or laptop resolutions such as 1440 x 900. They go from 20px all the way up to 58px!
Vernon Fowler

A Simple Web Developer's Guide To Color - Smashing Magazine - 12 views

www.smashingmagazine.com/...web-developer-guide-color

color webdesign tools guide

shared by Vernon Fowler on 05 Apr 16 - No Cached
soffy125 liked it
  • Vernon Fowler on 05 Apr 16
     
    "I'm going to show you a simple color workflow that you can use in your next web project."
Vernon Fowler

Responsive Design Knowledge Hub - Responsive Web Design - 13 views

responsivedesign.is

responsive design responsive-design responsivedesign RWD webdesign media queries flexible grids strategy web design

shared by Vernon Fowler on 25 Mar 16 - No Cached
  • Vernon Fowler on 25 Mar 16
     
    "Responsive design is the combination of flexible grids, flexible images and media queries. We help take the complexity out of responsive design with details on Design, Development and Strategy. Read our Articles for new tips, visit the Resources for helpful tools or see what others are doing."
1 - 20 of 222 Next › Last »
Showing 20▼ items per page