The Partly Cloudy WordPress theme is customized for bands who need seamless multimedia and tour date integration with the WordPress admin panel. The theme is currently under development and will be released under Creative Commons licensing with full template files and a layered PSD.
Work performed: logo design, site design, XHTML, CSS, PHP, Flash
Don’t invest your resources in unproven ideas. Prototype the idea first, make it live, and make adjustments as necessary based on user feedback. This idea was reinforced on a recent project that I directed. The scope of the project was to redesign an online donation application with a goal of increasing donations. The redesigned page was originally a list of 50 funds available to donors. The initial enhancement made the list searchable by keyword, location, sponsor, and type of fund. For the most part it was a quick solution that would have marked results.
Shortly before the enhancement launched, additional features were requested by the project’s stakeholders. They suggested that the search form was not “visual” or “emotionally compelling” enough to increase donations. Their desired solution was the typical request for something interactive, engaging, and of course included Flash. Such a request would require resources beyond the scope of the project, so instead I suggested using an image map as a quick and easy prototype to roughly accomplished the desired effect.
The project was launched with both the form and map interface. After the redesigned page spent a few months in the wild I installed Crazy Egg, which provided a visual representation of the page’s click density. Crazy Egg allowed me to observe how each interface was performing in real-time.
I can’t say I expected to see such a drastic difference, but users overwhelmingly preferred the form over the map. The feedback will now inform how I tweak the both the map and the form. If I don’t eliminate the map entirely, I will definitely modify the instructions; both “roll over” and “Partnership Projects” are not user-friendly terms. I’m very happy with the form, but will likely reorder the fields based on their usage.
Dear Adobe: I’m sorry I said those nasty things about search engines not loving Flash. It looks like you and Google are getting along. Now textual content—menus, buttons, banners, and website copy—are freely searchable, and I’m happy for you.
I hope some day soon Google will work out those remaining issues with indexing external resources (e.g. HTML, XML, and SWF files). I’d also like to see better support for web pages loading Flash files via JavaScript. According to Google, Googlebot does not execute some types of JavaScript.
After years of struggling with client-side support for video formats, I finally have a clear favorite. With over 98% penetration on users’ computer systems, Adobe Flash ensures that visitors to the Peace Corps website see our videos. The video player is an adaptation of Jeroen Wijering’s FLV Media Player, which was chosen for it’s playlist, skinning, and plugin capabilities. Out of the box the player includes basic controls and functionality, but with a bit of tweaking, becomes a magnificent tool for any website.
Before the video player was upgraded, maintaining the Peace Corps video library was an absolute headache. In addition to supporting multiple file formats in varying bitrates (we still had measurable dial-up traffic), transcripts for each video had to be displayed for Section 508 compliance. With the FLV player, closed captioning could be imported from a TimedText XML file. Sweet!
In lieu of adding icons to the player’s main toolbar, an expanded view shows user options in a more descriptive manner. Once the main video is complete, additional videos are recommended.
Here are a few drafts that led me to the final design.
I’m super excited to announce that Peace Corps and Threespot Media have received a Webby Award in the government category for the Peace Corps {teens} website. This is the second nomination and first win for our collaboration with Threespot.
Peace Corps {teens} was launched in July 2007 to attract a new audience of American teenagers and to promote local volunteerism and future Peace Corps service. The website allows Peace Corps to share ideas and features Peace Corps Volunteer profiles, blogs, photos, music, recipes, and trivia from around the world. In addition to the teen-oriented website, the Peace Corps maintains targeted websites for teachers, kids, and 50+ Volunteers.
If you deal with a website that has any sizable amount of content, you understand that asset management can quickly get out of hand. I’m guilty of this, and I’m here to come clean: I have a junk drawer, and it’s name is the “images” folder. A quick look at my “images” folder reveals multiple formats of a background, some rounded corners, and a bunch of ornamental images. So it was a joyful occasion when I discovered Yahoo’s method for managing images that are reused throughout a site: massive sprite graphics.
Typically when I create a graphic with multiple visual states I use a single sprite with the sliding door technique. Yahoo simplifies the process by creating only one graphic for all sprites. When new graphics are added to the site, they can be appended to the bottom of the existing master sprite graphic without interfering with existing x-y reference points.
The Peace Corps Challenge is an interactive game aimed at sparking interest in volunteering among youth. The game gives children the opportunity to work in the fictional village of Wanzuzu as a Peace Corps Volunteer. Kids must work with local villagers and Peace Corps members to solve eight different challenges facing Wanzuzu.
Work Performed: information architecture, user flows, interaction design
Flash has always been a great vehicle for delivering multimedia content on the web. I’m always wowed by its unlimited bounds, but I’m simultaneously disappointed by its poor handling of SEO and accessibility. While the rest of the web has evolved into a rich and standards-based medium, Flash and its developers have concentrated on beefing up the bling. In 2005 Macromedia published Best Practices for Accessible Flash Design, a white paper that did little to address real accessibility needs.
The issue stems from how Flash is referenced within a web page. Traditionally Flash was detected by HTML using either <embed> or <object> tags, however both tags have accessibility and plug-in detection issues, and <embed> is invalid XHTML. These methods can cause some browsers and screen readers to misinterpret or entirely ignore your Flash content.
My favorite solution to this problem has been Bobby van der Sluis’ Unobtrusive Flash Object (UFO), but it was recently deprecated and replaced by Geoff Stearns’ SWFObject 2.0. Like UFO, SWFObject is a DOM script that detects the Flash plug-in and embeds Flash objects. It’s JavaScript API provides an amazing and complete toolset for embedding SWF files and retrieving Flash Player-related information. It has its roots in the web standards community and is designed to support W3C standards-compliant, accessible and search engine friendly web design. The handy JavaScript detection determines whether Flash content or alternative content should be shown and avoids outdated Flash plug-ins break Flash content. The example below illustrates how simple it is to detecting Flash and add alternative content.
<script type=”text/javascript”>
swfobject.embedSWF(“myContent.swf”, “myContent”, “300″, “120″, “9.0.0″);
</script>
</head>
<body>
<div id=”myContent”>
<p>Alternative content</p>
</div>
</body>
</html>
According to Jakob Nielsen’s latest Alertbox, Company Name First in Microcontent? Sometimes!, optimizing content for SEO may change due to search engine results pages (SERPs) with junk links. These results typically consist of sites that exist solely to earn revenue from link referrals. Recent SEO best practices encourage deemphasizing the site’s name and using reverse breadcrumbs in the page titles. The purpose of this is to produce more relevant, targeted search engine results. More recently though, the effectiveness of this convention has decreased because most sites have caught onto the practice.
To illustrate this point, look at the example of searching Google to purchase Let it Be by the Beatles. In the first five page results, most links begin with some variation of “Beatles” and “Let it Be”. By frontloading titles with an identifiable site name reputable retailers can stand out from the crowd of junk links. In Nielsen’s words, “when a SERP link starts with a respected brand name, it holds more appeal for users than weirdo links.” And he’s right; in the first five page results for “Beatles” and “Let it Be”, only Amazon.com places their site name at the beginning of the link, and effectively stands out from all other results.
Should this practice be applied to all websites? Certainly not. According to Nielsen, only frontload page titles when the following is true:
For most of the SXSW Interactive Conference, you’ll be sitting at the convention center or stuffing your face with appetizers and drinks at an evening event. Refresh your body and and join fellow SXSW Interactive participants for a leisurely morning run through Austin.
We’ll meet at the entrance to Brush Park (across from the North side of the convention center) everyday from March 7-11 at 7:30am. The pace will be easy to moderate and the mood will be jolly. I’d like to meet new people, so participants of all experience levels are encouraged to join. Plan to run for 30-40 minutes and explore the trails of Town Lake and Zilker Park. If anyone is familiar with Austin, please feel free to suggest a running route. I’m looking forward to meeting all of you there!
I'm a user experience designer with a passion for ux design, usability and web standards. To learn more about my professional experience, download my resume (PDF) or visit me on LinkedIn.
