加载中...
Aug182010
File Under: Fonts, Visual Design

A Design Contest for Web Fonts

The Web Font Awards are coming soon. It’s a new competition recognizing the most beautiful applications of web fonts in site design and technological achievements in type on the web. There’s no entry deadline or submission guidelines yet, but the contest will involve an actual meatspace awards ceremony and real cash prizes.

From the Web Font Awards site:

The Web Font Awards – the first ceremony to celebrate the newfound typographic freedom empowering Web designers across the globe. The Web Font Awards will be a design competition for websites using Web fonts. Aimed at promoting Web font awareness and adoption, the competition will be open to eligible users of any Web font service or technology.

Sign up at the site to be notified of dates, deadlines, rules and requirements as soon as they are available. Though we’re guessing this site (possibly NSFW) already has the top prize in the bag.

See Also:

Aug182010
File Under: APIs, Web Standards

New Standard Hopes to Unify Your Address Book

If you’re like most of us, you probably have contact and address book data spread all over the web — friends on Facebook, contacts in Gmail, followers on Twitter, and names in your local address book application.

Wouldn’t it be nice if all that data were available in one place where you could see it all, control which sites have access to it and manage your on and offline friends?

The truly unified address book is still a ways off, but there is hope it will be especially useful once it arrives thanks to some emerging standards.

The Worldwide Web Consortium (W3C), the governing body that creates and oversees web standards, has published a working draft of what’s known as the Contacts API. The goal behind the Contacts API is to provide a way to unify your address book, pulling from both local and online sources, and to allow you to better control how third-party websites access your data.

The latest draft incorporates feedback based on the earlier draft, first published back in January of 2010. It builds upon the work being done on vCard and Portable Contacts, among other contact systems already being used on the web. The final version is penciled in for mid-2011.

The Contacts API is part of a broader initiative at the W3C called the Ubiquitous Web Applications activity. The purpose of the group is to develop underlying infrastructures web services can take advantage of to make web apps more powerful and more useful. The Geolocation API, which lets a web app learn your location, and the Devices API, which lets a web app access a camera or microphone in your hardware, are also part of the same initiative. It also fits into the ideals outlined by the W3C’s vision of a semantic web.

So what will the Contacts API standardize? Currently, if a site wants to access your contacts list it generally does so by grabbing, say, your whole Gmail contacts list. Even with standards like OAuth, which gives you control over which sites can access your contacts list, you still don’t have much in the way of fine-grained permissions.

Say you want Facebook to only grab contacts that you’ve put in the address group “friends” in your Gmail address book. With the current controls, you’re out of luck. But if and when the Contacts API is ratified and adopted, that’s exactly the sort of thing it would allow you to do.

The Contacts API would also give the browser a method of unifying all your various contacts lists — for example your contacts from Gmail, Facebook and your local address book all merged to single list.

It sounds grand, no doubt, but the Contacts API is a long way from reality. Mozilla has experimented with the API (along with other tools) to create the Labs project Contacts, but like the APIs it uses, Contacts is still very much a work in progress.

See Also:

Aug182010
File Under: HTML5, Multimedia, Web Standards

Vimeo Spreads the HTML5 Love With Web-Native Video Player

Video sharing site Vimeo has taken the HTML5 plunge one step further with a brand new “universal” embeddable player aimed at mobile devices like the iPhone or the iPad.

Vimeo’s new “Universal Player” is actually capable of serving several different kinds of video formats, but it uses a script to check the browser’s video capabilities. Depending on what the browser can handle, Vimeo may display an HTML5 player, a Flash player or a platform-native player. For users, the playback experience and user interface are the same, regardless of the player being used.

The new embed code, now the default throughout the whole Vimeo site, still serves Flash to desktop browsers, reserving the native options for iPad and iPhone users. But eventually, Vimeo plans to let desktop users in on the HTML5 fun — including perhaps serving WebM videos to Firefox, Chrome and Opera users.

So, if you’re reading this post on an iPad or an iPhone, this movie will launch in a native player wrapped inside the browser’s skin:

WORDS from Everynone on Vimeo.

Interest in HTML5 video is reaching a fever pitch. It’s being fueled mostly by the iPad and other mobile browsing devices that can’t play Flash. Also, the recent launch of the new WebM video format, and the HTML5 video capabilities being built into the latest browser releases have publishers and video services exploring non-Flash alternatives for their viewers.

Vimeo’s new player builds on the HTML5 video player the company first launched as a beta project back in January. But the rapid growth of HTML5 video on the web has urged Vimeo to push this new player to the fore. Other video sites, most notably YouTube, have also launched their own site-wide non-Flash experiences in the last few months. But in most cases the only way to use the native web video players is to visit the actual website. Vimeo is the first to offer an embeddable native player by default.


Continue Reading “Vimeo Spreads the HTML5 Love With Web-Native Video Player” »

Aug172010
File Under: HTML5, Mobile, Web Apps

Yahoo Mail Switches to HTML5 on the iPad

Yahoo recently revamped its webmail site to deliver a richer, HTML5-powered experience to iPhone users, and now the company has done the same for iPad users.

Go to the Yahoo Mail website on your iPad and you’ll see the new, fully juiced-up HTML5 version instead of the older mobile version.

Yahoo mail the world’s largest webmail site — it has over 275 million users — but the site lags behind second-runner-up Gmail when it comes to innovation with HTML5 on the iPad and other touchy-swipey browsing devices.

Still, the new Yahoo Mail looks pretty slick. Scrollable photo previews now appear inside e-mail messages, and it supports offline local cache so you can keep working even when you’re out of range.

Aug172010
File Under: Events, Fonts, Web Standards

Web Heavies Send a Love Letter to Open Web Fonts

The nascent Web Open Font Format (WOFF) is getting a boost this week thanks to some new initiatives being kicked off by the W3C, the web’s governing body.

The W3C recently created a working group to build a WOFF into a web standard, and that group will be holding its first face-to-face meeting at the TypeCon 2010 conference taking place this week in Los Angeles.

Representatives from the major browser vendors, several font foundries and web services providers will be in attendance. Also, a dozen or so select individuals will be participating in a series of presentations and panel discussions about WOFF throughout the conference. All the design industry folks in attendance will get a peek at the future of high-quality typography on the web. There are scores of topics on the program, but this year, WOFF is getting top billing.

Things are looking up for web fonts in general. Monday, Typekit announced a partnership with Adobe to include the company’s fonts as part of its licensing service. Last month, Google launched a new tool (tied to its Font API) that makes it dead easy to include any of its open source fonts in website designs.

The Web Fonts working group was formed earlier this year at the W3C, and the group has already released the first working draft of the specification that will eventually lead to WOFF becoming a recommended web standard.

WOFF works just like OpenType and TrueType — you use the @font-face CSS property to drop the fonts in — but the font data is compressed, so the files download faster, and you can include more fonts in your designs without worrying as much about payload bloat.

The W3C adds this bit: “The WOFF format is not expected to replace other formats such as TrueType/OpenType/Open Font Format or SVG fonts, but provides an alternative solution for use cases where these formats may be less performant, or where licensing considerations make their use less acceptable.”

Support for WOFF is already strong — Google, Mozilla, Apple, Opera and Microsoft browsers either ship with or are building support, and the fast-moving foundries are releasing WOFF fonts — so why is the W3C’s involvement a big deal when the open source format is enjoying such success?

Standardization by the W3C is the best path to true interoperability. It will keep all the parties on the same page when it comes to things like accessibility, cross-browser compatibility, internationalization and search engine indexing. How much metadata to include and how it is handled are also big issues. Plus, fonts have taken an astonishingly long time to arrive on the web because of red tape around licensing, and a collaborative process for developing licensing infrastructures will go a long way toward convincing some of the more conservative type designers to make web-friendly versions of their creations.

The standard will take years to complete (the process is very slow — we’re guessing 2012 or so), and until then, we’ll see designers, developers and innovative service providers like Typekit and Google continue to feed the interest in fancy web fonts. Those not on the bleeding edge may be stuck in the boring world of “web safe” fonts for a while, but at least the future is bright.

TypeCon 2010 runs from August 17 through 20.

Photo by Leo Reynolds/Flickr/CC

See Also:

Aug172010
File Under: Frameworks, HTML5, Templates

HTML5 Reset Speeds Up Site Development With Handy Boilerplate Code

If you’ve been building websites for a while, chances are you have some boilerplate code you use to jump-start a new site — perhaps some CSS resets, a basic HTML structure, and so on. You tweak and refine your boilerplate as standards evolve.

One of the best ways to improve your basic code is to see how other people do the same thing. We recently stumbled across HTML5 Reset, a set of templates and code that makes a great starting point for a sites that will be using HTML5 and CSS 3.

HTML5 Reset draws on many well-known sources like Eric Meyer’s reset stylesheet, the Modernizr script for HTML5 across browsers, Dean Edwards’ IE7.js. (Separately, there’s also the excellent HTML5 Boilerplate, which has similar HTML5 and CSS 3 features, but of course a slightly different way of implementing them.)

As the HTML5 Reset authors note, the code is by no means an “end-all and beat-all” set of templates. In fact, the code may not work for your project at all, but even you don’t end up using it as-is, you may be able to glean some good ideas from it.

For example, because I use Sass for developing stylesheets, raw CSS isn’t all that useful for my projects. However, HTML5 Reset has a very nifty class for clearing floats without extra markup, so I ended up incorporating that element into my own Sass-based boilerplate code. Take what’s useful and leave the rest.

There are a couple versions of HTML5 Reset — the “Kitchen Sink” version that includes nearly everything and has copious comments and a “Bare Bones” version that’s stripped down to just the basics. I recommend checking out the former unless you’ve decided to commit to HTML5 Reset. It’s always easier to start off by removing things you don’t need than trying to figure out what you need to add.

If you’re curious, head over to the HTML5 Reset site to learn more. HTML5 Reset is available under the BSD license. If you see bugs or have suggestions on how to improve HTML5 Reset, be sure to let the authors know.

See Also:

Aug172010
File Under: HTML5, Mobile, Web Apps

How Do Native Apps and Web Apps Compare?

Skull
The Web is Dead. Long Live the Internet
The Web is Dead?! A Debate
How the Web Wins
How Do Native Apps and Web Apps Compare?

Two roads diverge on a tablet screen. One is the path to the native app, the other leads to the open web.

Luckily, you can take both. The latest mobile devices ship with a thoroughly modern browser capable of handling emerging web standards. Beneath that is a modern operating system with access to the magic inside the hardware: the camera, GPS, gyroscope and compass. But if you had to pick one — native app or web app — which would you choose? Your decision will make all the difference in how you approach your design, development and distribution.

The Issues Native Apps Web Apps
Internet access Not required Required, except for rare apps with offline capability
Installation/updates Must be deployed or downloaded Hit refresh
User interface Native apps are responsive and functional Browsers can be clunky, but new advancements in JavaScript like jQuery Mobile are catching up fast
Device compatibility Platform-dependent, hardware-dependent Platform-agnostic, content can be reformatted with CSS to suit any device
Animation/Graphics Fast and responsive Web apps are getting closer, but will probably always lag
Streaming media Few problems with audio and video. Flash works, but only if the device supports it Flash works where supported. Browser-based audio and video are getting there, but still beset by compatibility headaches. Give it a year or two
Fonts Tight control over typefaces, layout Almost on par, thanks to advancements in web standards. Give it six months
Is my content searchable? Not on the web By default
Sharable/Tweetable? Only if you build it in Web links are shared freely. Social APIs and widgets allow easy one-click posting
Discussion and collaboration Only if you build it, and it’s more difficult if data is disparate Discussion is easy, all data is stored on a server
Access to hardware sensors Yes, all of them: camera, gyroscope, microphone, compass, accelerometer, GPS Access through the browser is limited, though geolocation is common
Development Specific tools required for some platforms (like Apple’s). You have to build a new app for each target platform Write once, publish once, view it anywhere. Multiple tools and libraries to choose from
Can I sell it? Charge whatever you want. Most app distributors take a slice, up to 30% Advertising is tolerated, subscriptions and paywalls less so. No distribution costs beyond server fees
Distribution Most app stores require approval. And you gotta wait No such hassle
Outside access to your content No, the reader must download your app Yep, just click a link
Advertising Control over design (though limited in iAds) and rate More choices for design, plus access to web analytics. Rates vary widely

See Also:

Aug162010
File Under: Fonts, Visual Design, Web Services

Typekit Teams Up With Adobe to Offer More Web Fonts

Typekit, the web service that helps designers use elaborate typefaces in their page designs, is celebrating its one year anniversary with a big announcement: the company has added 16 of Adobe’s popular font families to Typekit’s ever-growing stable of options.

With the addition of Adobe’s fonts to TypeKit’s already large library, designers now have access to popular workhorse fonts like Adobe Garamond, News Gothic, Myriad and Minion, as well as slightly funkier options like Rosewood or Trajan, the “movie font.” These typefaces are heavily used in the print publishing world.

The new Adobe fonts are the original cuts of the typefaces, not reproductions or downgraded web versions of the designs. This means it’s now possible to use them just like you would in print work with the same rendering accuracy and technical detail you’d see on paper. Monday’s development should have a positive impact on the use of fancier fonts on the websites of old-school institutions and larger corporations — companies that have been using Adobe products to build their print materials for years. Now that they have the same level of control over details like kerning pairs and line height on the web, they’ll have an easier time making the jump.

Adobe is a little late to the party — the company is one of the last major font foundries to partner with Typekit — but Typekit President and co-founder Bryan Mason tells Webmonkey that the reason for the delay is a heavy attention to detail.

“Adobe has been working on the hinting and screen rendering of these (and others to follow) for months,” says Mason, “[that] means a character-by-character, weight-by-weight review of each font family.”

Typekit is like a YouTube for fonts. The service lets web developers pick a font from its library, pay a licensing fee to the font creator (though some fonts are free), then use that font across their website. Unlike many fancy type solutions on the web, TypeKit isn’t using any sort of image replacement for rendering fonts, just the standard CSS @font-face declaration with a minimal amount of JavaScript to simplify the process and account for various browser versions. The service is one of the easiest ways for web designers to use creative fonts without sacrificing web standards or violating font licenses — most of the time, it’s just a matter of copying and pasting some code snippets. There are also options specifically designed for easy integration with popular publishing platforms like WordPress. The company also released an API last month, allowing third parties to integrate Typekit font selection into their apps.

If you’d like to try the new fonts on your site, head over to Typekit and log in to your account. The fonts are available for all paid Typekit accounts. If you’re using the limited, free option, you’ll have to settle for Adobe Garamond, the only family that Typekit is giving away.

See Also:

Aug162010
File Under: Browsers

Tab Candy to Become a Standard Feature in Firefox

Mozilla’s “Tab Candy” experiment has proved so popular, the company has decided to roll it into future versions of the Firefox browser as a standard feature.

The latest nightly builds of Firefox 4 now include a new Tab Sets feature. If all goes well, the feature could be included in the final version of Firefox 4, due this autumn.

Previously referred to as Tab Candy during its development phase the last few months, Tab Sets allows you to group and quickly switch between related clusters of open tabs. Tab Sets are specifically aimed at making life easier for those of us who frequently have dozens (or more) tabs open at one time. By grouping your open tabs into sets — say a group of tabs for work and a group of tabs containing some Instapaper articles — you can keep better track of everything without needing to scroll through dozens of tabs.

Download a nightly build of Firefox and you’ll see a new Tab Sets button next to the List All Tabs button. Click it to show your tab sets. From there, just draw a box to create a new empty group, drag tabs between sets, drag a tab onto another to create a new group, re-size groups and tabs, and so on.

The feature works a bit like multiple desktops in your operating system — a la Expose on Mac OS X — except in this case it’s just web pages inside a single browser window.

Perhaps the best way to understand Tab Sets is to see them in action. The video below from Firefox designer Aza Raskin gives a nice overview of Tab Sets and why they’re incredibly useful.

An Introduction to Firefox’s Tab Candy from Aza Raskin on Vimeo.

As nice as Tab Sets appear, they are not without some quirks. The latest nightly builds fix a number of bugs that showed up in the initial Tab Candy release, but bugs still exist and sometimes the behavior of tabs sets is a bit confusing.

For example, App Tabs, another new feature coming in Firefox 4, are included when you’re grouping tabs in the Tab Sets interface. But because App Tabs persist across groups anyway, including them in the Tab Sets UI makes things overly cluttered and a little bit confusing.

Of course, these are nightly builds meant only for testing by developers and early adopters, and things can be very rough around the edges both in design and function. Hopefully, by the time the feature freeze for Firefox 4 rolls around in a few weeks, Mozilla will have worked out enough of the kinks to include Tab Sets.

See Also:

Aug122010
File Under: Browsers

Chrome 6 Beta Boasts New Look, Better Sync

Chrome 6 beta on the Mac

The next version of Google’s browser has been promoted to beta status. You can now download Chrome 6 beta and start testing it out on multiple platforms.

The biggest new features? There’s a simplified user interface in Chrome 6, a new autofill feature for completing web forms, and better syncing, including support for autofill data and extensions. If you’ve been using the dev channel or canary releases of Chrome, you’ve seen these features showing up one by one over the last few weeks.

Chrome 6 beta gets the performance bump that’s standard for each new browser release. It also comes hot on the heels of the latest pre-release versions of Firefox 4 and Internet Explorer 9, both of which arrived within the last week showing off faster and more capable HTML and JavaScript engines.

The browser’s skin has been tweaked slightly to streamline the tab and button layouts, and there’s a new unified button that marries the old Tools and Menu buttons found in previous versions of Chrome. The new menu button holds all the most popular controls, as well as some oddly placed buttons for zooming pages, launching fullscreen mode, and performing copy/paste tasks. I don’t think any of us are going to be abandoning keyboard shortcuts for these options any time soon.

The autofill feature is integrated with the sync feature in Chrome 6 beta, so all of your instances of Chrome (home, work, laptop) will be able to share not only preferences, extensions, browsing data and themes, but also form data. You can autofill forms with the same information — provided you’re logged into Google using the same account in each location. Chrome can remember, store and sync any set of common information you’d normally put into a web form (names, e-mail, mailing addresses, phone numbers). You can simply select which data set to choose from when the autofill feature takes over.

Chrome can also remember credit card numbers, but you have to explicitly add them in the autofill feature’s preferences.


This version of Chrome will likely move from beta to a general stable release in a few weeks. We should expect the next version of Chrome to follow along only six weeks after that, as Google has sped up its release cycle to put a new version of its browser out every month and a half.

See Also:

« OLDER POSTS