Tag: Layout

Categories
Accessibility Advocacy content copyright creativity CSS Design development DWWS Fonts Ideas industry links Real type on the web Standards State of the Web Tools Web Design Web Standards webfonts webtype

Web fonts now (how we’re doing with that)

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 ?rst 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.

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

[tags]fonts, webfonts, webdesign, embed, @font-face, EOT, wiki, css, layout, safari, opera, firefox, chrome, browsers[/tags]

Categories
Code CSS Design development Jason Santa Maria Web Design

Making Modular Layout Systems

Jason Santa Maria details his approach to building a modular system for laying out pages with CSS—“a handy way to predictably tame content without becoming predictable.” Deep tricks of the trade revealed!

[tags]modular, layout, system, css, design, webdesign, jasonsantamaria[/tags]

Categories
A List Apart Accessibility art direction Design development industry maturity Standards Survey Usability User Experience Web Design Websites wisdom work writing

A List Apart is changing

A List Apart, for people who make websites, is slowly changing course.

For most of its decade of publication, ALA has been the leading journal of standards-based web design. Initially a lonely voice in the desert, we taught CSS layout before browsers correctly supported it, and helped The WaSP persuade browser makers to do the right thing. Once browsers’ standards support was up to snuff, we educated and excited designers and developers about standards-based design, preaching accessibility, teaching semantic markup, and helping you strategize how to sell this new way of designing websites to your clients, coworkers, and boss.

Most famously, over the years, writers for ALA have presented the design community with one amazing and powerfully useful new CSS technique after another. Initially radically new techniques that are now part of the vocabulary of all web designers include Paul Sowden’s “Alternative Styles,” Mark Newhouse’s list-based navigation, Eric Meyer’s intro to print styles, Douglas Bowman’s “Sliding Doors,” Dave Shea’s “CSS Sprites,” Dan Cederholm’s “Faux Columns,” Patrick Griffiths and Dan Webb’s “Suckerfish Dropdowns,” Drew McLellan’s “Flash Satay,” and so on and so on. There are literally too many great ones to name here. (Newcomers to standards-based design, check Erin Lynch’s “The ALA Primer Part Two: Resources For Beginners“.)

Web standards are in our DNA and will always be a core part of our editorial focus. Standards fans, never fear. We will not abandon our post. But since late 2005, we have consciously begun steering ALA back to its earliest roots as a magazine for all people who make websites—writers, architects, strategists, researchers, and yes, even marketers and clients as well as designers and developers. This means that, along with issues that focus on new methods and subtleties of markup and layout, we will also publish issues that discuss practical and sometimes theoretical aspects of user experience design, from the implications of ubiquitous computing to keeping communities civil.

The trick is to bring our huge group of highly passionate readers along for the ride. My wife likens it to piloting the Queen Mary. (Q. How do you make the Queen Mary turn left? A. Very, very slowly.)

The slow, deliberate, gradual introduction of articles on business and theory has not pleased all of ALA’s readers, some of whom may unrealistically wish that every issue would present them with the equivalent of a new “Sliding Doors.” It is possible, of course, to publish one CSS (or JavaScript or Jquery) article after another, and to do so on an almost daily basis. We could do that. Certainly we get enough submissions. The trouble is that most articles of this kind are either edge cases of limited utility, or derivatives that do not break significant new ground. (Either that, or they are flawed in our estimation, e.g. relying on dozens of non-semantic divs to create a moderately pleasing, minor visual effect.)

We review hundreds of articles and publish dozens. Some web magazines seem to have those proportions reversed, and some readers don’t seem to mind, and that’s fine. But any content you see in ALA has been vetted and deeply massaged by the toughest editorial team in the business. And when you see a new “design tech” article in our pages, you can be sure it has passed muster with our hard-ass technical editors.

Moreover, the fields of meaningful new CSS tricks have mostly yielded their fuels. We’ve done that. We’ve done it together with you. While a few new lodes of value undoubtedly remain to be tapped, we as a community, and as individuals who wish to grow as designers, need to absorb new knowledge. ALA will continue to be a place where you can do that.

When we began focusing on web standards in 1998, we were told we were wasting readers’ time on impractical crap of little value to working designers and developers. But we kept on anyway, and the things we learned and taught are now mainstream and workaday. While we apologize to readers who are again being made irritable by our insistence on occasionally presenting material that does not fall directly within their comfort zone, we hope that this experiment will prove to be of value in the end.

[tags]alistapart, webdesign, magazine, editorial, content, focus, change, publishing, standards, webstandards, css, design, layout, userexperience[/tags]

Categories
A List Apart Ajax CSS Design Information architecture Layout Publications Publishing

ALA 261: CSS layout redux; in praise of prototyping

In Issue No. 261 of A List Apart, for people who make websites:

Faux Absolute Positioning

by Eric Sol

CSS layout is awesome, except when your layout calls for a header, a footer, and columns in between. Use float, and content changes can cause columns to wrap. Use absolute positioning, and your footer can crash into your columns. Add the complexity of drag-and-drop layouts, and a new technique is needed. Enter “faux absolute positioning.” Align every item to a predefined position on the grid (as with absolute positioning), but objects will still affect the normal flow (as with float).

Sketching in Code: the Magic of Prototyping

by David Verba

The rise of Ajax and rich internet applications has thrown the limitations of traditional wireframing into painful relief. When you leave the world of page-based interactions, how do you document all but the simplest interactions? Flowcharts and diagrams don’t work. Prototyping saves the day by focusing on the application and conveying its “magic.” Prototypes can help you sell a decision that is fundamentally or radically different from the client’s current solution or application. Sit a stakeholder down in front of a working prototype and show him or her why your approach is compelling.

[tags]css, layout, ajax, prototyping, information architecture, design, faux absolute positioning, webdesign, alistapart[/tags]

%d bloggers like this: