We’re in a bit of a transitional period now, with CSS1 being supported by all browsers, CSS2 being supported by many browsers, and some CSS3 being supported by modern browsers. The simple fact that we have so many browsers to support can make things very difficult. We want to support new technology, but our ability is hindered by needing to support the older browsers as well.

Progressive enhancement offers an elegant solution. Keep in mind, this isn’t anything new. It’s been around at least since 2003. With progressive enhancement we’ll design a site that makes use of CSS supported in all major browsers, currently limited to CSS1 and portions of CSS2. Then, rather than go through all the work to code things the hard way (using hacks), we’ll make use of the advanced features of CSS2 & 3 to add to the design. Older browsers still see a nice design, but newer browsers—especially with Firefox 3 being recently released—will see a nicer design.

Of course, this isn’t always the best solution, but I think it’s a good way to think, design, and code.

I offer this example as a practical application of this philosophy:

I recently designed a site (note: I didn't code most of it, but these flags were one of the things I did code) that needed some error “flags”. I thought it would be nice to have a gradient on them, use rounded corners and give them a drop-shadow, but I knew it would be pretty difficult to put rounded corners, and a drop shadow on these while still making it easily resizable and bullet-proof. I used progressive enhancement to make the flag look nice in all major browsers, but look especially nice in modern browsers.

Here is my example HTML:

…and the CSS:

Notice how I use CSS3 to apply some nice extras such as text-shadow (for an embossed look on the text), box-shadow (for a nice drop shadow), and border-radius (for rounded corners). I used a gradient image for the background of the span that was intentionally taller than expected, in order to leave room for expansion. I also used a pointer triangle image with the same gradient on it that was the same height as the gradient image.

The final result looks like this:

I hope if you weren’t already familiar with this philosophy that you’ll give it a try sometime. It's a different way to think, for sure. You have to give up some control over the design, but the reward is a solution that works well for everyone.

For more information on this check out the original SXSW presentation outlining this philosophy, and the Wikipedia entry.

• Adobe Illustrator
• Icon design skills
• Lots of patience

BASICS

Let’s go over some basics. ‘Resolution Independence’ is essentially the vectorization of interface components so that they can be scaled to a number of PPI’s (pixels per inch). Standard screens use 72 PPI (also referred to as DPI, but PPI is more correct). Devices like the iPhone have next-generation screens with a much higher PPI (160 PPI on the iPhone). As technology changes, we’re going to have screens that have higher and higher PPI, meaning that our interface elements will need to stretch to a number of different pixel values and still look nice (using vector). The format that we currently use is the PDF format.

Document settings for an icon that displays at 16px by 16px on a typical display

GETTING STARTED

To get started, you need to open Illustrator and create a new document. You’ll want to enter the dimensions in pixels to exactly the size this image would normally be used at. Make sure you click the ‘Advanced’ button and set the color mode to be RGB, ‘Raster effects’ at 'Screen' (72 ppi), and the ‘Preview mode’ set to ‘Pixel’.

Grid settings to use when designing for resolution independent UI's

SETTING UP THE PIXEL GRID

In order to get any sort of idea where your pixels are in this document, you’ll need to set up a grid to snap to. Hit ⌘-K to open the settings, and go to the ‘Guides & Grid’ tab.

Set your grid measure and subdivisions both to ‘32px’, and make sure it’s a color that you can work with (such as the default gray). “Grids In Back” can be useful sometimes, and a hindrance other times. With this checked, any shape you make on the canvas will hide the grid. Press OK to save the changes and go back to your document. To turn on and off the grid you can use ⌘-' or use the View menu.

WORKING IN ILLUSTRATOR

This can be tough if you’re not used to working in Illustrator, but you’ll want to create your component how you normally would. Sometimes it helps to copy and paste a raster version in first, and to trace it using Shapes or the Pen tool. Zoom in really far to work. Make sure you’re working with ‘Pixel Preview’ on (View → Pixel Preview), and zoom out to 100% every once and a while.

Note: Illustrator’s pixel rendering at 100% is very strange. Sometimes it can get quite off. The best way to see how it looks is to save your document as a PDF and drag the file into Text Edit. This will render it with Apple’s engine, showing you exactly how it will look in your app.

Sometimes if you work with the Pathfinder to merge shapes, you’ll find that the shape is lined up exactly to the grid and it will look as if it’s off. This is just Illustrator's faulty rendering.

Note: You can paste in vector shapes from Photoshop if you've already designed your glyph or component using Photoshop's shape layers.

Settings to use when exporting to PDF

EXPORTING YOUR FILE

So you’ve got your image all ready to be saved as a resource? We need to save this as a PDF. Go to the ‘File → Save As…’ window and choose Illustrator PDF as the format. When prompted for what PDF settings you want to use, just choose the ‘Illustrator Default’ setting from the menu.

NOTES ON USAGE

Your file will appear to have a white background since it’s a PDF, but when you use it as a resource, the white background will be cut out. This is an important distinction to make because, if you do want a white background, you’ll need to draw it into the file itself.

You should be able to use the PDF file just like any other image resource file in your applications.

It may be a bit more work to create resolution-independent resources, but it’s probably a pretty good investment for the future, when your app will likely be used on higher resolution displays.

ADDITIONAL READING

Want to learn more? Here's a couple links to get you started:

• cabel.name: Apple's Next Generation Themes
• Red Sweater Blog - Resolution Independent Fever

If you've got any thoughts to add, please let me know in the comments.

PROBLEMS

So let’s talk about what’s making this widget suck. The biggest issue I see is that it’s not clear how you are supposed to type the two words. They are spaced out in the graphic, but for some reason, you’re not supposed to put a space in the input box. Even worse, it does not explain how it wants you to enter the words.

There’s also an issue with spacing. The words are scattered above in the top area, and they don’t really relate to the field below. Optimally the text input would be directly under the words.

For some reason, they’ve also decided to take up a lot of space with their branding and slogan (which doesn’t make a lot of sense to me). The logo could be a lot smaller, and we could easily remove the slogan: “stop spam. read books.” Let’s be honest. You’re not actually going to read any books like this, and it just serves to add to the confusion currently.

Lastly, there’s no clear way to see if you’ve entered the information correctly. It seems like some feedback given to the user would be very helpful. If you misread a character you would know you’ve made an error right away, and if you entered everything correctly, you would be able to see that and know that when you click the “Submit” button that it will work.

SOLUTIONS

To solve the formatting issues I decided to split the text input into two separate fields. This makes it very clear that you need to enter both words, and that there should be one word per field.

In order to solve the spacing issues, i’ve aligned the inputs with their corresponding text. This helps users instantly understand where they need to type and what goes in each box.

I’ve reduced the size of the branding to better utilize the space, and also moved the function buttons to the top right corner to fit with the new layout.

I added a new function to the widget which would really help the interaction a lot. It’s a submit button built right into the widget. Since this widget is really the gatekeeper of the submit button, it makes a lot of sense for that to be contained in the widget itself. Before the user is validated the button is disabled, and when they type in the correct values it enables the button. This wouldn’t be difficult for them to implement with javascript.

Last but not least, I added some inline validation to better communicate with the user whether or not they are ready to submit the form, and where any errors are.

THE END RESULT

And here’s how my improved version of reCAPTCHA looks:

Got a better idea? Let me know in the comments.

Big Fat Issue: No Community

Twitter has grown as large as it is because of the community behind it. The public profiles provide a way to see who people are, and who else they follow. This is a fundamental way that many people discover similar users on Twitter. You can see at a glance everything you need to know about people, without having to go anywhere. Another issue is with communicating with people across the service. With Twitter it’s beautiful and simple: Just use the “@” symbol and the user’s username, and everyone knows who you’re talking about. With no central service, there is no great way to do that unless you specify the user’s full name, which is much less convenient. There’s also no way to automatically show who you’re following because all that info is in the client application or website.

No history

The “distributed” form of Twitter would take away any sort of in depth history of a users posts. Right now pagination is gone on Twitter, and many people are really bummed about it. The method of using a feed reader removes any possibility of seeing what people were up to while you were gone on vacation, or without internet for a while. Only if you had your client going constantly to cache the data as it comes in would you have any sort of way to see history.

Barrier to entry

There is an enormous barrier to entry for something like this. A user would have to (at least for now) create a blog (or use their current blog) configure it as needed, install a plugin and then search out all their friends’ blogs to see if they are using the distributed service. Another service could provide some of the functionality that you need, but it can’t completely replace all of the missing features without becoming proprietary.

Duplicating functionality

The idea of creating a standard XML format for microblogging seems redundant to me because we already have services like XMPP that have all of the same components in place.

The other aspect of this is that it’s rewriting Twitter, Pownce, Jaiku, and Facebook status updates, to create the Twitter-killer.

Communicating with the blog platforms

One of the other issues is that there isn’t a great way to post microblogs from the desktop that works on all the blogging platforms. I know that some platforms (like Wordpress) have great Metaweblog API support, but not all do. I have had a hard time getting that to work on ExpressionEngine, and it even has a built in plug-in for that. To really take off there would have to be a plugin for every major blogging platform, and they would all need to be compatible.

No one wants to have to manually update from their blogging admin tool.

What’s the solution?

In my opinion, instead of looking to create our own Twitter/Pownce/Jaiku-like service that’s open, we should find ways to get Twitter, Pownce, and Jaiku to all talk to each other. The idea of a protocol for this sort of communication is great, but it’s not going to take off with all the users who area already using these services unless we can get everyone involved on the same page. We need to get the companies themselves on board somehow.

In our lives today, we have a seemingly infinite amount of freedom and choice. The real killer feature would be to bring everything back together so my friends on Pownce and Jaiku can talk to me on Twitter, and those who want to set up a system with their blog could also get involved.

I am definitely proud of the guys who are behind this movement, and I think it’s great that they are exploring it, but let’s see if we can get around these problems! I am sure there are even more issues that I’m not thinking of as well. Feel free to discuss in the comments below.

FUTURE OF INTERACTION

There was a lot of talk about interaction design at WebVisions, but one of the most notable presentations was about multi-touch and gestural interfaces. After seeing this presentation, it really helped me realize how close we are to fully gesture-based interfaces.

Right now the way we interact with devices is really strange. It doesn’t reflect our interactions with physical objects very well. A mouse and keyboard are not going to be around forever.

We are starting to see gesture-based devices in the marketplace, and while they are still brand new, the technology is getting better and better and someday these devices will be common-place.

FUTURE OF IDENTITY

Identity is a big issue on the web. We’ve been trained into this strange system of signing up with every single site and replicating the same information over and over. Think of how many accounts for websites you have. While it may not seem like a big deal to remember usernames and passwords for every site, why should we have to settle for such a hacked-up solution?

Enter OpenID. Actually, not just OpenID, but a whole host of technologies that are going to revolutionize the web (OAuth, and DiSo for example). In the real world we don’t have “accounts” that we create at every store before purchasing things. If someone needs to check our identity, they look at our drivers license or passport (trusted sources of identity). If we need to pay, we simply hand them a card from our wallet (trusted sources of financial data). On the web, we need a central protocol for identification, and that’s what OpenID is. It’s also important to distinguish that no one “owns” OpenID, which is what makes it work. If everyone stored their information with one specific entity (a la Passport), that entity would have too much power.

There’s lots that will likely happen in the next few years to revolutionize this technology. It’s still brand-new, and has not matured fully yet (which spurs most of the complaints) but there will come a day when this technology is sorted out, and it just works. Feel free to comment with (or without) OpenID on this blog.

FUTURE OF MEDIA

Lynne Johnson from FastCompany spoke about the future of print media, something that I’ve been thinking a lot about lately. While her views on it are a little different than mine, I think we both agree that the places we go to get our media are changing dramatically.

I first became aware of this concept as I worked in different coffee shops and observed the older generation reading newspapers. It made me think about how rarely I see people in my generation (or even my parents’ generations) reading a newspaper. Then, I realized the only time I ever read any news is from the internet. It really seems wasteful now to print newspaper. Printing millions of copies of the news for one day, when it’s only going to be discarded (hopefully recycled) at the end of the day. It can be argued that the design quality of the daily news is usually not very high either, because the amount of time spent on the design and layout is very limited.

Where Lynne and I disagree is in the medium of books. She believes that this shift from print to digital includes books as well, and I think that books are likely to be preserved in some way or another. Books are prized by loyal readers, and the amount of time that has gone into the design, typesetting and printing of books is a fine quality that cannot be appreciated in a digital format.

There is also a huge issue with the technology. There is no device that I currently feel comfortable reading for long periods of time with. The soothing qualities of books are not at all realized with devices. I have a few ebooks stored on my computer, and I just cannot bring myself to read them. Even with devices like the Kindle, books just don’t feel the same, and I still find it hard to read them.

I can see “pulp fiction”, and other smaller, cheaper books moving to a digital format, where the format is shorter and the quality would not have been as high anyway, but I think we’ll always have some sort of printed books around.

WHERE IT’S ALL GOING

I can’t pretend to know everything about where we’re heading, but there are a lot of signs that we’re moving into a fundamental shift from learned computing behaviors to a more natural model that mimics how we interact in the physical world.

Only time will tell.

Did you know that while using the Move Tool (V) in Photoshop, you can press 1-0 on your keyboard to control the opacity of the current layer?

1 = 10%, 2 = 20%, 0 = 100%, etc….

If you’re fast enough you can even type a specific number (like 23) and it will assign that opacity to the layer.

Thought i’d share this tip for anyone who doesn’t know.

Getting Started

You will need:

• Photoshop CS2 or higher
• Illustrator CS2 or higher
• A few screenshots of your product
• Patience
• Basic Photoshop skills

If you don’t have a screenshot to play with, you can use these example screenshots:

Now that we’ve got all our tools, make sure you’ve got both Illustrator and Photoshop open, and let’s dig in.

Prepping the screenshots in Photoshop

Masking out the the shadow and stroke from the original screenshot.

Open up both of your screenshots in Photoshop. We’re assuming you want your screenshots to be smaller in your design than what they are currently. I recommend taking a screenshot on a Mac with Command-Shift-4, hitting spacebar, and capturing the full window. Either way you do it, you’ll want to mask out the shadow, and background from your screenshot so you just have your window on a transparent background.

Important: There is usually a 1px stroke around the window that will really cause problems unless you mask it out of your screenshot image. You can add this back in the final step as a layer style.

Creating the layout in Illustrator

Here’s where we mix things up. Illustrator has some pretty powerful 3D effects that let you rotate objects in perspective, and change the values later on without destroying your work.

Placing the screenshots into Illustrator

First, create a canvas that’s roughly twice the size of the desired end result. Place your screenshots into Illustrator at full size (File → Place…) and make sure that you check the “Link” box.

Example canvas with both screenshots at twice the size I want them. Click to view full sized.

Then, shrink down your screenshot to roughly twice the size you want it at (Zoom out to 50% to get an idea of what size it will be).

Setting up the 3D rotate effect

Next, lets apply some 3D effects. Go to Effect → 3D → Rotate…. You can use whatever settings make sense for you. You’re going to want to set the X and Z axis’ to 0º, and play with the Y axis, and Perspective values. It takes a lot of playing around to find the right angle for your screenshots.

Here are the settings I used for my example:

X: 0º | Y: 30º | Z: 0º | Perspective: 25º

To test the settings you’re playing with, you can turn on the Preview. Once you have your settings perfect, press OK, and repeat the process for your other screenshots.

Hint: To make screenshots face opposite directions, just change the Y value of one of them to a negative number and leave all the other settings the same.

Arrange your screenshots how you want them to get a good idea of how it will look.

Back to Photoshop again

Now, it’s time to put everything together in Photoshop and apply some nice effects. Create a new document that’s the size you’ll be using these screenshots at, or use an existing document you’ve got open (like a website design).

Copy your screenshots one at a time from Illustrator by selecting the screenshot, pressing Command-C, and pasting (Command-V ) it into your Photoshop document.

You should be asked how you want to paste it in. Select “Pixels” for best results.

Once you’ve got your screenshots in (remember, they should be about twice the size you want to use them at), apply the filter “Unsharp Mask” (Filter → Sharpen → Unsharp Mask) to each of your screenshot layers. This helps the screenshots to be more readable.

The settings I used to sharpen the screenshots with Unsharp Mask

Then, select both of your screenshot layers and shrink them down to size. Pay attention to the toolbar where it says what size you’re shrinking it to in case you want to paste these in again in the future.

My screenshots shrunk down and aligned

Important: You’ll only want to resize these once because each resize you make blurs the layer more.

Finally, style these however you like. I suggest adding a 1px, black, ~10% transparent stroke to give it some definition, adding a very faint gradient in screen mode to give it some shading, adding surface and cast shadows, and reflections.

The final screenshot layout. Click to view larger.

You can download my sample PSD to see how I applied these effects into a complete screenshot layout.

If there is enough interest I may post a second part on how to style these screenshots. Let me know if that is something you’d like to see in the comments.

Lets say you want to simply change the fill color of a layer in Photoshop from white to black. The typical process is not very effective:

1. Load the selection for the layer you want to change (option click on the layer)
2. Make sure you have the correct color in the foreground
3. Hit Option-Delete to fill it with the foreground

Fortunately there is a quick and easy method that does respect the transparency of your layer, and it’s also a lot quicker:

Simply select the layer you want to change colors for, make sure you’ve got the new color in the foreground and hit: Option-Shift-Delete. This tip also works for shape layers and text layers as well!

Thanks to Brian Zeitler for teaching me this trick a while back!

Designing the Obvious by Robert Hoekman Jr.

Designing the Obvious walks you through several techniques and principals to designing obvious interactions in your applications. As a UI geek myself, I really enjoy thinking about these sorts of challenges. Robert walks us through several different areas of UI / interaction design, including tips on how to plan out complicated interfaces. I really enjoyed his points on how to get users from being beginners to intermediates very quickly. If you are designing web applications, this book is a must read!

Check it out on Amazon →
Robert Hoekman Jr’s website →

Bulletproof Web Design by Dan Cederholm

While I’m sure many of my readers have already read this book, I have to recommend it to anyone who hasn’t. Never before have I cared so passionately about semantic code than after I read Dan Cederholm’s Bulletproof Web Design. Dan walks us through several examples of common website elements that are typically not bulletproof (meaning, indestructible). This book took me from a semantic code enthusiast to a semantic code evangelist! If you’re learning web design, or web development, this book is an absolute must read. The book is easy to read, and very nicely designed as well. It includes several examples and walks you through every step of the way. You won’t regret reading this book.

Check it out on Amazon →
Dan Cederholm’s website →

1.) Open Source

Jabber is not locked down like other services like AIM, MSN, ICQ and etc. Any company out there can integrate with the service without having to worry about royalties.

2.) Decentralized

There is no central server for Jabber/XMPP-based IM. Anyone can run there own XMPP server. This means your company could easily make their own chat service around Jabber, and not only that, but be able to communicate with a host of other Jabber-compliant servers.

3.) You Probably Already Have It

If you have a Gmail or Google account, then you already have an account. Google Talk is a Jabber-based service, and is included by default in Gmail. This means you probably don’t even have to sign up for an account.

Additionally, if you have a Gmail account, that doesn’t mean you can ONLY talk to your friends on Gmail, but you could talk to anyone that’s on a Jabber-based service. For instance, I have a Gmail jabber account that I use, but I have some friends at Jive Software who use Jive Software accounts, and the integration is seamless.

4.) Lots of clients to choose from

Given the open nature of Jabber/XMPP, there are a lot of different clients you can use to chat with people. There’s native support in iChat on OSX, but if that’s not your cup of tea, then there are plenty of other choices. You could use Adium, Psi, Spark, and a number of others.

5.) Flexibility

Additional functionality can be built on top of Jabber/XMPP. There are a number of potential applications for this. Web apps, gaming, file-sharing, and other types of apps are all possible over XMPP. Jive wrote a great article recently that inspired me to have a closer look at Jabber/XMPP, and I think you should check it out too!

I would highly encourage all of you to at least try to start using a Jabber account and consider switching over 100%. I am using Jabber more and more each day and hoping to one day get rid of my AIM account completely. If only you would join me.

Resources:

• How to use your Gmail account for Jabber
• List of apps for Jabber
• Jive’s OpenFire Jabber server

A screenshot layout I worked on for Jive’s products page

Don’t get me wrong here, I cannot take credit for even half of the work on the Jive site. It’s been a great collaboration between in-house designers Mike Sigler, and Chris Kalani, contract designer David Carroll, and I.

We went through about 6 different global/header styles while I was working on the project, and with each iteration we made it even better.

Clearspace really shines with the help of these screenshot graphics

External communities powered by Clearspace Community displayed in a screenshot layout

The areas I worked on the most were things like icons, promotional graphics (such as the examples above), icon-ified screenshots of the product, inline screenshots, and all sorts of other things.

Iconified screenshots of Clearspace interface help present the features

Inline screenshots help point out specific features mentioned in the paragraphs above.

Some of the challenges we faced were:

• Navigation: Finding the best way to organize a website with a lot of content
• Creating an interesting style so the pages without fancy content (About, Support, etc) would look almost as good as those with fancy content (products pages, etc…).
• Making screenshots readable (i’ll be writing a separate post for this soon) and not jaggy-edged
• Getting the whole website done in a little over a month
• Balancing the feel of corporate vs. human/fun
• Dealing with moving workspaces several times during the process of creating the site
• Merging each designer’s style into one unified style

Several icons I designed for the new Jive site

It’s been a unique chance to dive into the heart of a quickly expanding company and i’ve enjoyed my time contracting with them so far. I will be continuing to contract with them on a much smaller scale for a little while longer.

The other day I had the opportunity to present Expression Engine to a group of local web enthusiasts I’m involved with called Portland Web Innovators. The topic for discussion was a shootout between 3 of the popular CMS systems (Wordpress, Drupal & Expression Engine). I wanted to post my presentation here in PDF format for anyone who is interested in Expression Engine, and some of the benefits it provides.

Download the presentation here:

TweetPeek

First things first. In early March, Michael Richardson of GeekFire and I launched TweetPeek, a service for creating a group twitter feed for whatever purpose.

The idea is that you can easily create a page that contains updates from a select group of people (most common uses would be for small companies, communities/groups, and friends).

This all got started from the Pulse of PDX website. Pulse of PDX is a website that shows you tweets from people in Portland. Soon after, Pulse of Open Source was created for people to see what’s going on in the realm of Open Source. We noticed that these groups were getting sort of popular, so Michael (who was responsible for the code being used on these sites) wrote some more code to make it extensible to everyone. Shortly thereafter, I came around and worked on the design for it. We’ve still got a long way to go with it, but it’s definitely a great start.

UI Candy

UI Candy is my attempt to create an icon store. For a very long time i’ve wanted to create a store, but I didn’t want to just do something that’s already been done before. Icon stores are very common, and while each one has a unique style, in most cases they are all very similar, and for the same purposes.

After talking with several mac developers, including Wade Cosgrove of Everyday Software, I determined that there was a definite need for common glyphs, and ui components that everyone needed, yet no one seemed to have. I set out to solve that problem.

UI Candy has been pretty successful so far, and I hope it will continue to be in the future. I am definitely going to work on more items for the store because I don’t think the problem can be solved with just one set of icons.

Bacon-omatic

Bacon-omatic is definitely the silliest site i’ve ever made, and arguably one of the most pointless sites on the internet. It started out as a joke between a few people here in Portland (over twitter), and has recently spread to become a symbol.

Bacon-omatic was created to automatically make your text “Wrapped in bacon good” by wrapping it in tags. Funny right?

So that’s what i’ve been up to in my free time lately.