UI Design Framework for Web Designers

Vincent (no last name given) has designed a beautiful, extremely useful, feature-rich interface design framework for web designers who create their initial design mock-ups in Adobe Illustrator. And it’s free for personal or commercial use (credit link required).

The set includes:

  • GUI library – Hundreds of vector elements for interface design
  • Minimal UI icons set – 260 vector icons for Illustrator
  • Styles library – 200 styles to apply in Illustrator

I’d pay cash money for the color schemes alone: 330 swatches harmonized with graphic styles for backgrounds, typography and other GUI interface elements.

The back-link requirement may be a deal breaker in some situations. I’d happily use these GUI icons on a personal project, but I might refrain on a client project if it seemed awkward to include a widget credit on the site. (It all depends on the client.)

That possible caveat aside, this is an extraordinary set of widgets and gizmos many web designers will want to have in their tool kit.

iPad Mellotron

In Heaven, if I should get there, I will play the Mellotron. Meanwhile, I play the Mellotronics M3000 HD, a $12 Mellotron for iPad (and soon for iPhone and iPod touch as well) by Synthtopia.

From the manufacturers:

The M3000 is an uncannily accurate, beautiful-sounding and immensely playable instrument, packed with 13 huge, authentic voices from the Mellotronics tape vault. These are the same production tapes that featured on Strawberry Fields Forever, Nights in White Satin, Watcher of the Skies, Odessey and Oracle, and hundreds more timeless classics.

Or in my case, “In The Court of the Crimson King,” the album that blew my mind in ninth grade and still holds up in 2010, despite lyrical conceits that would make Chuck D giggle and border on Spın̈al Tap parody. But I digress.

Mellotron

The real Mellotron was powered by looped audio tape recordings of full orchestra, solo flute, and so on—one recording, one tape loop, for each note of the 35-note keyboard. The M3000 is powered by individual samples of all 35 notes of each original tape set. The resulting sound is incredible, even over the iPad’s tiny built-in speaker.

All 35 keys are on-screen and available at once, so anything that can be played on a Mellotron can be played on the M3000. … The M3000 also supports 4 in-memory voices at one time, with independent keyboard and chordpad voices. The inclusion of a rich, spacious onboard reverb unit allows the M3000 to be used as a recording or performance instrument with no outboard effects chain.

Here’s what you can’t do. You can’t plug a MIDI keyboard into your iPad to drive the M3000’s performance. You have to play the virtual onscreen keyboard. You also can’t record your M3000 performance to a sequencer.

But there’s nothing stopping you from taking this $12 iPad Mellotron onstage or into a home or professional recording studio. Or just whipping it out on a long bus trip or tough day in the cubicle and regaling your companions with impromptu renditions of “Space Oddity.”

I love this app.

iMac dies after Safari update

iMac cannot boot after installing Safari update.

There is a new Safari update. After I installed it, my home iMac cannot reboot.

For about an hour, the iMac was stuck in the grey Apple screen (sometimes with, and sometimes without, a progress bar). The progress bar would “finish,” then the Mac would restart back into the grey Apple screen.

I decided to leave the iMac alone while I worked out.

When I returned two hours later, the iMac had progressed from the grey screen to a blue screen. Zapping PRAM and restarting gets me a grey Apple screen followed by a blue screen. The blue screen flashes twice while changing its color balance settings, indicating that some part of the operating system still works. Then a tiny white rectangle appears at the top left of the screen. Then, nothing further.

This machine contains my entire music collection and all my photos of my daughter.

I have a backup drive but cannot force the iMac to boot from it.

I have an OS X CD but cannot force the iMac to start from it.

Maybe this is what Apple means by “HTML5.”


My Love/Hate Affair With Typekit

GEORGIA and Verdana, Lucida and (to a lesser extent) Arial and Times New Roman have served us well. For fifteen years, these cross-platform default fonts have been faithful stewards of our desire to read, write, design, and publish web pages. Yet we designers have always wanted more. As far back as 1994, we hoped for the day when we could brand our layouts as magazine and poster designers do, by setting our pages in Franklin or Garamond, our headlines in Futura or Rosewood. And since 1998, CSS2 has provided a standard way to embed any typeface, not just the fab five, on a web page.

In August, 2007, CSS co-creator and Opera Software CTO Håkon Wium Lie wrote CSS At Ten, reminding us that CSS provided a mechanism by which actual font files could be linked to and retrieved from the web. Soon after the article was published, “web fonts” discussions started popping up at interactive design festivals and my friend Jeffrey Veen got the idea for a product that would get web fonts happening without running afoul of inconsistent browser support, multiple format hangups, or type designer licensing agreements and piracy concerns.

Speeding up design acceptance

While browser improvements and web standards alone provided multiple partial solutions, Typekit offered a complete solution that just worked. And the people behind Typekit (including Bryan Mason and Jason Santa Maria) did everything right: they reached out to the type design, graphic design, and standards-based web design communities; they worked with vendor after vendor to offer as many fonts as possible; they spoke everywhere, marketing their venture one lecture and even one designer at a time.

Typekit excited the web design community about type and proved that licensing and hosting web type was a viable business, providing options and convenience for designers and their clients, while bringing new revenue to type designers and protecting their intellectual property.

Typekit is the tipping point

Publicly and truly, I support Typekit because it is getting us to the world of web fonts faster. We could wait indefinitely for type vendors to agree to industry-standard licensing terms and font formats. We could wait far longer for IE, Firefox, Safari, Chrome, Opera, Opera Mini, Mobile Safari, and the rest to support the same font formats. (Currently Firefox supports WOFF and TrueType, Safari and Chrome support TrueType, MobileSafari supports SVG, IE supports EOT, and on, and on.)

But with Typekit, we don’t have to bother our pretty little heads worrying about these inconsistencies, and we don’t have to sit on the sidelines, waiting for all font makers and all browser makers to support a single standard format.

Platforms and performance

Typekit works, and that helps web designers and type designers take “web fonts” seriously. Typekit’s success is even helping to make web designers and type designers more aware of platform problems that can make fonts hideous on various platforms. Georgia was designed for the screen. Garamond was not. Moreover, platforms vary the way they hint fonts (Apple throws out hinting altogether, Microsoft over-hints) and the way they render them (from purely pixellated to at least three varieties of sub-pixel anti-aliasing), making a font’s appearance on a given user’s system hard to predict.

If not for Typekit, we might have had to wait years for most or all type designers to license web fonts. Only then would we have discovered that body text set in anything other than Georgia and Verdana pretty much blows on many Windows OS, browser, and monitor combinations.

Thanks to Typekit, we all know about the problem, and type designers are re-hinting their fonts, and in some cases redesigning them for the screen.

For all this I and all of us can be grateful to Typekit.

They also understand that designers will only use “web fonts” if they have access to the fonts they need. Just as a huge selection enabled iTunes to dominate online music, Typekit’s makers know their service must offer pretty much every good typeface out there—and they are working on it.

Renting versus “owning”

All this said in Typekit’s favor, I have mixed feelings about their product because I’d rather buy a web-licensed font than rent it—and Typekit’s success at establishing the viability of a rental model means that individual type foundries will also rent their fonts—and those who succeed at renting their fonts to web designers may not be inclined to sell.

Of course you never really own the fonts you buy—you simply license their use. So the analogy of owning versus renting doesn’t exactly hold true. But a one-time font purchase as a line item in a design budget is easier to explain and sell to a client than an ongoing rental charge.

Web Standards and @font-face

My other qualm has to do with a preference for pure web standards over product-assisted web standards. I don’t know if my preference is ideological or just the way my mind works (or fails to). But, given my druthers, I’d rather see millions of websites using standard @font-face to link to self-hosted web-licensed fonts than see that same number of fonts using a service—even a brilliant service created by friends for whom I wish continued, deserved, great success. It must be a quirk of mind; there’s no other logical explanation for this preference.

For those who share this bias, possess the properly licensed fonts, and don’t mind using FTP and writing a little code, the CSS @Font-Face Generator by Font Squirrel provides an exceptionally easy way to automatically generate the font formats necessary to take all browsers (including mobile) into account—complete with automated Cufón backup and your choice of best-practice @font-face code strings.

See also FontSpring.

Read more

Shorten this

In April of 2009, in a post every web designer, publisher, or business person should read, Joshua Schachter told how URL shortening services like TinyURL and Bit.ly came to be, and why the latest ones were so addictive. (Missing from Joshua’s account of their utility is the benefit URL shorteners can provide when sharing an otherwise obscenely long link on the printed page.)

The prescient post concludes that, despite their benefits, such services ultimately harm the web, decreasing clarity while increasing the odds of linkrot and spam:

[S]hortening services add another layer of indirection to an already creaky system. A regular hyperlink implicates a browser, its DNS resolver, the publisher’s DNS server, and the publisher’s website. With a shortening service, you’re adding something that acts like a third DNS resolver, except one that is assembled out of unvetted PHP and MySQL, without the benevolent oversight of luminaries like Dan Kaminsky and St. Postel.

There are three other parties in the ecosystem of a link: the publisher (the site the link points to), the transit (places where that shortened link is used, such as Twitter or Typepad), and the clicker (the person who ultimately follows the shortened links). Each is harmed to some extent by URL shortening.

There’s more, and you should read it all.

One of Joshua’s recommendations to minimize some of the harm is that websites do their own URL shortening instead of relying on middlemen. I’ve done some of that here, via the ShortURL plug-in for WordPress. Thus I use zeldman.com/x/48 instead of a much longer URL to notify my friends on Twitter about a new comment on an oldish thread. Likewise, zeldman.com/x/49 redirects to yesterday’s big post, “Write When Inspired.”

Rolling your own mini-URLs lessens the chance that your carefully cultivated links will rot if the third-party URL shortening site goes down or goes out of business, as is happening to tr.im, a URL shortener that is pulling the plug because it could neither monetize nor sell its service.

tr.im is now in the process of discontinuing service, effective immediately….

No business we approached wanted to purchase tr.im for even a minor amount.

There is no way for us to monetize URL shortening — users won’t pay for it — and we just can’t justify further development since Twitter has all but annointed bit.ly the market winner.

The Short URL Plugin for WordPress installs automatically. It provides simple statistics, telling you how many times a link has been clicked, sets up redirects automatically, allows you to choose a custom link style, and more. You’re not limited to shortening your own URLs, although that’s mainly how I use it; you can also shorten third-party URLs, turning your site into a miny TinyURL. I’ve used this plugin for months, with nothing but joy in its cleverness and usability.

[tags]ShortURL, plugin, WordPress, plugins, joshua schachter, tr.im, bit.ly, URL, Twitter, TinyURL, web, usability, internet, links, security[/tags]

The Amanda Project

Designed by Happy Cog and launched today, The Amanda Project is a social media network, creative writing project, interactive game, and book series combined:

The Amanda Project is the story of Amanda Valentino, told through an interactive website and book series for readers aged 13 & up. On the website, readers are invited to become a part of the story as they help the main characters search for Amanda.

The writing-focused social media network is designed and written as if by characters from the Amanda novels, and encourages readers to enter the novel’s world by joining the search for Amanda, following clues and reading passages that exist only online, and ultimately helping to shape the course of the Amanda narrative across eight novels. (The first Amanda novel—Invisible I, written by Melissa Kantor—comes out 22 September.)

The site developed over a year of intense creative collaboration between Happy Cog and Fourth Story Media, a book publisher and new media company spearheaded by publishing whiz Lisa Holton. Prior to starting Fourth Story, Lisa was was President, Scholastic Trade Publishing and Book Fairs; managed the publication of Harry Potter and the Deathly Hallows; and oversaw development of The 39 Clues. Before that she spent nearly a decade developing numerous bestselling, franchise-launching series at Disney.

Happy Cog‘s New York office developed this project. The team:

Equally vital to the project’s success were Fourth Story’s leaders and partners, including:

  • Lorraine Shanley, Principal Advisor
  • Ariel Aberg-Riger (website, Twitter), Creative Development & Marketing Manager
  • JillEllyn Riley, Editorial Director
  • Dale Robbins, Creative Director
  • David Stack, Director, Digital Partnerships
  • Melissa Kantor, Writer
  • Peter Silsbee, Writer
  • Polly Kanevsky, Art Director
  • Sam Gerstenzang, Technology Consultant

Today’s launch is not the end of our relationship with Fourth Story Media. The Amanda Project will continue to evolve, and Happy Cog will remain an active partner in its direction and growth. We thank our brilliant collaborators and congratulate them on today’s milestone.

Read more

[tags]amanda, amandaproject, theamandaproject, TAP, happycog, design, webdesign, contentstrategy, userexperience, publishing, books, aarongustafson, lizdanzico, erinkissane, whitneyhess, mattgoldenberg, kellymccarthy, jasonsantamaria, jeffreyzeldman, lisaholton, dalerobbins, davidstack, JillEllynRiley, ArielAberg-Riger[/tags]

Web fonts, HTML 5 roundup

Over the weekend, as thoughtful designers gathered at Typecon 2009 (“a letterfest of talks, workshops, tours, exhibitions, and special events created for type lovers at every level”), the subject of web fonts was in the air and on the digital airwaves. Worthwhile reading on web fonts and our other recent obsessions includes:

Jeffrey Zeldman Questions The “EOT Lite” Web Font Format

Responding to a question I raised here in comments on Web Fonts Now, for Real, Richard Fink explains the thinking behind Ascender Corp.’s EOT Lite proposal . The name “EOT Lite” suggests that DRM is still very much part of the equation. But, as Fink explains it, it’s actually not.

EOT Lite removes the two chief objections to EOT:

  • it bound the EOT file, through rootstrings, to the domain name;
  • it contained MTX compression under patent by Monotype Imaging, licensed by Microsoft for this use.

Essentially, then, an “EOT Lite file is nothing more than a TTF file with a different file extension” (and an unfortunate but understandable name).

A brief, compelling read for a published spec that might be the key to real fonts on the web.

Web Fonts—Where Are We?”

@ilovetypography tackles the question we’ve been pondering. After setting out what web designers want versus what type designers and foundries want, the author summarizes various new and old proposals (“I once heard EOT described as ‘DRM icing on an OpenType cake.’”) including Tal Leming and Erik van Blokland‘s .webfont, which is gathering massive support among type foundries, and David Berlow’s permissions table, announced here last week.

Where does all of this net out? For @ilovetypography, “While we’re waiting on .webfont et al., there’s Typekit.”

(We announced Typekit here on the day it debuted. Our friend Jeff Veen’s company Small Batch, Inc. is behind Typekit, and Jason Santa Maria consults on the service. Jeff and Jason are among the smartest and most forward thinking designers on the web—the history of Jeff’s achievements would fill more than one book. We’ve tested Typekit, love its simple interface, and agree that it provides a legal and technical solution while we wait for foundries to standardize on one of the proposals that’s now out there. Typekit will be better when more foundries sign on; if foundries don’t agree to a standard soon, Typekit may even be the ultimate solution, assuming the big foundries come on board. If the big foundries demur, it’s unclear whether that will spell the doom of Typekit or of the big foundries.)

The Power of HTML 5 and CSS 3

Applauding HTML 5’s introduction of semantic page layout elements (“Goodbye div soup, hello semantic markup”), author Jeff Starr shows how HTML 5 facilitates cleaner, simpler markup, and explains how CSS can target HTML 5 elements that lack classes and IDs. The piece ends with a free, downloadable goodie for WordPress users. (The writer is the author of the forthcoming Digging into WordPress.)

Surfin’ Safari turns up new 3-D HTML5 tricks that give Flash a run for its money

Just like it says.

Read more

  • 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): Everything you ever wanted to know about real fonts on the web, including commercial foundries that allow @font-face embedding; which browsers already support @font-face; what IE supports instead; Håkon Wium Lie, father of CSS, on @font-face at A List Apart; the Berlow interview at A List Apart; @font-face vs. EOT; Cufón; SIFR; Cufón combined with @font-face; Adobe, web fonts, and EOT; and Typekit, a new web service offering a web-only font linking license on a hosted platform; — 23 May 2009
  • HTML 5 is a mess. Now what? A few days ago on this site, John Allsopp argued passionately that HTML 5 is a mess. In response to HTML 5 activity leader Ian Hickson’s comment here that, “We don’t need to predict the future. When the future comes, we can just fix HTML again,” Allsopp said “This is the only shot for a generation” to get the next version of markup right. Now Bruce Lawson explains just why HTML 5 is “several different kind of messes.” Given all that, what should web designers and developers do about it? — 16 July 2009
  • Web Standards Secret Sauce: Even though Firefox and Opera offered powerfully compelling visions of what could be accomplished with web standards back when IE6 offered a poor experience, Firefox and Opera, not unlike Linux and Mac OS, were platforms for the converted. Thanks largely to the success of the iPhone, Webkit, in the form of Safari, has been a surprising force for good on the web, raising people’s expectations about what a web browser can and should do, and what a web page should look like. — 12 July 2009
  • In Defense of Web Developers: Pushing back against the “XHTML is bullshit, man!” crowd’s using the cessation of XHTML 2.0 activity to condescend to—or even childishly glory in the “folly” of—web developers who build with XHTML 1.0, a stable W3C recommendation for nearly ten years, and one that will continue to work indefinitely. — 7 July 2009
  • XHTML DOA WTF: The web’s future isn’t what the web’s past cracked it up to be. — 2 July 2009

[tags]@font-face, berlow, davidberlow, CSS, permissionstable, fontbureau, webfonts, webtypography, realtypeontheweb, HTML5, HTML4, HTML, W3C, WHATWG, markup, webstandards, typography[/tags]

Sour Outlook

It’s outrageous that the CSS standard created in 1996 is not properly supported in Outlook 2010. Let’s do something about it.

Hundreds of millions use Microsoft Internet Explorer to access the web, and Microsoft Outlook to send and receive email. As everyone reading this knows, the good news is that in IE8, Microsoft has released a browser that supports web standards at a high level. The shockingly bad news is that Microsoft is still using the Word rendering engine to display HTML email in Outlook 2010.

What does this mean for web designers, developers, and users? In the words of the “Let’s Fix It” project created by the Email Standards Project, Campaign Monitor, and Newism, it means exactly this:

[F]or the next 5 years your email designs will need tables for layout, have no support for CSS like float and position, no background images and lots more. Want proof? Here’s the same email in Outlook 2000 & 2010.

It’s difficult to believe that in 2009, after diligently improving standards support in IE7 and now IE8, Microsoft would force email designers to use nonsemantic table layout techniques that fractured the web, squandered bandwidth, and made a joke of accessibility back in the 1990s.

Accounting for stupidity

For a company that claims to believe in innovation and standards, and has spent five years redeeming itself in the web standards community, the decision to use the non-standards-compliant, decades-old Word rendering engine in the mail program that accompanies its shiny standards-compliant browser makes no sense from any angle. It’s not good for users, not good for business, not good for designers. It’s not logical, not on-brand, and the very opposite of a PR win.

Rumor has it that Microsoft chose the Word rendering engine because its Outlook division “couldn’t afford” to pay its browser division for IE8. And by “couldn’t afford” I don’t mean Microsoft has no money; I mean someone at this fabulously wealthy corporation must have neglected to budget for an internal cost. Big companies love these fictions where one part of the company “pays” another, and accountants love this stuff as well, for reasons that make Jesus cry out anew.

But if the rumor’s right, and if the Outlook division couldn’t afford to license the IE8 rendering engine, there are two very simple solutions: use Webkit or Gecko. They’re both free, and they both kick ass.

Why it matters

You may hope that this bone-headed decision will push millions of people into the warm embrace of Opera, Safari, Chrome, and Firefox, but it probably won’t. Most people, especially most working people, don’t have a choice about their operating system or browser. Ditto their corporate email platform.

Likewise, most web designers, whether in-house, agency, or freelance, are perpetually called upon to create HTML emails for opt-in customers. As Outlook’s Word rendering engine doesn’t support the most basic CSS layout tools such as float, designers cannot use our hard-won standards-based layout tools in the creation of these mails—unless they and their employers are willing to send broken messages to tens millions of Outlook users. No employer, of course, would sanction such a strategy. And this is precisely how self-serving decisions by Microsoft profoundly retard the adoption of standards on the web. Even when one Microsoft division has embraced standards, actions by another division ensure that millions of customers will have substandard experiences and hundreds of thousands of developers still won’t get the message that our medium has standards which can be used today.

So it’s up to us, the community, to let Microsoft know how we feel.

Participate in the Outlook’s Broken project. All it takes is a tweet.

[tags]browsers, bugs, IE8, outlook, microsoft, iranelection[/tags]

Maybe that’s why they call them Kodak moments

It was the last day of our daughter’s first year of school. Party time. All the three-year-olds dressed like dolls; teachers relieved and sad; parents misty-eyed, promising to stay in touch over the summer.

Our children have three teachers. One is leaving for graduate school, the second is off to have a child of her own, and the third—a wonderful woman—will have to be taken out of the school in a box.

The teachers stood together for the last time, hugging each other and our children.

Moments like these are once in a lifetime. Fortunately I carry an iPhone. Unfortunately, my iPhone’s camera is once again taking blanks instead of photographs.

For those who have just missed the photographic opportunity of a lifetime because of this unfortunate iPhone bug, here, once again, is the method that will remove the corrupted file and get your iPhone taking photos again:

  1. Sync iPhone. This also creates a backup of the notes and other items that don’t get synchronized anywhere else.
  2. Go to Settings, General, Reset: “Erase All Content and Settings.”
  3. Once complete, reconnect the iPhone to begin syncing with iTunes.
  4. iTunes will ask if you want to sync from backup. Choose not to. Instead, “Set up as new phone.” This sounds scary, but it’s really not. (You don’t lose your phone number or anything. It’s just a dumb, needlessly scary Apple label.)

From resourcesforlife.com, whose solution this is: “You will lose notes, SMS history, and iPhone settings as well as data that is normally synchronized. However, corrupted system files (such as the internal camera roll files) will be replaced with fresh non-corrupted versions and everything should work.”

I didn’t post this to complain about not getting to photograph the last day of our kid’s first year of school. Nor did I post it to take a swipe at Apple for building an amazingly creative, industry-leading product that is, however, a computer, and thus subject to bugs and glitches.

I posted it because every six months or so, when my iPhone’s camera stops working, I forget how to fix it. Now it’s on my website. When the camera starts failing around Christmastime, I’ll know just where to look.

[tags]apple, iphone, camera, software, bug, whitebox, photo, photos, disappearing[/tags]