An amusing hacks-conference lightning talk-turned-blog post on web development: “Graceful Hacks” – UX, IA and interaction design tips for hack days. Martin Belam’s talk at The Guardian’s July 2009 Hack Day must have been both funny and useful:

• Funny: “However, I am given to understand that this is now deprecated and has gone out of fashion.”
• Useful: “the Yahoo! Design Pattern Library is your friend.”

It turns out that there are a lot of differences between Google’s regular web crawler and the Google News crawler. And though very few of us will find our content included in Google News, it still seems like a good idea to make our content conform to their technical requirements. Here are a few of them:

• In order for our crawler to correctly gather your content, each article needs to link to a page dedicated solely to that article. We’re unable to index articles from news sections which consist of one long page rather than a series of links that lead to articles on individual pages.
• If your articles are located in a drop down box, we won’t be able to crawl them. Google News is unable to crawl articles only accessible through a drop down menu.
• Google News does not recognize or follow Flash, graphic/image or JavaScript links which link to articles. Our automated crawler is best able to crawl plain text HTML links.
• Google News doesn’t crawl articles in PDF format, although this content is included on Google Web Search. Our automated crawler is currently best able to crawl plain text HTML sites.

Josh Bush’s Masked Input Plugin and Paulo P. Marinas’ AlphaNumeric are both jQuery plugins to prevent input of invalid data in web forms.

The cool browsers support radius corners, but Safari supports CSS transformations that allow developers to scale, skew, and rotate objects on the page like we’re used to doing in PostScript. And better than that, we can animate those transformations over time — all without any JavaScript.

Fire up Safari or Chrome and mouse over the examples here. The screencast at the top is from the menu on that page. There are, obviously, better uses for these transforms, but it’s easy to see it at work there. Also see this screencast. It shows a rendering error, but it’s a better use of the tech.

Now kick it up a notch with 3d transforms. They only work on the iPhone and iPod touch for now, but they’re quite nifty. See these examples: one, two. Paul Bakaus offers more detail, and Matthew Congrove offers this example of flick navigation.

Good work deserves compensation, but commercial themes are still unusual in the world of WordPress. The new themes directory has well over 200 free themes listed, and the old directory had thousands of them. Still, I like Thesis and f8. Actually, I like a bunch of themes from Graph Paper Press (get them all for $99!). And, as we see WordPress adding so many options that require theme support, the promise of free lifetime upgrades for Thesis is also appealing.

For the past year or so I’ve been wanting to design a non-bloggy theme for this site — a beautiful theme with a magazine-like front page showing the most recent post in a handful of categories. But I’m further from it now than last year, so it’s time to move on.

Which isn’t to say that I settled for my new theme. It’s based on Neo-Sapien by Small Potato. I made it a bit wider, the header a bit shorter, and the image is random-ish (random, but cached). I’m still not done tweaking it, but I’m really pleased with where it’s going. Most importantly (this one’s for you, JTPratt), you can now find easy links for things like bSuite and my other projects. And I’m also following Nielsen’s advice with the about and contact pages (though I have slightly hidden the about Casey page).

In my haste to actually finally do this, I decided to do it live. WP Super Cache, without which my blog falls over, made confirming changes a chore, but that forced me to work a bit more methodically. The fastest and easiest way to clear the cache after making a change is to either edit a post or select a new theme (and then change it back again). So if you looked at the site today, you may have found it switching back and forth between the old and new themes for most of the afternoon. And if I’d realized I’d just been linked by Lifehacker (for Sandee’s independence day daiquiri post), I might have done it differently.

We’ve become accustomed to link rot and broken images in nearly all corners of the web, but is there a way to keep things a bit cleaner?

K.T. Lam of Hong Kong University of Science and Technology came up with this sweet trick using jQuery and readyState to find and replace broken images:

jQuery('span#gbs_'+info.bib_key).parents('ul').find('img.bookjacket[@readyState*="uninitialized"]').replaceWith('<img src="'+info.thumbnail_url+'" alt="'+strTitle+'" height="140" width="88" />');

And it works really well, but only in IE. Testing for img.complete or img.naturalWidth might be possibilities, but I’m much more interested in the onerror property of the img tag:

<img src="picture1.gif" onerror="this.onerror=null;this.src='missing.gif';"/>

Or in JS:

var imgsrc = 'picture1.gif';
var img = new Image();
 
img.onerror = function (evt){
	alert(this.src + " can't be loaded.");
}
img.onload = function (evt){
	alert(this.src + " is loaded.");
}
 
img.src = imgsrc;

Or call a JS function when the browser detects a broken image:

<html>
<head>
<script language="JavaScript" type="text/javascript">
function ImgError(source){
	source.src = "/images/noimage.gif";
	source.onerror = "";
	return true;
}
</script>
</head>
 
<body>
<div><img src="http://jquery.com/images/bibeault_cover150A.jpg"
border="1" height="100" alt="image" onerror="ImgError(this)" /></div>
</body>
</html>

I haven’t tested any of this code, but it’s just a matter of time.

I’m a fan of the Sandbox WordPress theme because it does so much to separate application logic from design, and a few small changes to the CSS can make huge changes to the look of the site. I think that’s the idea behind Yahoo! Developer Network’s Grids CSS library. That is, well structured HTML allows very sophisticated styling. All you have to do is plug in your content. To wit:

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.

That got Alister Cameron excited; he’s building a Sandbox-inspired, Yahoo! CSS-based WordPress theme he’s codenamed Vanilla.

A member of the Web4lib mail list asked:

How do I create a semantic web site?

I know I have to use either RDF or OWL but do I use either of these to create a mark up language which I then use to create the web site or, with the semantic web do we move away from mark up languages altogether?

Am I right in thinking that OWL and RDF do not contain any information on how the document is to be displayed or presented? They do not seem to allow for style sheets.

Is the creation of a semantic web site completely different from anything that has gone before and I am stuck in an old way of looking at the problem? Are mark up languages a thing of the past as far as the Web is concerned?

Any clarification would be much appreciated.

RDF is certainly among the acronyms most identified with Semantic Web, but it’s not necessarily as complex as all that, and there are things we can do today to answer the question. Among the best of them (and one that will always deliver value), is to make sure our sites are marked up meaningfully. I know this sounds simple, but it’s surprising how few data-rich library sites take advantage of it.

Example: if you want all the titles of works on a page to be bold, don’t use the <b> tag, instead, use a semantic class name like <class = “title”> and use CSS to make it look like you want. Otherwise, our pages are just a jumble of bold and non-bolded stuff (think how much easier printed citations would be to parse if they were marked up that way).

The costs and benefits of semantic markup are frequently argued on a number of lists, but it’s worth noting that we no longer substitute ‘i’ for ‘1′ or ‘O’ for ‘0′ on our keyboards. Binary just doesn’t work as well with i and o.

It’s also worth looking into Microformats, a way of encoding semantic details into the data we use every day, using the tools we already have. Tantek explains them in a recent presentation.

One huge difference between the Microformats crowd and semantic webbers is the issue of human usability. That is, Microformats are built for humans first, machines second, in part because we just don’t have good and well distributed tools to use data that’s not formatted for human use, but also because it helps clear up errors and prevent gaming.

Tantek speaks of Microformats as a cornerstone of the “lower case semantic web” in this presentation from 2004, and ReadWriteWeb directly compares the two.

I’ve been working on some of these challenges myself, and have worked hard to make content presented in Scriblio semantically clear. Take a look at some of the markup in this example. All the bibliographic data is represented inside an unordered list and is parsable as XML. Here’s an excerpt of the ISBNs:

<li class="isbn"><h3 id="12023_isbn_1" >ISBN</h3>
	<ul>
		<li>1586421158</li>
		<li>9781586421151</li>
	</ul>
</li>

That’s not to say the Semantic Web folks don’t see a difference. This article at Semantic Focus says they miss the point, but I side with Clay Shirky’s Praise for Evolvable Systems. Speaking on how the HTTP and HTML finally delivered on the promise of hyperlinks envisioned decades earlier, he notes:

Centrally designed protocols start out strong and improve logarithmically. Evolvable protocols start out weak and improve exponentially. It’s dinosaurs vs. mammals, and the mammals win every time. The Web is not the perfect hypertext protocol, just the best one that’s also currently practical. Infrastructure built on evolvable protocols will always be partially incomplete, partially wrong and ultimately better designed than its competition.

.transparent_class {
	opacity: 0.5; /* the standards compliant attribute that all browsers should recognize, but... */
	filter:alpha(opacity=50); /* for IE */
	-khtml-opacity: 0.5; /* for old Safari (1.x) */
	-moz-opacity:0.5; /* for old skool Netscape Navigator */
}

(via)

I’m a WordPress Partisan, so I agree with Mark Ghosh’s criticism of this Wordpress vs Drupal Report. Still, it reminds me that I should point out XXLmag, SLAM Online, and Ford among the very non-bloggy sites built on WordPress.

Etre’s Colour Check.

color, color check, color blindness, color blind, web design, design

The question:

What’s a good user-friendly Macintosh web development program? A friend called. She’s thinking of buying Dreamweaver, but is afraid it will be overkill. She found Frontpage to be easy and needs something similar.

My answer:

If the intent is to design individual pages on an unknown number of sites, then I don’t have a recommendation.

If the intent is to build a site (or any number of sites), then I’d suggest looking at WordPress. It’s an open source CMS, and there’s a hosted version that makes it easy to try out at WordPress.com.

What I didn’t say, well, it was buried in my answer, was that I see a big difference between designing a page and building a site. The tools are very different.

wordpress, web design, site management, cms, content management, questions

Just when we started wondering how much longer flickr would be beta, they announced gamma.

The new design had me scratching my head for a bit, but I’m coming to like the changes. The menu/toolbar in the header has direct links to a lot more stuff, while the stuff in the footer has many fewer links. I can’t really tell if there are any links missing there, or if they’re just organized better, as I really only used one or two of them anyway.

Searching is improved, and now there’s a fancy menu that pops up when you mouse over a buddy icon. Go take a look at it all.

Overall, it’s a nice improvement to my favorite online application.

beta, flickr, gamma, improved, redesigned, web application design, web applications, web design

Yahoo’s Tom Coats was of seven star speakers at Carson Workshops‘ Future of Web Apps Summit last month. As usual, Ryan Eby was pretty quick to point out his slides to me, mostly by way of pointing out Jeremy Zawodny’s translation of them.

If it’s not clear yet: I wasn’t there, though I very much wanted to be, especially given some of what can be found in the post-summit blog posts.

Still, there’s a lot to be learned from just this one slide:

1. Look to add value to the Aggregate Web of data
    
2. Build for normal users, developers, and machines
    
3. Start designing with data, not pages
    
4. Identify your first order objects and make them addressable
    
5. Use readable, reliable, and hackable URLs
    
6. Correlate with external identifier schemes
    
7. Build list views and batch manipulation interfaces
    
8. Create parallel data services using standards
    
9. Make your data as discoverable as possible

I’ve been making a lot of noise about Coates’ point number five in my own presentations about how to build an OPAC for Web 2.0 (though the lesson should be applied to every library application), but there’s a lot to like in all nine. And it’s a bunch easier to understand his point when you read Zawodny’s take on it.

Here are my favorite bits:

Use readable, reliable, and hackable URLs

If the URL is hard to read over the phone or wraps in email, you’re not there yet. Simplicity and predictability rule here. Consider something like http://socialshopping.com/item/12345. You can guess what that URL does, can’t you?

You may not grasp how important this is, but don’t let that stop you from worry about it. This stuff really does matter. Look at how most URLs in del.icio.us are guessable and simple. Mimic that.

Correlate with external identifier schemes

Don’t go inventing complete new ways to represent and/or structure things if there’s already an established mechanism that’d work. Not only is such effort wasteful, it significantly lowers the chance that others will adopt it and help to strengthen the platform you’re building.

You are building a platform, whether you believe it or not.

Create parallel data services using standards

Developers (and the code they write) will want to consume your data. Do not make this an afterthought. Get your engineers thinking about how they might use the data, and make sure they design the product to support those fantasies. Again, always default to using an existing standard or extending one when necessary. Look at how flexible RSS and Atom are.

Don’t re-invent the wheel [link added --Casey].

Make your data as discoverable as possible

The names and attributes you use should be descriptive to users and developers, not merely a byproduct of the proprietary internal system upon which they’re built. This means thinking like an outsider and doing a bit of extra work.

application design, Carson Workshops, FoWA, future of web apps, future of web apps summit, lib20, library 2.0, native to web, native to web of data, summit, tom coates, web 2.0, web applications, web design, web platform

“Web Pages That Suck: learn usability and good Web design by looking at bad Web design.”

web design, web, suck

37signals takes on Google and suggests some improvements.

tags: 37signals, consulting firm, design, google, google search, improvements, improving google, search, search improvements, usability consulting, web, web design, web search

I stumbled across the sometimes funny How To Live Your Life and got curious about the theme. Turns out it’s by Sebastian Schmieg, who keeps things real at kingcosmonaut. The theme is Blix, but the kingcosmonaut site is much cooler.

tags: blix, kingcosmonaut, sebastian schmieg, theme, web design, wordpress, wordpress theme