The earliest websites were minimal in the extreme, but without the style and flair to make a virtue of their simplicity. 37signals and Kottke pioneered the combination of simplicity with deft design sense. Cardigan made it art.

Although it is never popular, never the dominant trend, rarely wins design awards, and almost never earns acclaim from designers, design stripped down to its essentials is always a good idea, and especially on the web, where every byte counts. We salute the old and new practitioners of minimalist web design, and solicit your thoughts on pioneers or present practitioners who combine a minimalist aesthetic with significant design chops.

• 37signals home page, 27 November 1999
• 37signals detail page (first signal), 27 November 1999
• Kottke.org, home of fine hypertext products, 9 March 2000
• Kottke.org, home of fine hypertext products today
• Drudge Report, 10 December 1997
• Drudge Retort
• cardigan.com by Dean Allen (abandoned 2001)
• Wilson Miner
• Subtraction.com by Khoi Vinh
• WordPress Neutica theme designed by Allan Cole (Hat tip: Oliver Lorton)

Tags: design, webdesign, minimalism, history, web design history

Filed under: Design, Web Design, Web Design History, Websites, links, style

The html5 gallery is a showcase of sites using HTML 5 markup.

html5 gallery has two primary aims, the first is to showcase sites that use html5 for markup, so that we can see how people have interpret[t]ed the specification and how they’ve implemented it. This leads me on to the secondary aim which is to help people learn about html5 and how it should be used and how to implement it.

I’m hoping that a side effect of this is that browser developers will see how many people are implementing html5 and add more support for it in their rendering engines so that we don’t have to add display:block; to elements where not required and we don’t have to rely on javscript to create elements.

You can follow @htmlgallery to get updates when new sites are added to the gallery.

Richard Clark, a front end designer based in Manchester, UK, created and maintains the site. You can follow Richard on Twitter.

Comments off.

Filed under: HTML5, links

The Web Fonts Wiki has a page listing fonts you can legally embed in your site designs using the CSS standard @font-face method. Just as importantly, the wiki maintains a page showing commercial foundries that allow @font-face embedding. Between these two wiki pages, you may find just the font you need for your next design (even if you can’t currently license classics like Adobe Garamond or ITC Franklin and Clarendon).

The advantages of using fonts other than Times, Arial, Georgia, and Verdana have long been obvious to designers; it’s why web design in the 1990s was divided between pages done in Flash, and HTML pages containing pictures of fonts—a practice that still, bizarrely, continues even in occasionally otherwise advanced recent sites.

Using real fonts instead of pictures of fonts or outlines of fonts provides speed and accessibility advantages.

Currently the Webkit-based Apple Safari browser supports @font-face. The soon-to-be-released next versions of Opera Software’s Opera browser, Google’s Webkit-based Chrome, and Mozilla Firefox will do likewise. When I say “soon-to-be-released,” I mean any day now. When this occurs, all browsers except IE will support @font-face.

IE has, however, offered font embedding since IE4 via Embedded OpenType (.EOT), a font format that enables real fonts to be temporarily embedded in web pages. That is, the reader sees the font while reading the page, but cannot download (”steal”) the font afterwards. Microsoft has “grant[ed] to the W3C a perpetual, nonexclusive, royalty-free, world-wide right and license under any Microsoft copyrights on this contribution, to copy, publish and distribute the contribution under the W3C document licenses,” in hopes that EOT would thereby become a standard. But so far, only Microsoft’s own browsers support EOT.

Thus, as we consider integrating real fonts into our designs, we must navigate between browsers that support @font-face now (Safari), those that will do so soon (Opera, Chrome, Firefox), and the one that possibly never will (IE, with a dwindling but still overwhelming market share).

The person who figures out a designer-friendly solution to all this will either be hailed as a hero/heroine or get rich. Meanwhile, near-complete solutions of varying implementation difficulty exist. Read on:

CSS @ Ten: The Next Big Thing

“Instead of making pictures of fonts, the actual font files can be linked to and retrieved from the web. This way, designers can use TrueType fonts without having to freeze the text as background images.” An introduction to @font-face by Håkon Wium Lie, father of CSS.

Real Fonts on the Web: An Interview with The Font Bureau’s David Berlow

Is there life after Georgia? To understand issues surrounding web fonts from the type designer’s perspective, I interview David Berlow, co-founder of The Font Bureau, Inc, and the first TrueType type designer.

The W3C: @font-face vs. EOT

A discussion that shows why the W3C may not be able to resolve this conflict. (It’s kind of like asking the Montagues and Capulets to decide whether the Montagues or the Capulets should rule Verona.)

sIFR 2.0: Rich Accessible Typography for the Masses

Mike Davidson’s scalable and accessible remix of Shaun Inman’s pioneering use of Flash and JavaScript to replace short passages of HTML text with Flash movies of the same text set in a real font. The Flash movies are created on the fly. If JavaScript or images are turned off, the user “sees” the HTML text; text set in sIFR can also be copied and pasted. sIFR was a great initial solution to the problem of real fonts on the web, but it’s only for short passages (which means the rest of the page must still be set in Georgia or Verdana), and it fails if the user has a Flash block plug-in installed, as half of Firefox users seem to. It’s also always a pain to implement. I don’t know any designer or developer who has an easy time setting up sIFR. In short, while sIFR is an awesome stop-gap, real fonts on the web are still what’s needed. Which also leads us to…

Cufón – Fonts for the People

Simo Kinnunen’s method of embedding fonts, regardless of whether or not a browser supports @font-face.

Combining Cufón And @Font-Face

Kilian Valkhof: “Everyone wants @font-face to work everywhere, but as it stands, it only works in Safari and the upcoming versions of Firefox and Opera. In this article I’ll show you how to use Cufón only if we can’t load the font through other, faster methods.”

Adobe, Web Fonts, and EOT

Why Adobe supports Microsoft’s EOT instead of @font-face.

Introducing Typekit

Update May 28, 2009: Working with Jason Santa Maria, Jeff Veen’s company Small Batch Inc. introduces Typekit:

We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

Tags: fonts, webfonts, webdesign, embed, @font-face, EOT, wiki, css, layout, safari, opera, firefox, chrome, browsers

Filed under: Accessibility, Advocacy, CSS, DWWS, Design, Fonts, Ideas, Standards, State of the Web, Tools, Web Design, Web Standards, content, copyright, creativity, development, industry, links

Joshua Schachter explains how URL shorteners like TinyURL, bit.ly, etc., originally created to prevent long URLs from breaking in 1990s e-mail clients, and now used primarily as a means of monetizing someone else’s content, are bad:

• They “add another layer of indirection to an already creaky system, [making what] used to be transparent … opaque,” slowing down web use by adding needless lookups, and potentially disguising spam.
• Shorteners “steal search juice” from the original publishers. (For example, with the Digg bar and Digg short URL, your content makes Digg more valuable and your site less valuable; the more content you create, the richer you make Digg.)
• “A new and potentially unreliable middleman now sits between the link and its destination. And the long-term archivability of the hyperlink now depends on the health of a third party.”

And more. Via Merlin Mann.

Anyone who creates web content should read Joshua’s post. I’m sold and will dial way back on my use of the zeldman.com short URL. The question remains, what to do when you need to paste a long, cumbersome link into a 140-character service like Twitter. (If you do nothing, Twitter itself will shorten the link via TinyURL.)

Tags: URL, URLshortener, JoshuaSchachter, redirect, abstraction, Digg, findability, searchjuice, SEO

Filed under: Blogs and Blogging, Design, HTML, Ideas, Information architecture, Publications, Publishing, Respect, Standards, State of the Web, UX, Usability, User Experience, Web Design, Web Standards, Websites, architecture, business, findability, industry, links, twitter

DanielByrne [warning! Flash site with JavaScript auto-expand full-screen window] came to Happy Cog’s New York office to shoot me for an upcoming feature story in .Net Magazine, “the UK’s leading magazine for web designers and developers.”

What can I say? I’m a sucker for the gentle touch of a make-up pad. Or of anything, really. I love this photo (shot by Byrne with my iPhone) because it captures the fact that I’m still really a four-year-old. It also shows what a genuine photographer can do with even the humblest of tools.

Tags: photos, photography, shoot, danielbyrne, photographer, zeldman, jeffreyzeldman, profile, bio, interview, .net, .netmag, .netmagazine, .netmagazineUK, myglamorouslife, iphone, candid, shoots, shots, Apple

Filed under: Apple, Career, Design, Happy Cog™, Images, Interviews, NYC, New York City, Press, Publications, Publishing, The Profession, Zeldman, art direction, better-know-a-speaker, business, fashion, glamorous, industry, iphone, links, style

Favorites of the afternoon of April 10, 2009. Part of this complete breakfast.

Tags: flickr, favorites, art, photography, images, image, collections

Filed under: Design, Ideas, Images, Layout, art, arts, creativity, flickr, links, photography, work

Seed Magazine has received a killer redesign courtesy of Mike Pick and Tim Murtaugh.

And, except for the custom Flash-based video players, it’s all web-standards-based. CSS, XHTML, and JavaScript were never so hawt. Click on STUDIO in the nav bar, then explore SALON or SAVED BY SCIENCE to experience the new hotness.

Tags: tim murtaugh, mike pick, seed, seedmagazine

Filed under: Design, Web Design, Web Standards, Websites, development, links

Mad Men, Mad Props: Type designer Mark Simonson on the typography (including anachronisms) used in the brilliant TV show Mad Men.

Tags: madmen, fonts, typefaces, typography

Comments off.

Filed under: Design, Fonts, Typography, links

10 Things They Don’t Teach You in Design School. Via Designmeme. (Sorry for lazy post, but I’m at SXSW Interactive.)

Comments off.

Filed under: Design, links

Celebrate Darwin at Progresswear

In honor of the bicentennial of Darwin’s birth, five of Progresswear’s finest pro-science tee shirts are on sale through February 28th at the low price of just $12.99.

“Breathtaking” Document Reveals Pepsi’s Logo is Pinnacle of Entire Universe

See what several hundred million dollars will buy.

How Not to Write

Dwell loses a customer.

One Month to Go

Bike Hugger Mobile Social at SXSW Interactive.

Filed under: links