While the entire HTML 5 standard is years or more from adoption, there are many powerful features available in browsers today. In fact, five key next-generation features are already available in the latest (sometimes experimental) browser builds from Firefox, Opera, Safari, and Google Chrome.
Striving to avoid the mistake Microsoft made when it bet on binary applications over the web, Google is counting on HTML 5 adoption to expand the capability of web applications. Tim O’Reilly describes Google’s strategy and lists five key HTML 5 features that are already supported in Safari, Firefox, Opera, and Chrome.
[tags]HTML5, Google, O’Reilly, TimO’Reilly, canvas, browsers, webapps, web applications, webstandards[/tags]
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:
“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.
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 ?rst TrueType type designer.
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.)
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…
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.”
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.
Read more
Web Fonts, HTML 5 Roundup: Worthwhile reading on the hot new web font proposals, and on HTML 5/CSS 3 basics, plus a demo of advanced HTML 5 trickery. — 20 July 2009
Web Fonts Now, for real: David Berlow of The Font Bureau has proposed a Permissions Table for OpenType that can be implemented immediately to turn raw fonts into web fonts without any wrappers or other nonsense. If adopted, it will enable type designers to license their work for web use, and web designers to create pages that use real fonts via the CSS @font-face standard. — 16 July 2009
Among developers, 37signals has achieved a cult following for giving us web applications like Basecamp, Highrise, and Campfire, and the Ruby on Rails platform. But the real secret of their success is as old fashioned as your great grandfather’s Victrola. It’s customer service.
We opened a HighRise account to manage our A List Apart author contacts and then didn’t use the account for whatever reason.
This morning I cancelled my account with two clicks of a button.
The messaging clearly explained that canceling the account would mean losing the contacts, and provided an opportunity to rethink the decision.
When I chose to go ahead with the cancellation, it happened instantly, and I was taken to this page, which reassured me that the account was closed and that I would stop receiving product-related emails. Smart. I was instantly satisfied and had no more questions. How often does that happen when closing, say, a phone or cable or internet account?
The page also offered me the opportunity to try another 37signals product or to provide customer feedback in a survey. If I had quit using the product because of dissatisfaction with it, I would have been able to use the survey to tell 37signals everything I disliked about my experience. If I liked the product but found it wasn’t right for me for whatever reason, I could tell them that (which could help them focus on their core audience’s needs).
All smart, businesslike, and yet inoffensive and un-pushy.
37signals not only constantly fine-tunes their products, they also think about the customer experience even when the customer is leaving.
I find that instructive, educational, and inspiring.
Disclaimer: Jason Fried is my friend, and I do business with 37signals through The Deck advertising network, so I’m not impartial. Just impressed.
Is there life after Georgia? We ask David Berlow, co-founder of The Font Bureau, Inc, and the ?rst TrueType type designer, how type designers and web designers can work together to resolve licensing and technology issues that stand between us and real fonts on the web.
Research proves attractive things work better. How we think cannot be separated from how we feel. The next time a boss, client, or co-worker scoffs at the notion that beauty is an important aspect of interface design, point their peepers here.
A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
The annual A List Apart survey for people who make websites is the only public source of data on the shifting salaries, titles, job skills, and work satisfactions of full- and part-time, staff and freelance web professionals.
This year’s survey findings, culled from answers provided by over 30,000 ALA readers, are now up for your pleasure on a specially designed website. We’ve sliced and diced the data, making sense of complex interrelationships, and displaying the results in miniature CSS masterworks by Mr Eric Meyer. (More about the CSS.)
This year’s findings paint a clearer picture of the distinctions between full-time and freelance web professionals: how you work, what you earn, and what you love about the job. Interestingly, too, despite the brutality of a global recession that was already in full swing when we offered the survey, most respondents revealed a surprisingly high level of job security, satisfaction, and confidence in the future.
Join Eric Meyer and your humble host with truly special guest speakers Jason Santa Maria, Jeremy Keith, Joshua Porter, Whitney Hess, Dan Cederholm, Daniel Mall, Derek Featherstone, Aarron Walter, Scott Thomas, Heather Champ, Andy Clarke, and GoodBarry’s Brett Welch for two days of design, code, and content.
An intensely educational two-day conference for passionate practitioners of standards-based web design, An Event Apart brings together thirteen of the leading minds in web design for two days of non-stop inspiration and enlightenment. If you care about code as well as content, usability as well as design, this is the one you’ve been waiting for.
Web education is out of date and fragmented. There are good people working hard to change this, but because of the structure of higher education, it will take time. As part of a year-long journey to discover where we are in web education and where we need to go, Leslie Jensen-Inman interviewed 32 web design and development leaders. The consensus: technology moves too fast for college and university curricula to keep up. How, then, can educators create a sustainable foundation for the future?
No industry can sustain itself if it doesn’t master the art of cultivating new talent—an art that requires close ties between practitioners and educators. Yet web design education consists mainly of introductory Flash classes and the occasional 90s-style HTML table layout tutorial. How drastic is the web design education gap, and what can be done to close it? Designer, developer, and web design educator Aarron Walter of The Web Standards Project surveys the state of the curricula.
What better way to begin 2009 than by looking at the future of web design? In Issue No. 275 of A List Apart, for people who make websites, we study the promise and problems of HTML 5, and chart a path toward mobile CSS that works.
At least 10% of your visitors access your site over a mobile device. They deserve a good experience (and if you provide one, they’ll keep coming back). Converting your multi-column layout to a single, linear flow is a good start. But mobile devices are not created equal, and their disparate handling of CSS is like 1998 all over again. Please your users and tame their devices with handheld style sheets, CSS media queries, and (where necessary) JavaScript or server-side techniques.
The BBC’s dropping of hCalendar because of accessibility and usability concerns demonstrates that we have pushed the semantic capability of HTML far beyond what it can handle. The need to clearly and unambiguously add rich, meaningful semantics to markup is a driving goal of the HTML 5 project. Yet HTML 5 has two problems: it is not backward compatible because its semantic elements will not work in 75% of our browsers; and it is not forward compatible because its semantics are not extensible. If “making up new elements” isn’t the solution, what is?
Now available on streaming video, Jeffrey Zeldman: Understanding Web Design — is a good quality 42:40 capture of my October 25, 2008 presentation at Gain: AIGA Business and Design Conference.
Author and Happy Cog founder Jeffrey Zeldman answers the question: what does a web designer need most? Skills and knowledge of software, of course, but empathy—the ability to think about and empathize with your user—is by far the most important. Good useful education is hard to find, and within companies there is often no departmental standardization. Good graphic design is not the same as good user experience design, he explains. In fact, “good web design is invisible”—it feels simple and authentic because it’s about the character of the content, not the character of the designer.
In addition to the streaming video, a surprisingly accurate PDF transcription is available, along with a downloadable copy of my slides. (The typeface is Joshua Darden’s Jubilat.)
[tags]AIGA, GAIN, Gain:AIGA, Zeldman, design, presentation, video, webdesign[/tags]
IA is about selling ideas effectively, designing with accuracy, and working with complex interactivity to guide different types of customers through website experiences. The more your client knows about IA’s processes and deliverables, the likelier the project is to succeed.
Agile development was made for tough economic times, but does not fit comfortably into the research-heavy, iteration-focused process designers trust to deliver user- and brand-based sites. How can we update our thinking and methods to take advantage of what agile offers?
About the magazine
A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices. Issue No. 273 was edited by Krista Stevens with Erin Kissane and Carolyn Wood; produced by Erin Lynch; art-directed by Jason Santa Maria; illustrated by Kevin Cornell; technical-edited by Aaron Gustafson, Ethan Marcotte, Daniel Mall, and Eric Meyer; and published by Happy Cog.
Uh, wait, the problem is that some comments are not thoughtful. And I guess you can’t turn off comments in blogging software (except in all the blogging platforms that are already out there in the marketplace). But all those many long-established blogging platforms aside, I guess, like maybe in some new as-yet unreleased blogging tool, you might not be able to turn comments off. And then you’d have to, like, endure that some comments might not be thoughtful. So clearly you should just use Twitter and not write a blog because people can’t respond to you on Twitter. (What? They can?)
Well maybe the reason you’re not supposed to blog is that you won’t get rich blogging, because Calacanis did, so I guess he used up all the rich. Sorry, no more rich to go around. I mean, what’s the point of expressing yourself if there is no immediate rich to be had?
In conclusion, Twitter, Flickr, Calacanis and Scoble. Which proves you can’t have a blog and also use Twitter. Or maybe you can have a blog and use Twitter but you shouldn’t because comments, Scoble, rich.
Paul Boutin is usually a good writer. I’m not sure what happened here. Paul, when do we stop talking about web content exclusively in terms of narrow platforms and shallow, self-interested goals? When do we stop saying x makes y irrelevant? When do we stop reducing the web to a vulgar and trivial competition between head boys, and start appreciating it as a maturing medium for real thought and expression?
We call ourselves web designers, but sometimes we are more than that. Sometimes we get to participate, in however small a way, in something much larger and more important than ourselves.
Started in 1990 by four members of ACT UP, Housing Works helps people who are homeless and have HIV or AIDS. Housing Works not only saves lives, it restores dignity, purpose, and hope to those whom society has cast aside. Happy Cog is honored and humbled to have worked with this amazing organization and to announce the relaunch of the Housing Works website, redesigned by Happy Cog.
Our thanks to Housing Works’s Christopher Sealey and his team—we bow endlessly in your direction, sir. And my thanks and commendation to the amazing people at Happy Cog who did the work:
