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.

I purchased a book tonight for my Kindle with Amazon’s One-Click delivery, a service that makes buying a book literally a one-click operation.  However, the credit card that was associated with my account was expired.

Amazon delivered the book to my Kindle anyhow.

After I received the book on my Kindle I received a separate note (and an email) explaining there was a problem processing my credit card.  Amazon asked me to log into my account within the next 5 days to pay for the book…that they already delivered to my Kindle.

“Though your order may have already been delivered to you, it is important that you visit the following page within 5 days to update the payment information for this order.”

This is a pretty amazing customer service policy.  Frankly, I’m still a little shocked. Amazon actually delivered a product to a customer even though there was a problem with payment.

I happily paid for the book and would love to thank the Amazon employee who came up with this service policy.

Has anyone else experienced this with other companies selling digital products online?

I love machines.

I’m not talking about electronic gadgets like laptops, mobile phones and vacuuming robots (although, I like those things too.)  I’m talking about machines constructed with gears, cogs, springs and fly wheels.  There is a certain beauty in machines that are constructed in this way.  Mechanical watches are fascinating collections of cogs, gears and springs that run for days on the energy of a single spring and tell you what phase the moon happens to be in at any given moment.

My love of all things mechanical translates to the digital world in a similar way.

I get excited when I see web-based tools that allow me to build single purpose apps that are simple on the surface and complex under the hood.  On the web, I never need to see the cogs.  The website If This, Then That does this in a very clever and simple way.

If This Then That allows you to connect many of the social sites you use on a regular basis with the web tools you use on a regular basis. It is built around the concept of choosing a “trigger” and then executing an “action” when the triggering event occurs (hence, the name of the site “if this, then that”).

For example, when someone tags a photo of you on Facebook (trigger), save that photo to your Dropbox account (action).  Or when APPL stock drops below $300 (trigger) send a text message to my phone (action).  If it’s supposed to rain tomorrow (trigger) send me an email reminder to pack an umbrella (action). You get the idea…

If This Then That has a collection of pre-made “recipes” that people have already created to get you started.  There are also some nice write-ups of the service on Webmonkey and Scott Hanselman’s blog.

Now, go make something fun.

Flickr photo from Sergei Golyshev

iPhone applications built for specific events have brief windows of time where their content is relevant and useful to the customer.  Syfy’s San Diego ComicCon (iTunes) and the Lollapalooza music festival (iTunes) apps contain extremely useful features for time sensitive events.  Schedules, maps, personalized calendars, photo galleries and photo sharing features are contained within these apps, making them very handy for a short period of time.

The ComicCon app was released July 12th, only 11 days before the convention; and the Lollapalooza app was released July 19th, only 20 days before the music festival.

At first, I thought this was a waste of advertising dollars. Why go to the trouble of building an iPhone application that would only be useful for a short period of time? That’s silly, isn’t it?

Well, not really.  There are three excellent reasons for these “disposable” iPhone apps.

1. Usage window

Pinch Media released a report earlier this year revealing statistics they collected from 30 million downloads at the iTunes App Store.  They discovered only 5% of apps were used 3 weeks after they were downloaded (slides 12 & 13). This timing seems like a good match for event marketing. Right?

2. Engagement

Smart phones make up only 12% of the phone market worldwide. However, that small percentage of users generates the majority of engagement in the mobile world.  They are constantly downloading mobile applications, surfing the mobile web, sending emails, snapping photos, recording video, etc.

iPhone users, in particular, are extremely engaged in the mobile experience.

3. Understanding your audience

What if you could discover information about your audience that helped make your product or event better the next time? Did your concert audience enjoy the venue?  What did your convention attendees think of the hotel or the food?  A mobile application can collect that feedback from your audience and help make your product better.

If you compare these to traditional advertising vehicles like TV, radio and newspapers you’ll see why iPhone apps look like a great option for event promotion.  You can build several iPhone apps for the cost of a single minute of TV advertising.  Also, traditional advertising platforms are typically a one-way communication to the audience, while mobile applications offer an easy dialog of feedback and communication.

I’m curious.  Have you or would you ever consider downloading a “disposable iPhone app” for a specific event?  Let me know in the comments.

Justine and I both have Gmail accounts, so that part was easy.  You simply create a document in Google Docs and share that document with your partner.  You can now update this document over and over for new lists whenever you need them (and even access the revision history to see what your shopping lists looked like last month).

You can now access that document on any mobile device in read-only format (presumably while you’re walking down the aisles in a grocery store).

So a simple phone call while I’m at work “Honey, I updated the list” is all I need to know exactly what she wants me to bring home from the grocery store.

I find technology fascinating when it intersects with everyday life to make things a bit easier.

Do you have any technology tricks like this?  Feel free to share them in the comments.

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)

“In the next decade, around 70% of the human population will have fixed or mobile access to the Internet at increasingly high speeds, up to gigabits per second. We can reliably expect that mobile devices will become a major component of the Internet, as will appliances and sensors of all kinds. Many of the things on the Internet, whether mobile or fixed, will know where they are, both geographically and logically.”

I’m glad to see Google mention the importance of mobile devices in the future (which is already here). I’m fascinated by the prospects that truly “smart” phones will offer us within the next year or two (I think their estimate of 10 years is a bit high. I think the web, mobile or otherwise, is evolving far faster than that.)

Although, I’m not convinced I want the internet involved with my dirty socks.

“A box of washing machine soap will become part of a service as Internet-enabled washing machines are managed by Web-based services that can configure and activate your washing machine.”

Regardless the post is worth reading.

- Dave

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.