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

Like most mornings, I opened iTunes today and noticed I had a few apps that needed updating – 8 to be exact. I immediately noticed that all 8 of the app icons were a shade of blue.

All 8 of them.

I’ve mused about this before with some designer friends, wondering if there were a psychological reason app developers use blue in the icon so frequently.  Nobody had a good explanation for this oddity.

I have a total of 168 apps in iTunes and 57 of them (34%) are blue.  (Note: I did not count apps that simply contained blue like the Flickr app with its blue and red dots.  The app needed to be mostly blue in order to be counted…like the ones in the screenshot above).

I can only imagine that, like the color of cars, the color of an app icon probably has something to do with what the personality of the app…or a feeling the app developer wants to convey to the user.

If you know of any research (psychological or otherwise) I’d be interested in reading it.

What percentage of your apps are blue?

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?

Which toolbar would you rather use?

(Image credit – http://dezignus.com)

I think we’ve forgotten something recently.  I think we’ve forgotten how easily social networks allow us to connect with unbelievable speed and accuracy.

There was a time when connecting with old high school or college friends meant contacting your reunion coordinator.  Sending emails.  Phone calls.  Snail mail.  Or worse yet, actually attending a reunion (I’m joking…sort of).

Now, we are able to locate old friends with Facebook accounts in 5 minutes during a coffee break.  One friend leads you another – and down the rabbit hole you go to find dozens more by accident.

Well, not really by accident.  It seems like synchronicity when you stumble upon a friend through another friend’s Facebook account, but it’s not luck at all. It’s good design.

A new speed

So what if we could take this speed to the next level?  What if we could temporarily connect with individuals involved in specific events while they are actually happening?

Yes, we have the ability to peer into blogs, Twitter streams, Brightkite check-ins, Flickr photostreams, etc.  But there isn’t a mechanism to allow us to connect with hundreds or thousands of people at once.

I am talking about something like the Emergency Broadcast System, but using a temporary two-way communication instead of a one-way communication.  Since it would operate over the internet (and not the airwaves) targeting could incorporate very detailed geographic information.  It would need to operate across multiple social networks to incorporate as many users as possible.

Is this a crazy idea?  Probably.  Ok, absolutley,  but think of the amazing life-saving information it could facilitate.  Think of it as crowd-casting at the microscopic level with with gateways to networks opening and closing when needed.

What do you think?

(The photo above is race car driver Bob Burman, from the Library of Congress.  He drove in the inaugural Indianapolis 500 in 1911.)

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?

We had a great time in Austin, TX over the weekend at the Maker Faire. I took the video above at the Robogames in the indoor arena of Maker Faire.

I posted a few photos and videos on my Flickr account if you’re interested in seeing a little more.

Enjoy.

It’s that time of year again: Maker Faire Oct 18 & 19 in Austin, TX!

Steve, John, Justine and I went to Maker Faire 2007 in Austin and had so much fun, we decided to go again this year.

Maker Faire is a two-day, family-friendly event that celebrates the Do-It-Yourself (DIY) mindset. It’s for creative, resourceful people of all ages and backgrounds who like to tinker and love to make things. So much to see, you will need 2 days to see it all!

Here are the details if you’re interested in going.:

• Online tickets – discount pricing available through 10/3/2008. Online ticket purchases from 10/4/2008 – 10/16/2008 will be full price and tickets will be picked up onsite at will call
• Local tickets – discount pricing available through close of business day on 10/17/2008 at:
  • Austin Children’s Museum – 201 Colorado Street, Austin 512.472.2499
    Open: Tuesday – Saturday: 10am-5pm
    Community Night Wednesdays: 5-8pm
    Sunday: Noon-5pm
  • Whole Foods – 525 N. Lamar, Austin, 512.476.1206
    Open: 8:00 a.m. to 10:00 p.m. seven days a week
• Onsite Ticket Pricing
  • Adult – $25.00
  • Student (13-21, or with student photo ID) – $15.00
  • Youth (4-12) – $10.00
  • Children 3 and under are free

Let me know if you’re going.  Maybe we can meet for lunch or at the very least, fire rockets at each other.

The Android mobile platform has it’s own font.  According to a recent Forbes article:

The font, dubbed Droid, is the product of a two-year collaboration between the Mountain View, Calif.-based Internet giant and Ascender, a digital typeface company based in Elk Grove Village, Ill. Ascender, which has created fonts for Microsoft, Motorola and others, nabbed the Android assignment because its workers knew people on Android’s design and development teams, says Bill Davis, Ascender’s vice president of business development.

You can download the font here.

I think they did a nice job on the font overall.  There are a couple different versions including serif and monospace as well.  You can see them all here.

(via ComputerLove)