Tags: forms

123

sparkline

Thursday, April 5th, 2018

Why the Web Will Win || Matthew Ström: designer & developer

The first 22 years of the web platform were revolutionary. The open, accessible, and feature-rich applications that exist on the platform continue to drive the global economy. The next 5 years look like they’ll be filled with more innovation and growth than ever.

The web will be the platform of the Next Big Thing. Not just as the distribution network many see it as today; the web platform will deliver the most innovative experiences. They’ll be innovative not just for how they use new technology, but also because of how easy it will be for new users to experience.

Friday, March 30th, 2018

Focusing on Focus Styles | CSS-Tricks

A deep dive into the :focus pseudo-class and why it’s important.

Thursday, March 29th, 2018

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?

Wednesday, March 21st, 2018

Facebook and the end of the world

I’d love to see some change, and some introspection. A culture of first, do no harm. A recognition that there are huge dangers if you just do what’s possible, or build a macho “fail fast” culture that promotes endangerment. It’s about building teams that know they’ll make mistakes but also recognize the difference between great businesses opportunities and gigantic, universe-sized fuck ups.

90 Minutes | Type Supply

Tal Leming’s thoroughly delightful (and obsessive) account of designing the 90 Minutes typeface for U.S. Soccer.

FIFA has strict regulations that govern the size and stroke weight of numbers and letters used on official match uniforms. This made me unbelievably paranoid. I had a nightmare that one of the national teams would be set for kickoff of an important match and the referee would suddenly blow the whistle and say, “Hey, hey, hey! The bottom stroke of that 2 is 1 mm too light. The United States must forfeit this match!”

Monday, March 12th, 2018

The web is under threat. Join us and fight for it. – World Wide Web Foundation

What was once a rich selection of blogs and websites has been compressed under the powerful weight of a few dominant platforms. This concentration of power creates a new set of gatekeepers, allowing a handful of platforms to control which ideas and opinions are seen and shared.

Tim Berners-Lee on the 29th anniversary of Information Management: A Proposal.

Two myths currently limit our collective imagination: the myth that advertising is the only possible business model for online companies, and the myth that it’s too late to change the way platforms operate. On both points, we need to be a little more creative.

While the problems facing the web are complex and large, I think we should see them as bugs: problems with existing code and software systems that have been created by people — and can be fixed by people.

Wednesday, March 7th, 2018

How we’ve made GOV.UK Elements even more accessible

A nice run-down of incremental accessibility improvements made to Gov.uk (I particularly like the technique of updating the title element to use the word “error” if the page is displaying a form that has issues).

Crucially, if any of the problems turned out to be with the browser or screen reader, they submitted bug reports—that’s the way to do it!

Tuesday, February 27th, 2018

On Weaponised Design - Our Data Our Selves

A catalogue of design decisions that have had harmful effects on users. This is a call for more inclusive design, but also a warning on the fetishisation of seamlessness:

The focus on details and delight can be traced to manifestos like Steve Krug’s Don’t Make Me Think, which propose a dogmatic adherence to cognitive obviousness and celebrates frictionless interaction as the ultimate design accomplishment.

Wednesday, November 29th, 2017

Accessible custom styled form elements - Rian Rietveld

An excellent level-headed evaluation of styling and scripting form controls, weighing up the benefits and trade-offs. The more tightly you control the appearance, the less you get to benefit from the functionality (and accessibility) that the browser gives you for free …meaning you’ve now to got to work harder to replace it.

HTML elements like check buttons, radio buttons or select options can be hard to style with CSS in a custom design. There are many workarounds for this, but are they accessible?

Monday, November 20th, 2017

Happier HTML5 Form Validation - daverupert.com

Dave uses just a smidgen of JavaScript to whip HTML5’s native form validation into shape.

Instead of being prescriptive about error messaging, we use what the browser natively gives us.

Wednesday, November 1st, 2017

Web Form Conundrum: disabled or readonly? | Aaron Gustafson

Good question! And a good answer:

If you really need it, which you probably don’t, readonly is what you want.

Tuesday, October 31st, 2017

On platforms and sustainability – confused of calcutta

JP Rangaswami also examines the rise of the platforms but he’s got some ideas for a more sustainable future:

A part of me wants to evoke Jane Jacobs and Christopher Alexander when it comes to building sustainable platforms. The platform “community” needs to be cared for and looked after, the living spaces they inhabit need to be designed to last. Multipurpose rather than monoculture, diverse rather than homogeneous . Prior industrial models where entire communities would rely on a single industry need to be learnt from and avoided. We shouldn’t be building the rust belts of the future. We should be looking for the death and life of great platforms, for a pattern language for sustainable platforms.

André Staltz - The Web began dying in 2014, here’s how

This is the clickbaitiest of titles, but the post has some good sobering analysis of how much traffic driven by a small handful players. It probably won’t make you feel very cheery about the future.

(For some reason, this article uses all-caps abbreviations for company names, as though a stock ticker started generating hot takes: GOOG, FB, AMZN, etc. It’s a very odd writing style for a human.)

Friday, September 22nd, 2017

The First Web Apps: 5 Apps That Shaped the Internet as We Know It

A great bit of web history spelunking in search of the first websites that allowed users to interact with data on a server. Applications, if you will. It’s well written, but I take issue with this:

The world wide web wasn’t supposed to be this fun. Berners-Lee imagined the internet as a place to collaborate around text, somewhere to share research data and thesis papers.

This often gets trotted out (“the web was intended for scientists sharing documents”), but it’s simply not true that Tim Berners-Lee was only thinking of his immediate use-case; he deliberately made the WWW project broad enough to allow all sorts of thitherto unforeseen uses. If he hadn’t …well, the web wouldn’t have been able to accommodate all those later developments. It’s not an accident that the web was later used for all sorts of unexpected things—that was the whole idea.

Anyway, apart from that misstep, the rest of the article is a fun piece, well worth reading.

Wednesday, September 6th, 2017

Form Validation with Web Audio | CSS-Tricks

An interesting idea from Ruth—using subtle sounds to augment inline form validation.

There aren’t any extremely established best practices for this stuff. The best we can do is make tasteful choices and do user research. Which is to say, the examples in this post are ideas, not gospel.

Thursday, July 27th, 2017

Berlin Typography – Text and the City // Buchstaben und die Stadt

A blog dedicated to documenting the letterforms on display in Berlin.

Monday, July 3rd, 2017

Fixing fieldsets — That Emil is Emil Björklund

This is an excellent proposal from Emil. If we can apply display: contents to fieldsets, then we would finally have a way of undoing the byzantine browser styles that have hindered adoption of this element. This proposal also ensures backwards compatibility so there’d be no breakage of older sites:

The legacy appearance of fieldsets probably needs to be preserved for compatibility reasons. But display: contents is not supported in any old browsers, and is most likely used on exactly zero sites using the legacy look of fieldsets.

Whaddya say, browser makers?

Sunday, July 2nd, 2017

Starting a React-Powered Comment Form | CSS-Tricks

This is a really great screencast on getting started with React. I think it works well for a few reasons:

  • Sarah and Chris aren’t necessarily experts yet in React—that’s good; it means they know from experience what “gotchas” people will encounter.
  • They use a practical use-case (a comment form) that’s suited to the technology.
  • By doing it all in CodePen, they avoid the disheartening slog of installation and build tools—compare it to this introduction to React.
  • They make mistakes. There’s so much to be learned from people sharing “Oh, I thought it would work like that, but it actually works like this.”

There’s a little bit of “here’s one I prepared earlier” but, on the whole, it’s a great step-by-step approach, and one I’ll be returning to if and when I dip my toes into React.

Sunday, June 25th, 2017

Implementing a slider well

A look at the feedback needed for a slider control that feels “right”.

You can get most of the behavioural (though not styling) suggestions in HTML by doing this:

<form>
  <input type="range" min="0" max="100" value="50"
   onchange="amount.value=this.value"
   onmousemove="amount.value=this.value">
  <output name="amount">50</output>
</form>

Pure CSS crossword - CSS Grid

Form validation taken to the extreme. If you want to know more about how it was done, there’s an article explaining the markup and CSS.