Yahoo UI Library

Yahoo’s Design Pattern Library has become my go-to source for UI solutions. The site presents common problems within a specific context and suggests optimal solutions with a pattern. They also provide much of the scripting to run each pattern with the Yahoo! User Interface (YUI) Library, which is a set of JavaScript utilities and controls for building richly interactive web applications. I’m no UI developer by any stretch of the imagination, but I still prefer jQuery and its limitless plugins.

Posted in Web Technology | Leave a comment

Copy and Paste Special Characters from the Web

Thanks to CopyPasteCharacter.com, I’ll never again need to look up the keyboard shortcuts for ©, ™, or ®.

Posted in Web Technology | Leave a comment

Google Signs up for OpenID

It’s nice to see that Google is now throwing its weight behind OpenID, a free and open standard that allows web users to log on to different web sites using a single digital identity and eliminates the need for a different user name and password for each site. Google joins the ranks of AOL, Microsoft, MySpace and Yahoo! in offering this service, and their involvement will certainly put OpenID in a position for massive adoption throughout the web.

Also notable is how Google is communicating this feature to users; in lieu of mentioning OpenID, Google is using the phrase “Sign in with a Google Account.” This is similar to Yahoo’s messaging, “Sign In with a Yahoo! ID.” The choice is likely influenced by the Yahoo! OpenID Usability Research, which concluded that users do not understand OpenID, but do support using trusted providers such as Yahoo! for authentication.

Posted in Web Technology | Leave a comment

Google Now Indexing Flash

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.

Posted in Web Technology | Leave a comment

Managing Sprite Graphics

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.

Posted in Web Technology | Leave a comment

Making Flash Accessible and SEO Friendly

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.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<title>SWFObject v2.0 dynamic embed – step 3</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script type=”text/javascript” src=”swfobject.js”></script>

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

Also posted in Accessibility, Tutorials, Web Standards | Leave a comment

SXSW Interactive Panel Selection

I’m getting really excited with SXSW only a month away. I met a lot of great people last year and look forward to doing the same again this time around.

It’s always a ton of fun to get a bunch of geeks, designers and Type-As together to collaborate. I haven’t selected any sessions yet, but these look like keepers:

  • 10 Things We’ve Learned at 37signals
  • Accessible Rich Media
  • Creating Findable Rich Media Content
  • What Teens Want Online & On Their Phones
  • GTD for Startups: Getting Things Done in the Real World
  • Specialization vs. Doing it All
  • Working Over the Web: Managing Distributed Staffs
  • Mobile 2.0: Why the Third Screen is Taking Center Stage

Some of my favorite moments from last year’s interactive conference include Brian Fling’s Everything you Always Wanted to Know About the Mobile Web and Worldchanging 2.0 with Alex Nikolai Steffen.

Also posted in SXSW | Leave a comment

Show Your Bones: XRAY Your Website

I just got my hands on what is quickly becoming my favorite web tool. XRAY is like a lightweight Web Developer toolbar that provides front-end coders with a quick debugging tool. No download is necessary; XRAY is executable via a bookmarklet that launches a floating tool panel over your web page. Selecting any element on your page reveals its style information—including style name, hierarchy inheritance, floats, margins, etc. I’ll continue to use the developer toolbar and Firebug, but there’s no need to pull out the entire toolbox when all you need is a pair of pliers.

Posted in Web Technology | Leave a comment

Five Reasons to Love Safari 3

Today at Apple’s Worldwide Developers Conference, Steve Jobs announced the release of Safari 3. It’s a great update to the browser, which was last released in 2005.

I’m still committed to Firefox, but I’ll give Safari an occasional spin. When it has the same plugin capability as Firefox I will gladly reconsider. If you are considering a switch today, here are five reasons to make the change:

  1. It’s available for the PC. Wow; I should have seen that coming. It makes perfect sense considering that millions of iPhones will be connecting to PCs in the next few months.
  2. It’s super fast. Safari loads pages up to 2 times faster than Internet Explorer 7 and up to 1.6 times faster than Firefox 2.0.
  3. Private browsing. Flip a switch and Safari will not retain any of your Google searches, cookies, history of downloads or pages viewed, or form information.
  4. Font smoothing. Great for designers, really bad for readability and usability. Fortunately smoothing can turned off through the panel at Edit > Preferences > Appearance.
  5. Windows Media support. Are publishers still using this format? It’s comforting that Apple is at least playing fairly.
Posted in Web Technology | Leave a comment

Microformats

Over the course of four days, I attended roughly twenty panels at SXSW Interactive. The discussions covered everything from online social networks for teens to a primer on the mobile web. One event really stood out for me, but it wasn’t the Mardi Gras atmosphere or the celebrity keynote speakers.

Tantek Çelik (Chief Technologist at Technorati) moderated The Growth and Evolution of Microformats. Microformats are a set of simple, open data formats that standardize the meaning of HTML content. Examples of content that can be used with Microformats include people, organizations, events, addresses and more. Many sites including Google, Upcoming, and Flickr are using microformats, and both Firefox 3 and Internet Explorer 8 will have built-in microformat readers. Until then, microformats can be read through the Operator and Tails Firefox extensions.

Formatting Your Data

Let’s use my contact information as an example where we will use the hCard format (a microformat that represents people, companies, organizations, and places). On my contact page, I posted my name and contact information. If this information is relevant to a user, they may copy it—line by line—to a contact list in Outlook, iCal, or a mobile device. By adding an hCard, this process is automated. The code looks like this:

<div id=”hcard-Brian-Peppler” class=”vcard”>
<a class=”url fn” href=”http://www.brianpeppler.com”>Brian Peppler</a><br />
<a class=”email” href=”mailto:brian@brianpeppler.com”>brian
@brianpeppler.com</a>
<div class=”adr”>
<div class=”street-address”>1514 17th St. NW #101</div>
<span class=”locality”>Washington</span>, <span class=”region”>DC</span>, <span class=”postal-code”>20036</span> <span class=”country-name”>USA</span> </div>
</div>

The result can be formatted in HTML like this:

Brian Peppler

1514 17th St. NW #101

Washington, DC, 20036 USA

Your contact information can also be formatted as a downloadable hCard
through the Technorati Contacts Feed Service.

This looks nice, but what good does it do? Aside from exporting the data to desktop applications, mobile phone browsers visiting this site can place a call to me directly from my microformatted content.

Additional Resources

Check out the Dreamweaver microformat extension and microformats.org help creating your own microformats.

Also posted in Tutorials | Leave a comment