You may or may not have heard of “progressive enhancement” before. It’s a farely simple philosophy when it comes to designing or styling documents for the web, and it takes a bit of an open mind to accept, but it’s something I’ve been really thinking about lately. Put simply, it’s creating a design that looks good in older browsers, but adding in additional touches that really make the design shine in newer browsers.

Note: This is not the same as “graceful degradation” which employs a similar technique. Graceful degradation is built around the opposite technique. Designing something for modern browsers and providing a way for it to degrade (still work) in older browsers. Similar result, but different thought process. This is also a good way to design/code for sites that have more of a modern audience.

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.

This is a guide for designers who want or need to make resolution-independent glyphs or other resources for Mac apps. I must preface all this information with a note that much of this information was taught to me by Cabel Sasser and the guys at Panic. They’re way ahead in resolution-independence.

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

I’ve noticed a lot of people using the reCAPTCHA widget lately. While it’s my belief that users shouldn’t have to pay the price for websites’ spam issues, I think this is a neat service and idea overall. The only problem is that reCAPTCHA has an awful UI, and confused me the first 4 times I used it! I have a few ideas that will make this widget a lot more user-friendly and usable.

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.

Today at Beer and Blog we discussed the possibilities of distributed “micro-blogging” services using an open standard, and blogging platforms. It’s certainly an interesting idea, and I would love to see it come to fruition, but I still have several doubts about it. There are several key components that may seem small overall, but they are the little nuances that make Twitter our favorite online service.

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.

My WebVisions name badge. Click to view on Flickr

WebVisions is a local conference for web professionals that’s been going on for a number of years. This year was the first year that I had heard of it, and I was very excited that it was right here in Portland. This year’s topic was about the “future of the web”, and there was a lot of great talks around this topic. I just want to take a few minutes to go over a few cool things I learned and thought about.

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.

As promised, here’s a walkthrough on the process that Michael Sigler and I came up with for making smooth screenshot layouts that are non-destructive. It takes a bit of work, but it pays off with some amazingly beautiful screenshots.

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!

I realized that I have read a bunch of great books lately and haven’t posted anything about them! I try to constantly be increasing my knowledge of design and the web by reading books, and I think these reviews might be helpful if you’re looking for a book to check out. I will try to make these reviews a semi-regular occurrence. Without any further ado, here’s my take on two books i’ve read lately.

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 →

This is another post about interfacing with the control panel in Expression Engine and a number of people have requested it after my previous post (Creating an Admin Bar for Expression Engine).

It’s actually not too complicated. I’ll help you get set-up with some syntax for the blog homepage and your blog comments page. Let’s get started.

Skip to syntax →

First things first

In order to just show this to our Super Admin’s we need to get the logged_in_group_id variable that tells us what group the currently logged in user is in. You may remember we used a similar variable (group_id) in the previous example for the admin bar. Since we’re going to use this variable within other tags (the weblog:entries, and comment:entries tags) we need to specify that we want to learn about the logged in user.

Linking to the CP

Next, we need to figure out our link syntax. The control panel uses a pretty simple syntax that isn’t really documented anywhere, but easy to learn.

To edit a specific post, we need this URL:

/(name of your system folder)/index.php?C=edit&M=edit_entry&weblog_id=(weblog_id of the entry)&entry_id=(entry_id for the post)

To close a specific comment, we need this URL:

/(name of your system folder)/index.php?C=edit&M=change_status&weblog_id=(weblog_id of the entry)&entry_id=(entry_id for the post)&comment_id=(id of the comment you’re closing)&status=close

Generating the URL

Lastly, we need to find the variables to give us these URLs. Here’s what you’ll actually be using for your links.

For “Edit this post”:

• {weblog_id} - get the id of the weblog for the current post
• {entry_id} - get the entry id of the current post

For “Close this comment”:

• {weblog_id} - get the id of the weblog for the current post
• {entry_id} - get the entry id of the current post
• {comment_id} - get the id of the current comment

Final Syntax

Now let’s put it all together!

Edit this entry example:

Close this comment example:

Make your own

The possibilities of inline editing are nearly infinite. To create your own custom solutions, here’s what I recommend.

1. Visit the area that you want to link to in the control panel
2. Analyze the URL of where you are in the CP
3. Determine which variables in the URL need to be filled in dynamically
4. Search the documentation for the variable you need. Hint: the CP’s variables are typically the same variable names you’ll use to generate the content (weblog_id = {weblog_id}).
5. Add conditionals that you need to limit access to these links. Generally, logged_in_group_id is what you’ll use, but there may be other functionality you need.
6. Assemble your URL and test it on an obscure page or a test template. If it works how you need it to, then push it live.