Category: design

Useful links: Content First, Web Power Tales

Read this: Content First. Why? Because you’ll learn about current changes and trends in web design that are important to you.

danah boyd had a problem: Tumblr disappeared me. She wrote about it on her blog and within hours, Tumblr heard about it and responded.

Tumblr called me, apologized & restored my account. More details from our call on my blog: http://bit.ly/iwcUue More reflections tomorrow!Thu Apr 28 03:05:49 via webdanah boyd
zephoria

Stubbornella mentioned on Twitter that she would like a tool to automate CSS 3 Gradients. You’ll love her tale of what happened next.

ADDENDUM 4/29/2011: Today danah boyd posted a thorough and thoughful post about the rights to names/brands at A Customer Service Nightmare: Resolving Trademark and Personal Reputation in a Limited Name Space.

Tell me again why Infographics are all the rage?

I kind of hate infographics. Seems like everybody who owns a copy of Photoshop thinks they should make one and tweet about it. I’ve looked at a lot of them lately. Is it a fad?

Of the ones I’ve seen, maybe 3 were effective and the rest were impossible. Translated, here’s what I mean by impossible:

  • they were too busy to view on a computer screen
  • the text was too small to read on a computer screen
  • there was too much text
  • it was too complicated to have any impact

A nice, clear paragraph would make more sense than some of the infographics I’ve seen.

Can you mention some good examples?

ARIA Roles 101

See Also: ARIA States 101

As part of the Web Accessibility Initiative (WAI), the Accessible Rich Internet Applications Suite (ARIA), defines a way to make Web content and Web applications more accessible. It is used to improve the accessibility of dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

ARIA roles work now in many browsers and screen readers. When they don’t, they are harmless.

ARIA specifies the following:

  • Roles to describe the type of widget presented, such as “menu,” “treeitem,” “slider,” and “progressmeter”
  • Roles to describe the structure of the Web page, such as headings, regions, and tables (grids)
  • Properties to describe the state widgets are in, such as “checked” for a check box, or “haspopup” for a menu.
  • Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy for those updates—for example, critical updates may be presented in an alert dialog box, and incidental updates occur within the page
  • Properties for drag-and-drop that describe drag sources and drop targets
  • A way to provide keyboard navigation for the Web objects and events, such as those mentioned above

This article will look at the first two items dealing with ARIA roles.

How to use roles

As the list mentioned, roles describe widgets and structure. Structural roles are added to markup as attributes of elements. In XHTML, for example:

<div id="header" role="banner">
<div id="nav"  role="navigation">

or in HTML5

<header role="banner">
<nav role="navigation">

Roles used in ways like the preceding examples are navigation aids for machine readers and for assistive devices such as screen readers.

Roles that describe widgets are added to markup with additional information. The role in the example below identifies the element as a slider, with additional values using the aria prefix prepended to the property name. For example, in a slider widget that allows the user to select the day of the week, the values 1 – 7 indicate the days of the week. The first day of the week, number 1, is Sunday. The aria-valuemin and aria-valuemax restrict the options in the slider to 1 – 7.

<div role="slider"
aria-valuenow="1"
aria-valuemin="1" aria-valuemax="7"
aria-valuetext="Sunday"></div>

List of roles

The W3C list of roles is quoted below. Links go to further definitions of each role on the W3C site.

Roles that act as standalone user interface widgets or as part of larger, composite widgets.

Roles that act as composite user interface widgets. These roles typically act as containers that manage other, contained widgets.

Roles that describe document structures that organize content in a page.

Roles that act as navigational landmarks

Additional Resources

Now Available! InterACT with Web Standards: A Holistic Approach to Web Design

InterACT with Web Standards coverInterACT with Web Standards: a Holistic Approach to Web Design is available today.

This announcement is a BIG DEAL.

This book puts everything you need to teach a class in web design or development with web standards into your hands. The book is easy to use in connection with InterACT’s 17 courses in 6 learning tracks making it the perfect tool and resource for teaching or learning contemporary web design best practices.

If you are a student who wants to learn about building a web site with web standards, this book will lead you there.

For educators, your semester will be a snap to plan with this book. It’s all right there for you.

The book is published by New Riders (2010). There are 10 authors. The major contributor being Chris Mills, with additional expertise from Erin Anderson, Virginia DeBolt, Derek Featherstone, Lars Gunther, Denise Jacobs, Leslie-Jensen-Inman, Christopher Schmitt, Glenda Sims and Aarron Walter. I’m really proud to have been a small part of making the book a reality, because I think the book is going to be very important to students and teachers who are looking for the a reliable resource for web design best practices.

In addition to the writers, a number of other people worked to bring this book to life. They include Aarron Walter as project manager, Patrick Lauke as technical editor, Jeff Riley as development editor, Leslie Jensen-Inman as creative director and Jessi Taylor as book and site designer.

Many kudos go to Leslie Jensen-Inman and Jessi Taylor. When you see this book and hold it in your hands you will realize what a work of art it is from a design and typography point of view. It’s a beautiful book.

Take a look at the table of contents:

  1. InterACT
  2. Tools
  3. Learning on the Web
  4. Internet Fundamentals
  5. Writing for the Web
  6. Information Architecture Intro
  7. Site Planning
  8. Content Analysis
  9. Content Strategy
  10. HTML Intro
  11. CSS Intro
  12. <head>
  13. Headings and Paragraphs
  14. Whitespace
  15. Links
  16. Images
  17. Lists
  18. Tables
  19. Forms
  20. Floats
  21. Positioning
  22. Accessibility Intro
  23. Accessibility Helps
  24. Accessibility Testing
  25. Bringing it All Together
  26. Index

The InterACT with Web Standards book site has everything you need to know. There, you’ll find links to purchase the book, links to code examples from the book, links to bonus content, and links to the sample project. The site has links to information about InterACT, OWEA, and the Web Standards Project. You can take a peek inside the book, read some reviews, grab links to all the resources cited in the book, and MUCH MORE.

Buy now and take advantage of this limited time offer tweeted by @waspinteract.

InterACT With Web Standards, the first book from The Web Standards Project, is out. Save 35% on it with code INTERACT. http://cot.ag/9RS4rEMon May 17 16:00:20 via CoTweetWaSP InterAct
waspinteract

Useful Links: CSS3 dropdown, Facebook metrics, Manage Twitter

CSS3 Dropdown Menu from Web Designer Wall is a beautiful menu and a well written and illustrated tutorial. Great piece of work.

How are you using metrics, benchmarks, and experiments to improve your Facebook presence? is posted on Facebook by Beth Kanter. ) She’s focused on nonprofits, but mentions some tools that would work on the metrics for any Facebook fan page.

Manage Twitter appManage Twitter is a new app that examines the people you follow on Twitter to see who’s active, who’s relevant to you, who doesn’t follow you back. All in the name of helping you pare down the list of who you’re following by finding the right people to unfollow.

It gives you a list of all the people who aren’t following you back. You can hover over each Twitter account and see how active they are and how long they’ve been tweeting. Leave the checkbox selected next to the account name to delete all the folks you no longer want to follow. I found a lot of people I follow, such as the still Twitter-clueless ABC Public Libraries, that I want to follow, even though they don’t follow me. But I did eliminate some people who were no longer relevant.

Have you thought about the gender choices on web forms?

I’ve never had a problem selecting the Female option on a form asking me whether I’m male or female. Never a pause for thought, never an unsure moment. Nothing in my long life ever prompted me to hesitate over the choice between male or female.

An easy choice is probably the case for most people.

But it’s not the case for everyone.

A year or so ago, I watched a presentation by maymay that opened my eyes to the fact that not every person on the planet is quite so confident when faced with a binary gender choice. (I wish I could find that presentation now, but I don’t see a link to it on maymay’s site or blog.) In that year, the problem caused for some by  limiting the gender choices to two options has been percolating in my brain.

A good bit of my thinking dealt with whether or not something about this should be taught to students of web design, in the same way that accessible form design is taught. I didn’t have any brilliant ideas about how to deal with the issue in terms of educating students about what might be a better practice, so I just let the thoughts rattle about in my head.

The fabulous Sarah Dopp does have some brilliant ideas about this. On  Dopp Juice she recently posted Designing a Better Drop Down Menu for Gender with four very good suggestions to replace the binary option of either male or female. The simplest is just stop making the gender option a required form field. Another simple suggestion from Sarah is to don’t even ask the question. She also suggests having a third option—something like “it’s complicated” or “decline to state.” Her fourth idea was a sliding scale.

A lot of people support the idea of having more than two options. A Facebook group petitioning Facebook to include more gender options has almost 19,000 members.

On Dopp Juice, there’s an earlier post that will help you understand the dilemma the gender form field presents to some people called Genders and Drop Down Menus. Another helpful post to clarify the problem for you is Beyond the Binary: Forms at this ain’t livin’.

I invite you to think about the issue of how we deal with gender identification in forms. Also, think about whether there a need to address this at an education level from the angle of best practices, accessibility, or human rights.

Review: Web Design for Developers


get this book at amazon.com

A review by Web Teacher of Web Design for Developers: A Programmer’s Guide to Design Tools and Techniques (Pragmatic Programmers)

(rating: 3 stars)

Web Design for Developers: A Programmers Guide to Design Tools and Techniques by Brian P. Hogan, is, as the title suggests, aimed at developers rather than at designers. In just over 300 pages, Hogan tries to cover everything about creating a web site starting from initial pencil sketches to the finished product. Included are chapters about color, typography, structure, content, HTML, CSS, print and mobile CSS, cross-browser isssues, accessibility, search engine optimization, testing and a set of resources.

The list of topics sounds really good. It’s a lot to ask of one book, and it’s a decent book, but it isn’t a great book. The 300 pages are a restriction. Some things that could take a whole chapter to explain were mentioned with one or two sentences. There are good tips and techniques in the book, but there are also a number of things about the book that I found problematic. For example, in the section on building the home page search form with HTML, the notion of using the <label> with form fields is ignored. Later in the book, the developer is told to go back to the form and add <label> elements for the sake of accessibility. I’m glad he got around to mentioning it, points for that, but doesn’t it make better sense to tell a developer how to design an accessible form right the first time it’s mentioned? Otherwise, it feels like something you might do after you’re finished if you feel like getting around to it.

Some of the information seems out of date. The accessibility chapter talks about using access keys, an idea that’s no longer considered best practice. The use of unobtrusive JavaScript is mentioned in passing after several JavaScript ideas that are not unobtrusive have been trotted out. A tag cloud example is given with links reading <a href="#">. The use of the pound sign in the element is explained by saying that it will be replaced programmatically later, but that programming is never mentioned.

The sections on color and typography were good. The sections on images and image optimization were good.The coding examples in both HTML 4 and HTML 5 for the layout were well done. I had to keep reminding myself that the audience for this book is developers who are adept at things like Java or Ruby or PHP but don’t necessarily know how to make a web site look appealing. Limited and flawed as the book seems to a web standards advocate like myself, to a developer this might be the quick and simple guidance that is needed for a project.

When I read the title of the book I initially thought it might be something along the lines of the classic The Non-Designer’s Web Book by Robin Williams, with its explanation of design techniques. The title gives that impression. However, this book is nothing like that.

Summary: A general and wide-ranging look at web design techniques.

Technorati Tags: ,