I was sure the pixel-dense screen would take the websites we’ve built and peel back their layer of pretty, revealing something less than perfect (like HD cameras did to sitcom actors). Was this layer we’ve so painstakingly designed, sliced, exported, and built stylesheets around really so thin? Just before the screen lit up, I realized this was nothing new. For the first time, I saw the Internet for  what it really is—a tall, lanky junior high kid who is pissed at the world because he just got done being a short, fat grade schooler.  It’s never just right. Rather than grow proportionally and gradually,  it hits terribly awkward spurts that throw everything off balance.

So, how will the retina change the shape of the web, and do we need to rush to update everything we’ve ever built? Of course not, part of building for the web is accepting that everything is in a constant state of flux—there isn’t enough time and money in the world to “fix” the internet every time a company releases a new technology. Instead, we cling to sensibility by seeking a middle ground and building things with the future in mind. Here are a few specific things I’ll do (or continue to do) as screen resolutions evolve:

Rely on web type & CSS.

We’ve always wanted better rendering for web fonts, and seeing type on a pixel-dense screen for the first time is mind-blowing. It’s also a validation that our commitment to making great type happen on the web without image replacement has paid off. Retina exposes those places where images are used rather than HTML text or CSS. Next to the ultra-crisp text that CSS + HTML render on retina, those fuzzy spots around image buttons and letters tend to stand out. For comparison, here’s a retina iPad screenshot of a button exported as an image, then rendered with web type and CSS (minus the dot texture):

I recently wrote that seeing how blurry the sprite icons on this site looked next to retina text pushed me to get to know font icons better. The advantages are numerous, namely how easily scalable they are and how quickly we can re-color or transition them with CSS. Using font icons whenever possible seems like a low-risk investment. Especially when implemented with care.

Images shouldn’t all be doubled in size...

unless, perhaps, you’re serving images as amazing as NASA. It might make sense to use media queries to target pixel density for handling things like background images in CSS, or even look to Retina.js to serve larger images to high-resolution displays, but should we always do it? As designers who’ve learned that every millisecond counts for load times, we can’t assume that just because someone is browsing from a retina device, they want to download 2x the image assets. Alongside that, there are a lot of smart people working on responsive images, and perhaps the picture element will prove to be the most sensible method, at least for inline images.

Of course this is subjective, but I’d say that for the most part, even 72dpi images (photographs, textures, and illustrations) look better on a retina display. Now that we’ve been using fluid-images and CSS background-size for responsive sites, when those images display even a little smaller than actual size, those smushed together pixels actually continue to shine through on retina. So, perhaps it doesn’t always have to be about serving uniquely-sized images to each device. In many cases, I think loading images that are just a bit better will go a long way. Make images a few percentage points (not 2x) larger, then optimize the hell out of them.

A pixel is still a pixel.

At least it is as far as I can tell. I’m sure I’m not alone in saying I’m scared when I think about how pixel densities across multiple devices will impact web design, but I have to say that everything I’ve seen thus far puts me at ease. Right now I am staring at a 1 pixel line drawn with CSS on a retina iPad and an iPad with an older display. They look the same. I’m not saying there’s not a lot of work to be done, just that I’m relieved to see that device makers seem to be doing quite a lot of it. Likewise, if we rely more on CSS than image exports, I’d say we’re doing our part.

So, that panic button? It gets to go back into the drawer for another occasion. Sure, the internet’s clothes are going to fit funny for a while as it figures out how & where to put all those extra image KBs, but we’re going to be okay. These are awkward times, but rejoice. We all get to play the role of the guidance counselor: having discussions, writing specs, and building tools that continually reshape the web into its full potential.

The Last Rocket is available in the iTunes store. You can also listen to & donate/download the soundtrack.

Carefully planning trips and restaurant destinations beforehand can work, but none of the restaurants I named were on our list until we started polling locals and wandering around. Locals know better than Yelp, Food TV, and even Google. That’s why I love Goodfoot.

A collaboration with Matt Thompson from Gowalla, Paravel’s first iPhone app, Goodfoot, sorts the most popular Gowalla spots (restaurants and otherwise) based on repeat user checkins, then displays them by walking, biking, or driving distance. Goodfoot happily relies upon the power of the Gowalla API, so be sure to remember to checkin when you’re at your favorite places.

Next time you’re headed on a trip, do yourself a favor and be sure you’ve got the app on your phone. After all, it’d be a shame to travel all those miles and find yourself stuck on the main drag or eating at a chain restaurant that can be found 5 blocks from your home. Travel well! Get on the Goodfoot!

In the future I’d love to be able to comment & like photos from outside my iPhone. I’ve also noticed that the pull to refresh iphone gesture has now been ingrained in my multi-touch skill-set, so that would be nice as well. You can download Instagram for free at the App Store.

A few days after Steve Jobs announced the release of the iPad, I read that in Apple’s Reference Library: Preparing Your Web Content for iPad, and started to realize the drastic implications the evolution of multi-touch would have on interaction design. Anything we design for the web that requires a hover state has an uncertain future and could be subject to serious usability issues.

The Touch-Screen Boom

If you think this is something that can be addressed later, when multi-touch “catches on”, consider this: as of June 22, 2010 Apple has sold 3 million iPads in 80 days, 1.03 million touch screen phones are sold per day, and companies like Dell and HP have been developing & releasing touch interfaces for tablets and laptops for quite a while now.

The Hover Crutch

Hover states are everywhere. I don’t think I’ve ever written a stylesheet or designed a site without putting a significant amount of thought into how they should behave. As users, we’ve been conditioned to rely on hovers states to trigger changes in link color, reveal action items, and navigate through multiple tiers of a drop-down menu. Sliding our mouse pointers across a page to reveal hidden clickable points of action has become an automatic addition to our web browsing skill-set. As designers, we’ve turned to hover states to accommodate extra content and allow visual aesthetics to trump usability. Like it or not, those days are over and the interactions we design are going to have to stand on their own two feet.

I believe that in most cases, the best solution isn’t pursuing alternatives such as multi-touch hovering technology, trying to adapt hover-dependent designs, or transforming your website into an iPad/iPhone application. Instead of adding scripts, kilobytes, and billable hours to treat symptoms, I think the focus should be on simplicity and bullet-proof user experience design. In line with Luke Wroblewski’s statement that we should start designing for the web mobile-first, I propose that we should be designing for Multi-Touch first, and moving forward, we can only afford to add hover states as enhancements only.

Try to Avoid

• Hyperlinks that aren’t 100% obvious
• Javascript tooltips that show important information or metadata
• Displaying action items on hover. Examples I’ve seen typically involve edit / delete items.
• Displaying graphics in a less-than-ideal state until hovered: all those semi-opaque or black & white screenshots and photos that only display full color when covered by a cursor
• Drop-down menus. While some of these can be revealed on click or tap, be sure the user has cues that show those options.
• Focusing too much on hover dependent CSS3. I know it’s a bit of a heartbreaker, but while these have always been seen as enhancements, we’re going to have to settle with the fact that multi-touch users won’t be seeing our fancy transitions.

How do we adapt?

More often than not, making adjustments won’t be a quick or a simple process. The more layers of interaction a site has, the more work is going to have to be done to address usability issues. I’ve noticed that a few of my favorite sites have already taken a variety of steps to provide some fixes.

Show everything.

Prioritize your content, and if you’ve been hiding things behind hover states, make room to display them. The WordPress admin posts screen is a great example of this. Normally, action items are only visible on hover, but if you login with a touch device the links are always displayed.

Utilize tap to reveal a hover state.

Depending upon the implementation, this can be risky; Amazon has done fairly well with this method for their category-based shopping navigation. The paneled list and orange arrows help to make those areas clearly tappable. Another example can be found in Basecamp’s edit and delete controls for to-do lists, milestones, and files. When you hover over one of these the action items appear. For touch-screens they’ve built a javascript popup that works fairly well once you’ve figured it out. The problem is that users get no cue that tapping the to-do text is even an option, and I can’t help but think a solution similar to WordPress would have worked better. That being said, I’d happily pay a few extra pennies per month to get a mobile version of Basecamp.

Build specifically for touch-screen devices

and take advantage of native device controls, gestures and popovers. Touch-screen apps for Twitter and Gowalla play a key role in their overall success and are probably used more than the websites themselves. I use the Netflix iPad app regularly, but in many cases it feels like a hover-dependent website dropped into an iPad viewport. Currently, if you’re browsing instant titles and want to add something to your queue by tapping, you’re looking at a 3 step series of taps instead of an instant hover reveal option with a point-and-click interface. If you’re going to build specifically for touch, you’ve got to follow through.

Wait for touch hover technology.

I’m not convinced this would do anyone any good. It may be exciting to see what Cypress has come up with, and to know that Apple has applied for a patent for a proximity sensing touch-screen, but this does worry me. I’d hate to see us revert to our old shortcuts and make user experience sacrifices just because the technology is in place. Plus, we’re going to look like a bunch of idiots who are afraid to touch our smart phones & iPads. On the bright side, Phil Dunphy would love it!

We’re going to be OK.

Ultimately, I think seeing hover states fade away will make the web a better place. There never has been any substitute for concise content, clear interaction, and simple design. If we focus on core elements that make browsing the web great, our sites will function properly no matter how people use them.

Shaun is now tumbling the innovation at blog.mimeoverse.com. Check it out and save your pennies for what I think will be an epic multi-touch game.

For years, web designers have been working within a firmly established jig. Books have been published, studies have been conducted and businesses have been built on a handful of fundamental interface design principles. Many of these rules have been written based on the understanding that a mouse will be serving as the primary tool in carrying out the user’s will. What happens if this lowest common denominator for user interface design is replaced with a finger tip? Multi-touch technology will soon change the web more CSS3 or even HTML5.

Mouse Clicks VS Finger Tips

If I squint, I can get my mouse pointer accurate down to a single pixel. The tip of my right index finger measures 30px X 40px. That makes my finger 1200 times less precise than my mouse pointer. Does that mean that multi-touch technology is a step backwards? No. After all, user interface design is all about making things easier and more natural. Multi-touch does this by removing the middle man, in this case a mouse & cursor. Any gripe people have with multi-touch as it grows won’t be because they miss carefully positioning a mouse pointer to click a link. It will be because web designers have crammed too much on a page, or made link buttons too small for fingers to easily tap.

Scrolling VS Zooming & Tapping

Until now, websites have moved vertically, like a filmstrip, through a browser window. This specific linear method of engaging content has made a web designer’s job relatively easy. Counting on the fact that users are limited to scrolling from top to bottom while viewing the entire width of the page, important items can be placed at the top of the page (above the fold) while additional content can be arrayed below, or in a sidebar. With multi-touch, DIVs are the new fold. Being able to tap on a section to zoom in will allow users to focus only on the content they want to see. This quadrant based page browsing will make skipping over uninteresting content & advertisements much easier.

Multi-touch VS Mobile VS Standard

These are two very different areas of interface design that have a lot in common. Many of my iPhone apps already cater to finger tips with their big buttons & super simple navigation. So this begs the question, do we need to design a mobile and a multi-touch version of a website? I don’t think so. I think the core structure of what the regular version of a website will need to adapt to fit fingertips, which means everything will have to be redone, re-imagined... re-figured out.

A Change in Posture

During the Apple Keynote, Steve Jobs wasn’t hunched over a desk pecking characters into a keyboard. He was sitting on a couch, casually flipping through content on his iPad. To an extent, web design has been all about what we want users to see and when. We’ve been orchestrating the user-experience from click in to click out. With multi-touch the tables have turned. With a brand new set of gestures, users will be calling the shots as they tap, swipe, pinch and zoom. It will now be up to the web design community to study up & do their best to follow along.