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

If you’re sorta thinking, “huh? You mean like, blind and deaf people Accessibility?” then you’re not alone, because I’ve come to understand that there are lots and LOTS of people just like you: people for whom this idea does not have the right Accessibility, so it hasn’t been able to get through to you yet. It’s not your fault for not understanding, any more than it would be your fault for being blind or deaf or motion-restricted or living with any other disability. When software — or idea-ware for that matter — fails to be accessible to anyone for any reason, it is the fault of the software or of the messaging of the idea. It is an Accessibility failure.

You can read the entire post here.  I’d love to see some of the changes he suggests implemented at Google.  I hope he is put in a position to help make these changes.

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.

According to TechCrunch:

“Beyond the quality assurance process, LinkedIn is also limiting the flexibility apps will have when it comes to monetization. Apps won’t be allowed to use third party ad networks – instead, they’ll have to work with LinkedIn’s ad system. For now applications will only have access to LinkedIn’s current ad inventory, which could make targeting ads less effective (though it sounds like there will be more options for targeted ads in the future).”

I’ve always thought the elevator pitch for LinkedIn was “a Facebook for work.” This solidifies the metaphor. I wonder how many newspapers would be interested in creating LinkedIn widgets?

Wanna place bets on how soon the Wall Street Journal launches a LinkedIn application? Or Monster.com? BaseCamp? I’m guessing pretty soon.

I’ve already installed a Slideshare.net application showing my most recent mobile presentation. The Slideshare application is a pretty simple one, but cleanly designed.

You can see it here on my profile.

Current available applications (at the time of this post) are: Slideshare, Box.net, Google presentations, Amazon reading list, WordPress, Blog Link, Company Buzz, My Travel and Huddle Workspaces.

The applications FAQ can be found here.

What applications do you think would make the biggest impact on LinkedIn’s platform?

Justine and I attended BarCamp Houston at the Houston Technology Center yesterday and had a great time. A big thanks to all the organizers (Marc Nathan, Kelsey Ruger, Josh Tabin, Scott Stolz). You guys made the event a smashing success for everyone. And thanks to all the sponsors for helping to make BarCamp Houston possible.

For those who don’t know what BarCamp is, here is a brief explanation:

BarCamp is an international network of user generated conferences — open, participatory workshop-events, whose content is provided by participants — often focusing on early-stage web applications, and related open source technologies, social protocols, and open data formats. – Wikipedia

This can be simplified to “day camp for nerds.”

I watched some great presentations and participated in some interesting discussions throughout the day. BarCamps are only as great as their participants, and we had some great participants this year.

Ed Schipul’s presentation on PR and social media was sharp. His creative use of a green laser pointer kept the crowd in line (as much as possible) as he explained how to “put the relations back in public relations” using social media. It’s a pleasure to watch a pro on stage engage the audience as well as Ed does.

Josh Tabin spoke about how start-up funding works. I found his discussion about the ins and outs of financing to be pretty enlightening. I left the discussion knowing a lot more about how start-ups make that initial leap into businesses.

Tracy and Imelda whipped up an impromptu discussion on digital photography and social media. I’m pretty sure there should have been a cover charge for the room and IDs checked at the door. Tracy had the room in stitches for a solid 30 minutes, while feeding them great advice for managing their photos in Flickr.

Katherine Druckman also jumped into the mix with an impromptu presentation about Drupal, the open source content management system. The crowd had lots of questions and she fielded them like a pro.

Wynn Netherland and Jim Mulholland from Squeejee.com gave a great presentation on virtual collaboration tools. I’ve gotten used to keeping much of my work “in the cloud” and Wynn and Jim did a nice job of rounding up the most useful tools for working with teams spread across the globe (they even did their presentation live on Google Docs. Cool.)

Here’s a photo of the schedule board in the lobby. A little something for everyone.

My own presentation about mobile web design & SMS went pretty well (at least I think so…it’s hard to gauge while standing behind a podium). I used a live SMS poll to determine how the crowd used their phones the most (talking, email, text messaging or mobile internet). Email and WAP came out on top, which isn’t surprising given the technologically savvy crowd at BarCampHouston. (Screenshot of the BarCampHouston3 mobile poll results.) I also posted some photos on Flickr yesterday.

(Update: I just found out my presentation deck was featured on the homepage of Slideshare today! Woot! Here’s the screenshot.)

Have a great Sunday, everyone!

P.S. – Bill Shirley posted a nice BarCampHouston update, too. Check it out.

P.P.S – Steve Evatt also recapped BarCamp Houston and took some cool photos as well.

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.

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)

From TechCrunch:

Unlike Amazon Web Services’ loosely coupled architecture, which consists of several essentially independent services that can optionally be tied together by developers, Google’s architecture is more unified but less flexible. For example, it is possible with Amazon to use their storage service S3 independently of any other services, while with Google using their BigTable service will require writing and deploying a Python script to their app servers, one that creates a web-accessible interface to BigTable.

Are there enough differences for both services to exist or will there be a knock-down, drag-out fight in the near future. It’s hard to beat Google’s “hey, kids, our dope is free…for now” model.

It should be interesting to watch this unfold.

- Dave