Archived entries for Design

Semantic Markup – Create, Support and Extract

Semantic Data Extractor

As Kevin Ryan pointed out at work yesterday, the W3’s Semantic Data Extractor is a pretty sweet tool. I’ve been steadily promoting Layered Semantic Markup at work — the importance of meaningful markup as the core of web development. This is a great tool to show that value, and remind that the reason you put meaning in is to get meaning out.

The tool tries to extract information from a semantically-rich HTML document. It only uses information available through the good usage of the semantics provided by HTML. “The aim is to show that providing semantically rich HTML gives much more value to your code: using semantically rich HTML allows a better use of CSS, and makes your HTML intelligible to a wider range of user agents (especially search engines bots).”

To see it in action, check out the new next.yahoo.com page. The Extractor handles it pretty well, showing a clear document hierarchy.

What is Layered Semantic Markup?

Today’s Wrong Solution is Tomorrow’s Constraint

Layered Semantic Markup (LSM) is not a technology, but a framework comprised of HTML, XHTML, Cascading Style Sheets (CSS), Javascript, DOM and other Web technologies. LSM allows for appropriately implemented principles and standards.

LSM is a development framework for creating Web documents and experiences. LSM builds for the least capable devices first, then enhances those documents with separate logic for presentation, in ways that do not place an undue burden on baseline devices but which allow a richer experience for those users with modern graphical browser software. LSM supports all user agents, and is inclusive by design. (Progressive EnhancementUnobtrusive Javascript)

LSM has structural semantic markup at its core, which provides lean, meaningful, accessible pages. This well-built core and the clear separation of structural, presentational and behavioral layers make this development philosophy superior to many short-sighted approaches.

Today’s wrong solution is tomorrow’s constraint. A holistic vision – an underlying philosophy – must guide technical decisions. LSM provides the strategy for a sound and future-ready approach.

LSM embraces Graded Browser Support by using one markup document, subsequently layered with stylesheets and scripts that provide a gradually enhanced experience across a wide variety of browsers and devices.

This approach has profound advantages over other browser support approaches such as graceful degradation. Graded Browser Support recognizes that advanced technology support is not a guarantee of the future, and that legacy software as well as alternative devices (mobile) must always be considered. Graded Browser Support defines support in terms of current capabilities, not in terms of legacy or obsolete software; it embraces accessibility, universality, and peaceful coexistence with more feature-rich browsers/devices; and it allows for adoption of new technology and strategies without leaving any browser/device behind.

Credits

This work is heavily influenced and contains directly passages from Debra Chamra’s “Progressive Enhancement: Paving the Way for Future Web Design“, Steven Champeon and Nick Finck’s presentation “Inclusive Web Design For the Future with Progressive Enhancement“, and Steven Champeon’s “Progressive Enhancement and the Future of Web Design“, all of which may be found here.

Thanks also to the great people who have endlessly debated and developed these topics with me: James Berry, Sean Imler, Todd Kloots, Jon Koshi, Mike Lee, Thomas Sha, Matt Sweeney, Chanel Wheeler, and Christina Wodtke; and everybody else; and to everybody who puts their ideas online so that others may be inspired. Thanks.

How Big Is Your Footprint?

“Ever wondered how much “nature” your lifestyle requires? You’re about to find out.”

IF EVERYONE LIVED LIKE YOU, WE WOULD NEED 4.3 PLANETS.

What’s your footprint?

SMS Clipping with Yahoo! Local Search

Send search results to your phone from your desktop.

Yahoo! Local released a new search feature today, allowing you to quickly send clips of search results to you phone via a free SMS text message. You can do this directly from the search results page – no page reload necessary. It couldn’t be easier:

Here’s how:

From the front page of Yahoo!, click the “Local” tab to toggle the search box, and enter a local search. (Or use http://local.yahoo.com directly.) Search for anything you’d find in a yellow pages, or anything with an address. All your saved addressed from Y!Maps and other Y! sites should be available as locations to search around.

local-1

From the search results page (SRP), click “Send to Phone” to send the listing to your phone. It’s sent via SMS I think.

local-2

The Send interface is straight forward, and let’s you enter a phone number, or select a previously used or saved mobile number. (It seems to default to whatever number you’ve registered with http://mobile.yahoo.com, though that step isn’t necessary.)

local-3

From the standard SRP view, you can click “View Results on Map” to see them graphically displayed around your search location. (Viewing results on a map is great, and also lets you quickly find nearby parking, ATMs, restaurants — even nearby public restrooms.)

local-4

From this map view, click any of the numbered representations for more information, and the option to “Send to Phone”.

local-5

Enter the recipient phone number in the same manner as from the SRP list view.

local-6

The resulting message looks something like this:

pt_localstp_silh_lg_2

Give it a shot, it’s pretty good. (And if you haven’t played with Local search, this is the perfect opportunity.)

Congrats to my friends Chris and Jason, who were both involved with the webdev work on this.

Update: Gary Price at Search Engine Watch has an entry on this now.

Beautiful API

This page is beautiful: http://www.flickr.com/services/api/. Every service-based web site should have a page like this.

This is a great way to understand and communicate your functionality. If you can’t describe your site in these terms, well, start trying because you should be able to. (You don’t have to make it public.)

I’m not here to talk about the benefits of web services and open APIs — but at least internally, if you can think about your offerings in these clean and explicit terms you’ll be much more successful.

We’ve moved beyond the “If you build it, they will come” days. We’re now in the “If you offer it, they will build it” days. This cool map-based Flickr interface was built because the API existed.

Metafilter Tags

Matt Haughey writes: “Jumping on the delicious and flickr bandwagon, I’ve added tags to MetaFilter

Must Provide Volume Controls

Rule: Volume controls and a Mute button must exist for all online audio.

I ended up on a promotion page for American Airlines. I was actually interested in the demo they offered, so I clicked to watch. The demo had an audio track but no way to turn off the volume. Because I couldn’t turn it off, I immediately closed the window. For me, this reaction is sometimes nearly automatic – almost a type of panic. In this case, I was listening to music.

Unfortunately for American Airlines, I wasn’t as interested in their audio narrative as I was in the music I already had. Plus, I didn’t want to switch over to iTunes and then back again. If you want be successful online, forget about the audio. If you really can’t, make it opt-in. No matter what, leave the user in charge, or they’ll leave you.



San Francisco, California | Creative Commons By-2.5 License | Contact

RSS Feed. This blog is proudly powered by Wordpress and uses Modern Clix, a theme by Rodrigo Galindez.