Journal tags: oneweb

Aral recently released the videos from last September’s Update conference. You can watch the video of my talk if you like or, if video isn’t your bag, I’ve published a transcription of the talk.

It’s called One Web, Many Devices and I’m pretty happy with how it turned out. It’s a short talk—just under 17 minutes—but I think I made my point well, without any um-ing and ah-ing. At the time I described the talk like this:

I went in to the lion’s den to encourage the assembled creative minds to forego the walled garden of Apple’s app store in favour of the open web.

It certainly got people talking. Addy Osmani wrote an op-ed piece in .net magazine after seeing the talk.

The somewhat contentious talk was followed by an even more contentious panel, which Amber described as Jeremy Keith vs. Everyone Else. The video of that panel has been published too. My favourite bit is around the five-minute mark where I nailed my colours to the mast.

Me: I’m not going to create something specifically for Windows Phone 7. I’m not going to create a specific Windows Phone 7 app. I’m not going to create a specific iPhone app or a specific Android app because I have as much interest in doing that as I do in creating a CD-ROM or a Laserdisc…

Aral: I don’t think that’s a valid analogy.

Me: Give it time.

But I am creating stuff that can be accessed on all those devices because an iPhone and Windows Phone 7 and Android—they all come with web browsers.

I was of course taking a deliberately extreme stance and, as I said at the time, the truthful answer to most of the questions raised during the panel discussion is “it depends” …but that would’ve made for a very dull panel.

Unfortunately the audio of the talks and panels from Update hasn’t been published—just videos. I’ve managed to extract an mp3 file of my talk which involved going to some dodgy warez sitez.

I wish conference organisers would export the audio of any talks that they’re publishing as video. Creating the sound file at that point is a simple one-click step. But once the videos are up online—be it on YouTube or Vimeo—it’s a lot, lot harder to get just the audio.

Not everyone wants to watch video. In fact, I bet there are plenty of people who listen to conference talks by opening the video in a separate tab so they can listen to it while they do something else. That’s one of the advantages of publishing conference audio: it allows people to catch up on talks without having to devote all their senses. I’ve written about this before:

Not that I have anything against the moving image; it’s just that television, film and video demand more from your senses. Lend me your ears! and your eyes. With your ears and eyes engaged, it’s pretty hard to do much else. So the default position for enjoying television is sitting down.

A purely audio channel demands only aural attention. That means that radio—and be extension, podcasts—can be enjoyed at the same time as other actions; walking around, working out at the gym. Perhaps it’s this symbiotic, rather than parasitic, arrangement that I find engaging.

When I was chatting with Jesse from SFF Audio he told me how he often puts video podcasts (vodcasts?) on to his iPod/iPhone but then listens to them with the device in his pocket. That’s quite a waste of bandwidth but if no separate audio is made available, the would-be listener is left with no choice.

So conference organisers: please, please take a second or two to export an audio file if you’re publishing a video. Thanks.

I spoke at the DIBI conference back in June. It was a really good event, despite its annoying two-track format.

My talk was entitled One Web:

The range of devices accessing the web is increasing. We are faced with a choice in how we deal with this diversity. We can either fracture the web by designing a multitude of device-specific silos, or we can embrace the flexibility of the web and create experiences that can adapt to any device or browser.

The video has been online for a while now and I finally got ‘round to getting it transcribed. You can pop on over to the articles section and read One Web. I should really re-name that section of my site: “articles” isn’t the most accurate label for a lot of the stuff there.

If you prefer listening to reading, the audio is available for your huffduffing pleasure.

I also put the slides on Speakerdeck so you play along with the presentation.

I reprised this talk in Italy recently at the From The Front gathering. The audio from that is also online if you want to compare and contrast.

After giving my language-centric talk at the Breaking Development conference I found it interesting to listen out for the terms that attendees and speakers were using to describe desktop-centric websites. Some of the adjectives I heard were:

• full site,
• standard site,
• regular site.

Once again, I think that this kind of language can constrain our approaches to web design and development. In truth, a mobile site should be the standard, full, regular site; you can still go ahead and add more stuff for the desktop environment, but to think of it as the canonical instantiation isn’t helpful. It hinders our ability to think in a mobile-first responsive manner.

Jason made a great point in his closing talk at Breaking Development. He said that clients are always asking how much extra it’s going to cost them to have a mobile site. But it should be the other way around. The mobile site ought to be the default and they should be asking how much extra it will cost to optimise for the desktop (which is not very much because, let’s face it, the desktop environment is a piece of piss compared to mobile).

It can be tough to convince a client that a mobile-first responsive site is the right approach. It’s always better to show rather than tell, but up until now there haven’t been any poster children for responsible responsive design—much as I like the mediaqueri.es site, the majority of sites showcased are shrinking down from a desktop start.

This reminds of the situation with web standards ten years ago. There were plenty of great sites that has switched over from table layouts to CSS but they were mostly blogs and portfolio sites (again, take a look at mediaqueri.es). It wasn’t until large commercial entities like ESPN and Wired.com were brave enough to make the switch that the CSS floodgates opened.

As of this week, we have a poster child for responsive web design: The Boston Globe. Actually, that does it a disservice …it’s a poster child for excellence in web design and development best practices.

I was lucky enough to have Scott do a show’n’tell at my dConstruct workshop. Seeing the thought and care that went in to every step of the process was humbling. There were a lot of tough challenges but they kept their eye on the prize: universal access—regardless of what device you’re using—without compromising on visual and interactive richness.

I’m going to let the site speak for itself but I just wanted to send my heartfelt congratulations to Ethan, Miranda, Scott, Todd, Patty and everyone else at Filament Group, Upstatement and the Boston Globe. Their hard work will benefit everyone designing and development for the web. Thank you guys.

Here are some reports in their words:

• From the Boston Globe itself, here’s a look at the strategy and business goals that informed the site.
• Ethan wrote about his role in the process.
• Upstatement have a beautiful portfolio page (itself responsive) showcasing the Boston Globe.
• Patty documents Filament Group’s experience with this project.

Lots of other people are writing about the Boston Globe launch, although much of the commentary focuses on the forthcoming paywall/fence rather than the design or technology. Jeffrey has written about the site, also comparing it to Mike’s visionary work on ESPN back in the day.

I could go on and on about how well the site works on touchscreen devices, tablets and mobile phones of all kinds but I think the essence of what makes the site great is captured in Grant’s screenshot of The Boston Globe site running on… an Apple Newton.

The Breaking Development conference is wrapping up here on spacecraft Opryland One. It’s been a wonderful experience. The conference itself was superbly curated—a single track of top-notch speakers in a line-up that switched back and forth between high-level concepts and deep-dives into case studies. I hope that other conferences will take note of those key phrases: “single track”, “curated”, “top-notch speakers” (see also: An Event Apart, dConstruct, Mobilism).

I opened the show with a talk that sounds controversial: There Is No Mobile Web. Actually, it wasn’t as contentious as it sounds (I originally proposed a talk called Fuck The Mobile Web: Fuck It In The Ass—then it would’ve been controversial). You can download a PDF of my slides if you want but, as usual, they won’t make much if any sense outside the context of the presentation.

My talk was concerned with language; Lakoffian political language in particular. When I say “there is no mobile web,” I mean it quite literally: there isn’t a separate world wide web for mobile devices. But by using the phrase “mobile web” we may be unintentionally framing the discussion in terms of separate silos for different kinds of devices (desktop and mobile) in a similar way that a term like, say, “tax relief” automatically frames the discussion of taxation as something negative. By subtly changing the framing from “the mobile web” to a more accurate phrase such as “the web on mobile” we could potentially open new avenues of thinking.

By the same token the phrase “one web”—which is the drum that I bang—is really a tautology. Of course there’s only one web! But the phrase has political and philosophical overtones.

So I asked the assembled audience if we could come to an agreement: I’ll stop saying “one web” if you stop staying “mobile web.” How about …”the web”?

I also talked about the power of naming things, invoking the foreword I wrote for Ethan’s book:

When Ethan Marcotte coined the term “responsive web design” he conjured up something special. The technologies existed already: fluid grids, flexible images, and media queries. But Ethan united these techniques under a single banner, and in so doing changed the way we think about web design.

I’m not invoking the Sapir Whorf hypothesis here, I just wanted to point out how our language can—intentionally or unintentionally—have an effect on our thinking.

One of the other phrases I discussed was “web app.” The timing couldn’t have been better. Fellow Breaking Development speaker James Pearce has just written a blog post all about defining what makes something a web app. It’s very detailed and well thought-out but I’m afraid at the end of it, we’re still no closer to having a shared agreed-upon definition. It’s like the infamous Supreme Court definition of obscenity: “I know it when I see it.”

My concern is that the phrase “web app” is wielded as a talisman to avoid best practices. “Oh, I totally agree that we should care about accessibility …but this isn’t a web site, it’s a web app.” “I think that progressive enhancement is great …for websites; but this is a web app.” The term is used as a get-out-of-jail free card and yet we can’t even agree what it means. I call shenanigans. I don’t think it is useful or productive to create an artificial boundary between documents and applications when the truth is that almost everything on the web exists on a continuum between the two poles.

Luke has published his excellent notes from my talk. You should read ‘em. While you’re at it, you should read all of the notes that he took at the conference.

Make sure you check out the notes from Stephanie’s mind-blowing case study of browser.nokia.com. The slides are on Slideshare too.

As I said, the Breaking Development conference did an excellent job of balancing the practical with the inspirational. Stephanie’s intensely useful case study was perfectly balanced by an absolutely incredible call to arms from Scott Jenson called Why Mobile Apps Must Die (and you thought my talk title was contentious), in which he expanded on his brilliant writings over on the Beyond Mobile blog.

The next Breaking Development event will be next April in Orlando. Single track. Curated. Top-notch speakers.

This is a disclaimer.

I have been writing and talking a lot about responsive web design, a pattern that I think emerges naturally from the principle of universal design. I will continue to write and talk about responsive and universal design in the future and I will continue to advocate a “one web” approach to treating all users fairly regardless of ability or device.

But here’s the thing: I am fully aware that there is no one correct answer to every situation. So even though I’m going to continue to bang the drum of one web, I’m not actually foolish enough to think that it’s a cure-all. I’m taking a deliberately Friedian approach in order to back up a stance that I think is woefully under-represented in most discussions of modern web development.

If you’re looking for the more honest, truthful answer to pretty much any question on web design and usability, here it is:

It depends.

I now return you to your regular schedule of absolutist self-righteous claims.

I was in Dublin recently to give a little talk at the 24 Hour Universal Design Challenge 2010. It was an interesting opportunity to present my own perspective on web design to an audience that consisted not just of web designers, but designers from many different fields.

I gave an overview of the past, present and future of web design as seen from where I’m standing. You can take a look at the slides but my usual caveat applies: they won’t make much sense out of context. There is, however, a transcript of the talk on the way (the whole thing was being captioned live on the day).

Towards the end of my spiel, I pointed to Tim Berners-Lee’s recent excellent article in Scientific American, Long Live the Web: A Call for Continued Open Standards and Neutrality:

The primary design principle underlying the Web’s usefulness and growth is universality. When you make a link, you can link to anything. That means people must be able to put anything on the Web, no matter what computer they have, software they use or human language they speak and regardless of whether they have a wired or wireless Internet connection. The Web should be usable by people with disabilities. It must work with any form of information, be it a document or a point of data, and information of any quality—from a silly tweet to a scholarly paper. And it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large.

We’re at an interesting crossroads right now. Recent developments in areas like performance and responsive design means that we can realistically pursue that vision of serving up content at a URL to everyone to the best ability of their device. At the same time, the opposite approach—creating multiple, tailored URLs—is currently a popular technique.

At the most egregious and nefarious end of the spectrum, there’s Google’s disgusting backtracking on net neutrality which hinges on a central conceit that spits in the face of universality:

…we both recognize that wireless broadband is different from the traditional wireline world, in part because the mobile marketplace is more competitive and changing rapidly. In recognition of the still-nascent nature of the wireless broadband marketplace, under this proposal we would not now apply most of the wireline principles to wireless…

That’s the fat end of the wedge: literally having a different set of rules for one group of users based on something as arbitrary as how they are connecting to the network.

Meanwhile, over on the thin end of the wedge, there’s the fashion for serving up the same content at different URLs to different devices (often segregated within a subdomain like m. or mobile.—still better than the crack-smoking-inspired .mobi idea).

It’s not a bad technique at all, and it has served the web reasonably well as we collectively try to get our heads around the expanded browser and device landscape of recent years …although some of us cringe at the inherent reliance on browser-sniffing. At least the best practice in this area is to always offer a link back to the “regular” site.

Still, although the practice of splintering up the same content to separate URLs and devices has been a useful interim step, it just doesn’t scale. It’s also unnecessary.

Most of the time, creating a separate mobile website is simply a cop-out.

Hear me out.

First of all, I said “most of the time.” Maybe Garrett is onto something when he says:

It seems responsive pages are best for content while dedicated mobile pages are best for interactive applications. Discuss.

Although, as I pointed out in my brief list of false dichotomies, there’s no clear delineation between documents and applications (just as there’s no longer any clear delineation between desktop and mobile).

Still, let’s assume we’re talking about content-based sites. Segregating the same content into different URLs seems like a lot of work (quite apart from violating the principle of universality) if all you’re going to do is remove some crud that isn’t necessary in the first place.

As an example, here’s an article from The Guardian’s mobile site and here’s the same article as served up on the www. subdomain.

Leaving aside the way that the width is inexplicably set to a fixed number of pixels, it’s a really well-executed mobile site. The core content is presented very nicely. The cruft is gone.

But then, if that cruft is unnecessary, why serve it up on the “desktop” version? I can see how it might seem like a waste not to use extra screen space and bandwidth if it’s available, but I’d love see an approach that’s truly based on progressive enhancement. Begin with the basic content; structure it to best fit the screen using media queries or some other form of feature detection (not browser detection); pull in extra content for large-screen user-agents, perhaps using some form of lazy loading. To put it in semantic terms, if the content could be marked up as an aside, it may be a prime candidate for lazy loading based on device capability:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.

I’m being unfair on The Guardian site …and most content-based sites with a similar strategy. Almost every site that has an accompanying mobile version—Twitter, Flickr, Wikipedia, BBC—began life when the desktop was very much in the ascendency. If those sites were being built today, they might well choose a more responsive, scalable solution.

It’s very, very hard to change an entire existing site. There’s a lot of inertia to battle against. Also, let’s face it: most design processes are not suited to solving problems in a device-independent, content-out way. It’s going to be challenging for large organisations to adjust to this way of thinking. It’s going to be equally challenging for agencies to sell this approach to clients—although I feel Clearleft may have a bit of an advantage in having designers like Paul who really get it. I think a lot of the innovation in this area will come from more nimble quarters: personal projects and small startups, most likely.

37 Signals recently documented some of their experiments with responsive design. As it turned out, they had a relatively easy time of it because they were already using a flexible approach to layout:

The key to making it easy was that the layout was already liquid, so optimizing it for small screens meant collapsing a few margins to maximize space and tweaking the sidebar layout in the cases where the screen is too narrow to show two columns.

In the comments, James Pearce, who is not a fan of responsiveness, was quick to cry foul:

I think you should stress that building a good mobile site or app probably takes more effort than flowing a desktop page onto a narrower piece of glass. The mobile user on the other side will quite possibly want to do different things to their desktop brethren, and deserves more than some pixel shuffling.

But the very next comment gets to the heart of why this well-intentioned approach can be so destructive:

A lot of mobile sites I’ve seen are dumbed down versions of the full thing, which is really annoying when you find that the feature you want isn’t there. The design here is the same site adapted to different screens, meaning the end product doesn’t lose any functionality. I think this is much better than making decisions for your users as to what they will and won’t want to see on their mobile phone.

I concur. I think there’s a real danger in attempting to do the right thing by denying users access to content and functionality “for their own good.” It’s patronising and condescending to assume you know the wants and needs of a visitor to your site based purely on their device.

The most commonly-heard criticism of serving up the same website to everyone is that the existing pages are too large, either in size or content. I agree. Far too many URLs resolve to bloated pages locked to a single-width layout. But the solution is not to make leaner, faster pages just for mobile users; the answer is to make leaner, faster pages for everybody.

Even the brilliant Bryan Rieger, who is doing some of the best responsive web design work on the planet with the Yiibu site, still talks about optimising only for certain users in his otherwise-excellent presentation, The End of Unlimited Bandwidth.

When I was reading the W3C’s Mobile Web Best Practices, I was struck by how much of it is sensible advice for web development in general, rather than web development specifically for mobile.

This is why I’m saying that most of the time, creating a separate mobile website is simply a cop-out. It’s a tacit acknowledgement that the regular “desktop” site is beyond help. The cop-out is creating an optimised experience for one subset of users while abandoning others to their bloated fate.

A few years back, there was a trend to provide separate text-only “accessible” websites, effectively ghettoising some users. Nowadays, it’s clear that universal design is a more inclusive, more maintainable approach. I hope that the current ghettoisation of mobile users will also end.

I’m with Team Timbo. One web.