Lately I’ve become fascinated with responsive web design, a technique that presents a more flexible website capable of conforming to the device you happen to be using at the time. A responsive website will be optimized for desktops, tablets and mobile devices. This is more complex than you might think at first, because many touch screen devices (like iPhones and iPads) have two different screen orientations: portrait and landscape.

There seems to be some debate in the web design community regarding exactly how this flexibility can be accomplished. However, there isn’t much debate about its usefulness. One platform served to many devices is the holy grail of publishing.

I won’t try to tackle that debate in this blog post, but I will show you some of the most useful tools and resources I’ve found in my own research. Here are some of the best resources I found for responsive web design:

1. Ethan Marcotte’s A List Apart article on responsive design kicked off the conversation about this technique. He discusses CSS media queries to determine screen size and enabling and disabling floats with that technique. This was the earliest resource I could find on the subject of responsive design. Ethan also wrote the first book on the subject, called “Responsive Web Design.” He also helped redesign the Boston Globe’s website to use responsive design principles (from my screenshots above). You should visit Bostonglobe.com and play around by resizing your browser to see it in action.

2. Jason Grigsby, VP at Cloud Four, a Portland company specializing in mobile & web solutions, wrote several great blog posts about responsive images and the challenges that surround them. You can find the series of articles broken into several parts (part 1, part 2, part 3). These articles cover some of the basics of responsive images, like delivering the mobile image first and upgrading to the desktop image when appropriate to conserve bandwidth for the user. He also links to several good articles on how to handle video embeds, data tables and third party widgets (ie. Twitter, etc) in a responsive way.

3. Think Vitamin’s “A Beginner’s Guide to Responsive Web Design” is a great place to start if you’re looking for a quick overview of the concept. The article covers fluid grids, media queries and some additional resources as well.

4. DesignMondo’s 50 examples of websites using responsive design – this blog post is a great place to see a nice sampling of websites using responsive design. The screenshots show details of how the sites change in desktop, tablet and mobile devices (in portrait orientation). DesignMondo also has another great post about tools and services that will help you create, test and implement a responsive design. One of my favorites is ScreenFly, a quick and easy way to test your design in multiple devices and orientations (portrait vs landscape). It’s free and useful for testing a lot of devices quickly.

5. Smashing Magazine’s “Responsive Web Design Techniques, Tools and Design Strategies.” As with most Smashing Magazine articles, this one is very thorough, but probably not a good starting point until you know a little more about all the components of responsive design. For instance, there is a very useful link to an article on how to debug CSS media queries. However, you would need to know what a media query is before you learn to debug it.

6. WordPress and responsive design. There is a great 30min video by Sara Cannon from Wordcamp San Francisco 2011. If you use WordPress (and I do) you’ll want to watch this short video to see how you can adapt your WordPress blog to use responsive design techniques.

7. The HTML Boilerplate – This is a free template using HTML5 and some responsive design techniques. If you want to play with HTML5 responsive design, you can download the code from their Git repository.

There are many other resources available for responsive design. However, I found these to be the most useful. If I’ve missed any that you think should be on the list, please feel free to post them in the comments below.

Thanks

1. Do nothing.
2. Build a separate mobile site.
3. Build native mobile apps (iPhone, Android, etc)
4. Convert your standard website to use responsive design

1. Do nothing. A lot of small to medium sized publishers present their standard desktop website to mobile browsers with no display changes whatsoever.  Usually this is because they don’t have the time, resources or knowledge to deal with it. However, that isn’t always a bad thing.  If their website is mostly text-based, it won’t look too bad in a modern mobile browser.  Most mobile browsers (I’m talking about Android, iOS, Blackberry, etc) will handle text-based sites pretty easily.

David Eggers‘ popular McSweeney’s website is a good example of this “do nothing” strategy.  They present their standard website to mobile browsers and then prompt you to download their iPhone/iPad app. This is mostly likely a sales/marketing decision for McSweeney’s – as pinching and zooming in a mobile browser isn’t much fun. However, I could purchase their weekly articles inside their iPhone/iPad app for a much better user experience.  I suspect this “do nothing” strategy for their desktop content prompts many of their fans to do just that.

2. Build a separate mobile site.  Many large publishers (as well as smaller tech-savvy publishers) fall into this category.  In most cases, when a reader visits the publisher’s standard website with a mobile browser, she is automatically forwarded to the mobile-friendly site.  This option isn’t as easy as the “do nothing” approach, but it’s not much more difficult.  Finding the right mobile vendor or the right mobile publishing plugin to make this happen isn’t as difficult as it sounds.  Many newspapers and magazines relying on advertising as their main source of revenue decide to go this route for mobile devices.

Many blogging platforms like WordPress and Blogger have easy-to-install plugins that do all the heavy lifting in this case. There are also services like MoFuse that will take a simple RSS feeds and create a mobile sites on the fly.

3. Build native mobile apps. More and more publishers are opting to build specific iOS and Android apps for their content.  If done well, this can be a great experience for the reader to engage the content in ways that a browser wouldn’t previously support.  It can also be another source of revenue if they decide charge for the app (or content within the app) as the New York Times has done with their mobile subscription service.  This is a difficult option for smaller publishers because mobile application development is very expensive right now. Publishers that can afford to drop tens of thousands of dollars on a app will also need to update the app on a frequent basis when Apple and Android periodically release new versions of their operating systems.

The cost of building and maintaining native mobile apps put them out of reach of many small publishers.  (Although, that is changing as more and more mobile app developers are charging a smaller monthly fees or even revenue sharing for mobile apps as the market becomes flooded with mobile developers.)

Native mobile apps also reach a smaller percentage of the public (those who use smart phones), than the mobile web. Because of this, I think this option is best paired with a mobile-friendly website to reach the widest audience.

4. Convert your standard website to use responsive design techniques. Responsive design is a fairly new concept in web design.  It works by determining what kind of device you are using to access the website and delivering content best suited to that device.  If you are using a desktop browser, the site will deliver a content-rich site with photos, video etc.  If you are using a smart phone, the site will scale that content to fit your screen and bandwidth limitations.

There are pros and cons to this strategy. Unfortunately, the concept is so new we don’t have a lot of data to measure the success yet.  On the pro-side, a publisher only has one site to manage and one content management system on which to train their staff.  There isn’t a separate mobile site or separate apps to worry about marketing, etc. On the con-side, building a website with responsive design techniques seems more difficult than building a standard desktop website. Ethan Marcotte recently redesigned the Boston Globe to use responsive design principals. This is one of the first major publishers to experiment with responsive design and I am eager to see how they fair in the coming months.

I hesitate to say that responsive design is the best option available, but it certainly seems like the most efficient way to deliver optimized content to any device, regardless of screen size or bandwidth connection.

I think it will eventually become a very popular option for publishers and will keep my eyes on the Boston Globe to see how they fare.

Douglas Bowman, the visual design lead at Google, recently left his post to pursue greener pastures. In a farewell blog post, he cited a profound reason for leaving (emphasis mine). You can read the entire post here.

Yes, it’s true that a team at Google couldn’t decide between two blues, so they’re testing 41 shades between each blue to see which one performs better. I had a recent debate over whether a border should be 3, 4 or 5 pixels wide, and was asked to prove my case. I can’t operate in an environment like that. I’ve grown tired of debating such minuscule design decisions. There are more exciting design problems in this world to tackle.

From an engineering perspective, testing multiple colors, recording outcomes and making sound empirical judgments makes all the sense in the world.  If this is done correctly, eventually you will end up with the most effective design implemented.

However, from a design perspective, this tactic may be lacking some things the design world relies upon on a regular basis.

Intuition

Like master mechanics who are able to diagnose many car problems by simply listening to the engine, seasoned designers can solve web design problems in a similar fashion.  They can look at an obstacle or task and solve it almost instinctively.

They could, of course, perform user experience testing to dissect the problem and solve it in a very methodical way.  However, accumulated years of design experience give them an almost intuitive knowledge to see the most effective solution without much testing at all.

Serendipity

These are the beautiful accidents that designers stumble upon when looking for something else.  They may be attempting to solve a complicated navigation issue and stumble upon a great idea for handling web forms.

The world of technology and invention is rife with happy accidents that have created new products or changed humanity in some significant way.  A vital part of the creative process is lost when designers are forced to operate in a rigid environment that relies heavily upon empirical engineering data.

Could these happy accidents still occur in an environment like this?  Probably…

However, I think it is much less likely to happen.  And when it does happen, it is more likely to be ignored because the idea has not gone through the rigors of testing yet.  Or perhaps the idea was so different it didn’t get the consideration it deserves.

Google was built by engineers and has become the largest property on the internet due to the policies and guidance from these early engineers.  It would be silly to say their method of design doesn’t work.  However, this environment might not work for everyone…especially creative people who need to challenge themselves with big ideas and sweeping changes.

So, designers, what do you think?

A List Apart article explaining the survey.
Link to the 2008 survey.
Results of the 2007 survey.

Thanks!

Every now and then incomplete web content gets launched completely by accident.  I call this nausea-inducing act “bumping into the mouse trap” because it always takes longer to gingerly reset the trap then it does to trigger it.

Oh, and there is usually a lot of flinching involved.

It usually starts with someone noticing a new design live on the website – weeks before the scheduled launch. This person will usually turn to the person in the cube next to him and says “hey, did we launch early or did someone slip on a banana?”

Within a few seconds you’ll usually see another designer or developer who is clearly turning pale, stand up in his cube and utter a string of expletives.

“Uh, guys.  I think I just [expletive] pushed the [expletive] new redesign live by accident.  How quickly can we [expletive] roll it back?”

The solution could be as simple as replacing the wrong files on the server with recently backed-up versions.  (You *did* make back-ups of your work, right?)  If so, no harm, no foul.

However, the situation always gets more complicated the more pieces you have involved.

For instance, your position becomes much more complex if you happen to use a combination of flat files, databases, content management systems, distribution networks, automated data feeds, vendor APIs and advertising platforms (like we do).  A mistake could interact with any of those things, compounding your problems in a big way.

Fixing these issues becomes much more complicated and usually involves several different people (and skill sets) to fix.

We’ve done our share of “bumping into the mouse trap” with varying degrees of impact.  We usually recover gracefully with little disturbance, but every now and then someone notices just as they did when Twitter bumped into the mousetrap earlier this week.

I’ve always wondered if other companies suffered these same accidents.  With a touch of schadenfreude I was genuinely happy to see Twitter prematurely launch an incomplete redesign earlier this week.

It makes me feel a bit better knowing we’re not the only ones to drop our pants in front of a few million people by accident.

Have you survived any launching blunders like this?  If so, let me know in the comments.

When I first started exploring web design and journalism nearly 10 years ago I thought paper prototyping was silly.  Paper…really?  Web design was beyond paper, I scoffed.  I used the cutting-edge design tools like Photoshop 5 that actually let me edit text on the page (a huge upgrade from Photoshop 4 that featured a quaint-but-clunky text editing panel).

Who needs paper when you can push pixels on the screen, right?

Well, it took a few years to sink in, but I have since changed my mind.  I rediscovered paper several years ago and now find it much easier to sketch concepts and ideas in a notebook.  Nothing beats paper for speed.  I can flip open a notebook and jot down an idea much faster than using a computer or PDA.

Don’t get me wrong, I love computers and gadgets as much as (if not more than) the next guy.  But paper still rules the initial stages of design for me.

Why do I bring this up?  I found some great early-stage paper prototypes on Flickr recently.  You will probably recognize a few of them.  Several of them are now extremely popular, with millions of users each month.

For me, seeing these sketches is like seeing the notes of a mad scientist after he’s built a giant robot or a glimpse into a wizard’s magical tome.  They probably didn’t realize these hand-scrawled sketches would eventually turn out to be blueprints for success.  Hope you enjoy them.

Prototypes:

Photo of Jack Dorsey’s original sketches of Twitter (Stat.us).
Dan Catt’s original sketches of Flickr Places.
Sockyung Hong’s sketch for Vimeo profile pages.
Beth Goldman’s sketches of several Quicken screens.

Notebooks:

Large plain Moleskine reporter. (my favorite).
Pocket ruled Moleskine notebook. (great for travel).

Wow. I have been drinking from the fire hose of information for the past two days here in New Orleans at An Event Apart. The conference was organized by Jeffery Zeldman and Eric Meyer and according to the website:

“Their new conference wouldn’t be just for designers. It wouldn’t be just for coders. Attendees would gain a deeper understanding of web standards, of course. But they would also encounter a world of emerging best practices and inspiring new ideas.”

I didn’t know what to expect. Would the code be over my head? Would the design be beyond my skills? Would I be able to grasp the conceptual nuggets they would throw? I mean, these people are the best in the industry.

They’re internet famous, right?

As it turned out, each presentation was amazingly clear, surprisingly understandable and completely worth the price of admission. The difference between the presenters at An Event Apart and your run-of-the-mill web experts is an overwhelming sense of passion for their craft. Some of the highlights for me were:

Andy Clarke‘s astute observation about how comic book design can be transferred to the web to control pace and user engagement was refreshing, if not brilliant. It was one of those ideas that made me whack my forehead and wonder why I hadn’t thought of that. Andy’s a smart fellow. I added his blog to my feed reader immediately.

Brian Oberkirch, beyond being an extraordinarily nice guy, has an uncanny grasp on what humanizes the web. His talk Thursday afternoon was a lot like eating really good dim sum. I was filled with delicious savory tidbits about how sites can create human connections and positive social interaction with their users. Not shallow marketing, but real connections. The web would be a better place if more people listened to Brian.

I thought Eric Meyer’s CSS presentation, if any, would be the one that stumped me. I am, by no means, a CSS expert; and I feared his material would be tailored for people with more experience. However, Eric did such a good job of presenting his material in a way that made it easily digestible. I took away some very useful tidbits about how to use CSS to debug your markup. Very handy stuff.

I had never paid much attention to how beautiful data & information design could be until Jeff Veen spoke on Friday. His slide showing Google searches throughout the world as pinpoints of light on a globe was amazing. He spoke about data like some artists speak about color or texture. Data is simply another artistic medium.

Robert Hoekman Jr switched things up a bit. He did live usability assessments for people in the audience who needed some help with their sites. Usability issues fascinate me and Robert was very good at recognizing usability issues with a short glance at the site in question. I plan on checking out his book.

What can be said about Jeffery Zeldman that hasn’t already been said? Jeffery is the patriarch of web standards and has been fighting the good fight to make the web a better place for designers, programmers and users alike. He addressed a room full of designers as Yoda addressed his Jedi. Use your powers for good He was also very humble and approachable, something I hadn’t expected.

Here is some additional information about the speakers at An Even Apart 2008 in New Orleans:

Andy Clarke – Author, Transcending CSS
Dave Shea – Co-author, Zen of CSS Design
Cameron Moll – Author, Mobile Web Design
Jeff Veen – Design manager, Google
Brian Oberkirch – Publisher, Like It Matters
Aaron Gustafson – Co-author, AdvancED DOM Scripting
Stephanie Sullivan – Co-author, Mastering CSS with Dreamweaver CS3
Aarron Walter – Author, Building Findable Web Sites
Robert Hoekman Jr. – Author, Designing the Obvious
Jason Santa Maria – Designer, Happy Cog
Eric Meyer – Author, CSS: The Definitive Guide
Jeffrey Zeldman – Author, Designing With Web Standards

If web design, development and standards interest you then I would recommend checking out An Event Apart. I had a blast and hope to attend again in the future. It was good to hang out with Tim and the rest of my pals from BarCampNOLA in New Orleans.

Hope to see you all again soon.

Google released their Website Optimizer platform last week for general use. It has only been available to sites using Google AdWords in the past, but now can be used by anyone to enhance site performance. This is great news for web analytic junkies, usability testers, developers and designers alike.

In a nutshell, Google’s Website Optimizer allows you to test multiple versions of content (ie. marketing messages, logos, icons, copy, etc) in a live environment to determine which combination of content yields the best results.

Based upon what you are testing, this “result” could mean higher click-throughs, increased product sales, increased product downloads, increased ad revenue, higher traffic to internal pages, etc.

This eliminates the guesswork of testing ad placement, site designs, product purchase flows, etc. You can simply release multiple versions of your content and look at the analytics to determine which one is yielding the best results.

There are certainly other tools to do the same job; but not many are free or this simple. We could certainly do the same thing at the Chronicle, however we would have to use several systems to make it happen. This simplicity of using one system appeals to me.

Here are some links to get you started with Google’s Website Optimizer:

Google Website Optimizer
Google Website Optimizer blog
Website Optimizer press release

(via Web Worker Daily)

Adobe launched the web-based Photoshop Express recently and I’m trying to figure out if it’s any better or worse than Flickr’s  (picnik.com) web-based image editing tool.  Adobe offers 2GB of storage, which is better storage than the free Flickr account, however, Express isn’t meant to be a photo sharing site like Flickr.

The functionality isn’t terribly interesting yet, but image editing is Adobe’s bread and butter, so I would expect the functionality to grow in the coming months.

The one immediate limitation I noticed is the requirement of Flash Player 9 to run the Express.  I tried visiting the site with my current version of FireFox  and got a blank screen.  I suspected it was a problem with my version of Flash player.  When I upgraded my Flash Player to the current version (9), it worked fine.

I hope Adobe continues to build on this platform.  It’s an interesting idea and this space could use some decent competition.

Photoshop Express (via Bittbox)

The first day of South by Southwest was great.  I met a bunch of cool people from all over the United States who are possibly nerdier than I am.  Very cool.

There is a small area of the convention center filled with LEGOS called the “Interactive Playpen”

I posted a few photos here.

The highlight of the day was hearing Jeffery Zeldman and his crew at Happy Cog.  Hearing Zeldman speak is like hearing Yoda address his cadre of young Jedis.

Mmm…wise designer he is.