I’m in Belfast right now for this year’s Build conference, so I am. I spent yesterday leading a workshop on responsive enhancement—the marriage of responsive design with progressive enhancement; a content-first approach to web design.

I spent a chunk of time in the afternoon going over the thorny challenges of responsive images. Jason has been doing a great job of rounding up all the options available to you when it comes to implementing responsive images:

Responsive IMGs, Part 1,
Responsive IMGs, Part 2—an in-depth look at techniques,
Responsive IMGs, Part 3—the future of the img element.

Personally, I have two golden rules in mind when it comes to choosing a responsive image technique for a particular project:

The small image should be default.
Don’t load images twice (in other words, don’t load the small images and the larger images).

That first guideline simply stems from the mobile-first approach: instead of thinking of the desktop experience as the default, I’m assuming that people are using small screen, narrow bandwidth devices until proven otherwise.

Assuming a small-screen device by default, the problem is now how to swap out the small images for larger images on wider viewports …without downloading both images.

I like Mark’s simplified version of Scott’s original responsive image technique and I also like Andy’s contextual responsive images technique. They all share a common starting point: setting a cookie with JavaScript before any images have started loading. Then the cookie can be read on the server side to send the appropriate image (and remember, because the default is to assume a smaller screen, if JavaScript isn’t available the browser is given the safer fallback of small images).

Yoav Weiss has been doing some research into preloaders, cookies and race conditions in browsers and found out that in some situations, it’s possible that images will begin to download before the JavaScript in the head of the document has a chance to set the cookie. This means that in some cases, on first visiting a page, desktop browsers like IE9 might begin get the small images instead of the larger images, thereby violating the second rule (though, again, mobile browsers will always get the smaller images, never the larger images).

Yoav concludes:

Different browsers act differently with regard to which resources they download before/after the head scripts are done loading and running. Furthermore, that behavior is not defined in any spec, and may change with every new release. We cannot and should not count on it.

The solution seems clear: we need to standardise on browser download behaviour …which is exactly what the HTML standard is doing (along with standardising error handling).

That’s why I was surprised by Jason’s conclusion that device detection is the future-friendly img option.

Don’t get me wrong: using a service like Sencha.io SRC (formerly TinySRC)—which relies on user-agent sniffing and a device library lookup—is a perfectly reasonable solution for responsive images …for now. But I wouldn’t call it future friendly; quite the opposite. If anything, it might be the most present-friendly technique.

One issue with relying on user-agent sniffing is the danger of false positives: a tablet may get incorrectly identified as a mobile phone, a mobile browser may get incorrectly identified as a desktop browser and so on. But those are edge cases and they’re actually few and far between …for now.

The bigger issue with relying on user-agent sniffing is that you are then entering into an arms race. You can’t just plug in a device library and forget about it. The library must be constantly maintained and kept up to date. Given the almost-exponential expansion of the device and browser landscape, that’s going to get harder and harder.

Disruption will only accelerate. The quantity and diversity of connected devices—many of which we haven’t imagined yet—will explode, as will the quantity and diversity of the people around the world who use them. Our existing standards, workflows, and infrastructure won’t hold up. Today’s onslaught of devices is already pushing them to the breaking point. They can’t withstand what’s ahead.

So while I consider user-agent sniffing to be an acceptable short-term solution, I don’t think it can scale to the future onslaught—not to mention the tricky issue of the licensing landscape around device libraries.

There’s another reason why I tend to steer clear of device libraries like WURFL and Device Atlas. When you consider the way that I’m approaching responsive images, those libraries are over-engineered. They contain a massive list of mobile user-agent strings that I’ll never need. Remember, I’m taking a mobile-first approach and assuming a mobile browser by default. So if I’m going to overturn that assumption, all I need is a list of desktop user-agent strings. That’s a much less ambitious undertaking. Such a library wouldn’t need to kept updated quite as often as a mobile device listing.

Anybody fancy putting it together?

Tagged with
responsive
design
mobile
images
futurefriendly
ffly

[ Transcript Available ]

Mobile is the “hot topic” these days. It’s increasingly at the front of designers’ minds. In a world where the power and capabilities of the device in your pocket are so great, the possibilities become somewhat astounding. The mobile landscape is changing so rapidly that it makes developing a formal strategy to “figure mobile out” all but impossible.

Luke Wroblewski is at the forefront of the mobile design movement. He suggests that it’s better to put something, anything, out there and see how it fares. Excessive planning in the mobile space leads to missing opportunity after opportunity. Taking advantage of the market as it is today and the capabilities of these devices can lead to the refinement and evolution of your product.

Luke will be conducting a full-day workshop full of his thoughts on mobile, including why you should design for mobile first, at the User Interface 16 Conference, November 7-9 in Boston. Learn more about Luke’s and the other 7 full-day workshops at UIConf.com.

Here’s an excerpt from the podcast.

“…today, [mobile] devices have a lot of constraints based on the ergonomics. They’ve got a small screen. In many situations, you’re using them in environments where there’s other stuff going on. You’re not hunkered down at a desk for an extended period of time.

You may be at home on the couch watching TV, or you may be in a line somewhere, or passing some time in, hopefully, not the car. So there’s these constraints. Low bandwidth is another constraint. And when you use the devices, you familiarize yourself with what those constraints are.

But there’s also a lot of opportunities in terms of capabilities. And if you use lots of apps, you can see, how are they using the accelerometer? What have they done with front and rear-facing cameras? How are they using location in order to deliver information? How are they using the video port, the camera, the audio input? All those things can open up new ideas about how to take advantage of those capabilities in your service.

This is a device that you can use pretty much anywhere and everywhere. You have it with you all the time. Coverage of networks is way better than it’s been. And so, through the fact that you have it with you everywhere and anywhere and you can pull it out and access a network and access assets, all these new use cases emerge that you didn’t have before…”

Tune in to the podcast to hear Luke answer these questions:

What is the alternative to sitting and planning your mobile strategy?
Where should teams start to familiarize themselves with mobile?
Is there an advantage to playing with as many apps as you can to learn about the interaction design?
What are some things that make good mobile design stand out?
What is the benefit of desktop operating systems emulating features on touch-based devices?
How is multi-platform emergence affecting approaches to design?

Do you design for mobile? Share your thoughts with us in our comments section.

Recorded: September, 2011
[ Subscribe to our podcast via ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]

Full Transcript.

Jared Spool: Welcome, everyone, to an episode of the “SpoolCast”. Today I have the amazingly awesome Luke Wroblewski, who is going to be speaking at UI16, our User Interface Conference.

It’s coming up this November. He’s going to be giving a full-day workshop on designing for mobile, a really hot topic. And he is the guy I know that knows the most about mobile, and I’m very happy he’s here today.

Hello, Luke.

Luke Wroblewski: Hello, Jared. Thank you for having me.

Jared: Thanks for being here. So let’s just get into this. I’ve got all these clients now, who are pushing hard on their mobile, and they’re really trying to get there, but it’s really hard to figure out what to do right.

There are some crazy things that people have been trying to do. What are some crazy things that you have seen organizations do with their mobile implementations, particularly organizations that should have known better?

Luke: If they’re doing small, crazy things, at least doing something, I think that’s OK. The biggest issue I’ve seen is people running around and making PowerPoint deck after PowerPoint deck, trying to figure out their mobile strategy.

Jared: I saw that! I saw a guy on the plane. I’m sitting in the aisle, and then there’s someone in the middle, and this guy’s in the window, and he is editing up a PowerPoint deck of a mobile app.

And then, every 20 minutes, taking his laptop and passing it to the woman in the window behind him. [laughs] And then they would have some conversation, and then he would come back and he’d make more changes to it.

Luke: Wow. So there you go. And real-time, on the plane, even.

Jared: On the plane. [laughs]

Luke: It’s gotten to the point that I make this joke when I go and talk, especially at corporations. I say, “The worst thing you could be doing is just sitting around making PowerPoint.”

And pretty much inevitably, I always get this nervous laughter and someone coming up to me after the meeting: “You just nailed what’s going on over here! How did you know?”

[laughter]

Luke: I know because it’s pretty much what everybody’s doing.

Jared: Wow. And so what’s so nutty about that? On the surface, it sounds like a great prototyping tool.

Luke: [laughs] Well for building an app within it, sure. But when you spend all your time trying to imagine the future of mobile and planning accordingly and not taking a move until you’ve got everything nailed, then you’re just missing opportunity after opportunity right now.

And frankly, if you look at the space, I think it’s changing so dramatically day after day that any strategy, long-term, you put together is likely to get pretty disrupted.

Just looking at the past few weeks, right, we had HP getting out of WebOS, killing their tablets. We had Google buying Motorola. We had Steve Jobs resigning.

It was just bombshell after bombshell after bombshell in terms of what’s going on in mobile.

And so I think, when you get in this mode of all you’re doing is planning and things keep changing on you, you just keep planning, planning, planning; you never actually do anything.

So what you’re describing, where the guy’s actually designing an app, in whatever prototyping tool he needs, I think that’s great.

My concern is more along the lines of, “Hey, we’re planning out this large architecture. Hey, we need this long-term road map.” While I’m not completely ragging on planning, I think it’s very, very possible for organizations, especially bigger organizations, to just get stuck in that phase and never get out of it.

Jared: Yeah. So the alternative is what, then?

Luke: The alternative is just to put something out there and see what happens. If you actually look at the big companies that are currently doing well in mobile, that’s what they did.

So I keep hearing stories of a small, rogue, or interested team just went out and made an app or a mobile website, and all of a sudden it started taking off, and now that has gained a lot of momentum in the company and they’re taking off from it.

So one of the, perhaps, biggest examples is eBay. eBay was one of the first ones to pull together an iPhone app. And that was essentially a product manager, designer, and they worked with outside contractors just because they were really interested in it and wanted to make something there.

And you look now; eBay has 50 percent of mobile commerce in the US, and 70 percent of that is coming from their iPhone app.

At least as far as I hear the stories, I wasn’t there, obviously, this wasn’t some huge effort in terms of strategy and planning. It was rolling up your sleeves, making something and getting it out there.

I heard a similar story, for example, from Expedia. For a long time, I used Expedia, the travel site’s mobile app as an example of “Look at how focused their mobile experience is compared to their desktop Web experience.”

And I heard from someone after one of these talks that that app was created in their R and D Department by, again, two or three guys who were just really interested in, passionate about the space, and now they’re taking a lot of what they learned from there and applying it to the desktop and other places.

So this “just roll up your sleeves and do something,” I think the type of market it is and the type of environment it is lends itself a lot more to that kind of effort.

Jared: The folks over at Disney, there was an article recently published that had this visualization of all the Disney mobile apps, and there’s like 35 or 40 different Disney mobile apps.

Is there a point where just getting out there and doing it and having all these different parts of your organization just trying something gets in the way, and that maybe you should be sitting back and saying, “Well, do we have a strategy here?”

Luke: Yeah. Well, once you hit the point where you’ve actually done something. I guess I should clarify. I’m talking about people who are trying to, “figure mobile out.”

Jared: Right.

Luke: There’s organizations that have been in there from the beginning and have done a ton and they’ve learned a lot.

And once you’ve learned a lot and you understand, if they’ve got 35 apps, they probably know which ones are being used. They probably know where they’re getting new customers, where they’re making money, which platforms are working for them.

They have a crap-pile of information upon which they can start to build a strategy.

Jared: Right.

Luke: Whereas if you’ve never done anything, and all you’re doing is thinking about the re-architecture, which is going to take you two to three months, yo[…]

If you weren’t able to attend this year’s Web App Masters Tour, we have the next best thing for you and your organization: Web App Masters 2011 OnDemand.

This is your opportunity to hear all 12 Masters from the Tour give their 75-minute presentations. The OnDemand collection consists of 15 hours of audio recordings, Q&A from the audience, and the Masters presentation decks. It’s a toolkit that you can share with everyone in your office. You can access it any time you want, as often as you want.

Web App Masters OnDemand covers these topics

Constructing sites for active communities
Building native device vs. mobile browser-based applications
Producing beautiful data visualizations
Using data for design decisions
Integrating infographics and games to engage your users
Designing for mobile first
Handling rich interaction techniques on multiple devices & platforms
Looking at AARP’s journey into web-based applications
Conducting successful kickoff meetings
Finding users’ deepest needs and desires
Designing Salesforce.com’s Cloud Apps
Creating great design principles for your team
Ensuring a positive user experience with mobile

Learn more about Web App Masters OnDemand.

With Web App Masters 2011 OnDemand you’ll get

Fifteen hours of audio from 12 Masters
The best of the Q&A from all the tour stops
Presentation slides from all 12 talks
Unlimited access to the material any time you want it, as often as you want it

Order Web App Masters 2011 OnDemand now
No pre-ordering and no waiting for a disc. With just a few clicks, you can have Web App Masters OnDemand at your fingertips and start to improve your web apps today.

Purchase Web App Masters OnDemand by August 30, 2011, for $179. After the 30th, the price
increases to $229.

Now go get your bundle of goodness.

Responsive Web Design Techniques, Tools and Design Strategies

"Location, location, location": Radio 1 Big Weekend Check-In Experiment

If you look at my profile page on Huffduffer, this is what you’ll see:

my details,
what I’ve huffduffed,
links to subscribe to my podcast and
my tag cloud.

That’s the core information for that page, preceded by a header with site navigation and followed by a footer with some additional links.

Because I’ve provided a URL with my details, there’s some extra information displayed in the sidebar:

my other profiles on the web, as determined by Google’s Social Graph API,
MP3s recommended by Last.fm,
my latest updates on Twitter.

It’s a similar situation if you look at a piece of audio I’ve huffduffed. The core information is:

all the details about the audio (title, description, tags),
who else has huffduffed this,
possibly-related items and
links to share and embed the audio.

In addition, because I’ve used a machine tag—book:author=cory doctorow—the sidebar contains:

related articles from The Guardian,
sales information from The New York Times,
books on Amazon.

In both cases, this supporting information isn’t essential; it’s just nice to have.

There’s a potential performance problem though. Because this extra information is coming from third-party services—and despite the fact that I’m doing some caching—it could delay the display of the whole page. So I took some time on the weekend to adjust the architecture a little bit. Now the extra information is requested with Ajax once the core information has already loaded. This is lazy loading.

Now I’ve introduced a dependency on JavaScript, which is far from ideal, but because this is just “nice to have” information, I think it’s okay if it isn’t seen by a subset of visitors.

In fact, because this extra lazy-loaded stuff takes up valuable screen real estate, I think it might be acceptable to only serve it up to visitors who have the screen real estate to accommodate it:

if ($(document).width() > 640) {
// do lazy loading here
}

So if you load my profile on a small screen, you won’t see my latest tweets or my Last.fm recommendations. Likewise if you look at something I’ve huffduffed that’s tagged with music:artist=radiohead you won’t see information from Last.fm, pictures from Flickr or albums on Amazon unless you load the page with a wide enough viewport.

Now it could be that the real issue here isn’t viewport size, but connection speed …in which case I’m making the classic error of conflating small screen size with limited bandwidth. A script like Boomerang, which attempts to measure a user’s connection speed, could be very handy in this situation.

Lazy loading is the new fold

I was chatting with James about the implications that lazy loading could have for earlier phases of the design process: wireframing, page description diagrams, and so on.

Traditionally, you’ve got only two choices when judging what content to include: either something is on the page or it isn’t. You can use hierarchy, position and contrast to emphasise or de-emphasise the content but fundamentally, it’s a binary choice. But with conditional lazy-loading there’s a third option: include some content if the user’s circumstances warrant it.

Once again, Luke’s Mobile First approach is a useful thought experiment. It can help prioritise which elements are core content and which could be lazy-loaded:

Mobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn’t room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize.


So when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today’s desktop-accessed Web sites. That’s good user experience and good for business.

Sometimes there are political reasons for wanting the “extraneous detours and general interface debris.” Lazy loading for large-screen users could be the least worst option in that situation. Semantically speaking, the kind of content that might be marked up in an aside element might be a good candidate for lazy loading …if the viewport is large enough.

I have a feeling that we’re going to be seeing a lot more of lazy loading as the responsive web design revolution rolls on. Used judiciously, it could provide plenty of performance benefits. But if it’s taken too far, lazy-loading could be disastrous, resulting in sites that rely on JavaScript to load their core content—I’m looking at you, Twitter.

Tagged with
responsive
design
lazyloading
javascript
ajax
huffduffer
mobile