Over a million developers have joined DZone.

This Week in WebDev (Oct. 23): Wire-framing the Man

DZone 's Guide to

This Week in WebDev (Oct. 23): Wire-framing the Man

Government, UX, and You: Required reading on object-oriented site architecture and accessibility drawn from the realm of government.

· Web Dev Zone ·
Free Resource

This week in web development news brings advances on two fronts—UX architecture and accessibility—from the realm of government, both as intellectual model and practice.

Architecture from an Election: Object-oriented UX

As Sophia Voychehovski writes in the often-inspiring A List Apart, her baptism by fire came in the form of CNN's homepage for the United States' national election of 2012. CNN would launch a site that was mobile-friendly, responsive, and real-time: 

Election night is like Super Bowl Sunday for CNN.com. If well executed, it’s one of the highest revenue nights in a four-year cycle. To add to the pressure, we were on a tight timeline with a deadline that was not going to budge. November 6th or bust.

Voychehovski began as most of us have so many times: working elements into an initial wireframe, positioning those that would house related pieces of information in proximity, blocking out a task flow among them.

But as she worked, she began to see that the structure of the information suggested a new way of presenting itself. An election is a well-defined system ordered (mostly) by rules. 

An election has a series of re-usable objects, like state, race, and result. And each of those objects holds a stable relationships with the others. Her conceptual insight is reproduced, albeit roughly, here ↓ 

Image title

It wasn’t a sitemap; it showed no hierarchy. It wasn’t a storyboard; it didn’t block out a task flow. Instead, this diagram mapped out a system of things.

I won't spoil the fun of reading the entire tutorial, but I'll leave you with a sample of her design methodology:

Extract objects from goals

Define core content of objects

Nest objects for cross-listing

Force hierarchy


Straight Talk from Uncle Sam: US Web Design Standards Define De Facto 508 Compliance

508-compliant web development has been a source of concern for enterprise because it's both a liability and an unspecified quality. However, web developers can now observe working 508-compliant sites and learn about the technology and ethos that powers these beautiful creations and informs their approach to accessibility—from copy to front-end. 

The US Web Design Standards were released September 28, 2015. This week the design team behind the standards wrote they had been busy gathering telemetry from an unconventional source: fourth graders.

One of the first websites to use the new tools and thinking is for a US Department of Interior project called Every Kid in a Park, which lets each and every fourth grader "see America's natural wonders and historic sites for free." 

Image titleAs project designer Emileigh Barnes writes, 

We believed the site should include all of our diverse public; information for “parents” didn’t fit all the families in the U.S. [so] we changed the wording to read “parents and guardians.” 

It’s largely keyboard accessible, includes detailed alt-text for images, and has improved text-to-background contrast.

The 18F Group

The 18F group designed the site; 18F is a sub-sect of the General Services Administration. Unlike the GSA, 18F is lean, agile, and founded in the tradition of a startup. Their code—both as people and programmers—could be named Responsive and Inclusive by Design. (Brownie points to whoever can generate an acronym beyond the already-taken "RaID!")

The new standards come with fully-transparent documentation, an interactive style guide, and some of the cleanest typography and sharpest contrast among elements that can be had today. 

Don't think so? Want to give Uncle Sam a piece of your mind? You are encouraged to file a GitHub issue. It's a little like voting.

web development

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}