As a new mom, I’ve been reading a lot of books/magazines/pamphlets inside diaper boxes/Web sites that emphasize the importance of establishing a routine with your baby. With me, they are preaching to the choir. There are few people that appreciate the importance of routine more than I do. And when it comes to work, my routine relies on the computer – but not just any computer. My computer. With my desktop icons arranged just so, my Firefox plug-ins in place, my calendar events color-coded, emails sorted by project, and tasks neatly tagged and arranged in Outlook, I’ve spent the last three years with my computer creating an work-efficiency powerhouse.

Give me my computer! Photo provided by elblogazo under Flickr Creative Commons License

So a few weeks ago I started bawling like a baby about to cut a tooth when my computer began its slow ascent into computer heaven. It wouldn’t go quietly – one day it would work, the next day it wouldn’t. For weeks I bounced between machines at work, at home, even at my father-in-law’s house. And even when it finally took its last breath, I was still a few weeks away from getting new a computer, so I continued doing a shuffle between various work and home machines. In the past few weeks, I have worked quasi-regularly on seven different computers. Some stayed in my comfort zone (like my blazing fast home desktop), and some were well out of it (like the backup of the backup laptop here in the office).

I had a hard time coping those first few weeks of the great computer shuffle. But I found my own personal pacifier: the “cloud”. If I was going to move from computer to computer, I needed to start moving the basis of my operations from the thick client of a hard drive to the thin client of the Internet.

It was hard at first, but I managed, and even became comfortable, working with online services. Am I a permanent cloud-hopper? No. But I feel I can weather the crisis of a broken computer in stride now.

Here’s a look at some of the services I used:

• Microsoft Outlook Web Access – There was simply no getting around this one. I needed to check my email and update my calendar. It was nearly unbearable, but I made it through. I got by managing email and calendar, but I simply could not organize my tasks within this paltry interface.
• Remember the Milk – RTM is my lovey – now that I have it, I can’t live without it, and I take it with me everywhere. Where Outlook Web Access failed in my task organization, RTM picked up the slack and then some, so much so, that I’ve stuck with RTM. RTM allows me to quickly enter, tag, schedule, and search all my tasks.
• Meebo – Nothing was more frustrating than installing and reinstalling instant messaging clients, sometimes having my buddy list carry over, sometimes not. Meebo came to my rescue. I logged in once, and there was my full buddy list. Meebo did a great job when I was in need. But in the end, I just missed too many IMs as the client just sat in dozens of Firefox tabs I had open.
• Google Docs – While I had MS Office on every computer I used during this time, I never knew from one day to the next which version it would have, or whether I could use it to connect to our network. So any document I had to look at during this time, as long as it wasn’t super-secret or sensitive, found its way into my Google Docs. Additionally, I did not have access to OnTime, a tool we use for Bug tracking here at Beaconfire. So instead, I would use a Google Spreadsheet for bug tracking. It wasn’t ideal, but it got the job done.

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.

Recently I was planning for a conference presentation, which involved choosing a Twitter hashtag, sending it to conference organizers for use in the program book, adding it to the template of all my slides, and making sure I added an all-caps prompt in my notes to MENTION TWITTER HASHTAG! (my presentation notes are full of all-caps prompts). Oh, and I also wrote some content for the presentation itself.

With your audience sitting directly in front of you, why put all that energy into a social networking tool that has the potential to distract people from listening to you? And what’s the best way to integrate tweets into the conversation? (more…)

It’s spring, and that means it’s time for spring cleaning.  You’ve already cleaned your house top-to-bottom, right?  (I haven’t, but I assume you’re much more organized and motivated than me, so you’re probably already done!)

Just like your house, your website needs a little special attention sometimes.  There are things you need to do once in a while to keep it performing its best.  Depending on your needs, you might want to do these quarterly or yearly, but you should check up on them at least once a year and make sure everything looks good. It’s not sexy or exciting, but it will help keep your website running smoothly. And now is the perfect time to get started.

• Clean up your email database. Most eCRMs give you tools for cleaning and de-duping your email list. No matter how you import supporters to your database, over time, you’ll end up with some bad data as people move, change their email addresses, or accidentally create duplicate records when they take actions on your site. Get rid of bad data, and consolidate your duplicates as much as possible. This is a big task, but it’ll give you more accurate metrics, improve your spam reputation, and reduce the chances that you’re bugging people with multiple copies of your messages.
• Update outdated content/actions. Take an hour and browse your site with fresh eyes. Are your news stories recent? Do you still have a promo, buried on your subpages, for a campaign that finished a year ago?  Is the contact information up to date? What about that little typo that bugs you every time you visit the site? Set aside time to find and fix these little errors – over time, they can really pile up.
• Fix broken links. Link-checking can be fast and easy.  There are many tools to scan your site and identify bad links, both within your site and to external sites.
• Look at your 404 pages. While you’re at it, take a look at your 404 (Page Not Found) errors. Your analytics tool can tell you what missing pages people are trying to visit, and where they found them.  Maybe Google is still indexing old content, or another site has a link with a typo. Some of them, you may be able to fix.  This is also a good time to look at the content on your 404 page itself. Are you providing useful information to help visitors get where they wanted to be?
• Check your “hidden” content. Welcome messages, autoresponders, donation forms, error text… all this content is “out of sight, out of mind” when you’re running a website day-to-day, but it’s very present for many of your visitors.  You know that good Thank You messages are critical for engaging new subscribers and first-time donors, but when was the last time you took a critical look at your default messaging?
• View your site in new browsers. Unless you just redesigned your website, there have probably been new versions of some major browsers since it was developed.  Look in your analytics to see what browsers and versions most of your visitors are using.  If some of the new ones are on the rise, download them (or find a friend who has them installed) and spend a few minutes browsing the site to make sure everything looks okay.
• Test your SEO. Type the name of your organization into a search engine. Where do you rank? What does your listing look like? Do the same for a few non-branded keywords that describe your org. Do the most relevant pages show up first?  Where do they rank?
• Review your site search. If visitors are having trouble finding something on your site, chances are they’ll search for it.  So reviewing your site search analytics is a great way to see what stumbling blocks users are finding on your site.  Not every search term that’s used will indicate a problem – but site search is the one part of your site where users tell you exactly what they’re looking for, and it’s worth paying attention.
• Long term reporting. Chances are there is some data you’ve been meaning to sift through.  How have your emails performed over the long term? What’s the churn rate on your email list? How are you doing on those important goals you set way-back-when?  Now is a good time to look into some of those questions you never got around to answering, or just to spend some time with your analytics tool and see what you find.

One of the key responsibilities of information architects (IAs) at Beaconfire during a site redesign is creating navigation labels that make sense for the sites’ priority audiences.  Recently, we’ve started using tree testing to check our work and make sure the navigation labels make sense to those priority audiences.

Through the IA process, we focus on two parallel inputs – our client’s needs and the needs of their priority audiences.  We identify the key information audiences want from the site and frequently get their input on how they’d categorize that content via open card sorts.  The card sort gives us an opportunity to learn how the priority audiences think about and group information on a site and what language they use to describe it.  In an open sort, participants are presented a list of content items and asked to group those items into whatever categories make sense to them.  Rebecca wrote a great post that explains more about card sorting last summer.

After the card sort, we bring that input back to the client in the form of a draft a sitemap and continue to refine the site structure to ensure all the content has a home.  Before we sign-off on the sitemap, we like to present the “new & improved” navigation to users and see if it is going to work for them.   In the past, we have tested the new navigation with a ‘closed card sort.’   Like an open sort, users are presented a list of content items but in a closed card sort, they are asked to sort those items into the pre-determined category (navigation element) that makes the most sense.  Closed sorting has worked well for our navigation validation – we’ve seen good results with the testing and solid performance on the navigation.

However, we recently discovered OptimalWorkshop’s TreeJack, a “tree testing” tool that allows us to test the navigation from a much more authentic starting point.  In a tree test, participants are asked to click through the site tree (navigation structure) to complete a series of tasks.  This type of process closely mirrors website users mental model “Where will I find X” when they come to a site.

In tree testing, we develop tasks that align with the priority content and features of the site or, if a particular navigation element is in question, we can create a task to test that. The testing results give us a quick overview of how many participants succeeded (got the page we identified as an answer for the task); whether they got there directly or wandered through the navigation; and how long it took.  In addition, the testing results show us the path that each participant took for each task which gives us good insight into the ‘why’s’ behind unsuccessful tasks. 

We’ve been impressed with the TreeJack tool.  Tests are easy to set-up and the test results are easy to understand and actionable.  It’s also nice that the tool is online, so it ready whenever your participants are, and no special software is needed.

Sounds fun, doesn’t it? Try it out here and let us know what you think: https://beaconfire.optimalworkshop.com/treejack/survey/BeaconfireWire

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