AS EVERY WEB DESIGNER not living under a rock hopefully already knows, The Boston Globe has had a responsive redesign at the hands of some of today’s best designers and developers:

The spare Globe website has a responsive design that adapts to different window sizes, browsers and devices, and it has a built-in Instapaper-type feature that saves articles for reading off various devices on the subway. The overhaul has incorporated the talents of Boston design firms Filament Group, and Upstatement, as well as a large internal team, and pre-empts the need to build separate apps for each device.—New York Observer

As the first responsive redesign of a “real” website (i.e. a large, corporately financed, widely read newspaper site rather than some designer’s blog), the site has the potential to raise public awareness of this flexible, standards-based, multi-platform and user-focused web design approach, and deepen perceptions of its legitimacy, much as Mike Davidson’s standards-based redesign of ESPN.com in 2003 helped convince nonbelievers to take a second look at designing with web standards:

In a major step in the evolution of website design, the Boston Globe relaunched their site today using a Responsive Design approach. For a consistent experience across mobile and desktop browsers, they redesigned the site to add and remove columns to the layout based on the width of your browser window.

This marks the first major, high-traffic, content-heavy website to adopt a responsive design. The lead consultant behind the project is none other than Ethan Marcotte, the designer who wrote the book on responsive design. Much as ESPN changed the way we worked by being one of the first to launch a fully CSS driven site a decade ago, the Boston Globe’s redesign has the potential to completely alter the way we approach web design.—Beaconfire Wire

More work remains to be done. Some sections of the paper have not yet converted, and some site architecture has yet to be refreshed, so it is too early to call the overhaul a complete success. But it is clear that Ethan Marcotte, author of Responsive Web Design and creator of responsive design, together with the geniuses at Filament Group, Upstatement, and the Globe’s internal design/development team have managed to work beautifully together and to solve design problems some of us don’t even know exist.

Congratulations to the Globe for its vision and these designers and developers for their brilliant work.

TrueType font embedding has come to iPhone and iPad, Hallelujah, brothers and sisters. That is to say, Mobile Safari now supports CSS embedding of lower-bandwidth, higher-quality, more ubiquitous TrueType fonts. This is huge. Test on your device(s), then read and rejoice:

The Typekit Blog: iOS 4.2 improves support for web fonts
iOS 4.2 is also the first version of Mobile Safari to support native web fonts (in TrueType format) instead of SVG. This is also exciting news, as TrueType fonts are superior to SVG fonts in two very important ways: the files sizes are dramatically smaller (an especially important factor on mobile devices), and the rendering quality is much higher.

Ryan N.: Confirmed: TrueType Font Support on Mobile Safari on iOS 4.2
Thanks to Matt Wiebe for mentioning the rumour that Mobile Safari on iOS 4.2 supports TrueType fonts and providing a handy link to test.

TrueType
TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe’s Type 1 fonts used in PostScript. TrueType has become the most common format for fonts on both the Mac OS and Microsoft Windows operating systems.

The primary strength of TrueType was originally that it offered font developers a high degree of control over precisely how their fonts are displayed, right down to particular pixels, at various font sizes. With widely varying rendering technologies in use today, pixel-level control is no longer certain in a TrueType font.

More about webfonts
If you’re coming late to the party, the following bits of required reading and listening will get you up to speed on the joys (and occasional frustrations) of “real type” on the web:

Bulletproof @font-face syntax, Paul Irish, 4 September, 2009

Web Fonts at the Crossing, Richard Fink, 8 June 2010, A List Apart
Big Web Show Episode 1, Dan Benjamin and I discuss webtype with Ethan Dunham of Fontspring and Font Squirrel and Jeffrey Veen of Typekit
Big Web Show Episode 18, Dan Benjamin and I discuss webtype, screen resolution, and more with Roger Black

Thanks
My thanks to David Berlow of Font Bureau for waking me from my Thanksgiving stupor and alerting me to this exciting slash overdue development.

Learn to love vendor prefixes and create full-screen backgrounds that resize to fit the viewport in Issue No. 309 of A List Apart for people who make websites:

Prefix or Posthack
by ERIC MEYER

Vendor prefixes: Threat or menace? As browser support (including in IE9) encourages more of us to dive into CSS3, vendor prefixes such as -moz-border-radius and -webkit-animation may challenge our consciences, along with our patience. But while nobody particularly enjoys writing the same thing four or five times in a row, prefixes may actually accelerate the advancement and refinement of CSS. King of CSS Eric Meyer explains why.

Supersize that Background, Please!
by BOBBY VAN DER SLUIS

Background images that fill the screen thrill marketers but waste bandwidth in devices with small viewports, and suffer from cropping and alignment problems in high-res and widescreen monitors. Instead of using a single fixed background size, a better solution would be to scale the image to make it fit different window sizes. And with CSS3 backgrounds and CSS3 media queries, we can do just that. Bobby van der Sluis shows how.

Illustration by Kevin Cornell for A List Apart Magazine.

The blog of Mr Simon Collison, retooled as responsive web design. The wide version.

The blog of Mr Simon Collison, retooled as responsive web design. The narrow version.

See more versions in Mr Collison’s “Media Query Layouts” set on Flickr.

Read the article that started it all. Coming soon as a book by Mr Ethan Marcotte from A Book Apart. (The current A Book Apart book, Mr Jeremy Keith’s HTML5 For Web Designers, ships Friday. Mr Ethan Marcotte will be our guest this Thursday, June 24, on The Big Web Show. Synchronicity. It’s not just an LP by The Police. Kids, ask your parents.)

The beauty of responsive web design becomes obvious when you see your site in smart phones, tablets, and widescreen desktop browsers. It’s as if your site was redesigned to perfectly fit that specific environment. And yet there is but one actual design—a somewhat plastic design, if you will. An extensible design, if you prefer. It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck. Powered by CSS media queries, it’s the resurrection of a Dao of Web Design and a spiffy new best practice. All the kids are doing it.

Well, anyway, some of the cool ones are. See also the newly retooled-per-responsive-design Journal by Mr Hicks. Hat tip: Mr Stocks. I obviously have some work to do on this site. And you may on yours.

Seen any good responsive redesigns lately?

The long-planned inevitable has now been announced. With open-source-licensed web fonts, web font hosting, and add-a-line-to-your-header ease of configuration, Google has joined Typekit, Font Squirrel, Ascender, Font Bureau and others in forever changing the meaning of the phrase, “typography on the web.”

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and served by Google servers.

Oh, and Typekit? They’re in on it, and they couldn’t be more pleased.

The first part of my post of 1 February was not an attack on Flash. It described a way of working with Flash that also supports users who don’t have access to Flash. I’ve followed and advocated that approach for 10 years. It has nothing to do with Apple’s recent decisions and everything to do with making content available to people and search engines.

It’s how our agency and others use Flash; we’ve published articles on the subject in our magazine, notably Semantic Flash: Slippery When Wet by Daniel Mall.

We do the same thing with JavaScript—make sure the site works for users who don’t have JavaScript. It’s called web development. It’s what all of us should do.

My point was simply that if you’re an all-Flash shop that never creates a semantic HTML underpinning, it’s time to start creating HTML first—because an ever-larger number of your users are going to be accessing your site via devices that do not support Flash.

That’s not Apple “zealotry.” It’s not Flash hate. It’s a recommendation to my fellow professionals who aren’t already on the accessible, standards-based design train.

THE SECOND PART OF MY POST wasn’t Flash hate. It was a prediction based on the way computing is changing as more people at varying skill levels use computers and the internet, and as the nature of the computer changes.

There will probably always be “expert” computer systems for people like you and me who like to tinker and customize, just as there are still hundreds of thousands of people who hand-code their websites even though there are dozens of dead-simple web content publishing platforms out there these days.

But an increasing number of people will use simpler computers (just as we’ve seen millions of people blog who never wrote a line of HTML).

THE THIRD PART OF MY POST wasn’t Flash hate. It was an observation that Google and Apple, as companies, have more to gain from betting on HTML5 than from pinning their hopes to Adobe. That’s not a deep insight, it’s a statement of the obvious, and making the statement doesn’t equate to hating Adobe or swearing allegiance to Google and Apple—any more than stating that we’re having a cold winter makes me Al Gore’s best friend.

(Although I like Gore, don’t get me wrong. I also like Apple, Google, and Adobe. My admiration for these companies, however, does not impede my ability to make observations about them.)

THE THIRD PART OF MY POST ALSO WASN’T a blind assertion that HTML5, with VIDEO and CANVAS, is ready to replace Flash today, or more adept than Flash, or more accessible than Flash. Flash is currently more capable and it is far more accessible than CANVAS.

We have previously commented on HTML5’s strengths and weaknesses (Exhibit A, Exhibit B, Exhibit C) and are about to publish a book about HTML5 for web designers. HTML5 is rich with potential; Flash is rich with capability and can be made highly accessible.

That it is unstable on Mac and Linux is one reason Apple chose not to include it in its devices; that this omission will change the way some developers create web content is certain. If the first thing it does is encourage them to develop semantic HTML first, that’s a win for everyone who uses the web.

Carry on.

Dan Benjamin and yours truly discuss the secret history of blogging, transitioning from freelance to agency, the story behind the web standards movement, the launch of A Book Apart and its first title, HTML5 For Web Designers by Jeremy Keith, the trajectory of content management systems, managing the growth of a design business, and more in the inaugural episode of the Pipeline.

m.nicewebtype.com is a light yet essential mobile site for people who design websites, love type, and struggle to keep up with the dizzying world of web fonts. In it, Tim Brown, author of Nice Web Type, creator of Web Font Specimen (what’s that?), and latterly type manager for Typekit, curates the Design Twitterverse to share the latest insights, innovations, quips, and controversies regarding everyone’s favorite new web design fetish.

Don’t leave home without it.

This is a bookmarklet made for web designers who want to rapidly check how different fonts and font styles look on their screen without editing code and refreshing pages. 

Download the amazing and oh-so-practical Soma FontFriend bookmarklet.

Real fonts on the web: House Industries supports WOFF format.

…a font format for the Web that satisfies the needs and concerns of browser makers, web designers, and type foundries. … WOFF offers compression to speed page load times, freedom from thorny legacy issues, and inclusiveness (font outlines can be Postscript or TrueType).

WOFF has the support of a wide spectrum of the type community; from peers such as Emigre, Hoefler & Frere-Jones, Commercial Type, etc., and larger foundries such as Linotype and Monotype. Today it has also gained the support of Mozilla in the their release of Firefox 3.6 (Mozilla has a full list of designers and foundries that support WOFF on that page). We hope and expect that WOFF will quickly gain support in other major browsers as we support, endorse and expect to license our library for use on the Web in the WOFF format in the future.

Read more

The Problem: We have the fonts, we have the CSS and the workaround for IE. What we don’t have is beautiful, reliable, consistent cross-platform rendering of real fonts like Gotham, Franklin, Garamond, etc. — 29 October 2009
Web Fonts and Standards: How real fonts work on the web via standard CSS. Making it work in IE. The licensing hurdle. Rise of the middlemen and their effect on the adoption of font embedding standards. — 17 August
Web Fonts Now, for Real: David Berlow of The Font Bureau publishes a proposal for a permissions table enabling real fonts to be used on the web without binding or other DRM. — 16 July 2009
Web Fonts Now (How We’re Doing With That): Commercial foundries that allow @font-face embedding; browser support; Cufón and SIFR, oh, my; Adobe, web fonts, and EOT; Typekit debuts; — 23 May 2009