CSS3, which is not yet an approved standard, allows for the inclusion of OpenType and TrueType fonts via the @font-face rule. This is great because there are no browser plugins or addons making the browser render pretty fonts, as there is with sIFR, which requires Flash. This method also leaves your page code alone and, while it does require JavaScript in some cases (see below), does not re-write your HTML in any way.

Typekit

Typekit offers an easy way to take advantage of the capabilities of @font-face without you needing to code for all browsers, obtain licenses for the fonts that you use, and manage the server-side requirements of uploading fonts and such.

It does still cost money (just as licensing fonts would were you to roll your own @font-face setup) but the cost is not bad and you have access to hundreds of fonts that have been licensed to Typekit.

I’m using the free “Trial” license for this post.  I can choose from about 100 different fonts but am allowed to use only two fonts on a single website.  The trial license also requires me to have the badge you see in the lower right corner of the site present on all pages on which the Typekit JavaScript is present.  Most non-personal sites will get what they need with the “Portfolio” plan for about $50/yr.  If you want to use Typekit on “https”, or secure, pages or accomodate more than 20GB monthly traffic, you’ll have to pay $249.99/year.  A big difference to be sure.

Regular old font replaced by a neat one called “John Doe.”

This is great, but the first person I see using “Coquette” in the content of their site gets the silent treatment from me for a good long time.

The way it works is that you create an account at Typekit.com and put together what they call a “kit” by browsing the fonts online and clicking the “add” button.   Then, in your “kit editor” you tell it what CSS selectors (CSS classes, IDs or HTML tags) you want the font to be applied to; the weights and styles (bold, italic, etc.) you will want to use, and what plain fonts you would like to deliver to browsers that do not support @fontface (yup, browser support rears its ugly head again!).  After clicking the “Publish” button, you grab a small snippet of JavaScript, add it to the pages on which you would like to apply this new font, and you’re good to go.  Just add the class name you defined when you built your kit to the elements you want styled and it just works.

From creating my account to styling the text you see above was less than five minutes.  I added the JavaScript snippet to the template for this entire blog and I don’t have to think about it again.

As mentioned, Typekit does require JavaScript which is used to generate the link to your “kit” that you created at Typekit.com. The script does not in any way alter the HTML your page originally contained as sIFR does to replace text with a Flash version of the same text.

Also, though you may see a flash of un-styled text as your page begins to load, this method is much quicker to load than sIFR. sIFR fonts will generally look smoother because of the way that they are drawn by the Flash, but are also not re-sizable on older browsers that do not increase the size of everything on the page as the latest versions of Firefox and IE do (and as Opera has for some time).

So, while I have yet to use TypeKit on a client Web site, I’ve not seen anything so far that would stop me from doing so.

So, you have a website. It looks good, works well, and is kept updated — great! But what else should you be doing on a regular basis to ensure its success?

Google Webmaster Tools is a free service provided by Google that will help you to see the “big picture” of how your site exists on the web and how you can improve both its presence and performance. To get started, log in with any Google Account. You’ll need to add your site and complete a brief verification process. Then you’re ready to go.

Here are a few things you can accomplish through Webmaster Tools:

Learn about Incoming Traffic

Understanding the intentions of incoming visitors will help you to make sure they have a positive experience on your site.

• View Top Search Queries shows when and how your web site is appearing in Google search results. Which keywords display your site the most? Which result in click-throughs? Learning the answers to these questions (and identifying the differences between them) will help you to ensure that your site’s content meets the needs of incoming traffic. If certain keywords are missing from the list or ranked lower than you would expect, you may need to add more content to your site related to that keyword and ensure that others are linking to it.

  More highlights after the jump. (more…)

Beautiful fonts are one of the holy grails of Web Design.  Along with CSS-based equal height columns, better support for image transparency, browsers that all display pages the same (or at the very least the death of IE6), and a vending machine stocking drinks with higher caffeine content than Mountain Dew, the ability to use any font we want in a page design would make us (mostly) very happy indeed.

There is something to be said for sticking with a fairly limited set of fonts for the main content of your site.  After all, people actually have to read what we write and our usual set of fonts are nicely readable for the most part.  But when it comes to headlines we may want to use something a bit more elegant than Arial, Verdana, Helvetica, Times New Roman, or Georgia.

(more…)

The future is here, and its name is Wave.

Not really… but the much anticipated Google Wave has arrived in “preview” mode. When Google says “preview,” they mean “we can’t call it beta yet”, and it’s available through a limited number of invitations to people who are willing to deal with lots of bugs in order to get an early peek at this tool.

The idea behind Wave is that email has been around, mostly unchanged, for a long time – so Wave purports to be what email would have been if it were developed using today’s technology and for today’s web user. Not everyone feels that Google’s description of Wave is accurate, however. Daniel Tenner blogged recently that Wave is not communications 2.0 at all, saying:

“Is Wave the next Twitter? Nope. Is it the next Facebook? Nope. Is it going to replace Instant Messengers? Possibly, in some circumstances, but not any time soon.. I believe this is partly Google’s fault: they released Wave to geeks and hackers and social media folks first. But Wave is not a geek/hacker tool, or a social media tool, it’s a corporate tool that solves work problems (more on that later). On the other hand, they never claimed it would be a Facebook replacement or a Twitter killer.”

Confused yet? Check out a new collaborative user manual, read Lifehacker’s introduction, or Google’s hefty hour-long demo (below), and you’ll have a good idea of what it’s all about.

(more…)

Testing a Web site is a pretty big, and not often inexpensive, task. Cara already posted about some inexpensive tools for user-testing wireframes. But for your design, there’s an opportunity to go even lower-budget than that.

To do testing truly on the cheap, there is a new tool called fivesecondtest.com. It’s a way to test designs in five seconds or less. You upload your design, and then you can either invite specific users to test it, or you can open your test to the entire 5 second community. You have the option of creating memory tests or click tests. And as the name suggests, a tester looks at the design for five seconds, letting you know what items stand out on the page.

Of course, this is a very simplified approach. There is no task-based testing. As the site states, the tool is meant to “help you easily identify the most prominent elements of your user interfaces.” Nothing more, nothing less. And if you open up your design to the entire five second community, you’re likely not getting results from an average-joe user, but usability and design experts.

There are some paid plans that allow you to do some more sophisticated testing. But if you’re budget is beyond tight, it may be worthwhile to just upload an image and see what the testers say.

We hear it all the time. “Yeah, there’s an app for that.” It seems that, for every task you want to do, there’s a digital application that goes along with it, from organizing your recipes to promoting world peace.

If you have ever tried to coordinate your web team and client stakeholders, you know that often, email just doesn’t cut it. Emails get lost, deleted, lose their history trail, and can be disjointed. So when trying to get web teams and their clients to collaborate, what is the killer app that helps get everyone together?

The answer…none (at least, none that I’ve seen). No one single application is perfect at fostering true collaboration from the inception of a project through to completion. A good tool used by creative designer and client to cement the vision for a Web site is probably not the same tool that will help a QA tester communicate bugs and issues to the core tech team.

We at Beaconfire use a few tools for different phases of a project. Here are some examples of how Beaconfire uses some of its tools to foster collaboration.

(more…)

Much has changed since humanity acknowledged the word knowledge and started to classify the various subject matters into categories and taxonomies of learned disciplines.
The definition of knowledge is outside the scope of this article because of simple reasons. I am not as qualified as the university professors, or librarians who pour their blood, toil, trouble, and tears into the understanding of knowledge and wisdom.

What I do know about is what knowledge is online. Since Sir Tim Berners-Lee (Yes. He was knighted.) created the World Wide Web to link documents together on the then nascent Internet, knowledge became more than monolithic documents or books that were linked loosely via citations and references. Instead of specifying in APA, MLA, Chicago, or Turabian style where the source of a particular knowledge was, one could directly link it using something called “HyperText”, or what some know as “Hyper Text Markup Language”. Today, all websites that you see online are built with a combination of HTML, some JavaScript, and possibly some Flash or Java.
(more…)

I love analytics. I love diving into the data, looking at the numbers and finding new and actionable insights. But there is one thing about analytics I don’t love – monthly dashboard reports. You know what I mean – a spreadsheet showing visits, pageviews, new visitors, etc., compared from month to month in nice little columns, filling in a neatly formed Excel graph. While not always actionable, these reports do show big-picture trends, and your bosses and boards love that. In the world of analytics, monthly dashboard reports are a necessary evil.

However, I could never get Google Analytics to give me data in a form that really fit any of my monthly dashboard report needs. I’ve spent hours clicking, copying, pasting, and reformatting in search of the perfect dashboard report.

The tedium may come to an end, thanks to an Excel Plugin called Excellent Analytics. The plugin uses the Google Analytics API to allow you to run customizable Google Analytics reports right in Excel. And after you create a query, a few clicks will update the numbers in next month’s report.

So after you invest some time to set up your first Dashboard report with Excellent Analytics, all you need to do next month is copy and paste a few columns as values, and update your query. I tried it out for the first time this month, and I went from spending almost 4 hours on a dashboard report to 45 minutes.

Now that’s efficiency only an analytics geek could love.

Today, I had the honor of speaking on a great panel sponsored by Google and the Ad Council along with Jane Kirchner from American Farmland Trust, Andrew Marshall fromthe Agency for Healthcare Quality and Research (AHRQ) and Carley Graham Garcia from Google.

Huge props to Kate Emanuel of the ad council for pulling it all together and inviting me to join the assembled rockstars. For anyone playing the home game who would like to see my part of the presentation, enjoy!

Great facelifts are not just for the Hollywood elite anymore. In these challenging economic times, organizations are discovering the wisdom of reorganizing their existing wesbsite real estate rather than going under the knife for a complete site redesign. Think botox vs. nose job – If you had limited time, resources and a pretty low pain threshold, which would you choose?

All kidding aside, these days a “facelift” or a “site refresh” may be just what the doctor ordered for several reasons:

1. Your organization has rebranded, updated your collateral, or changed your identity in any way that resulted in a lack of overall visual cohesion.
2. Your site was last designed when Front Page was the cool kid on the block, IE 6 was the best browser on the market, and it’s just begun to feel dated.
3. Your whole site is in flash, no search engines can find you, and you cannot edit it easily.
4. Your information architecture and labeling is largely sound, but could use a tweak to update the language based on some user testing results.
5. You don’t have the time or the money for a complete redesign, but feel your organization’s message and mission are suffering because of a less than optimal site design and user experience.

While I’m a big fan of the transformative power of a fresh coat of paint for your website, here’s a few road-tested suggestions to consider before you drink the facelift kool-aid.

1. Assemble a small, nimble and responsive team to do the work. Do not skimp on a great PM who is no pushover but knows which battles are worth fighting.
2. Take the time up front to define the project requirements and keep them narrowly focused. Make scope creep an offense punishable by organization wide ridicule. Seriously.
3. Commit to a launch date and do not change it unless cats and dogs start falling from the sky. Same for major deliverable deadlines. This will be the “Project that never ends” if you don’t.
4. Do not let process bog you down. Be flexible enough to try a simpler way of doing something even if it represents a shift in “how you’ve always done it”.
5. Set reasonable expectations for the project amongst the organization’s stakeholders, and make sure you keep the lines of communication open at all times.

At the end of the day, the mark of a successful website facelift comes down to effectively using your available resources to help your users better engage with your organization.

And by the way, you look FABULOUS. Did you have some work done?

P.S. If you want to learn more about effective design strategies for your website, don’t miss yours truly (and some other cool folks) speaking on Oct 1st at this Google/Ad Council seminar: “Extreme makeover: Taking your website to a new level”

The Gift: Before

Problem:

The holidays are coming up again, and once again you waited too long to buy your gifts.  You can’t find the items in stores, and when you find them online they won’t ship in time.  They don’t even offer an e-card that nicely displays the gift you purchased.  The best you can do is print out the item’s product page and stick it in a card… only, what you print out has the item’s price tag in a glaringly large font size, along with headers, advertisements and who knows what else.

Solution:

Firebug.

Even some developers who use Firebug on daily basis may not realize some of the powerful capabilities it has for quick and easy DOM manipulation.  Among its other capabilities, Firebug lets you edit and even delete parts of an html page directly in the browser, without the need to save or open the page in an editor.

The Gift: After

Starting with the “Inspect” button, you can quickly jump to any part of the page and Firebug highlights the inspected element.  From there, you can right-click and either edit the content or delete the element entirely.

A minute or two of clean-up and you’ve got a respectable rain-check for gifts with a minimum effort, all without ever clicking the “save as…” button on your browser.

Scheduling a group of people for a meeting or workshop is not a big deal if everyone works at the same place and their calendars are up to date in Outlook.  But what if that isn’t the case?  I recently had to schedule a 2 hour workshop with 10 people who work in different places and in different time zones.  The thought of trying to coordinate over email was making my head spin…. one email goes out, several come back at different times with various windows of availability.  All needing to be compiled and compared, double checked and followed up on – there had to be an easier way – and I found it.

www.doodle.com is a free application that allows you to set up various date and time options for your workshop (or any other meeting or event – beach weekend anyone?).  The service generates a link which you can send out to your participants.  The participants indicate online the time blocks they are available (via checkboxes) and you have one place to check to see what time works best for all.  Doodle.com is a simple application but it makes this PMs life a little bit easier.

The iPhone is arguably the most advanced piece of technology commonly found in people’s hands these days. It has a GPS to tell you where you are. It has a phone to let you communicate with people. It has a multi-touch LCD screen that lets the user use the device with no more and no less than one button. The iPhone is a computer … with the Internet. Ten years ago, try to imagine describing to someone what an iPhone does and they’d think that you were talking Sci-Fi. Well, folks, as much as people like to deny it, Science Fiction becomes reality every day in our world.

Jules Verne could see us going to the moon, and John F. Kennedy  actually pushed our country to do it. Star Trek could see us using tri-corders, and Motorola created it as the first cell phone. In my opinion, the iPhone, it’s market of applications, and growing user base is the best way to gain access to and interact with information. It also helps you get in touch with people, but I think face to face is the best way to interface with other humans.

Over the course of my trip to New York City this weekend, I realized exactly how valuable my iPhone is. When I got off my bus at 31st Street and 7th Avenue, I wanted to use my gym membership at the sports club. I went online on my iPhone, looked up the nearest 24 hour gym in their network, and copied and pasted the address into the Google Maps application. In about 2 minutes, I was on my way. After I arrived and couldn’t get into the side of the building which was advertised, I looked up the phone number online, gave them a call and got in. That’s convenience.

The sports club’s web site is not optimized for the iPhone, but since the built-in Safari Browser is a full-fledged browser, I was able to navigate with some effort and get what I needed. If the web site was actually created for the iPhone, it would have saved me some time from zooming in and out, panning left and right to get around. If they had an "app" for that, I might have been able to log into it with my account and it would have been geo-location aware of where I was and tell me the nearest branches of the club. Why don’t they create an "app for that"?

This is all possible and contradictory to popular belief, the functionality that I just described doesn’t have to be developed as an iPhone Application. Much of the functionality can be created in HTML as a web application and placed on the Internet. Google has done a great job by making all of their applications as iPhone friendly "webapps" which behave like iPhone applications.

Recently, some plugins have been released to make your WordPress blog iPhone friendly. Available at Brave New Code, the WPTouch Mobile Theme and Plugin for WordPress takes your standard WordPress blog and makes it look, feel, and behave as an iPhone application with nice transitions.

Static Content Sites

Many organizations have also released informational web sites in a handy, iPhone friendly format. Their sole purpose is to disseminate information. Web Apps such as the Athens Tourist Guide :  and Pocket Cambridge : are basically lists and tables of static HTML that look nice on an iPhone or an iTouch. Do you have information that can be useful to iPhone users? There are some really easy ways to get it out there.

1. iWebKit – “Iwebkit is the revolutionnairy kit used to create high quality iPhone and iPod  touch websites in a few minutes and is based on an LGPL license. In the first 4 months of it’s existance the pack has greatly evolved from a basic idea to a project that has reached worldwide fame!”

2. iUI – It has the following

1. Create Navigational Menus and iPhone interfaces from standard HTML
2. Use or knowledge of JavaScript is not required to create basic iPhone pages
3. Ability to handle phone orientation changes
4. Provide a more "iPhone-like" experience to Web apps (on or off the iPhone)

Dynamic Content Sites

Do you have programming ability or resources which you can utilize to push out your content from your organizational and institutional databases? You can probably use the aforementioned tools in conjunction with dynamic server side languages, but you might want to look into the following options to make your life easy.

1. ComponentOne iPhone Studio – ComponentOne’s studio is a rich set of ASP.NET Server Controls which is beyond compare when it comes to giving you a competitive advantage in creating dynamic applications fast. Some of the included server controls are : Calendar, ViewPort, CoverFlow ( Like the iTunes record browser ), and MultiView ( like the Photo explorer in the iPhone Camera application ).

2. iWebKit for Grails – This plugin provides integration with iWebkit, a powerful User Interface Library for Safari development on iPhone. By using this plugin, the grail developer will have an iphone web app skeleton (CSS and javascript) but also a extended tag library helping in creating iphone web pages in an easy,clean and fast way. If you are a Java developer or your company has them, and have gotten the hang of Groovy, this might be the path for you.

3. iUI with Asp.NET – iUI is very simple and some people have taken some steps to create their own integration for ASP.NET and iUI. This page points you to some third party resources which may be helpful for you in creating dynamic iUI applications.

Possible Scenarios and Tips

How can you capitalize on the iPhone and iTouch user? Here are some ideas which may work out for you.

1. If you have a Calendar of events, you can add iCalendar format links which can let users download the event data and add it to their iPhone Calendar.

2. If you have a location or event search which requires an address or a zip code, you can use W3C’s Geolocation API which is supported by the built-in Safari browser on iPhones.

3. If you have a member’s only directory, you can create an interface which can list people’s information as well as publish their contact info in the vCard format so that they can add it to their contact lists.

A few days ago, my colleague wrote about the effectiveness and Return on Investment (ROI) of adding social networking links to your site . Are your users clicking them? Are they driving traffic to your site? In reading his post, I could see years of frustration in implementing these kinds of share links. There’s so much to do – figuring out the link styles, getting the right icons, picking the right networks, changing out the networks when one becomes passe and another comes into vogue. It’s enough to make anyone ask, "are you sure you really want this?"

Luckily, the days of this kind of implementation being limited to the domain of the tech-savvy few are over. Thanks to services like AddThis and ShareThis , adding this kind of functionality on your site can be a simple half-hour operation. It’s important to consider the pros and cons of using these kinds of free services (their branding will appear on your site, limited customization and integration, the service getting your data, and the possibility that they could go out of business). But if you can stomach the cons, there’s no reason you can’t easily implement a social networking bar on your site.

(more…)

Take a look down at the bottom of this post.  See all those little icons?  You may know what they are for, you may not, but they are a feature that now appear on most blogs and an increasing number of Web sites.  The idea is that you can click one of those icons and, by doing so, submit a link to this post to the associated social networking site.  Why would you want to do this?  If you don’t know the answer to that question then I would suggest that there is no reason at all to do so.  But if the question you are pondering on is whether you should add these kinds of links to your Web site or blog, then by all means read on.

These icons are not merely shortcuts to the sites that the represent, they actually perform an action associated with the function of that site.  As such, they are more like little applications than links, per se.  I’d say that there are three main reasons to put an application-like shortcut to anything, social network or otherwise, on your website:

1. To give your visitors a quicker way to accomplish something they already do
2. To demonstrate that you are the kind of site that does this sort of thing
3. To educate your users and try to get them to start doing something about which didn’t already know

(more…)

There is ever growing interest in ways for organizations to aggregate news based on the input of multiple people, then select and push that news feed through their site. The good news is, there are some very slick methods for doing just this. As an example, Jeff C. on ProgressiveExchange, posted what he needed to which I responded and am cross-posting here.

I like diagnosing problems. I love implementing solutions. And as some of my colleagues will tell you, more than anything else, I love to test. But it’s the final step that I loathe: clicking that dreaded “publish” button.

A few weeks back, we discovered a minor issue with the “print this page” functionality of a site. The issue affected only a small universe of browsers. I was able to diagnose the problem and implement a fix. However, that fix was more of a coding change than I had hoped for. I tested each several pages using each template in four browsers times two versions times four operating systems, (which translates to “I tested it a whole heckuva lot”). Everything worked. But when it came time to click that publish button, I hesitated. I was about to change this functionality on no less than 5,000 pages. Could I have possibly anticipated every possible outcome?

(more…)

Limitations. We hate them, but we have to live with them.

As web folks, often the source of our limitation is the CMS software that was supposed to set us free. In many cases, the vendor has the server, the vendor makes the software, and more often the not, and there’s no access to server-side scripting, such as PHP. Maybe your CMS has all the features you’re looking for – outside news feeds, photo galleries, calendars, and other fancy widgets. Sometimes, though, it seems that some of the features we covet are missing.

But if you can put JavaScript in your CMS then you can have your CMS and your widgets, too. There are several JavaScript libraries out there,  when combined with XML or other data formats, can get you almost anything you want.

Don’t think you can make XML? Think again.

(more…)

Answer:  Multivariate Testing (or MVT)

So what is it?  According to Wikipedia:

…multivariate testing is a process by which more than one component of a website may be tested in a live environment. It can be thought of in simple terms as numerous split tests or A/B tests performed on one page at the same time. Split tests and A/B tests are usually performed to determine the better of two content variations, multivariate testing can theoretically test the effectiveness of limitless combinations…In a nutshell, multivariate testing can be seen as allowing website visitors to vote with their clicks for which content they prefer and will stand the most chance of them proceeding to a defined goal.

Two Beaconfire staffers, Shiloh and Jo, recently won our Leadership & Innovation Award for their work on MVT, and I had the opportunity to sit down with them and find out more about it.

(more…)

Part Two of a Two-Part Series

In our last episode, we explored why the iPhone is the Devil, and the downfall of Western Civilization as we know it. Or is it?

Fortunately, in addition to the aforementioned tools of evil, there is a tremendous range of applications that can be used to better yourself or the world around you. In spite of having one of the many Solitaire applications, the noble stuff is what I like to show people when they ask if they can see my phone. And this category of apps continues to grow, as non-profits and other civic-minded folks realize the potential of the iPhone to help bring their message to the masses. There are even personal finance applications, which I have to imagine will advise one to stop wasting their money on virtual beer applications. (iBeer was $2.99, last I checked.) More of my amazing insights, below the fold. (more…)