If you’ve worked with site accessibility before you’re probably familiar with skip navigation. Skip navigation helps visitors ’skip’ to different parts of the HTML page to quickly get to the content they need. The most frequent use of skip nav involves jumping a page’s primary content, so users don’t have to revisit repetitive header, navigation, and other global content on recurring pages. Typical HTML markup looks something like this:

HTML Code

<div id=”skip-nav”>
<strong>Shortcut Navigation:</strong>
<ul>
<li><a href=”#content” accesskey=”p” title=”Skip to page content”>Page Content</a></li>
<li><a href=”#nav” accesskey=”n” title=”Skip to main navigation menu”>Site Navigation</a></li>
<li><a href=”#search” accesskey=”s” title=”Skip to search”>Search</a></li>
<li><a href=”#footer” accesskey=”f” title=”Skip to footer (ctrl/alt + f)”>Footer</a></li>
</ul>
</div> <!– end skip-nav –>

Most often, skip nav is hidden from visual users by shifting the content outside of the page viewing area (be sure to use a positioning property as display:none can render your content invisible to some devices). In this way traditional users who can scroll to what they’re after aren’t burdened with extra visual cruft while visually impaired users can jump around to the content they want.

Unfortunately, this approach ignores a number of different users. For example, skip nav could also be useful to sighted users who are unable, or simply choose not, to browse with a mouse and opt for a keyboard or other assistive device. Unfortunately, hiding this content off of the viewing area can create confusion.

One way we can improve this implementation is by using JavaScript/jQuery to display the content when it receives focus. This way we’re being accommodating to non-traditional users while still preserving the aesthetic integrity of the site.

The Plan

To do this we’ll test if any of the skip nav links have focus, and if so, show the container. We’ll set a timer that checks every 100ms to confirm a skip nav link still has focus, and if not we’ll run a function to hide it.

The JavaScript

Because only the links in the container can receive focus (at least without tweaks like tabindex) we’ll use their status to control when to open the container. So:

1. If a link receives focus add class nav-focus to the link, animate the container and give it class active.
2. Use setTimout to test if nav-focused no longer exists, and if so, close the container(use this instead of focusout to keep the container from closing when switching between links)

That’s the logic, here’s the demo beaconfire.com/blog/demo/skip-nav/.

To add it to your site add the HTML to your page and skipNavigation('name-of-container-id'); to your jQuery documenty read function

One last issue concerns the possiblity that JavaScirpt is turned off. A good habit is to use JavaScript to initialize elements rather than having default behaviors baked into the CSS. We’ll remove the CSSthat hides the skip nav, and do it with JavaScript.

$('body').addClass('js');

Now the following code hides the skip nav only if JavaScript is available:

.js #skip-nav {position:absolute; margin-left:-9999px;}

Note: This concept is based on a CSS based promoted by jimthatcher.com/skipnav.htm

When it comes to slideshows on Web sites, you’re pretty much got two choices: Adobe Flash, or JavaScript (which for the purposes of this post we are no going to call jQuery*).  Up until the last year or so, the only way to deliver the level of sophistication required for slideshows, has been with Flash.  Increasingly though, we are recommending the use of jQuery over Flash for the majority of the slideshows that we make as  part of our site designs, and are even being asked to convert existing Flash slideshows to jQuery .  First things first, though, what is Flash and what is jQuery?

Flash

The best way to think about Flash – for the purposes of this discussion – is as a bit of magic, included on a Web page just like an image, that can do all kinds of really cool animations, transitions, play sound and movies, and nearly display nearly identically on nearly all browsers that have the flash plug-in installed.

Flash has been around for quite a while and has a very robust set of tools (made by Adobe, and formerly by Macromedia).  It has been used to create the sites, movies, slideshows, or multimedia players, that you see on millions of Web sites.  For the sake of this comparison, I am going to talk specifically about slideshows that are created in Flash compared to those using  jQuery because that is the vast majority of the Flash that we have traditionally used in our projects.  And ’cause that’s what this post is titled.

Flash Advantages

• Great looking fonts
• Smooth, complex animations
• Robust development tools

jQuery

You may have noticed that I have referred to “slideshows created in Flash” and “slideshows using jQuery.”  This is a fundamental difference between the two.  While Flash is an embeddable object created in a specific application, jQuery is a JavaScript library that can add a bunch of really neat-o functionality and effects to elements that already exist on the page. This means that you have HTML, and then on top of that, you have jQuery making that HTML jump through all kinds of hoops, sit, roll over, and even sometimes, though hopefully not often: play dead.  jQuery is JavaScript, which means that some experience with the ubiquitous scripting language is going to make things much easier.  There are hundreds of plugins which exist as additional JavaScript files along with the HTML they need to act on that you can simply copy and paste in to your web page to add whatever slideshow you want.  Many of these existing plugins slideshows have comprehensive documentation that even those without lots of experience with JavaScript can follow.  Basically, if you know your way around HTML and CSS, you can figure out how to at least use jQuery.

The jQuery library can either be downloaded from the jQuery Web site, or you can link to hosted versions from jQuery, Google, or Microsoft. I tend to use the Google-hosted version because it is very popular and likely in use on many other sites. Because of that, if your visitors have previously visited a site using the same linked library that you do, their browser will not have to download it again and you’ll save the 150-ish KB of download that the library requires.

jQuery Advantages

• Generally smaller, and quicker (150KB+ though, for the main library)
• Less time to create, very simple to manage
• Superior accessibility and findability
• Works on iPhones
• Free

Picking One

There are many questions to consider before you when even decide to use a slideshow (see “Parting Shot” below).  I’d say that, if you do decide to add a slideshow to your page  jQuery will be the best choice in 98% of cases.  It offers most of the abilities of Flash (depending on how adept you are at JavaScript) and has the added advantage that it is used to animate images and text that already exist in the page.  This is of monumental importance to search engine optimization, accessibility, and cross-browser/cross-platform support.  That your images and text already exist in the page means that it is basic content that you manage in your authoring system.

Even if a visitor has all styles and JavaScript disabled in their browser** the content contained in your slideshow will be present for them to see (albeit in a way that may break the beautiful layout of your page which is already the case if they have styles turned off).  This is the essence of accessibility: that all content on your page is available to all visitors regardless of how they access your page.

There is no cut-and-dried answer to the question “Flash or jQuery,” though I’d argue that in the limited scope of slideshows jQuery has a decided advantage.  In the end it really depends on what you are trying to communicate, to whom you are trying to communicate it, and how you want it to look.  If you want to be able to use any beautiful font available to your designer, utilize sophisticated transitions (though jQuery can match much of Flash’s capabilities in this regard), ensure that your slideshow works on all browsers with the Flash plug-in installed, and don’t need to support iPhone users, then Flash may be your best bet.  If you are, however, willing to limit your font options, want to be sure that your content is available to all users, on all browsers, regardless of platform, and are willing to limit slightly the sophistication of transitions and animations, then jQuery is the clear winner.

Parting Shot

And that brings us to the end, but I simply cannot leave without a final parting shot regarding putting  a lot of time and money in to designing and developing a slideshow.  I, and others in the office are looking with an increasingly critical eye toward the effectiveness of using slideshows at all to highlight important information.  A too-cursory review of too-few site analytics begins to suggest that very, very (very!) few visitors see more than the first slide of any slideshow; Even fewer engage with the sideshow controls (if present, to move forward, back, or pause);  And fewer still click on any links found on slides beyond the first.  Do not assume that the third, or even second, slide will get any attention at all.

One of the drawbacks of many new interface options presented by Flash or jQuery (or any of the other JavaScript libraries out there) is that they have offered an easy solution to a very old problem: gigantic homepages where every department in an organization demands a presence.  Similarly to simply adding more and more content to a homepage until visitors have to scroll tens of screens down to read it all, we are now asking visitors to engage more and more frequently with tabs, slideshows, accordion widgets, and more to access the same “too much content.”  Have we just shorted the all-too-important conversation about focusing an organization’s message and simply allowing “all of it” to go on the homepage?  And what about people who don’t or can’t use these new widgets? Perhaps another blog post?  I nominate Jo!

** Chances are pretty good that if styles and JavaScript are disabled in a browser, so is Flash.  If your slideshow reads its content from an XML feed, the path to which you define in the JavaScript call to the Flash object, your slideshow will not work even if Flash is enabled but JavaScript is not.

R.I.P. IE6

Those of us who build websites for a living have been waiting to see the door hit Internet Explorer 6 on its way out for a very long time now. It could be that the day long awaited is right around the corner.  And it may be that that is a very big corner, and that there are traffic cops making us walk really, really slow.

My wish to see the end of this seriously out-dated browser is not purely selfish, though there is definitely a good amount of frustration I’ll be happy to do away with. Every time I have to create a separate stylesheet to control IE6’s idiotic treatment of width+margins+padding (the box model, for those in the know) I sigh and dream of a day when all browsers display identical HTML in identical ways. I want to use the more sophisticated transparency properties of 24-bit PNG graphics without having to add buggy JavaScript so that IE6 will display the transparency instead of an ugly grey box. I’d love to be able to use more sophisticated CSS3 (2 even!) to style elements without having to add all kinds of classes and ids to them. Cleaner HTML: faster to load, faster to code, easier to maintain. All kinds of better!

So that’s the selfish part. There is another part of me that knows many hours spent on a website design project goes toward simply fixing things that “break” in IE6. It’s not uncommon that, at the end of a typical site build, clients have paid a few thousand dollars just to get IE6 to show the site exactly the same as newer versions of IE or Firefox do.

For all of us, life without IE6 would be an improvement. So why are people still using it? There are a few reasons, really. First, some people are using computers they’ve had for years and have just never felt the need (or known how) to upgrade their browser. Maybe they are on dial-up modems and tying up the line for an hour or so while the new browser downloads is just not worth it.

Second, there are users who are prevented from upgrading by their IT departments. It may be that their organization relies on applications developed years ago using short-sighted programming techniques targeted specifically for what was then the best browser on the market. Allowing users of systems like these to upgrade may require a substantial investment to re-engineer those applications.

Third, there are those who just don’t care.

As someone who is concerned with the usability of the web and who wants websites we build to be usable for everyone, I have to be concerned about all three of those types of IE6 users. Ok, more the first two groups than the last ;)  Here is where things get tricky. I’m no longer talking about “looks exactly like” I’m talking about “is usable.” I want all users of the sites we build to be able to find what they are looking for, engage with the organization in all the ways that they want, and to feel that they are getting the same, complete experience out of a website that any other user of that website does.

It’s not just me either. Microsoft Australia has a campaign in which you can send sour milk to your friends who are still using IE6 to equate using nine-year-old browser to the risks of drinking milk the same age. The information on the site claims that IE8 detects malware and phishing 85% and 83% of the time, respectively, making it one of the most secure browsers available today. While its comparisons to other new browsers from Firefox to Opera may be disputed by makers of those browsers, that it is safer to browse the internet using IE8 than IE6 is beyond dispute.

As websites continue to get more sophisticated and we ask more and more of designers and developers, the need to be able to use current technologies and solutions is becoming more and more important.  HTML5 is on its way (sloooowly), and CSS3 is pretty much here.  All indications are that IE9 will support the new standards in a way that it never seemed Microsoft was terribly interested in before.  It will have to…the others are forging ahead daily and Opera, Chrome, Safari, and Firefox will likely get there first.

Keep your fingers crossed!

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.

In January, the American Federation of Teachers, AFL-CIO, launched their new website, www.AFT.org. Its more than 1.4 million members represent teachers, paraprofessionals and school-related personnel, higher education faculty and staff, local, state and federal employees, nurses and other healthcare professionals, early childhood educators and retirees.

Among other goals, AFT engaged Beaconfire to redesign their 5-year old site to balance the needs of multiple audiences with a more modern and inviting look and feel. Our redesign process involved stakeholder interviews, a creative visioning exercise, a review of peer organizations, a card sorting exercise to gather user input and developing personas representing AFT’s target audiences, in addition to our typical discovery process of defining goals, audiences and features. All these steps resulted in a new information architecture and visual design for the site. In addition to the design, Beaconfire re-engineered the AFT Voices feature on the web site that asks their members to share their voice on important questions and issues for their professions and their constituencies. The new design was implemented by OmniUpdate, AFT’s CMS software vendor.

The new Voices tool automates what was a very manual and time consuming process for posting questions to and comments by members on the website. The new tool has an administrative console where AFT editors can create and publish questions, receive email notifications, moderate and publish responses, and view statistics on questions and comments. It allows members to post their comments and a photo real time, and to vote and rate others’ responses; Editor’s picks and highly rated comments sort to the top. Previously, AFT manually inputted questions and comments from their print publications onto the website, which only enabled them to post a fraction of the number of actual comments received.

The new look and feel, and the Voices tool in particular, have helped to achieve two other key goals for the site – to engage and interact with members online, and allow more members to see themselves on the site and to understand they are part of a larger movement. It’s been a pleasure working with the nice folks at the AFT to make their goals come true!

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…)

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”

I’ll never get tired of saying this. The envelope please – Beaconfire just won four Web Marketing Association 2009 Web Awards including:

Free The Slaves, Outstanding Website
Share Our Strength, Non Profit Standard of Excellence
Wildlife Conservation Society, Non Profit Standard of Excellence

Huge thanks to all our project teams for the great work, and to our award-winning clients for being such Rockstars!

And so is the NY Aquarium, Prospect Park Zoo, Central Park Zoo and the Queens Zoo.  Wildlife Conservation Society (WCS), founded in 1895 as the New York Zoological Society, saves wildlife and wild lands. They do so through careful science, international conservation, education, and the management of the world’s largest system of urban wildlife parks.  Beaconfire was pleased to work with WCS to develop their redesigned website (www.wcs.org) on the same instance of Sitecore CMS we used for their 5 park websites.  This allows the organization to share content across their entire family of sites, lessening the administrative upkeep of content for their busy staff.   

 The redesigned WCS site highlights and showcases the fine conservation work they do and addresses their goal of focusing the site on fundraising and relationship-building with users. Browse their (XML driven) interactive Flash map to learn more about ongoing projects throughout the world.  Check it often because the map is growing!  Due to the geocoding in place behind the map, WCS simply needs to add a new map item and it is displayed within the map dynamically.  Learn about how they evaluate the needs of wildlife populations, the ecological integrity of habitats, and the impacts of human activities.  Browse their growing library of multimedia to hear about their efforts straight from their experts – and don’t miss the section focused on the conservations challenges we face.  To meet their relationship building goals the site highlights hero flash promotions and features contextual placement of donation opportunities and signup prompts.   Because of how the information is categorized on the back end, they are able to relate projects and programs with ease, allowing the end user to see the full picture of how impactful the work of WCS really is. 

 One warning, it’s very easy to lose track of time as you browse the WCS site – you may want to set it as a bookmark and come back often.

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.

After our well-flavored and succulent presentation at NTC in April, The Iron Chefs are on the road again, this time at the Bridge Conference in the DC area. You now have NO reason to miss it!

To refresh your memory: Using just one secret ingredient (a small nonprofit), three web teams will compete in the heat of battle, offering up exceptional tasting ‘menus’, each featuring a delicious new homepage design, a well-seasoned fundraising campaign and a perfectly balanced social networking plan. Only one team can prevail – who will it be? Come see how this unique project brought together a dozen web pros from competing firms, created amazing work for a very special organization, and taught us all the true power of our industry. We promise you won’t leave hungry.

Beaconfire’s own Ali Cherry and yours truly will be moderating this unique session at 3:30 on July 23rd and Susan Finkelpearl of Free Range Studios, Andrew Cohen of Forum One Communications, and Maureen Wallbeoff of Firefly Partners will round out the panel’s incredible talent.

Don’t miss it!

Confession time. When I started designing for the web nearly 14 years ago, I pretty much made it all up as I went along. Brave souls all, we ventured out bravely into the wilderness, hoped for the best and called our mistakes “lessons learned”. Most of us survived to tell the tale, emerging stronger, smarter and a little more acclimated to this brave new world. Others just grew gills, but that’s a story for another time.

As the web industry has matured, it fascinates me that processes and best practices have developed to the degree that all of us are singing a similar song, even though we may not have all gotten the same memo. Working in the web these days feels like spending time on the Galapagos Islands. Evolving to fit our environment, we have somehow still retained the elements that make us all unique without sacrificing forward progress and growth. I always knew Darwin was a designer at heart.

So combining the passion I have for design with my desire to share what I have learned the hard way about the ways of the web, on occasion I stick my hand in the lion’s mouth and go talk to people about it.

Sharing the stage at OneWorld.net’s Web Design for Non Profits workshop with Mckenzine Lock (Senior Communications Manager, Communications and Outreach at Women Thrive Worldwide) and Shirley Sexton (Director of Interactive Marketing & Fundraising at See3 Communications) was further proof that we have learned how to speak the same language without sacrificing our own point of view. Exploring the challenges facing non profits on the web these days, we tackled the same subject from 3 different angles: as a designer who creates visual environments to support an organization’s complex ecosystem, a client who just survived a redesign rooted in best practices, and a marketing evangelist who lives and breathes this stuff every day.

And wouldn’t you know, without comparing notes or peeking at the other’s presentation ahead of time, we shared a cohesive message with our audience. Amazingly, we empowered these non profit professionals in their pursuit of a great new website for their organization, transformed their ability to achieve their goals, and left them excited to take their mission to a larger audience online.

Ain’t evolution fun? Check out my presentation here and tell us what you think!

Web analytics is usually left to marketers looking to fine-tune shopping carts, hone in on AdWords, track campaigns, and conduct a whole bevy of marketing tasks. Creative-types and IA folks don’t always dive into this kind of data. But when a site is undergoing a creative or architectural facelift, it is the perfect time to dive into analytics and make the right decisions.

Creative Decisions:

Analytics packages can tell you a lot about the technology your audience uses. Some stats worth looking at include:

• Resolution;
• Browser;
• Flash Version;
• Java.

Are 75% of your users at 1024×768? Then maybe it’s time to break out of that limiting 800×600 design. Do 30% of your users still in IE6? Avoid transparent images. 5% of your users don’t have Flash or Java? Make sure you offer alternatives to that nifty Slideshow on the homepage (which you should do anyway, but that is another post for another day).

(more…)

On June 24th, I will be speaking about a topic that I could wax rhapsodic about for DAYS: Killer design. So sign up now for One World’s “Web design for non-profits” 2 day workshop on June 24-25 and hear what we have to say on the topic. Just don’t heckle me from the peanut gallery. That always throws me. :)

Hope to see you there!

Beaconfire is proud to be selected as a 2009 Webby Honoree in the Activism category for Free The Slaves.

From the Webby’s Site:
“With nearly 70 categories, Website entries make up the majority of Webby Awards Winners, Nominees and Honorees. Some are beautiful to look at and interact with. Others are a testament to usability and functionality. And a handful excel across the board. To be selected among the best is an incredible achievement worthy of praise — and perhaps a little bragging.

Of the nearly 10,000 entries submitted to the 13th Annual Webby Awards, fewer than 15% were distinguished as an Official Honoree. This honor signifies an outstanding caliber of work. Congratulations to all of our Official Honoree selections!”

Wow. Just Wow. And yay! We’re very excited to be included with the other 11 fabulous projects in this category, and must thank Gravitate Design Studios for their partnership in creating this amazing site.

If you are one of the record number of people attending NTC in two weeks, there is one session you will not want to miss: This is Iron Chef … Battle Non Profit.

Using just one secret ingredient (a small Bay Area nonprofit), three web teams will compete in the heat of battle, offering up exceptional tasting ‘menus’, each featuring a delicious new homepage design, a well-seasoned fundraising campaign and a perfectly balanced social networking plan. Only one team can prevail – who will it be? You be the judge, NTC! Come see how this unique project brought together a dozen web pros from competing firms, created amazing work for a very special organization, and taught us all the true power of our industry. We promise you won’t leave hungry.

Beaconfire’s own Ali Cherry and yours truly will be moderating this unique session at 3:30 on April 27th and Susan Finkelpearl of Free Range Studios, Andrew Cohen of Forum One Communications, and Maureen Wallbeoff of Firefly Partners will round out the panel’s incredible talent.

For more info on the session, listen to this podcast interview. Hope to see you there!

Just last month the American Association of Homes and Services for the Aging (AAHSA) launched another Web site with Beaconfire’s help on Ektron – this one for their London Conference http://iahsa.net/LONDON/index.aspx. Last September, AAHSA launched its handsome new website, aahsa.org, powered by the Ektron content management system (CMS). The main site was designed by Portent Interactive which Beaconfire then implemented in Ektron.

AAHSA invested in replacing their static website with a CMS system to get the IT department out of the content creation process, reduce turn-around time in publishing content to the Web, and help enforce page layout and style. In addition to implementing the design templates, we migrated a number of custom .NET applications into the system, on time for AAHSA’s annual meeting held last year in Philadelphia, PA. So far, AAHSA has successfully migrated two affiliate sites into Ektron, thereby taking advantage of the same template structure and workflows and helping them to enforce organization-wide business processes for content management.

(more…)

Does your site scream out, “I haven’t changed my image since 1995!” Or maybe, your pages are plagued by lengthy copy that just keeps going and going… Perhaps your web presence just doesn’t really reflect all the great work your organization does.

If you happen to be in Portland, Oregon next Tuesday night, Feb 24th, and have a website in need of some TLC, come to the NTEN 501Tech Club and Net Squared MeetUp to problem-solve cures for the “common” website. Yours truly, Beaconfire Creative Director Eve Simon, will be leading the discussion. See you there!

Heifer International, Beaconfire, and Forge FX have teamed up to launch Heifer Village: Nepal – an online game that takes players deep into the lives of Nepalese villagers who are striving to overcome poverty and hunger.

Heifer is a non-profit organization that uses an innovative and proven method to reduce poverty and hunger around the world: they give families living in poverty the gift of a goat, chicken, or other farm animal, along with training in sustainable farming practices. Heifer’s gift recipients use their animal’s milk, eggs, and other products to feed and clothe their families, and can sell the extra to support themselves financially. Our goal with this game is to educate players about Heifer’s unique approach to ending hunger and poverty.

But your goal is to stay alive! You’ll put yourself in the shoes of a 12 year old Nepalese girl whose village is struggling with poverty. You’ll go on a series of missions to seek out life’s necessities — starting with firewood in an area that has seen extensive deforestation. The challenges you’ll face mirror those that Heifer’s real-life partners in Nepal deal with every day.

The game is in beta – which means it’s fully playable but we’re still tweaking it and working out rough spots. We’d love your help in making this game the best it can be. We hope you’ll visit www.heifervillage.org/nepal and try it out. After you’ve played it, we’d love to know what you think. Please leave a comment on this blog post to let us know:

• Did you have any problems getting started?
• Did you know what to do?
• Did the controls make sense?
• Could you find your way around?
• Were you able to complete the missions you received? How difficult was it?
• Was it fun?

We’ll use your feedback to help us as we plan the final version of the game.

Thank you, and enjoy!