5 basic rules to better accessibility in web design.

I’m kind of a podcast fiend.  So, as a web designer, it should be no surprise that I listen to the Boagworld podcast.  Recently, Paul and Marcus highlighted 5 key tips to designing accessible websites.  Here they are in my words.

  1. Utilize alt tags on images.
    The only way a screen reader (a device used to aid sight impaired internet users) will “see” your image is to describe exactly what the image is in words.  **Savvy designers will realize added benefit here, as search engines will pick up keywords in the alt tags.  Just make sure your alt tag copy is descriptive of the image, not loaded with keyword phrases that won’t aid the sight impaired.
  2. Utilize title tags on links.
    Imagine a web page being read aloud to you.  Now imagine the person reading the page to you encounters a link.  Instead of telling you where clicking that link will take you, they begin to read out the destination URL.  Yikes.  With a proper title tag, you can tell your sight impaired users exactly what clicking the link does.  ie “click here to login”, or “click to visit my portfolio.”
  3. Make sure you have fallback content for rich media.
    Most of us including rich media content will use Flash to do so.  If so, provide content that will be seen if the video or Flash cannot be loaded.  Usually, this can be taken care of with the SWFObject implementation method.  Don’t leave a hole where the media would be, fill it with a backup image or copy.  **Here’s another plus for you cheeky designers.  Continue reading

Battle of the clickTAGs for Flash ad click throughs.

First, a bit of background.  Flash banner ads are usually click-able.  Because the publishing site (ie network TV sites, online newspapers, etc) usually uses a third party ad system to serve and track banner ads, the destination URL for any click through is not hard coded into the SWF (Flash ad).  It is dynamically injected into the ad at runtime with the use of a “clickTAG” parameter in the object HTML.  The ad system handles the pairing of the ad and its accompanying clickTAG URL.

I make a fair amount of Flash banner ads for Grady Britton clients.  I’ve noticed a an annoyance that should be easily solved.  At some point since the invention of the clickTAG, there was a division on the correct case of “tag” in “clickTAG”.  Some publishers require that the variable name be “clickTag”, and others insist that it be named “clickTAG”.

Why does this matter?  It turns out that some of the third party ad systems are case sensitive when it comes to the use of clickTAG.  For me, that translates into creating 2 versions of every ad, one who’s code respects “clickTag”, and the other for “clickTAG”.

image of Adobe recommended clickTAG ActionScriptSure, I could write a simple switch to test which version exists and set accordingly, but the publishers employ QA folks armed with Flash decompilers. If the ActionScript that the decompiler reveals (which by the way, is rarely the actual ActionScript as written by the designer) does not exactly match the structure as required by QA, they won’t run the ad, regardless of whether or not it will work.

So, if the ad serving companies aren’t going to stick to “clickTAG” as recommended by Adobe, then let us designer/developers switch and validate the parameter without QA throwing up red flags because the ActionScript doesn’t look the same as the reference manual.  Creating one off versions of the ads to deal a basic case sensitivity issue is just silly, especially if it can be solved for all future projects with a few lines of ActionScript.

Updating WordPress plugin Popularity Contest for WP 2.5

Down at the bottom of this page, you’ll see a list of the most popular posts.  It took some doing to get this plugin working on this site.  I upgraded to WordPress 2.5 before installing the Popularity Contest plugin.

Basically, follow the instructions in this article: http://tinyurl.com/2wne9f

You’ll have to edit popularity-contest.php in your plugins directory, as well as add 2 tables to your WP database either by running the included query, or manually with phpMyAdmin.

Browser dependent, conditional CSS styles

Browser dependent CSS stylesI have a client who doesn’t like the way the font I chose for their headers looks across platforms. I am using Lucida Grande for all the Mac browsers out there and Verdana for the PC users, since Lucida Sans Unicode on PC IE6 doesn’t look great.  Since PCs don’t typically have Lucida Grande, I took advantage of the fall back.  The CSS looks like this {font-family: Lucida Grande, Verdana, sans-serif}.

My client wasn’t feeling Verdana for the headers, but for body text, it’s hard to beat. So, I needed a way to sniff out the user’s browser, and conditionally set the class for the just headers accordingly. JavaScript to the rescue.

First, I used the script at http://rafael.adm.br/css_browser_selector/ to set the header classes to be browser specific. If the browser is IE6, you can set styles for that browser by using the “.win.ie6″ class. For Firefox on the Mac, “.mac.gecko”. Using those classes, I set independent styles for each browser. PC users will see the headers in Helvetica and body text in Verdana, while Mac users will still see both headers and body text in Lucida Grande. Pretty cool.

Rotate and animate dynamic text fields in Flash

Embed font in Flash to allow for rotation and animationBy now you’ve seen the Dylan Messaging viral campaign. It’s a pretty hip use of Flash. I was pretty sure I knew how the effect was done, so I was running some Flash experiments to test out my theory. Everything was just as I expected until I hit a snag. How do you rotate or otherwise animate a dynamic text field in Flash?

If you’ve ever tried this, you have probably discovered that containing the dynamic text field in a movie clip will work with default font settings, but only for X and Y animation. In order to be able to rotate, skew, or add effects, the font must be embedded. Now you know.

OmniGraffle maybe the best tool for wireframing a web site layout

OmniGraffle web site diagramming and wireframe applicationI know it goes against every good web design how-to book on the market, but I rarely start with a real pencil and paper. In fact, I rarely sketch out wireframes even digitally. I just go for it.

Part of my design resolution for this year has been to start sketching and wireframing before opening Photoshop or Illustrator. On that note, I’ve started tinkering with possibly the best known application for wireframing a web site, OmniGraffle from OmniGroup.

A lot of us Mac fans have had this diagramming application in our toolkit for a while, as it used to come installed on Apple machines. It has taken me years to warm up to it after poking at it here and there for sitemaps and such, but I’ve finally come around to deciding that wireframing in OmniGraffle will be a permanent part of my workflow.

Learning OmniGraffle was pretty darn easy. It’s one of those apps that you can learn in 10 minutes if you’re used to using pallettes and inspectors. Recently, I discovered that it also supports layers, which is even better for my wireframing needs. Once you’re ready to jump into the main design phase, OmniGraffle can export PDF vector graphics, PSD, or plenty of other formats.

The only complaint I have is that the shortcut key combinations don’t match the Adobe shortcut combos, and since I live and die by toggling the grid and snapping, it will take a while to get used to the new combos.

Hex color picker for mac copies well to Photoshop

Yea, I know it’s been a long time. Busy is a great state for a little shop like ours. Onward.

Apple Color PickerI like the little Digital Color Meter that comes with the Mac (Applications>Utilities), but it falls short when trying to copy colors from the screen and paste them into Photoshop’s color picker. Digital Color Meter’s copy function (Shift+Command+C) copies the hex value of the underlying pixel, complete with quotes and the pound sign. Photoshop’s color picker wants just the 6 character hex number, no frills. In fact, it will reject the paste command altogether if there are more than 6 characters.

IconFactory xScope

The IconFactory have a sweet little silver bullet in xScope that has cured this little woe, and laid rest to a few others I didn’t even know I had. Not only will xScope copy the hex characters without quotes and with or without the pound, but as RGB values, RGB percentages, HSB, as well as NSColor (whatever that is).

But wait, there’s more. That’s just one of the 7 tricks xScope does. There’s on screen dimensions, rulers, screen resolution overlays, guides, frames, and a crosshair tool. Check out the xScope page at the IconFactory site for the whole deal. xScope is $26.95, and of course there’s a demo version. It’s easy on the eyes, and worth the cheddah for something I’ll use daily.

PNG color shift from Photoshop CS2 ‘Save for Web’ solution

File Info window from Photoshop CS2This issue has plagued me for years. I’m pretty sure the issue came about from messing with color profiles on my Mac. I switch between web and print graphic work a lot, so somewhere along the way I must have checked the wrong box, thus leading to color shifts when saving PNGs using Photoshop CS2′s Save for Web.

The symptom is commonly as follows. Using CSS, you have set an area to have a solid background color, say #333333. Using Photoshop, you’ve created a graphic whose background color is #333333 to match your area’s background. But, when the PNG is rendered in a browser, the backgrounds don’t match. In my case, using Apple’s Digital Color Meter shows that the background color of the PNG is actually #434343 in Firefox.

I finally found an easy fix on the Polar Bear Lamps blog. This amazing post describes in easy detail how to open a PNG after saving, strip it of meta data, and re-save it.  Apparently, the embedded Gamma meta data from Photoshop causes the shift.  Delete that meta data, and the shift disappears.

The post comments also reference tools for drag and drop use. I downloaded GammaSlamma 1.1, and its working nicely.

Thanks so much to Polar Bear Lamps for quelling that buzzing in the back of my mind.

Preview web pages as IE in Firefox

IE Tab for FirefoxI’m a Mac user, but this Firefox plugin is so slick, I’m actually envious of my PC based web developer brethren. It’s called IE Tab from PCMan (Hong Jen Yee). Once installed, you browse to any web page using Firefox. Then, simply right click to bring up the contextual menu and choose “View Page in IE Tab”. The same page loads in a new tab, but displays using Internet Explorer’s rendering engine.

Now there’s no reason to ever launch IE again! When I’m checking how a page renders on my test PC, I can simply launch Firefox and see both the FF and IE result.

One Laptop Per Child: Give 1 Get 1 Promo

XO Laptop from One Laptop Per ChildOne Laptop Per Child, makers of the XO laptop, and who’s mission is to “provide a means for learning, self-expression and exploration to the nearly two billion children of the developing world with little or no access to education”, will be running a Get-1-Give-1 promotion starting November 12.

For a limited time and $399 US, you will be able to have one of the Linux based XO laptops sent to a child who has inadequate educational outlets. But wait, there’s more. In addition, a second XO will be sent to you.

Falling short of the fabled $99 laptop, the XO still promises to be worth the meager investment. The worst thing one can do is to start comparing it to conventional laptops. According to the specs as read by David Pogue in his NYT Podcast, the XO sports only 1gb RAM, and won’t run MS Office or Photoshop.

The XO is, however, built on open source technology, and features wireless web access along with innovative networking software that allows the XO to find and collaborate with other XO users. Battery life for the XO laptop is 6 hours, and much more if the user is simply reading. Charging the laptop can be achieved by a hand crank (1min cranking = 10min power), or via 1 foot square solar panel. The backlight can be turned off in sunlight, increasing readability and conserving power.

I reviewed the demo images of the interface online, and it’s a little confusing to call this a laptop. Is it a mobile computing device that unfolds like a book and sits neatly in your lap? Yes. Will it do what a comparably priced Dell laptop does? No, but thats not apples to apples.

The XO is designed to be easy to use out of the box for children. It’s purpose is to open young minds to computing and problem solving with digital tools. And, since it’s based on open source programming and collaborative ideas, it’s potential for expansion is unrestricted.

3D for 2D moving image slideshow effect tutorial

3D for 2D picture effectKen Burns is in town, and of course, I thought of the Ken Burns effect in the Mac screensaver options. You’ve seen this slideshow rotating picture slideshow a million times. You know, the one where each image fades in, slowly zooms and or pans about the picture, then fades to a new image. It really adds flavor to the pretty static experience of just displaying an image for a few seconds.

Building on that notion, there is a motion graphics trick where the artist can make it seem like the subjects in the photo are on a different plane than the background. Panning or zooming reveals the effect, because the scale and location of the 2 planes vary independent of each other.

Some call this the “3D picture trick”. Whatever you call it, it’s another use for new 3D for 2D features in Adobe After Effects and Apple’s Motion. I found a how-to on this from Adobe a while back, and thought I’d share it here. Photoshoppers, warm up the pen tool. The 3D Picture Trick (PDF)

Why does Hotmail, Yahoo, Gmail etc think my emails are SPAM?

eROIA client of mine recently asked me this question. It’s a good one I hear all the time. This particular client designs and manages their own broadcast emails with a web based app built by local email marketing gurus, eROI.

First off, SPAM filtering is some of the worst voodoo out there, so all the info herein is totally based on my experience in email design.

Being mistook for a spammer is typically due to the composition of your broadcast email. Social spam marking functions aside, spam filters are usually based on a point threshold system. Incoming emails are scored bad points based on a list of predefined spam-ish characteristics. Once an email scores a certain level of bad points, the server marks it as spam. Depending on your email provider’s settings, the next course of action may be to deliver the message to a special “junk” mailbox, or delete the message altogether.

Here’s a couple of things that I think are probably the most common mistakes you can make when composing a broadcast email. In my experience, these are quick ways to get yourself bad points. This is by no means comprehensive, and each ISP may have it’s own spam criteria.

- Weird characters, sales text, and all caps in the subject line or From address. Real spammers try to get creative with call-to-action text and cr/\zy characters in the Subject or From fields. Not surprisingly, spam filters are clamping down on such abuse. So, try and step back from it and view the text strictly on a logical plane. Do the words or phrases shout “I’m Junk Mail!” ?

- Content that is mostly an image. I know it looks good, and it’s way easier than coding the HTML, but to a spam filter it looks like you’re hiding something. The filter can’t tell what the image says or looks like, so it gets nervous about letting it through. So, it may mark the email with a bad point, just in case.

These are just a couple of areas that I can confirm the filters take into consideration. Thankfully, there are services and features built in to many email list management apps that will test your email before you send it. Lately, I’ve been a fan of iContact, and they’ve built in a spam point checker. Not sure if the eROI guys have one, so check with them.

I have Hotmail, Yahoo, and Gmail email accounts strictly for spam testing, and I leave the filter settings at the default. Before a blast goes out, I send it to all of my addresses and make sure it doesnt get marked as spam.

The home page importance myth.

I was listening to the boagworld podcast today, and they brought up an interesting point in response to a listener question. The listener was a web designer concerned with the number of elements his client was adding to the home page. The common belief is that the home page is the most important page of any site. As such, it should be no surprise in the thinking that if it’s important, it belongs on the home page.

These days we are finding our information via search engines which deep link to pages within a site, bypassing the home page altoghether. A lot of effort and money is spent on SEO which is only working to encourage this process. So, home page placement isn’t as paramount as we once thought.

Back to the crowding issue. As designers, we have been taught about the importance of white space in web design. So, to restate the listener’s concern, how are we to explain that not everything important belongs on the home page?

The answer is beautifuly simple, as most good answers are.

For every element added to a page, a bit of importance is deducted from all other items on that page. See? Beautiful. After adding important element after important element, we are left with a overall page of unimportance.

You can easily imagine which is more effective, a page of 30 elements screaming for attention, or a page of 3. Eventually, too many elements on a page forces the user into that frantic, scanning-for-something relevant case Steven Krug talks about in “Don’t Make Me Think“.

Now, we have a justification for white space, other than the fact that it just looks better.

Scientists develop invisibility hoodie.

Invisible Man. Well, torso at least.Okay, so this image is more than a little doctored, but it was enough to make me read the entire story. The short of it is that scientists have been able to bend light around an object and, in a sense, make it invisible. The rub is that so far, it only works for a single wavelength, ie microwave or laser light. So, until the entire visible spectrum can be bent, this technology will most likely be useful for cloaking objects from other technologies like radar and night-vision.

But look how cool that image is! Someone went for it with the the clone tool and or shot a plate to composite two images together. One with our invisible hoodie guy, and one without. Either way, I think this is a great use of compositing where the final product looks so much like a hap-hazzard snapshot, it adds instant intrigue.

Adjust kerning in Flash 8

A design colleague of mine asked me if I knew how to kern characters in Flash. After some experimentation, I think I figured it out.

It’s all about the letter spacing input in the Property Inspector. Create some text, select the text box, and adjust the letter spacing slider in the Property Inspector, and you’ll find the space between all characters in the text box responds accordingly. We’re used to this.

Now, to adjust the kerning, use the text tool to highlight a single letter. Now adjust the letter spacing slider. You should see that the spacing is adjusted only to the right of the letter you selected. Bingo! Kerning in Flash.

Adjusting kerning in Flash

Virb is to MySpace as Aphrodite is to well, MySpace.

MySpace is a haven for terrible web design.Home to the worst 1998-looking, blink-tag-bearing, rainbow-background, browser-crashing designs of all time, MySpace is a single justification why page design should be left to the pros. That said, I know the masses love to spray comments containing 1400px wide images of monkeys smoking, so I’d rather it happen in a container like MySpace than spread all over the net. At least they’re not clogging my blog pipes with greasy design hairballs.

I’m not anti-MySpace. Shoot, I’ve got a MySpace page. I even have posted hypocritical pictures of my dog. Further, we’ve had jobs designing or pimping-out MySpace pages. (aside: For all you CSS heads out there, designing around the MySpace caveats is like trying to dial a cell phone with your foot. Your left foot.) For those of us viewing a MySpace member page whose design God himself is ashamed of, there is no way to bypass all that nastiness and just get to the meat of who the member’s friends are, or if we share an affinity for potato skins.

Virb is a social network featuring great design.Enter Virb. I heard about this social network from the Net@Nite podcast with Amber MacArthur and Leo Laporte. Virb takes all the features of what a social networking site should be, and wraps it in beautiful, compliant, standards based layout. After setting up my page in Virb and poking around, it seems like the audience is much more refined than the riff-raff that has spoiled MySpace, although much smaller.  I’m sure it must be growing.

Virb is totally customizable. They provide you with hooks for the modules, and you are free to design your page using HTML and CSS, but no JavaScript. Liberate yourself from pasting code into your bio, this is how customization should be.

Best of all, every Virb member page has a button at the top offering the equivalent of the much loved “skip intro”. It’s called the “Remove Customization” button, and it’s almost worth paying for. This button instantly allows you to view any Virb member page in a standard, unified format, without any of the member customization.

So, go for it. Impress your neighbors with animated Pokemon emoticons and Borat backgrounds. I’ll be the one who has taped down the “Remove Customization” button.

Local Web 2.0 color superstars need your Webby vote.

Local Portland color gurus and personal heroes, COLOURLovers is up for a Best Community Website of 2007. That’s a Webby Award, folks!

They are up against some fierce competition from big players Flickr, Threadless, Delicious, and Yahoo! Answers. Read all the reasons to vote for the little guy here. Then, vote for COLOURlovers here.

Rock the vote, help get Cinderella to the ball, and all that. If you haven’t used COLOURlovers, and you’re at all interested in color and design, stop what you’re doing immediately and head over to www.colourlovers.com. You’ll find Dayn W Creative there at http://www.colourlovers.com/lover/daynw.

Related Posts Plugin for WordPress, Blogger...