Cloud Four Blog

Technical notes, War stories and anecdotes

On Mobile Context

The question of mobile context has plagued me. In January 2009, I wrote about the “On the Go” Myth?. Therefore, it doesn’t surprise me to see very smart people grappling with mobile context and coming to the conclusion that “mobile context has been overblown”.

So given my previous doubts about mobile context, you’d think I would find it easy to agree with the current meme that mobile context doesn’t exist. And yet when I read posts and tweets that argue that there is no mobile web, I find myself disagreeing.

What accounts for this cognitive dissonance? A lot of it has to do with my belief that mobile is a new mass media and what that means for the mobile web.

Separating implementation from theory

Many of the objections that I see to mobile context are based on the idea that people are making decisions to remove content from mobile sites thinking that they are doing their users a favor when in fact all they are doing is pissing people off.

These are valid points about poor implementations based on mobile context. But whether or not these implementations are poor is irrelevant if the whole idea of mobile context is a fallacy.

Therefore, I want to look at the foundation, questions and assumptions that might lead a person to conclude that the mobile context is important. Or at minimum, that there are reasons to handle mobile web as something distinct from the larger web.

This post is about theory, not implementation.

Is mobile a new mass media?

A lot of my thinking on this can be attributed to Tomi Ahonen who makes a compelling case for mobile as the seventh mass media. The mass media in order are:

  1. Print
  2. Recordings
  3. Cinema
  4. Radio
  5. Television
  6. Internet
  7. Mobile Phones

Tomi also argues that each mass media has unique abilities that cannot be replicated by the previous ones. Mobile has eight unique abilities:

  1. Mobile is personal
  2. Mobile is permanently carried
  3. Mobile is always on
  4. Mobile has a built-in payment mechanism
  5. Mobile is available at the point of creative inspiration
  6. Mobile has the most accurate audience measurement
  7. Mobile captures the social context of media consumption
  8. Mobile allows augmented reality to be used in media

It is these unique abilities that I find most compelling about mobile. Even though many people now say that “mobile” to encompasses everything from phones to tablets to in-dash car systems, I still think the mobile phone is special and transformative unto itself because of these unique abilities.

If mobile is a new mass media, what does it mean?

This is the question that I ineffectively tried to examine in my Dao of the Mobile Web article. To get a full perspective on what it means to move from one mass media to another—in this case from print to the Internet—I highly recommend reading John Allsopp’s Dao of Web Design article.

John writes that “Television was at that time often referred to as ‘radio with pictures’, and that’s a pretty accurate description. Much of television followed the format of popular radio at that time.”

John’s point was that when a new medium is born, we don’t know how to use it properly. We try to fit it into what we already now:

When a new medium borrows from an existing one, some of what it borrows makes sense, but much of the borrowing is thoughtless, “ritual”, and often constrains the new medium. Over time, the new medium develops its own conventions, throwing off existing conventions that don’t make sense.

Which brings us to the second question we should ask ourselves. Does a new mass media have different characteristics and different lessons from the previous mass media?

Tomi Ahonen said “Mobile the 7th Mass Media is to internet like TV is to radio.” If you agree both that mobile is a new mass media and that new mass media have different characteristics and lessons, then Tomi’s statement makes sense.

I find the logic that mobile is a new mass media to be compelling. And if it is a new mass media, then doing the same things we did (or should have been doing) for the desktop Internet is limiting mobile’s potential.

Is mobile web a new mass media?

This is where the questions get trickier. Stephen Hay says there is no mobile web, just the web. Many others agree and I see their logic.

Yet, if we think mobile devices have unique abilities that make them a new mass media, then I certainly hope the web can take advantage of those abilities. Because those abilities are explicitly defined as unique, then we logically end up at the conclusion that the mobile web is something new as well.

Thus, if mobile web is the child to the desktop web, then the things we need to learn about it likely won’t be the same lessons that we took from the transition from the printed page to the desktop web.

Could it be that the reason why so many people find John’s Dao of Web Design article relevant eleven years after it was written is exactly because we’re still trying to fit the parent medium’s lessons onto the new medium?

Is mobile web a half-breed? A love child between two mass media?

I had a lengthy email exchange with Ethan Marcotte and Tim Kadlec about these questions. Tim had a very insightful response. He wrote:

Where it gets tricky is when we start talking specifically mobile web. By itself – no, I don’t think we can call it a new mass media.

However, I think if we view mobile (not mobile web) as a new mass media then I think it starts to shed a little light on why the discussion of mobile context and ‘one web’ has been so muddled for so long.

If mobile is a new medium, then the mobile web is a bit of a half-breed – it is part mobile medium and part internet medium so it inherits traits from both.

Tim makes a lot of sense here. This is an inherent conflict for the mobile web when viewed through the prism of mass media changes.

Maybe mobile context really is key, but we just don’t know how to use it yet.

James Pearce wrote an insightful comment on a Jeff Croft blog post that stood out to me. He gets to the same questions I had when I reread the Dao of Web Design:

So is the rise of the mobile web our Michelson-Morley experiment? The circumstances in which we discover that these rules might no longer quite apply outside our previous comfort zone?

I’m fascinated to explore how the web can evolve over the next 10 years. I believe that understanding context is at the heart of it – like the speed of light was to turn-of-the-century physicists – and that we should continue to explore the boundaries so as to change the expectations of both creators and users.

Or, like those same physicists 120 years ago, do we really think we’ve got it all figured out?

Tim Kadlec made a similar point drawing from science fiction:

A common element in many of the more futuristic stories are devices that are most comparable to mobile phones – always with you, always on. They don’t stop there though. They respond to context of environment and adapt based on the users behavioral history – they create a truly personalized and responsive user experience regardless of the situation.

Mobile, unlike any medium prior to it, has that potential. That is why James is exactly right – context is most definitely at the heart of it and we do need to explore it further. How do we accurately determine it? What does it tell us about intent? What criteria do we need to be able to determine when we should, and when we shouldn’t, be taking advantage of it? If we don’t explore those topics, then we’re shortchanging the potential of mobile.

I find the idea that there is nothing unique about mobile web to be a depressing thought. If mobile web is a half-breed, then will mobile web ever be able to fully realize the potential of mobile as a new mass media?

I prefer to look at it the way James described it. As the big experiment and challenge we’re just beginning to explore.

For more on the mobile context discussion

Last Month, we hosted a panel at Mobile Portland with Josh Clark, Daniel Davis, Ty Hatch, Rachel Hinman and Tim Kadlec discussing the The Myth of Mobile Context. It was an honor to have such an illustrious panel discussing such a timely topic.

If you’re interested in exploring this question more, I encourage you to watch the video of the panel. They cover mobile context and much more. It was a fantastic evening and worth watching.

Additional articles on the topic:

Finally, a fun student project from 2009 animating mobile context concepts from Barbara Ballard’s book Designing the Mobile User Experience.

We Need More Mobile First Browsers. Google Needs to Step Up.

Since the app store was released, people have been suspicious of Apple’s commitment to the open, mobile web. Why would Apple push the mobile web forward when web technology may compete with its native apps platform?

I’m not usually an Apple defender, but if you want to beat up on a company for their laggard mobile browser, look in Mountain View, not Cupertino.

Apple continues to add key functionality to Mobile Safari. The rumors are that iOS 5 will include:

  • position:fixed
  • overflow:scroll
  • date input fields
  • Nitro javascript engine in home screen apps
  • Web workers
  • Native scrolling behavior

Who knows if these will actually ship in the final version of iOS 5, but their inclusion wouldn’t be a surprise. Ever since the initial release of the iPhone, each new version of the operating system has included new browser features. Often these features, like geolocation, show up in Mobile Safari before they show up on the desktop.

This is what I call a mobile first browser. Borrowing from Luke Wroblewski’s mobile first thinking, browser makers need to develop their mobile browsers first.

We Need More Mobile First Browsers

Of the browser makers that have both mobile and desktop versions, which ones have shipped new features on mobile first?

We know Apple has. I suspect Opera has as well. The rest seem to be developing for desktop first.

Recently, Dave Winer argued that Mozilla is no longer creating new features for Firefox that people care about.

What I found most interesting about Dave’s article is that mobile specific features are not mentioned in either his post nor in the comments. The Mozilla folks who defend their browser and its features talk exclusively about the desktop version.

Microsoft’s mobile browser also lags its desktop version. The mango update will bring Internet Explorer 9 to Windows Phone 7 later this year.

Mango will be a great improvement over Internet Explorer 7 which is currently being used, but while the Windows Phone team works on integrating IE9, Microsoft has already released two preview builds of Internet Explorer 10.

Google Needs to Step Up

If there was one company that we would expect to lead the charge for the open, mobile web, it would be Google. At Mobilize 2009, I watched Andy Rubin, SVP of Mobile, say that Google saw HTML5 eventually supplanting most native apps.

Given Google’s emphasis on web technology, a leading edge mobile browser seems like a natural fit. The reality is much different. The Android browser lags behind the iPhone in many ways.

At Google I/O 2010, Vic Gundotra demonstrated browser access to the camera, accelerometer, and the microphone. When Read/Write Web asked me about the demonstration, I responded, “Hell yeah, it’s about time”.

Unfortunately, none of these features shipped with Android’s Gingerbread release. Apple shipped browser access to the accelerometer before Google did. It is over a year later, and we have no idea when we will see them.

Shi Chuan recently wrote a provocative post entitled An Inconvenient Truth – Android and the Open Mobile Web. He may have got some of the details wrong, but the overall sentiment is spot on.

The contrast at Google I/O this year between a day dedicated to Android and a day dedicated to Chrome OS made the problems crystal clear.

For some time I’ve been hearing rumors of battles between the Chrome and Android teams. Seeing the two operating systems on stage made it clear that they are competing visions of the future. Should tablets use Chrome OS or Android?

It seems that the things that people accuse Apple of—slowing the pace of the browser in order to give their app platform an advantage—are actually happening at Google. Competition is generally a good thing, but when the competition is between the Android and Chrome teams, it is the users of the Android browser who lose.

Google needs to step up. Chrome is arguably the best desktop browser. There is no excuse for Android’s browser not leading as well.

NY Post iPad Policy: A Real Threat to the Web

Another big story yesterday was the fact that the NY Post is no longer letting iPad users access their web site and is instead forcing them to pay for an iPad app to read content. This has been one of my biggest fears for the future of the web.

The contributions that the web has made to the our collective knowledge are so large that they can’t be measured. It is this collective knowledge that I fear losing.

I am not a subscriber of the New York Times. On occasion, I am told that there is a good article in the New York Times that I should read.

Before the web, it is unlikely that I would have known about the article. If I did hear about it, then I would have to find a store that carried the New York Times and go buy it. Good luck finding the back issue of the newspaper if I heard about it the following day or week.

Today, I can simply follow the link and read the article for free. Removing the friction of physical distrubtion and having this information freely available is a tremendous boon to people everywhere.

John Gruber writes that the NY Post’s iPad policy “is a bad idea, and likely doomed to failure, but it shows just how problematic the web is, financially, for traditional newspapers.” There’s the rub.

All of this online knowledge that helps humans across the globe, but we’ve still not found a way to make it financially viable on the web. That is worrisome.

The promise for years was that there would be some sort of micropayment system that would help ensure a frictionless way to consume content on the web while ensuring authors and publishers got paid, but that promise hasn’t been realized.

I doubt that iPad apps are the savior for the publishing industry. But we do know that they have some things going for them that the web doesn’t including more reader engagement and easier payments.

Why shouldn’t more publishers follow the NY Post’s lead and drive people to their apps? In fact, if the web is losing money, at some point why wouldn’t they just stop publishing to the web at all and instead keep all the content inside the app.

I’m not opposed to paying for content. In fact, I want to do so, but subscribing to a newspaper that I only read one or two articles a month from doesn’t make sense. And that problem is amplified when articles are only available via an app that must be downloaded, installed and a subscription purchased.

The first time I read about the Financial Times success on the iPad and their pay wall, I wondered if our days of serendipitously finding useful articles will soon end. I don’t know how realistic these fears are, but I find it difficult to dismiss them.

Responsive Web Design Book Review

Ethan Marcotte’s new book on Responsive Web Design is both not what I had hoped for and more than I had dared to imagine.

First, let’s get my disappointment out of the way.

As I explained in a previous post, I’m struggling with a chapter on Mobile First Responsive Web Design for our upcoming book. I had secretly hoped that Ethan’s book would contain a never-seen-before blueprint on how to tackle Mobile First Responsive Web Design.

Alas, it doesn’t contain a secret decoder ring. And if I’m honest with myself, I knew it wouldn’t.

Ethan and I have talked multiple times about how much thought and work is going into the Boston Globe project. Responsive Web Design, particularly the mobile first variety, is still very young.

So it was unfair of me to expect Ethan’s book to magically make the tough stuff we’re all working on solving suddenly go away. It’s a testament to Ethan that I even thought he might be able to pull it off.

What the book did do is something I hadn’t dared to imagine: the book transcends the topic it covers.

I don’t know how else to describe it. From the first two paragraphs, Ethan paints a picture of how the world we’re living in is changing:

As i begin writing this book, I realize I can’t guarantee you’ll read these words on a printed page, holding a tiny paperback in your hands. Maybe you’re sitting at your desk with an electronic copy of the book up on your screen. Perhaps you’re on your morning commute, tapping through pages on your phone, or swiping along on a tablet. Or maybe you don’t even see these words as I do: maybe your computer is simply reading this book aloud.

Ultimately, I know so little about you. I don’t know how you’re reading this. I can’t.

With these words he sets a tone that continues throughout the book. A tone that is both reassuring and at the same time inspiring.

Now don’t get me wrong, it isn’t all inspiration and theory. Ethan does a great job of diving into how to build Responsive Web Designs. He walks you through the process, letting you see where you will run into problems, and providing suggestions for solutions.

Images from inside Ethan’s Responsive Web Design book

He anticipates problems that I wouldn’t have thought to include. For example, the fact that flexible images develop artifacts on Internet Explorer 7 and below.

At first, this IE artifact bug seems like a divergence from the main topic, but I quickly came to appreciate the fact that when someone completes this short book, that they will have all the tools they need to start building Responsive Web Designs.

Ethan ties the two threads—the inspiring view of the where the web is headed and the technical details of Responsive Web Design—together In the final chapter entitled “Becoming Responsive” where he covers mobile context, picking breakpoints, and responsive workflows.

It is in this chapter that you realize what he’s truly accomplished. He’s written a book ostensibly about making the web respond to its environment, but what he’s really done is transform you into a more responsive being.

Ethan Marcotte’s new book, Responsive Web Design, went on sale today. Needless to say, I highly recommend it.

Where are the Mobile First Responsive Web Designs?

Lyza and I entitled the second chapter of our forthcoming book “Mobile First Responsive Web Design (RWD)”. Because this is a Head First book, we can’t simply explain the theory of Mobile First RWD. We have to teach our readers how to do it.

For those unfamiliar with the phrase, Mobile First RWD takes the concepts that Ethan Marcotte taught in his A List Apart article on Responsive Web Design and flips the process around to address some of the concerns I raised about media queries.

Instead of starting with a desktop site, you start with the mobile site and then progressively enhance to devices with larger screens. As a bonus, you benefit from the advantages of Mobile First design that Luke Wroblewski espouses.

In practical terms, I think a Mobile First RWD approach requires addressing some of the following challenges:

  • The need to start over and design for the smaller, more limited devices first
  • Ability to replace images with higher resolution images as the size or dpi of the screen increases
  • Ability to test for screen size and capabilities
  • Ability to add more javascript as capabilities and/or screen real estate increases
  • Ability to add more markup as capabilities and/or screen real estate increases
  • Ability to modify the layout as screen real estate increases
  • Decision about how to handle doctype and other markup if you’re going to support older phones that primarily support XHTML-MP

This list was just a starting point for exploration. I wanted to review how other developers are approaching Mobile First RWD in an attempt to find techniques that I might not be aware of and to see how they are thinking about these problems.

So I set out in early April to find examples of Mobile First RWD by reviewing every site listed in the Mediaqueri.es gallery which at the time was just over a hundred sites.

How do you know if something was designed mobile first?

Mobile first design is primarily about the starting point. After a site is complete, how can I tell whether or not the developer started from the mobile and built up to desktop or started from the desktop and whittled down to mobile?

I didn’t want to have to tear apart over a hundred sites in the Mediaqueri.es gallery to find the handful of mobile first sites. I needed some way to narrow the number of sites I cared about to some sort of manageable number.

I believe that mobile first RWD sites will exhibit common behavior as either a direct output of or a byproduct of their mobile first focus:

  • The total size of the markup and assets for mobile web will be significantly smaller than that delivered to desktop web.
  • The total number of http requests for mobile web will be smaller than those delivered to desktop web.

So I set up Charles proxy and loaded every site on mediaqueri.es and a few others that I knew of in both Mobile and Desktop Safari. I recorded the total size, number of http requests (as resources) and the time to download for each.

My theory was that the sites that showed the biggest jump in size when going from mobile to desktop would be the ones most likely to be using mobile first techniques.

The Results Weren’t Promising

Out of the 106 sites I reviewed, 64 of them had mobile sites that were less than ten percent smaller than the desktop version. Twenty-six of the sites had mobile web sites that were larger than the desktop equivalent.

Mobile is Larger 26, Same Size	4, Less than 10% Savings 40, 11 to 50% Savings 22, 51% to 100% Savings 4, Greater than 100% Savings 10

While the numbers were disappointing, I wasn’t terribly surprised. I sorted the results by the percentage difference in size in order to find the sites that were most likely to have been design as Mobile First RWD.

I just dug into the 22 sites that have the greatest percentage difference between their mobile sites and their desktop site. I made notes on what I found in the a spreadsheet which I’ve shared on Google Docs.

After all of that work, I only found five sites that may be Mobile First RWD:

  • Yiibu.com — Bryan and Stephanie’s site continues to be the gold standard.
  • EthanMarcotte.com — Shocking, huh? :-)
  • Elections.ChicagoTribune.com — Uses the Less framework. Mobile site is about half the size of the desktop version, but still downloads assets that aren’t needed in the mobile view.
  • Calebogden.com — I need to dig into this site more. I think the difference may be a weird issue with gzip on the desktop site.
  • Sleepstreet.be — Appears to be using the Responsive Images javascript library.

Needless to say, I was hoping to have more than five sites to review.

Why are Some Mobile Sites Bigger than their Desktop Counterparts?

The number of mobile sites that were significantly larger than their desktop siblings surprised me. The source for the big differences were:

  • Font usage — Some of the sites were using an old version of Typekit that downloaded SVG fonts on iPhone. These font files made the mobile version much bigger than desktop.
  • Retina images — Sites that were using retina images. In one case, I’m not 100% certain they are retina images because they are routed through tiny src so I can only tell that file size is much bigger for the images on mobile than desktop, but not why. In the other case, both the mobile images and the retina mobile images are getting downloaded for a double hit.
  • HTML5 Audio — HTML5 audio is embedded on the page. The browser is downloading the full mp3 file regardless of whether or not the user presses play. This balloons huffduffer.com from 122k on desktop to 2.9MB in Mobile Safari.
  • HTML5 Video — Mobile Safari starts downloading a portion of the video in order to validate the video will work and to grab a scene from the video to use in the player. Desktop Safari wasn’t doing this.

The lesson here is that if you want to really know what is getting downloaded, you need to test using something like Blaze.io’s mobile test or better yet, use a proxy like I did.

Why so Few Mobile First Responsive Web Designs?

This shouldn’t be a huge surprise. Here are some of the reasons why Mobile First RWD isn’t more widely spread:

  • Mobile First RWD may require a redesign — If you’re moving an existing site to RWD—especially if the existing site has fluid grids—you can with minimal work make it responsive. If you decide to do Mobile First RWD, you’re likely going to have to redesign the site or at minimum refactor your markup.
  • It presents larger technical challenges — What do you do about the img tag and the fact it only has one source? How do you make sure javascript only gets downloaded when needed? How do you modify your content management or processes to make sure images get resized appropriately?
  • Few frameworks support mobile first approach — Only recently have frameworks that take a mobile first approach like 320 and Up and the HTML5 Mobile Boilerplate been released.
  • Javascript libraries are just beginning to evolve — The Filament Group is leading the way here with Responsive Images and Respond.js. Different approaches are being developed like Adapt.js. As more people try to tackle mobile first designs, I expect more libraries to be published.
  • We’re still waiting for equivalent of the ESPN and Wired redesigns — The ESPN and Wired redesigns kickstarted the web standards movement. We all have high hopes that the work Ethan and The Filament Group are doing for the upcoming Boston Globe design will be a shining example for mobile first RWD.
  • The technique is still young — For as much as has been written about RWD, it is hard to remember that the ALA article was only written a year ago. People only started working on mobile first RWD last summer. There is still a lot of work to be done before the techniques are well known.

For us, the results of our research meant that we postponed the chapter on Mobile First RWD until later. Our hope is that by the time we return to the chapter, that there will be more examples to learn from.

What Sites Did I Miss?

Since I did my analysis in April, another 30 sites have been added to the Mediaqueri.es Gallery. Eventually I’ll take a closer look at them as well.

In the meantime, do you know of a site that qualifies as a Mobile First Responsive Web Design? Did you help develop it? Does it tackle some of the tough problems like img tag src and progressively enhancing based on screen size?

If so, I’d love to know about it. Sooner or later we’re going to have to get back to writing that chapter on Mobile First Responsive Web Design, and we could use as many examples to draw from as possible.