With support from Mozilla announced with the release of Firefox 3.6, and with the advocacy of leading type foundries such as Linotype, Emigre, and Hoefler & Frere-Jones, the question of web fonts might be satisfactorily resolved in the near future.

In a blog post, Mozilla contributor John Daggett wrote, "The WOFF format originated from a collabaration between the font designers Erik van Blokland and Tal Leming with help from Mozilla's Jonathan Kew. Each had proposed their own format and WOFF represents a melding of these different proposals. The format itself is intended to be a simple repackaging of OpenType or TrueType font data, it doesn't introduce any new behavior, alter the @font-face linking mechanism or affect the way fonts are rendered. Many font vendors have expressed support for this new format so the hope is this will open up a wider range of font options for web designers."

Of course, Firefox 3.6 will be the first browser to support the new format, so designers will need to include @font-face rules for other browsers, at least for the time being. Not surprisingly, creating such rules for Internet Explorer is more complicated than for other browsers, as IE only plays nicely with Embedded Open Type faces and a limited set of @font-face rule descriptors.

Internet Explorer wonkiness aside, WOFF is a widely supported and relatively prominent step in the right direction, and we hope more browser versions will support the format. It's about time for web pages to lose their homogeneity, for designers to gain more tools for brand and personal expression, for search engines to read more fonts, and for users to have richer browsing experiences.

Interested web developers and designers should also check out woffTools, a Python package for examining and manipulating WOFF files. This package also contains a set of command line tools for verifying and examining the files.

In this postmodern world, we're all professionally fragmented jacks of all trades, and few of us have the patience (read: OCD) for learning enough CSS and Flash to allow us to keep up with the Jonses in terms of functional, sexy web design. Here are some cheat sheets, the Cliff Notes of site creation, if you will. Read on to discover four awesome, in-browser resources for creating your own beautiful corner of the web without the horror of code.

YourOwn.com: Edicy offers free vanity.edicy.com domains and publishing to any domain the user chooses for about $8.50 a month.

Choose Your Own Coding Adventure: Users can only pop the hood, so to speak, on HTML for sections of text. We couldn't find a way to, for example, change the color scheme or background image or page formatting.

SEO-riffic: Edicy lets users add keywords and descriptions, but not other metadata or tags for images or other media.

Zimplit: Fully Simple, Fully Editable

Zimplit is a resource we reviewed some time ago, but we feel it's perfect for this particular round-up. We were able to create a simple, elegant page within about a half hour. It's an open-source, dead-simple application that works just as well for code-free "dummies" as well as it does for those with an inkling or two about web design on the back end. For non-coders, a gallery of great design templates kick things off, and a simple 12-button toolbar does it all after that.

YourOwn.com: Vanity URLs on Zimplit.com are available, and regular domains (plus email addresses) are available starting at around $4.25 per month.

Choose Your Own Coding Adventure: Users have complete access HTML and CSS for their pages, making this a great resource for learning as you go.

SEO-riffic: Sorry, Charlie. You'll have to access the code to tweak your metadata and keywords.

Wix: Flash Sites for Flashy Folks

We're not going to lie: Creating a Flash site in Wix will take you a little more time. But for those who desire that Flash-y touch, this is one of the best free resources you'll find. This editor will present tools familiar to those familiar with other graphic design programs such as image editing or more GUI-oriented website editing programs. The effects, behaviors, animations, and other options offer complete control. Also, we adore the horde of multimedia gallery options. You've got slide shows, Apple-like sliders, and tidy matrices. But to be honest and fair, Wix is just as strangely buggy as any Flash service you've tried to use.

YourOwn.com: There's a whole slew of premium options. Users can elect to choose their own domains for as little as $4.95 a month. An ad-free site, however, costs a dollar a month more.

Choose Your Own Coding Adventure: We couldn't see any back end here, folks. But with all the design options available through the Wix interface, we're not sure you'll need much more.

SEO-riffic: "SEO Friendly" options start at $4.95 a month.

Amplifeeder: A Catchall for the NMDs Among Us

Another site we've reviewed before is Amplifeeder. What users create there may not qualify as full-on websites, but for those who are hip, Amplifeeder creates sites that are the living end in terms of social media aggregation. Really, we all create so much content across our various networks that a personal site can be static and even redundant. Amplifeeder uses great design templates to bring together blog posts, Twitter and Facebook updates, Flickr pics, YouTube videos, and any number of other social media happenings. The page we created is beyond cool and serves as a gorgeous, clean portal to all the places we really live online. Plus, the data you put here is all portable, backup-able, and restorable.

YourOwn.com: Hosting options are coming soon, according to site creator Jon Davies.

Choose Your Own Coding Adventure: Customize your heart out with a blank CSS slate.

SEO-riffic: This part's all up to you. Your SEO will be the moment of truth: What DO you really talk about and share most? Transparency meets SEO when Amplifeeder serves an aggregation of your social streams.

So there you have four great resources for website creation, from super simple to creatively complex. Now get out there and start souping up your web presence. We just made keeping up with the Joneses that much more competitive.

While the free version of the service allows for the kind of lightweight, static HTML editing we reviewed in Zimplit, the Pro version is "a powerful and complete CMS that allows for extremely easy setup and integration and that gives a level of usability that we feel has not been attained before in a CMS," according to the TypeRoom blog.

The Professional accounts will also provide for migration of full websites into the in-browser editing service. For the launch of the Professional accounts, TypeRoom is offering a limited number of free website migrations to early adopters.

Take a look at this demo video to see the editing functions in action:

The Pro account solutions for doing dead-simple SEO on the fly and accessing HTML, CSS, and JavaScript code are elegant, indeed:

Another aspect we enjoyed was the library of video tutorials, which, as any "Photoshop expert" can tell you, is the key to developing a finely tuned design sensibility and getting the technical know-how to execute accordingly.

These tools seemed like they would work well enough for a complete web design amateur who simply needed to change copy, images, and links on an existing page; they also seemed to offer enough options for those with the technical skills to take advantage of them.

Overall, we feel the TypeRoom Professional accounts are better suited to small- to medium-sized businesses needing to take control of their existing websites in a way that is both simple and affordable. TypeRoom Pro accounts are likely not best for the casual individual user, the web design hobbyist, or anyone without a pre-existing home on the web. It also might not be the best solution for sites with heavy multimedia components. Still, the new addition to TypeRoom's offerings is the kind of robust, reliable tool that warrants the term "professional."

One denomination, the United Methodist Church, has opted for a boldly redesigned web presence to ask users, "What if church wasn't just a building, but thousands of doors? Each of them opening up to a different concept or experience of church - and a journey that could change our world. Would you come?"

Apart from being remarkably aesthetically pleasing and entirely modern, the site also blows the lid off of traditional expectations of static church websites. Even non-Methodists or non-Christians would get a kick out of the rich interactivity: The TALK page that allows users to respond to simple questions, the FIND page that directs users to the closest churches with programs most relevant to users' interests, the LISTEN page with audio news features and an iLike music player.

We caught up with one of the minds behind the site, Miiacom's Bayard Saunders, in Nashville, Tennessee. "The big idea," he said, "was to serve the content of the home page like a giant tag cloud based on feeds from news sources, blogs (including Twitter), keyword searches, site paths and referring pages. So by design, the site is constantly refreshed and always highlighting the most relevant content based on the most current topics relevant to seekers."

Saunders also revealed that an ad buy-fueled partnership with Google has allowed for additional relevant innovations, including a Methodist layer on Google Earth, Google Maps, Google Friend Connect, and content fed by individual UMC churches from Google Apps.

"It is ground-breaking, certainly for an official religious denomination's website," he said. "And it's been quite an interesting experience, designing a web presence for 'the God account.'"

There are a number of things to like about iPlotz.

First, it's incredibly easy to use. With its drag-and-drop funcitonality, we were able to quickly recreate wireframes of current ReadWriteWeb pages right out of the gates.

Second, unlike other diagramming tools which offer everything from org charts to electrical schematics, iPlotz is focused on Web site wireframes. In fact, one of the best features of the product is the limited number of objects from which you can select. There's just enough available to build a semblance of a Web page.

Third, those objects are very rough - as if hand sketched. Why isn't this a detractor? In this case, rough is better. Representational elements enable wireframe designers to focus clients on concepts and functions without getting into design specifics. Need to move beyond the standard components? iPlotz allows users to import other media - like specific images - to incorporate into the wireframe.

So what's not to like? Given that the communication around the wireframe is critical to this portion of the Web design process, we had hoped for more from the commenting features. In our testing, there was a clear division between the design interface and the comment interface. To make a change based on a comment, users have to toggle back and forth between those two screens. Worse yet, the comment pointers don't adhere to objects on the design screen. We were able to move one object out from under a comment and replace it with another - destroying the context of the original comment.

But while the "collaboration" features may be lacking, there's a great deal to like about what iPlotz offers for wireframing. Enough so, that we'd consider using iPlotz as a simple sketch tool without even touching the comment features.

If you're interested in test driving iPlotz, you can open one project with up to 20 pages for free. That's plenty to give you a feel for the tool. If you find it useful, the subscription price is $99 US per year.

And try to overlook the name. Remember "Yahoo!" and "Google" sounded goofy the first time you heard them, too.

Originally designed as a solution for e-commerce sites, the service strangely called Adam is not complicated to use. However, the company does estimate that the time it takes from mashup creation to having it live on your web site could be approximately 20 minutes. That's a little bit longer than just linking to a PDF or even uploading it to a document-hosting service like Scridb or Issuu. Still, the extra time may be worth it because Adam lets you create a truly interactive document by allowing you to add videos, HTML, stylized text, and more to what were previously just plain files.

For those familiar with designing web pages, the process may seem familiar. To add content to a document on Adam, you select various "hotspots" in the document and then add the content you want to mashup. This is where you would paste in any text, images, music, or videos you want to appear when the user mouses over that part of the document. The service currently integrates with other content providers including YouTube, flickr, metacafe, Veoh, vimeo, and imeem.

The best way to understand what Adam can do, though, is to view some sample of it in action. You can check out a mashed up floor plan or you can see all the content providers in use on one document.

Adam doesn't provide anything that a talented web designer can't already do on their own, but like every service that comes out of the Web 2.0 movement, it's about letting everyone have access to the tools that previously only skilled professionals knew how to use. If you want to try Adam for yourself, you can sign up here.

According to a study done by the Sand Hill Group and Neochange, the most critical factor (70% listed it as number 1) for software success and return-on-investment is effective user adoption.

You can have the best software in the world, with the most sophisticated features, analytics and integration, blah blah blah - but if people don't use it, it isn't going to add value. I can't tell you how many RFPs and software selection processes I've been involved with in prior lives that focus almost exclusively on tiny little features that few people will ever use. This study shows that focusing so much on features is missing the boat entirely.

This finding is very interesting for all kinds of applications, particularly enterprise apps but also consumer apps. Features very rarely make someone take to an application or not. Moreover, I doubt most software companies really take user adoption as a holistic approach into account when designing their applications.

If this trend is accurate (and my experience tells me it is), then I think it has very interesting ramifications on how software should be designed, sold and implemented. User adoption is typically something that comes at the end of a cycle. This says it should be one of the most important elements of the entire process. Please share any opinions or war stories that either confirm or refute this conclusion.

We would love to hear any other tips, from those of you who have created your own Facebook apps. Please leave a comment below.

As PaidContent notes, Coke has been busy tapping into social media over the past couple of years. It ran a YouTube-like video channel, The Coke Show (which closed last summer), began a $1 million branding campaign on MySpace, and is currently working on two marketing programs with Facebook. Also we've noted in the past on RWW how Coke has adopted web 2.0 trends - e.g. Coke Poland's 43Things clone.

NYT points out that "Coke was an early mover in the realm of virtual worlds, viewing them as ways to engage their customers and build their brands." Five years ago, the soft drink giant opened a world called Coke Studios on myCoke.com.

Interesting though, Coke has been using the Web as a 'virtual world' since the very beginning. In 2004 I wrote an article for Digital Web Magazine, noting that Coca-Cola’s Web site in 1996 was styled as a “virtual museum”. Back then Coke presented its Web site as a “world” of games and entertainment, a “place to be”. Screenshots after the jump...

MyCoke website 2007

Conclusion: Nothing's Changed...

It's funny how for all the talk of web services, APIs, open data, personalization and the like - web experiences are still just as much about virtual worlds and places. I wrote in the 2004 article that "Web sites are no longer virtual places, they’re more like virtual agents." Well in Coke's case, that's not true - Coke is still trying to be a virtual world!

What's with the chicken? (lower right)

Also note that a few days ago Apple released a brand new guidelines doc called iPhone Human Interface Guidelines. So it is an important time for the design community, as they grapple with new forms of Web devices and interfaces. Apple itself says (in the Guidelines intro) that the iPhone presents "a revolutionary user interface and interaction model."

"...basically, for the last year, almost every project that I’ve done - in fact, I think every project that I’ve done - has involved some sort of touch interface. Certainly with the advent of the Wii and Apple’s iPhone and the new touch iPod, the idea of these kinds of different interaction paradigms were coming into the mainstream.

Every time that I went to do one of these projects, I would look for information about it and say, ‚ÄúWow. Has anyone done anything with it? How do you prototype this? How do you document this gesture where I‚Äôm sweeping my hand across the screen?‚Ä? Every time that I would look for that, I was unable to find really anything much of any value at all. So I began to think to myself, ‚ÄúWell, this was really our generation‚Äôs cut and paste. This is our generation‚Äôs drag and drop.‚Ä? These are the types of paradigms that were setup by the guys at Xerox PARC and other interaction designers back in the ‚Äò70s, that have continued up through now on to our desktops. This is our time to really step up and do the exact same thing except doing it for gestures."
(emphasis ours)

Certainly 'copy and paste' and 'drag and drop' have historically been two key aspects of web design. But "Pinch to Shrink", "Ghost Fingers", "Spread to Enlarge" and other new terms are becoming part of our vocabulary in 2007 and beyond.

The Mobile Web world has been struggling (or adapting) to designing web sites for small screens for years now - see Challenges of Interface Design for Mobile Devices from the Yahoo UI blog for the latest on this. However the gesteral interactions that Dan is talking about really are something new and - yes - revolutionary.

If you're a designer or developer, what have been your experiences over the past year or so in gesteral interaction design? What have been the chellenges so far - and opportunities that you're seeing?

Nielsen's latest tirade has been broadcast by the BBC, in a piece entitled Web 2.0 'neglecting good design'. I came across this via Hitesh Mehta, a Communication Designer who sent a passionate email to tips@readwriteweb.com, upset at Mr Nielsen's views on web 2.0 design.

"They should get the basics right first," he said. "Sadly most websites do not have those primary things right."

There was a risk, he said, of a return to the dotcom boom days when many sites, such as Boo.com, looked great but were terrible to use.

"That was just bad," he said. "The idea of community, user generated content and more dynamic web pages are not inherently bad in the same way, they should be secondary to the primary things sites should get right."

"The main criticism or problem is that I do not think these things are as useful as the primary things," he said.

You see what he's done there? By broadly comparing web 2.0 sites to one of the worst offenders in the dot com era (boo.com), he's basically saying that web 2.0 = dot com. But he doesn't mention a single web 2.0 site as evidence. Frankly, I fail to see any similarity between YouTube's easy to use, user content-focused design (for example) and the bloated, interactive-before-its-time design of boo.com. Can you? The "primary thing" of YouTube is for users to watch and contribute video, and foster conversations around that video. And to my mind, YouTube's design succeeds wonderfully in that "primary thing". So what "basics" is YouTube not doing right?

OK Nielsen may have a point if we used MySpace as an example, because it is true that MySpace is not overly usable - its design is crowded and cluttered. But it works... unlike boo.com! I'm sure 37Signals would say that MySpace is also an example of bad web 2.0 design, but I'm also sure they wouldn't tarnish all of web 2.0 design with the MySpace brush. And that is what annoys me about Nielsen - he makes broad, general statements decreeing web 2.0 design is 'bad'. But if he looked a bit closer, he'd see very well designed sites/apps like 37Signals' Basecamp or blogger.com. Not to mention huge mainstream sites like YouTube and Wikipedia, which may not be winning any design awards - but they are more than adequate designs. Certainly not boo.com-like.

When he focuses in on specific usability issues, Mr Nielsen begins to sound a little more reasonable. For example he says:

"While some sites with particular demographics, such as MySpace, Facebook and Bebo, have large involved communities of users that will not hold true for all sites, he said.

"Most people just want to get in, get it and get out," said Mr Nielsen. "For them the web is not a goal in itself. It is a tool."

Web firms rushing to serve the small, committed minority might find they make a site far less useful to the vast majority who come to a site for a specific purpose."

Of course it is true that most people will not contribute content to a site, they just want to "get in and get out" - i.e. get what they came for and browse off to another site. But once again, where are the examples of small web 2.0 sites that "serve the small, committed minority" and overlook the majority? Nielsen leaves that to our imagination. I can think of a few such sites - e.g. you could argue that del.icio.us is too hard for "the vast majority" of people to use. But I don't think any web designer would use del.icio.us as a template for a small business website, although they might certainly take aspects of del.icio.us and integrate them.

Hitesh Mehta provides an excellent counter-example to Nielsen:

"One of the finest example of web2.0 'personalization tool' is NetVibes.com and without neglecting the good design and usability. I have been using netvibes.com right from the beginning. Every minute I get fresh news, fresh feeds from the dozens of sites I subscribed at netvibes. This is simply amazing and is getting better and better everyday."

I agree with Hitesh, there are many ways that web 2.0 sites are implementing good design - but at the same time taking advantage of new trends such as personalization and user-generated content.

So once again, broad brush Mr Nielsen! You can do better. I've read your books for years, ever since I was a webmaster back in the 90's. But I think you have lost the plot. Why not subscribe to a few web 2.0 blogs, including 37Signals, and discover some of the excellent 'simple' web 2.0 design that is out there. Stop comparing web 2.0 to boo.com - it is both short-sighted and very misleading for the great number of web designers that still follow your work.

Image credit: heather

Dr. Nielsen and his assistants observed how these users interacted with a wide array of sites, ranging from corporate portals to small business stores. The book contains solid, sound advice that is useful for anyone building an online presence. The conclusion is evident in the title of the book - usability needs to be a priority.

Getting advice from the book is great, but how can you measure the usability of your site? A number of new tools for tracking site visitors are raising the bar for website statistics tools. Particularly, instead of tracking the flat lists of usage and showing you illegible user paths, the next generation of site trackers is focused on giving you the insights on how people use a site. In this post we discuss CrazyEgg, which offers innovative ways of doing just that.

Like most good ideas, the idea behind CrazyEgg is simple - show the hotspots where users click on in a site. This information is not the same as popular pages; instead this is practical information about how and where people click on your site. More importantly, CrazyEgg's approach lets you understand the difference between where you want your users to click and where they are actually clicking.

Traditional site tracking tools offer you a ton of information, including:

• Popular pages
• Entry pages
• Exit pages
• Came from
• Visitor Paths
• Visit Length

Ironically, it is not possible to use this information to understand what users actually do on the page. Hence, these volumes of information are practically useless in deciding what is wrong with your web site and how you can improve it. The creators of CrazyEgg saw this gap and realized there is a big opportunity to help companies assess the effectiveness of each web page. Once you look at the problem from this point of view, it becomes obvious how important it is to measure and visualize the hot spots on each web page.

Setting up CrazyEgg

The service setup is straightforward and similar to all tracking services. You are given a chunk of JavaScript to drop into each page that you would like to track. For each page, you can setup one or more tests. This is useful when you are trying to measure the effectiveness of your changes. Each test is either time based or visit based:

After you start the test, it runs automatically and you can check the results while it is running - as well as after the test is finished.

Interpreting CrazyEgg's information

The service presents the results for each test using three different methods: Overlay, List and Heatmap. While both List and Heatmap are useful, the Overlay method is the one you will spend most time on. In this view, each page is overlaid with the actual usage information. The user clicks are clustered and combined into markers; and each marker is colored based on the number of user clicks. This presentation gives you instant insight into what your users click on.

Each marker can be further expanded to see the number of clicks as well as percentage of the clicks in this spot, relative to the total number of clicks on the page. You can also drill in to see where the users that clicked there came from.

Looking at this picture allows you to determine whether your users are clicking where you intend them to click. Often, the results are surprising - because business concepts and the design elements that are obvious to you are sometimes foreign to your users. Because their context coming to your page varies, their clicks are not what you may intend. For example, one thing that you may not expect is that people click a lot on images - even if they are not linked. These clicks can be frustrating to the users, because their expectation to drill in and learn more is not met. And because attention is scarcity these days, any minor disappointment might lead them to leave the page.

Conclusion

CrazyEgg is a must-have tool in your web site arsenal, because it helps you improve the usability of your site - and improve user retention. It is complimentary to Stat Counter, Site Meter, Google Analytics and MyBlogLog (yes, you can install it on sites as well as blogs) and it will help you understand where your users are actually clicking. 

But even CrazyEgg only shows you a static snapshot of user clicks. Another startup, ClickTale, is kicking the game up a notch by recording movies of how users interact with a site - and it automatically organizes the users by types of interactions.

Combine these tools with Dr. Nielsen's book and you have a system for improving usability of your site. Greater usability will lead to more users and ultimately to greater revenues for your business. Please tell us what measuring tools you are using on your site to improve its usability.

The conversation in the post was revealing though - i.e. it revealed it is a very confusing issue :-) My favorite comment was from Josh, who compared Ajax to pepperoni on a pizza:

"It seems to me what a lot of people in this thread are saying is akin to a pizza maker saying pepperoni isn't a pizza ingredient because you don't have to use it.

Yes, you can make a pizza without pepperoni, and yes you can make a web app without Ajax. But if you make a pepperoni pizza, then pepperoni is a pizza ingredient. If you make an RIA with Ajax, then Ajax is a Rich Internet Application technology."

I love pepperoni pizza, so that argument swayed me. In any case, a majority of you seem to agree that you can create a desktop app-like experience using a non-plugin or download technology like Ajax. On this topic, Alex Iskold mentioned in his latest post that Ajax as a trend seems to be on a downturn. He showed the following graph to illustrate it:

Alex reasoned that it's because "we are seeing the rise of libraries like jQuery that hide Ajax and take it to a whole new level. So the new trend we can perhaps call MetaAjax."

I wonder if some developers out there can explain, in laymens terms if possible, what this MetaAjax is and whether it will be able to 'compete' with the likes of Flex and WPF? That is: will rich, interactive web pages and apps in 2007 and beyond be increasingly done using Adobe or Microsoft technologies? Or will vendor-independent approaches like jQuery or Ajax keep up.

Another way to ask this is: what RIA technologies will Google use in 2007 and beyond, to perhaps push interactivity beyond the current Gmail or Google Maps experience?

Pepperoni pizza pic: Jym Ferrier

"I see a couple of big reasons RIAs have become much more popular in the past few months. One is that a good experience has become a primary requirement for the web. I don't really count Ajax as a full RIA technology, but it has raised the expectation level and made people start to wonder how much better the web can be."

Ryan doesn't see Ajax as a RIA. Perhaps because he has high standards on what an RIA app should be able to do. Ryan writes more about the topic on his personal blog; also see this post by Adobe's John Dowdell from 2005.

We all know Ajax has its limitations - Google is probably the biggest proponent of Ajax, yet its web apps have been known to cause frustration at times. I bet every user of Gmail pounds their desk whenever a page refresh problem arises.

So in order to try and get a consensus about Ajax and RIA, I've created a very simple poll. Please take a minute to tell us whether you think Ajax is a RIA technology.

"We looked for examples of rich Internet and HTML applications in each of four categories and compared how well they supported relevant user goals. We found that, on average, RIAs outperform HTML interfaces; at the same time, RIA usability can fall prey to basic design mistakes."
(emphasis ours)

I checked out the report, which reviewed 22 Web applications across four categories: hotel search and reservation engines, mapping tools, PC configurators, and product finders. Note that by RIA, Forrester bundles together Flex, Ajax and other interactive Web technologies.

In Forrester's analysis, only 5 of the 22 apps passed their usability test - and all 5 were RIAs. The evaluation criteria was a set of 15 questions such as "Is essential content available where needed?" and "Is the task flow efficient?".

Here is one example of the usability results, in the mapping apps:

The report also notes some usability flaws in RIAs, but these are basic design problems rather than issues with the RIA technologies. For example using unintelligible icons and symbols, and problems with text legibility.

Overall, I don't think the results are overly surprising - or anything new. The question, circa 2007, is more about which type of RIA is best: Ajax (what I've called 'browser-based apps' in the past), or ones using browser plug-ins or downloads such as Flex and WPF (Windows Presentation Foundation).