#I could use the html version and input the code onto an html viewing site but the photo I want to use isn’t loading >:( | Explore Tumblr posts and blogs

douglassmiith · 5 years ago

Text

Equivalent Experiences: Thinking Equivalently

About The Author

Eric is a Boston-based designer who helps create straightforward solutions that address a person’s practical, physical, cognitive, and emotional needs. More about Eric Bailey …

Constructing an equivalent experience may mean changing the way you think about development and design, and potentially reevaluating your existing work. In this article, we’ll address common accessibility issues, and how to best go about improving them so everyone can effortlessly access your content.

This is the second of two articles on the topic of how digital accessibility is informed by equivalency. Previously, we have learned about the underlying biases that inform digital product creation, what isn’t an equivalent experience, the compounding effects of inaccessible design and code, and powerful motivating forces for doing better.

In this article, I will discuss learning how to embrace an equivalent, inclusive mindset. I will also provide practical, robust ways to improve your websites and web apps by providing solutions to common, everyday barriers cited by the people I interviewed.

Setting A Standard

The Web Content Accessibility Guidelines (WCAG) outlines in painstaking detail how to craft accessible digital experiences. While a long and dense document, it is incredibly comprehensive — to the point where it’s been codified as an international standard. For over 10 years, we’ve had a globally agreed upon, canonical definition of what constitutes as usable.

How Would I?

If you need a little help constructing the initial mental framework the WCAG gets at, a question I always ask myself when making something is, “How would I use this if…” It’s a question that gets you to check all the biases that might be affecting you in the moment.

Examples could be:

How would I use this if…

…I can’t see the screen?

…I can’t move my arms?

…I’m sensitive to flashing and strobing animation?

…English isn’t my primary language?

…I have a limited budget for bandwidth?

…I’ve set a large default type size?

…and so on.

Focus on these four parameters to improve usability of your web design:

1. Visual – make it easy to see 2. Auditory – make it easy to hear 3. Motor – make it easy to interact with 4. Cognitive – make it easy to understand

→ Accessibility goals are also usability goals.

— Alex (@alexmuench) January 30, 2020

A Gentle Introduction

If you’re looking for a more approachable resource for how to dig into what the WCAG covers, the Inclusive Design Principles would be a great place to start. The seven principles it describes all map back to WCAG success criterion.

(Large preview)

Learn From The People Who Actually Use It

You don’t have to take my word for it. Here are some common issues cited by the people I interviewed, and how to fix them:

Wayfinding

Headings

Heading elements are incredibly important for maintaining an equivalent, accessible experience.

When constructed with skill and care, heading elements allow screen reader users to quickly determine the contents of a page or view and navigate to content relevant to their interests. This is equivalent to how someone might quickly flit around, scrolling until something that looks pertinent comes into view.

The HeadingsMap browser extension lets you view a page’s heading hierarchy. (Large preview)

Justin Yarbrough voices poorly-authored heading elements as a concern, and he’s not alone.

WebAIM’s screen reader survey cites headings as the most important way to find information. This survey is well-worth paying attention to, as it provides valuable insight into how disabled people actually use assistive technology.

Landmarks

In addition to heading elements, another way to determine the overall structure and layout are landmarks. Landmarks are roles implicitly described by HTML sectioning elements, used to help describe the overall composition of the main page or view areas.

These are five of the eight landmark HTML elements and the roles using them create. (Large preview)

Here’s what Justin has to say:

“If I’m just trying to find the main content, I’ll first try the Q JAWS shortcut key to see if a main region’s set up. If not, I’m just more or less stuck trying to scan the page to find it arrowing through the page.”

Much as how we might use a layer group name of “primary nav” in our design file, or a class name of c-nav-primary in our CSS, it’s important we also use a nav sectioning element to describe our main site navigation (as well as any other navigation the page or view contains).

Doing so ensures intent is carried all the way through from conception, to implementation, to use. The same notion carries through for the other HTML sectioning elements that create landmarks for assistive technology.

Labeled Controls

Brian Moore tells us about “form fields with no label or at least one that isn’t programmatically associated so it doesn’t read anything.”

It’s another frustratingly common problem.

Providing a valid for/id attribute pairing creates a programmatic association between form inputs and the label that describes what it does. And when I say label, I mean the label element. Not a clickable div, a placeholder, aria-label, or some other brittle and/or overwrought solution. label elements are a tried-and-true solution that enjoys wide and deep support for accessibility.

In addition, a label element should not be used by itself, say for a label on a diagram. This might seem counter-intuitive at first, but please bear with me.

<label for="your-name">Your name</label><input type="text" id="your-name" name="your-name" autocomplete="name"> <label for="eye">Cornea</label><label for="eye">Pupil</label><label for="eye">Lens</label><label for="eye">Retina</label><label for="eye">Optic Nerve</label><img id="eye" alt="A diagram of the human eye." src="parts-of-the-eye.png" />

The same kinds of assistive technology that let a person jump to headings and landmarks also allow them to jump to input labels. Because of this, there is the expectation that when a label element is present, there is also a corresponding input it is associated with.

Alternative Descriptions

If you have low or no vision, and/or have difficulty understanding an image, HTML’s alt attribute (and not the title attribute) provides a mechanism to understand what the image is there for. The same principle applies for providing captions for video and audio content like podcasts.

Kenny Hitt mentions that when:

“…someone posts something on Twitter, if it’s just an unlabeled image, I don’t even take the time to participate in the conversation. When you start every conversation by asking what’s in the picture, it really derails things.”

Up until last week, the only way for Twitter to provide alternative descriptions for its images was to enable an option buried away in the subsection of a preference menu. Compare this to a platform like Mastodon, where the feature is enabled by default.

[embedded content]

Soren Hamby, mentions Stitcher, a popular podcast app. “The onboarding was a lot of themed graphics, but the alt text for each one was ‘unselected’ and for the same image with a check over it was selected. I think it would be reasonable for them to say ‘sci-fi genre selected’ […] it’s such a small thing but it makes all the difference.”

Ensuring that alternate description content is concise and descriptive is just as important as including the ability to add it. Daniel Göransson, a developer for Axess Lab, has a great article on how to write them effectively.

Robust, accessible features can also be part of evaluation criteria, as well as a great method for building customer loyalty. Soren mentions that they are “often the deciding factor, especially between services.” In particular, they cite Netflix’s audio descriptions.

ARIA

One topic Daniel Göransson’s article on alternative descriptions mentions is to not over-describe things. This includes information like that it is an image, who the photographer is, and keyword stuffing.

The same principle applies for Accessible Rich Internet Applications (ARIA). ARIA is a set of attributes designed to extend HTML to fill in the gaps between interactive content and assistive technology. When ARIA is used to completely replace HTML, it oftentimes leads to an over-described experience.

Brian explains: “There seems to be a perception that more ARIA fixes accessibility and it can help, but too much either reads wrong things or just talks way too much. If on screen text of one or two words is good enough for everyone else, it is good enough for screen reader users too. We don’t need whole sentence or two descriptions of buttons or links i.e ‘link privacy policy’ is far better than something like ‘this link will open our privacy policy, this link will open in a new window’ when the on screen link text is ‘privacy policy.’”

The First Rule of ARIA Use advises us to only use it when a native element won’t suffice. You don’t need to describe what your interactive component is or how it works, the same way you don’t need to include the word “image” in your alternative description.

Provided that you use the appropriate native HTML element, assistive technology will handle all of that for you. Do more, more robustly, with less effort? Sounds great to me!

(Large preview)

Unlike most of HTML, CSS, and JS, the success of implemented ARIA is contextual, variable, and largely invisible. In spite of this, we seem to be slathering ARIA onto everything without bothering to check not only if it actually works, but also what the people who actually use it think of it.

Support for ARIA is fragmented across operating systems, browsers, and assistive technology offerings, all their respective versions, and every possible permutation of all three. Simply put, writing ARIA and trusting it will work as intended isn’t enough.

If misconfigured and/or over-applied, ARIA can break. It may not report actual functionality, announce the wrong functionality, and (accurately or inaccurately) over-describe functionality. Obviously, these experiences aren’t equivalent.

Representation matters. To get a better understanding of how the ARIA code you wrote actually works, I recommend hiring people to tell you. Here are four such services that do exactly that:

Contrast

Color Contrast

Color contrast is another common issue, one whose severity often seems to be downplayed. If I could wager a guess, it’s because it’s easy to forget that other people’s vision might be different than your own. Regardless, it is a concern that affects a wide swath of the global population, and we should treat the issue with the seriousness it deserves.

The Click-Away Pound Survey tells us that out of the top issues faced by users with access needs, contrast and legibility weighs in as the fifth most significant issue. On top of that, it has increased as a concern, going from 44% of respondents in 2016 to 55% in 2019.

We live in an age where there’s more color contrast checking resources than I can count. Products like Stark can help designers audit their designs before it is translated into code. Tools like Eightshape’s Contrast Grid and Atul Varma’s Accessible color palette builder let you craft your design systems with robust, accessible color combinations out of the gate.

(Large preview)

The somewhat ironic thing about color contrast is how, ah, visible it is. While some of the previous accessibility issues are invisible—hidden away as the underlying code—contrast is a pretty straightforward issue.

Mostly, contrast is a binary scenario, in that you either can or cannot see content. So, the next time you check your website or webapp with an automated accessibility checker such as Deque’s axe, don’t be so quick to downplay the color contrast errors it reports.

High Contrast

There are technology solutions for situations where even satisfactory color contrast ratios isn’t sufficient—namely, inverted colors mode and High Contrast Mode. Many participants I interviewed mentioned using these display modes during their daily computer use.

Provided you use semantic HTML, both of these modes don’t need much effort on the development end of things to work well. The important bit is to check out what you’re building in these two modes to make sure everything is working as intended.

Striving For Perfection

To quote Léonie Watson,

“Accessibility doesn’t have to be perfect, it just needs to be a little bit better than yesterday.”

By understanding both why, and how to improve your digital accessibility experiences in ways that directly address common barriers, you’re able to provide meaningful and enjoyable experiences to all.

Further Reading

Thank you to Brian Moore, Damien Senger, Jim Kiely, Justin Yarbrough, Kenny Hitt, and Soren Hamby for sharing their insights and experiences.

(ra, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

Via http://www.scpie.org/equivalent-experiences-thinking-equivalently/

source https://scpie.weebly.com/blog/equivalent-experiences-thinking-equivalently

0 notes

laurelkrugerr · 5 years ago

Text

Equivalent Experiences: Thinking Equivalently

About The Author

Eric is a Boston-based designer who helps create straightforward solutions that address a person’s practical, physical, cognitive, and emotional needs. More about Eric Bailey …

Setting A Standard

How Would I?

Examples could be:

How would I use this if…

…I can’t see the screen?

…I can’t move my arms?

…I’m sensitive to flashing and strobing animation?

…English isn’t my primary language?

…I have a limited budget for bandwidth?

…I’ve set a large default type size?

…and so on.

Focus on these four parameters to improve usability of your web design:

1. Visual – make it easy to see 2. Auditory – make it easy to hear 3. Motor – make it easy to interact with 4. Cognitive – make it easy to understand

→ Accessibility goals are also usability goals.

— Alex (@alexmuench) January 30, 2020

A Gentle Introduction

(Large preview)

Learn From The People Who Actually Use It

You don’t have to take my word for it. Here are some common issues cited by the people I interviewed, and how to fix them:

Wayfinding

Headings

Heading elements are incredibly important for maintaining an equivalent, accessible experience.

The HeadingsMap browser extension lets you view a page’s heading hierarchy. (Large preview)

Justin Yarbrough voices poorly-authored heading elements as a concern, and he’s not alone.

Landmarks

These are five of the eight landmark HTML elements and the roles using them create. (Large preview)

Here’s what Justin has to say:

Labeled Controls

Brian Moore tells us about “form fields with no label or at least one that isn’t programmatically associated so it doesn’t read anything.”

It’s another frustratingly common problem.

In addition, a label element should not be used by itself, say for a label on a diagram. This might seem counter-intuitive at first, but please bear with me.

<label for="your-name">Your name</label> <input type="text" id="your-name" name="your-name" autocomplete="name">  <label for="eye">Cornea</label> <label for="eye">Pupil</label> <label for="eye">Lens</label> <label for="eye">Retina</label> <label for="eye">Optic Nerve</label> <img id="eye" alt="A diagram of the human eye." src="parts-of-the-eye.png" />

Alternative Descriptions

Kenny Hitt mentions that when:

[embedded content]

ARIA

Provided that you use the appropriate native HTML element, assistive technology will handle all of that for you. Do more, more robustly, with less effort? Sounds great to me!

(Large preview)

Representation matters. To get a better understanding of how the ARIA code you wrote actually works, I recommend hiring people to tell you. Here are four such services that do exactly that:

Contrast

Color Contrast

(Large preview)

High Contrast

Striving For Perfection

To quote Léonie Watson,

“Accessibility doesn’t have to be perfect, it just needs to be a little bit better than yesterday.”

Further Reading

Thank you to Brian Moore, Damien Senger, Jim Kiely, Justin Yarbrough, Kenny Hitt, and Soren Hamby for sharing their insights and experiences.

(ra, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/equivalent-experiences-thinking-equivalently/ source https://scpie1.blogspot.com/2020/06/equivalent-experiences-thinking.html

0 notes

riichardwilson · 5 years ago

Text

Equivalent Experiences: Thinking Equivalently

About The Author

Eric is a Boston-based designer who helps create straightforward solutions that address a person’s practical, physical, cognitive, and emotional needs. More about Eric Bailey …

Setting A Standard

How Would I?

Examples could be:

How would I use this if…

…I can’t see the screen?

…I can’t move my arms?

…I’m sensitive to flashing and strobing animation?

…English isn’t my primary language?

…I have a limited budget for bandwidth?

…I’ve set a large default type size?

…and so on.

Focus on these four parameters to improve usability of your web design:

1. Visual – make it easy to see 2. Auditory – make it easy to hear 3. Motor – make it easy to interact with 4. Cognitive – make it easy to understand

→ Accessibility goals are also usability goals.

— Alex (@alexmuench) January 30, 2020

A Gentle Introduction

(Large preview)

Learn From The People Who Actually Use It

You don’t have to take my word for it. Here are some common issues cited by the people I interviewed, and how to fix them:

Wayfinding

Headings

Heading elements are incredibly important for maintaining an equivalent, accessible experience.

The HeadingsMap browser extension lets you view a page’s heading hierarchy. (Large preview)

Justin Yarbrough voices poorly-authored heading elements as a concern, and he’s not alone.

Landmarks

These are five of the eight landmark HTML elements and the roles using them create. (Large preview)

Here’s what Justin has to say:

Labeled Controls

Brian Moore tells us about “form fields with no label or at least one that isn’t programmatically associated so it doesn’t read anything.”

It’s another frustratingly common problem.

In addition, a label element should not be used by itself, say for a label on a diagram. This might seem counter-intuitive at first, but please bear with me.

<label for="your-name">Your name</label> <input type="text" id="your-name" name="your-name" autocomplete="name">  <label for="eye">Cornea</label> <label for="eye">Pupil</label> <label for="eye">Lens</label> <label for="eye">Retina</label> <label for="eye">Optic Nerve</label> <img id="eye" alt="A diagram of the human eye." src="parts-of-the-eye.png" />

Alternative Descriptions

Kenny Hitt mentions that when:

[embedded content]

ARIA

Provided that you use the appropriate native HTML element, assistive technology will handle all of that for you. Do more, more robustly, with less effort? Sounds great to me!

(Large preview)

Representation matters. To get a better understanding of how the ARIA code you wrote actually works, I recommend hiring people to tell you. Here are four such services that do exactly that:

Contrast

Color Contrast

(Large preview)

High Contrast

Striving For Perfection

To quote Léonie Watson,

“Accessibility doesn’t have to be perfect, it just needs to be a little bit better than yesterday.”

Further Reading

Thank you to Brian Moore, Damien Senger, Jim Kiely, Justin Yarbrough, Kenny Hitt, and Soren Hamby for sharing their insights and experiences.

(ra, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/equivalent-experiences-thinking-equivalently/ source https://scpie.tumblr.com/post/620115521826897920

0 notes

scpie · 5 years ago

Text

Equivalent Experiences: Thinking Equivalently

About The Author

Eric is a Boston-based designer who helps create straightforward solutions that address a person’s practical, physical, cognitive, and emotional needs. More about Eric Bailey …

Setting A Standard

How Would I?

Examples could be:

How would I use this if…

…I can’t see the screen?

…I can’t move my arms?

…I’m sensitive to flashing and strobing animation?

…English isn’t my primary language?

…I have a limited budget for bandwidth?

…I’ve set a large default type size?

…and so on.

Focus on these four parameters to improve usability of your web design:

1. Visual – make it easy to see 2. Auditory – make it easy to hear 3. Motor – make it easy to interact with 4. Cognitive – make it easy to understand

→ Accessibility goals are also usability goals.

— Alex (@alexmuench) January 30, 2020

A Gentle Introduction

(Large preview)

Learn From The People Who Actually Use It

You don’t have to take my word for it. Here are some common issues cited by the people I interviewed, and how to fix them:

Wayfinding

Headings

Heading elements are incredibly important for maintaining an equivalent, accessible experience.

The HeadingsMap browser extension lets you view a page’s heading hierarchy. (Large preview)

Justin Yarbrough voices poorly-authored heading elements as a concern, and he’s not alone.

Landmarks

These are five of the eight landmark HTML elements and the roles using them create. (Large preview)

Here’s what Justin has to say:

Labeled Controls

Brian Moore tells us about “form fields with no label or at least one that isn’t programmatically associated so it doesn’t read anything.”

It’s another frustratingly common problem.

In addition, a label element should not be used by itself, say for a label on a diagram. This might seem counter-intuitive at first, but please bear with me.

<label for="your-name">Your name</label> <input type="text" id="your-name" name="your-name" autocomplete="name">  <label for="eye">Cornea</label> <label for="eye">Pupil</label> <label for="eye">Lens</label> <label for="eye">Retina</label> <label for="eye">Optic Nerve</label> <img id="eye" alt="A diagram of the human eye." src="parts-of-the-eye.png" />

Alternative Descriptions

Kenny Hitt mentions that when:

[embedded content]

ARIA

Provided that you use the appropriate native HTML element, assistive technology will handle all of that for you. Do more, more robustly, with less effort? Sounds great to me!

(Large preview)

Representation matters. To get a better understanding of how the ARIA code you wrote actually works, I recommend hiring people to tell you. Here are four such services that do exactly that:

Contrast

Color Contrast

(Large preview)

High Contrast

Striving For Perfection

To quote Léonie Watson,

“Accessibility doesn’t have to be perfect, it just needs to be a little bit better than yesterday.”

Further Reading

Thank you to Brian Moore, Damien Senger, Jim Kiely, Justin Yarbrough, Kenny Hitt, and Soren Hamby for sharing their insights and experiences.

(ra, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/equivalent-experiences-thinking-equivalently/

0 notes

chrissyrholmes · 7 years ago

Text

Top 15 JavaScript Plugins for Extending Your Web Forms

You can add tons of cool features onto your site with JavaScript. But there are so many libraries and plugins to choose from, it can be a drag finding the best options.

If you’re designing custom forms like user signups/logins, contact pages, or settings pages, these plugins can add some extra dynamic features to jazz up your static input fields.

JCF Forms

One of my favorite JS form plugins is JCF Forms created by the team at PSD2HTML. The cryptic JCF acronym stands for JavaScript Custom Forms and it lives up to its name.

You’re able to customize default select menus, range sliders, input fields, upload forms, pretty much everything you’d need in a form.

This is totally free and built on jQuery so it should be no trouble to setup. You can also find more docs and info on the official GitHub repo if you want to learn more.

iCheck

Checkboxes and radio buttons are a staple of web forms. But they’re also the toughest to customize, and the default styles look very bland.

Thankfully the iCheck plugin is super easy to setup and customize without much JS knowledge. This works on jQuery and comes with a handful of pre-designed themes you can edit with ease.

But aside from looks, this plugin also supports keyboard inputs, 32 custom options and almost a dozen callback methods to handle user behaviors.

Parsley.js

If you prefer vanilla JS then you might like Parsley, a free JS-based form validation library. This is totally free to download and it’s one of the most complete plugins made for data validation.

Parsley is unique in that it doesn’t require complex regular expressions to get it working. It comes with built-in validators for all types of inputs like phone numbers, credit cards, addresses, and emails.

Check out the examples page to see if Parsley could be right for you.

FloatLabel.js

I don’t mind placeholder text but I vastly prefer the FloatLabel.js technique over anything else. This creates a placeholder for default fields but moves the text just above the field once it’s focused & filled in.

This way you can add information to the field with ease and still keep the form label in clear view.

Note that this is a jQuery plugin so it does require a copy of that library. But setup is pretty simple and you can follow the instructions from GitHub to get this running smoothly.

Tooltipster

Complex forms do well with tooltips guiding the user along the way. That’s the beauty of Tooltipster, a free jQuery plugin that lets you add tooltips anywhere on the screen.

You can define these tooltips based on user behaviors like hover, click, focus, or while entering text into a field. You can also customize their styles and animations while connecting these tooltips into Ajax requests or callback methods.

Flexselect

If you don’t like the default HTML select menu style then take a look at Flexselect. This free jQuery plugin restyles all select menus into dropdown panels tied to input fields.

These can blend much nicer into a typical layout, and they do feel easier to use.

Note the setup is a little tricky because this plugin has a couple of dependencies, but it’s also flexible enough to customize and restyle to your liking.

Fort.js

Some web sites display progress bars at the top of the screen to show completion of a form. This is more useful on lengthy forms where the user might want to know how soon they’ll be done.

With Fort.js you can quickly add this effect to your site with just a few lines of code. The plugin is totally free and works with any number of input fields.

Also check out the live demo to see how this would look on a real page.

Switchery

The classic iOS-style switch redefined toggle inputs. Those original on/off switches got a redesign in iOS 7 which led to libraries like Switchery.

This free open source plugin lets you create on/off toggles in the same style as iOS 7 inputs. Each switch works on a checkbox where the user clicks to either check(on) or uncheck(off) a setting.

You can spice up any settings page or profile page by swapping out simple checkboxes for these on/off toggles.

jQuery CC Validator

Ecommerce shops have to deal with credit card validation and handling sensitive inputs. Data security is a whole separate topic but this jQuery CC Validator is by far the best plugin for validation.

It’s totally free, and open source, running on top of the jQuery library. It’s super easy to setup, and the live demo shows just how much you can do with this incredible plugin.

Rangeslider.js

One of the newer features in HTML5 is the range input. This lets the user slide an input bar and select a range of numeric data.

But the default style is pretty basic so plugins like Rangeslider.js have grown in popularity.

This free jQuery plugin works as a polyfill of the HTML5 range slider. For browsers which don’t support it, you’ll still get the classic range input, so this is perfect for all web & mobile browsers.

BS3 Datepicker

You can find tons of free Bootstrap frameworks out there for awesome web templates. And the same goes for plugins that add functionality onto the Bootstrap library.

One such example is the BS3 Datepicker made for custom web forms.

There is rarely a one-size-fits-all solution for date picking. But this plugin offers a genuine interface that most people will understand how to use even at a glance. Plus it’s fully designed around the Bootstrap styles, so it blends right in.

Flatpickr

If you want a datepicker that’s a little easier to setup check out Flatpickr. This free plugin uses pure JavaScript to create a full date/time picker with tons of optional features.

The demo page is a great place to check out and see what this thing can do. It uses a simple JavaScript animation along with a basic drop shadow effect to blend into any layout.

Anyone who needs a date/time picker with lots of room for customization will get a lot out of this plugin.

jQuery File Uploads

Handling user file uploads is by far the most complex form task. You need to create an input that works on all devices, but also accepts specific types of files and knows how to process them on the backend.

This plugin fits nicely with other libraries like jQuery and Angular so it’s really the best choice for anything related to file uploads.

Just note this does take some effort to configure so you’ll need to know your way around JavaScript.

Ideal Forms

In the newest version of Ideal Forms 3 you’ll find a host of great features like auto-form validation and custom form designs.

These designs include checkboxes, radio buttons, input fields, calendar UIs, and even support for 3rd party plugins.

The setup process is very lengthy but gives you dozens of extra form features with one library. Take a look at the GitHub setup guide for more details.

jQuery Autotab

Last but certainly not least is the jQuery Autotab plugin by Matthew Miller. This lets you define a certain length for any form input so it’ll auto-tab onto the next form once completed.

It works best for fields that require a set number of characters like phone numbers or birthdays. Check out the live demo to see how this works and if it could help to extend your web forms.

from Web Designing https://1stwebdesigner.com/javascript-plugins-web-forms/

0 notes

iyarpage · 8 years ago

Text

11 Experimental CSS Projects That’ll Blow Your Mind

There’s a lot you can do with just CSS and a web browser. Great developers love to push the envelope and show just how much is possible.

While experimental projects aren’t always useful on production sites, they are incredibly inspiring and educational.

We’ve organized a handful of CSS projects that showcase the true power of CSS. These are all hosted on CodePen so you can even study and clone the source code to see how they work.

1. Gradient Loading Bars

This Sass loading page uses animated gradients and resizable elements to create a repeating loading effect.

Most people should recognize this loading animation from Facebook which uses a smaller version of this vertical bar loader. But most web loaders use animated GIFs since images are more compliant with all browsers.

This CSS3 loading bar proves that with some creative thinking to can rebuilt almost any animation style you want.

See the Pen Loading bars by MaxStalker (@MaxStalker) on CodePen.

2. Solar System Animation

Here’s one of the most complex CSS projects I could find online. This dynamic solar system design by Malik Dellidj runs on pure CSS without any images.

Every planet is rendered in CSS including the rotation speeds. This project is meant to be an accurate model of the solar system and it even features a realistic interstellar background to boot.

I can’t imagine how long this took just to make the planet icons, let alone get the animation speeds right. But where there’s a will there’s a way.

See the Pen Solar System animation – Pure CSS by Malik Dellidj (@kowlor) on CodePen.

3. Pure CSS Minesweeper

I never thought I’d see the day when classic Windows minesweeper could be played using pure CSS. Yet thanks to developer Bali Balo that day has come.

Note this doesn’t work exactly as well as the traditional Minesweeper because it doesn’t keep score properly. But it does track time accurately and it doesn’t use a lick of JavaScript.

Somehow even the interface looks surprisingly close to the original Minesweeper UI and it all runs on CSS. While it may not be a perfect replica it’s close enough to reel me into playing a few rounds.

See the Pen Pure CSS minesweeper by Bali Balo (@bali_balo) on CodePen.

4. Day and Night Toggles

On the surface this toggle switch may look pretty simple. It runs through a checkbox input and passes data onto the backend, although that’s not really the impressive part.

This toggle has a few features that make it one of the best frontend on/off switches:

The toggle icon changes from a sun to a moon

Stars and clouds animate into while switching

It’s designed with 100% pure CSS

Somehow this on/off switch catches every user click and uses that event to animate the day/night toggle area into view. The sun and moon icon designs are also nicely stylized considering they run on nothing but CSS.

See the Pen Pure Css “day and night” toggle by Benjamin Réthoré (@bnthor) on CodePen.

5. CSS Mouse Tracking

Traditional mouse tracking is the work of JavaScript which reports the user’s X/Y coordinates on the page.

Technically you still need JavaScript to gather these coordinates and do anything useful with them. But this snippet shows that you can design a pure CSS mouse tracking feature that follows the user’s every movement.

Can’t really think of a practical use for this but it could be fun on a prank site.

See the Pen Experimental pure CSS mouse tracking by Momcilo Popov (@Momciloo) on CodePen.

6. Flat Amusement Park

We’ve all seen vector icons and illustrations designed for the web. But what about full-page vector illustrations designed with raw CSS and SVG code?

This amusement park design is an experimental project that only works in SVG-supported browsers. Yet in those modern browsers it renders flawlessly and every element has a very realistic placement on the page.

The animations are certainly impressive but it’s the accuracy of the SVG elements that also grab my attention. In a few years we might find these kinds of illustrations on the web running solely in code without any image files.

See the Pen Flat design amusement park svg by Lina (animation powered by CSS) by Vladimir Gashenko (@gxash) on CodePen.

7. Möbius in 3D

Designing a repeating CSS animation like the Möbius strip concept is pretty tough. But add in some 3D elements and varying gradients? Now you’ve got a real challenge.

This snippet is quite impressive considering how smooth it looks and how little code is used (only 90 lines of CSS). With Haml you only need 6 lines of code to create the entire concept too.

I’ll admit this wouldn’t be super useful on a real website but it’s a testament to how much you can do with a few dozen lines of HTML and CSS.

See the Pen Möbius 6hedrons (pure CSS) by Ana Tudor (@thebabydino) on CodePen.

8. Custom Map Creator

After using this webapp for a few seconds you may feel confident that it runs on JavaScript. The dynamic behaviors like 3D rotation and terrain placement are all signs of a sweet JS webapp.

But this map creator UI by Vincent Durand is actually 100% pure CSS. The arrows for rotation, the rotation effect itself, and all the click-to-place features run on CSS.

It’s worth mentioning how this entire concept is rendered using 3D cubes too. The blocks themselves work as 3D elements and you can rotate the cubes just by hovering.

No doubt one of the craziest uses for CSS I’ve seen in a long time.

See the Pen Full CSS Map creator by Vincent Durand (@onediv) on CodePen.

9. Pure CSS iOS 7 Icons

This project’s a little less interactive but still just as breathtaking. Developer Peter Schmiz recreated all of the main iOS 7 app icons using pure HTML and CSS.

None of these icons use any SVGs or image files. Every element in each icon is hard coded into HTML with a span/div element, then styled using CSS. The craziest part is how accurate these are!

The full set includes 22 icons and they’re all pretty spot on. I’m most impressed with the attention to detail for icons like Maps and Weather. Just more proof that with enough time and patience you can pretty much design anything in CSS.

See the Pen iOS 7 icons with pure CSS by Peter Schmiz (@peterschmiz) on CodePen.

10. Single-Element Slack Loader

Re-creating the Slack loading animation with CSS3 is definitely impressive. But this snippet recreates the Slack loader with just a single element on the page. That’s what I call dedication.

The total CSS count for this snippet is just over 100 lines which includes the Slack logo colors and the animation effects.

I can’t say if this idea would work for other branded loading icons but I’m certainly impressed with this one.

See the Pen Single element Slack loader by CrocoDillon (@CrocoDillon) on CodePen.

11. Animated 3D Bar Charts

You’ll find dozens of custom 3D bar designs in CodePen all with their own animations. But these 3D bars by Rafael González stand out for all the other modern CSS bar graphs.

Each of these charts run on flexbox for containers so they’ll auto-size depending on how many bars you add and how large the container is. Plus each bar chart animates when it slides into view, all of which is controlled through pure CSS.

And since each bar’s size runs in em’s you can adjust every single bar to scale naturally based on browser font sizes. A nifty example proving that modern CSS is a whole lot more flexible than ever before.

See the Pen Pure CSS Bars by Rafael González (@rgg) on CodePen.

FREETER PRO: Organize Your Work with this Productivity App – only $14!

Source p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;} 11 Experimental CSS Projects That’ll Blow Your Mind published first on http://ift.tt/2fA8nUr

0 notes

webbygraphic001 · 8 years ago

Text

11 Experimental CSS Projects That’Ll Blow Your Mind

There’s a lot you can do with just CSS and a web browser. Great developers love to push the envelope and show just how much is possible.

While experimental projects aren’t always useful on production sites, they are incredibly inspiring and educational.

We’ve organized a handful of CSS projects that showcase the true power of CSS. These are all hosted on CodePen so you can even study and clone the source code to see how they work.

1. Gradient Loading Bars

This Sass loading page uses animated gradients and resizable elements to create a repeating loading effect.

This CSS3 loading bar proves that with some creative thinking to can rebuilt almost any animation style you want.

See the Pen Loading bars by MaxStalker (@MaxStalker) on CodePen.

2. Solar System Animation

Here’s one of the most complex CSS projects I could find online. This dynamic solar system design by Malik Dellidj runs on pure CSS without any images.

Every planet is rendered in CSS including the rotation speeds. This project is meant to be an accurate model of the solar system and it even features a realistic interstellar background to boot.

I can’t imagine how long this took just to make the planet icons, let alone get the animation speeds right. But where there’s a will there’s a way.

See the Pen Solar System animation – Pure CSS by Malik Dellidj (@kowlor) on CodePen.

3. Pure CSS Minesweeper

I never thought I’d see the day when classic Windows minesweeper could be played using pure CSS. Yet thanks to developer Bali Balo that day has come.

Note this doesn’t work exactly as well as the traditional Minesweeper because it doesn’t keep score properly. But it does track time accurately and it doesn’t use a lick of JavaScript.

See the Pen Pure CSS minesweeper by Bali Balo (@bali_balo) on CodePen.

4. Day and Night Toggles

On the surface this toggle switch may look pretty simple. It runs through a checkbox input and passes data onto the backend, although that’s not really the impressive part.

This toggle has a few features that make it one of the best frontend on/off switches:

The toggle icon changes from a sun to a moon

Stars and clouds animate into while switching

It’s designed with 100% pure CSS

See the Pen Pure Css “day and night” toggle by Benjamin Réthoré (@bnthor) on CodePen.

5. CSS Mouse Tracking

Traditional mouse tracking is the work of JavaScript which reports the user’s X/Y coordinates on the page.

Can’t really think of a practical use for this but it could be fun on a prank site.

See the Pen Experimental pure CSS mouse tracking by Momcilo Popov (@Momciloo) on CodePen.

6. Flat Amusement Park

We’ve all seen vector icons and illustrations designed for the web. But what about full-page vector illustrations designed with raw CSS and SVG code?

See the Pen Flat design amusement park svg by Lina (animation powered by CSS) by Vladimir Gashenko (@gxash) on CodePen.

7. Möbius in 3D

Designing a repeating CSS animation like the Möbius strip concept is pretty tough. But add in some 3D elements and varying gradients? Now you’ve got a real challenge.

This snippet is quite impressive considering how smooth it looks and how little code is used (only 90 lines of CSS). With Haml you only need 6 lines of code to create the entire concept too.

I’ll admit this wouldn’t be super useful on a real website but it’s a testament to how much you can do with a few dozen lines of HTML and CSS.

See the Pen Möbius 6hedrons (pure CSS) by Ana Tudor (@thebabydino) on CodePen.

8. Custom Map Creator

After using this webapp for a few seconds you may feel confident that it runs on JavaScript. The dynamic behaviors like 3D rotation and terrain placement are all signs of a sweet JS webapp.

But this map creator UI by Vincent Durand is actually 100% pure CSS. The arrows for rotation, the rotation effect itself, and all the click-to-place features run on CSS.

It’s worth mentioning how this entire concept is rendered using 3D cubes too. The blocks themselves work as 3D elements and you can rotate the cubes just by hovering.

No doubt one of the craziest uses for CSS I’ve seen in a long time.

See the Pen Full CSS Map creator by Vincent Durand (@onediv) on CodePen.

9. Pure CSS iOS 7 Icons

This project’s a little less interactive but still just as breathtaking. Developer Peter Schmiz recreated all of the main iOS 7 app icons using pure HTML and CSS.

None of these icons use any SVGs or image files. Every element in each icon is hard coded into HTML with a span/div element, then styled using CSS. The craziest part is how accurate these are!

See the Pen iOS 7 icons with pure CSS by Peter Schmiz (@peterschmiz) on CodePen.

10. Single-Element Slack Loader

Re-creating the Slack loading animation with CSS3 is definitely impressive. But this snippet recreates the Slack loader with just a single element on the page. That’s what I call dedication.

The total CSS count for this snippet is just over 100 lines which includes the Slack logo colors and the animation effects.

I can’t say if this idea would work for other branded loading icons but I’m certainly impressed with this one.

See the Pen Single element Slack loader by CrocoDillon (@CrocoDillon) on CodePen.

11. Animated 3D Bar Charts

You’ll find dozens of custom 3D bar designs in CodePen all with their own animations. But these 3D bars by Rafael González stand out for all the other modern CSS bar graphs.

See the Pen Pure CSS Bars by Rafael González (@rgg) on CodePen.

FREETER PRO: Organize Your Work with this Productivity App – only $14!

Source from Webdesigner Depot http://ift.tt/2wYHnAV from Blogger http://ift.tt/2xExbzO

#Blogger

0 notes

noahdnicholus · 8 years ago

Text

Top 15 JavaScript Plugins for Extending Your Web Forms

You can add tons of cool features onto your site with JavaScript. But there are so many libraries and plugins to choose from, it can be a drag finding the best options.

If you’re designing custom forms like user signups/logins, contact pages, or settings pages, these plugins can add some extra dynamic features to jazz up your static input fields.

JCF Forms

One of my favorite JS form plugins is JCF Forms created by the team at PSD2HTML. The cryptic JCF acronym stands for JavaScript Custom Forms and it lives up to its name.

You’re able to customize default select menus, range sliders, input fields, upload forms, pretty much everything you’d need in a form.

This is totally free and built on jQuery so it should be no trouble to setup. You can also find more docs and info on the official GitHub repo if you want to learn more.

iCheck

Checkboxes and radio buttons are a staple of web forms. But they’re also the toughest to customize, and the default styles look very bland.

Thankfully the iCheck plugin is super easy to setup and customize without much JS knowledge. This works on jQuery and comes with a handful of pre-designed themes you can edit with ease.

But aside from looks, this plugin also supports keyboard inputs, 32 custom options and almost a dozen callback methods to handle user behaviors.

Parsley.js

If you prefer vanilla JS then you might like Parsley, a free JS-based form validation library. This is totally free to download and it’s one of the most complete plugins made for data validation.

Check out the examples page to see if Parsley could be right for you.

FloatLabel.js

This way you can add information to the field with ease and still keep the form label in clear view.

Note that this is a jQuery plugin so it does require a copy of that library. But setup is pretty simple and you can follow the instructions from GitHub to get this running smoothly.

Tooltipster

Complex forms do well with tooltips guiding the user along the way. That’s the beauty of Tooltipster, a free jQuery plugin that lets you add tooltips anywhere on the screen.

Flexselect

If you don’t like the default HTML select menu style then take a look at Flexselect. This free jQuery plugin restyles all select menus into dropdown panels tied to input fields.

These can blend much nicer into a typical layout, and they do feel easier to use.

Note the setup is a little tricky because this plugin has a couple of dependencies, but it’s also flexible enough to customize and restyle to your liking.

Fort.js

Some web sites display progress bars at the top of the screen to show completion of a form. This is more useful on lengthy forms where the user might want to know how soon they’ll be done.

With Fort.js you can quickly add this effect to your site with just a few lines of code. The plugin is totally free and works with any number of input fields.

Also check out the live demo to see how this would look on a real page.

Switchery

The classic iOS-style switch redefined toggle inputs. Those original on/off switches got a redesign in iOS 7 which led to libraries like Switchery.

This free open source plugin lets you create on/off toggles in the same style as iOS 7 inputs. Each switch works on a checkbox where the user clicks to either check(on) or uncheck(off) a setting.

You can spice up any settings page or profile page by swapping out simple checkboxes for these on/off toggles.

jQuery CC Validator

Ecommerce shops have to deal with credit card validation and handling sensitive inputs. Data security is a whole separate topic but this jQuery CC Validator is by far the best plugin for validation.

It’s totally free, and open source, running on top of the jQuery library. It’s super easy to setup, and the live demo shows just how much you can do with this incredible plugin.

Rangeslider.js

One of the newer features in HTML5 is the range input. This lets the user slide an input bar and select a range of numeric data.

But the default style is pretty basic so plugins like Rangeslider.js have grown in popularity.

BS3 Datepicker

You can find tons of free Bootstrap frameworks out there for awesome web templates. And the same goes for plugins that add functionality onto the Bootstrap library.

One such example is the BS3 Datepicker made for custom web forms.

Flatpickr

If you want a datepicker that’s a little easier to setup check out Flatpickr. This free plugin uses pure JavaScript to create a full date/time picker with tons of optional features.

The demo page is a great place to check out and see what this thing can do. It uses a simple JavaScript animation along with a basic drop shadow effect to blend into any layout.

Anyone who needs a date/time picker with lots of room for customization will get a lot out of this plugin.

jQuery File Uploads

This plugin fits nicely with other libraries like jQuery and Angular so it’s really the best choice for anything related to file uploads.

Just note this does take some effort to configure so you’ll need to know your way around JavaScript.

Ideal Forms

In the newest version of Ideal Forms 3 you’ll find a host of great features like auto-form validation and custom form designs.

These designs include checkboxes, radio buttons, input fields, calendar UIs, and even support for 3rd party plugins.

The setup process is very lengthy but gives you dozens of extra form features with one library. Take a look at the GitHub setup guide for more details.

jQuery Autotab

Last but certainly not least is the jQuery Autotab plugin by Matthew Miller. This lets you define a certain length for any form input so it’ll auto-tab onto the next form once completed.

It works best for fields that require a set number of characters like phone numbers or birthdays. Check out the live demo to see how this works and if it could help to extend your web forms.

from Web Designing Tips https://1stwebdesigner.com/javascript-plugins-web-forms/

0 notes