Menu

Aaron Gustafson & Jenn Lukas – Cross-device Adaptive Design

by Sean Carmichael
Play

[ Transcript Available ]

Aaron Gustafson and Jenn Lukas

Responsive web design is widely regarded as a must when designing for multiple devices. With just one code base, instead of multiple sites, you can more efficiently make use of your resources. But, how your design looks is only a piece of the overall experience for a user. Having it be able to adapt to different browsers and technology can fully round out the interaction.

Aaron Gustafson describes adaptive design as layering on the experience. He likens it to a peanut M&M. At the core is a peanut, which is a perfectly acceptable snack. But after layering on chocolate and then a candy shell, it arguably becomes a much more enjoyable experience. Just as on the web, if you have a more capable browser that can support the latest in CSS and HTML, you’ll get a richer experience. But even at its core, your site should work on more stripped down devices.

Jenn Lukas has noticed that some companies have gone “all-in” on a technology or approach in the past and that ends up making things more difficult in the long run. If, for instance, they’ve invested heavily in Flash or JavaScript it could literally be impossible to reach potential users. Another consideration is speed. If you have a really heavy website, load times on cellular networks could be creating painful experiences for users.

Jenn and Aaron will be presenting one of 6 daylong workshops at UX Immersion Mobile, April 13-15 in Salt Lake City. For more information visit uxim.co.

Recorded: January, 2015
[ Subscribe to our podcast via Use iTunes to subscribe to UIE's RSS feed. ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]

Full Transcript.


Jared: Hello, everyone, welcome to another episode of the SpoolCast. Today we have double the fun, because we have double the guests.

We have Aaron Gustafson and Jenn Lukas, and I’m very happy to have them here today to tell you about adaptive design across devices.

Hello, Aaron and Jenn.

Aaron: Hey, Jared.

Jenn: Hi.

Jared: Hi. I’ve been wanting to talk to you guys all week, because this adaptive design thing, this is something that I think is really becoming an important part of people’s technical toolkits. A lot of the folks I talked to–I don’t know about you, Aaron, if you find it to be this way. This is still a little bit too new for a lot of folks. It should be something that’s part of everybody’s toolkit. But for some reason, this is still something that is new. Have you seen that?

Aaron: Yeah, I find that a lot of–especially large organizations, they have so many hurdles to jump through before they can begin to integrate new ideas, new concepts, new tools. There’s often a huge approval process and sometimes it doesn’t even involve the people who are actually doing the work, so other people have to evaluate them. A lot of large organization, the shifts turn slowly.

Yeah, there hasn’t been quite as much uptake as I would like to see for the betterment of the web. But it is starting to change. I mean, we’ve seen some fairly large organizations begin to embrace progressive enhancement and the adaptive web design philosophy and component parts of that, like responsive design and stuff.

That’s promising, and I think it’s only going to get better. I think the more we’ve kind of learned from making this progressive enhancement approach and share the knowledge that we gain from doing so in terms of benefits in interoperability on different browsers, or device compatibility or performance or just being able to get projects done time or ahead of schedule and on budget and stuff like that.

The more we learn to insure that, the more organizations are going to embrace that concept or at least be willing to give it a try. Then when they see success from that, it just kind of goes out from there.

I think we’re going to hit a point when it’s the norm, and I think that will be good for a great number of reasons, both for business reasons for those companies as well as for us as consumers of those business products and such on the web.

Jared: Jenn, have you been seeing sort of the same thing in terms of your clients? You do a lot of stuff teaching design to folks like, “Girl Develop It” and things like that. Are you seeing that progressive enhancement and sort of this adaptive approach is something that is new to people? Or is it something that they already get?

Jenn: I definitely agree in that there’s a lot of newness. I think what it comes from is a lot of people, both people looking to learn, so some of the classes they teach, and some of the places that I consult on site for, what you find is a lot of people are sort of switching their main focus at their jobs.

I’ve seen some people who forever have been in HR and want to move over to more development. Or I’ve seen people that have been print designers and now are moving over to web designers. I’ve seen a lot of people that are shifting their focus, and when you’re shifting your focus, you kind of don’t know where to start.

I think a lot of us always face that, there’s so many things to learn on the web, so sometimes these adaptive principles aren’t really the top of everyone’s list of sort of knowing what they are and how to achieve them.

I think a lot of it stems from people just not knowing where to start, doing a lot of switching other jobs. I know I’ve worked with developers who have a huge Flash background. When they move over to things, they’re not as familiar with web standards and ways to build things.

I think that this is sort of a familiar problem we had earlier on in the web with WYSIWYG editors. We were so used to just seeing how things were done and rushing through things that we sort of miss the whole artisan web design craft of it where we’re actually spending the time to know what goes underneath of it, especially when there’s so many sort of, quote unquote, “easy” solutions out there for people to just get up and running so fast.

Jared: When you say artisan craft design, can you say a little more about that?

Jenn: Sure. I mean, it’s weird, I feel like recently, a lot of people that I know are sort of doing the thing where, I took a woodworking class recently, for example. I know a few other people that have done something similar. You try to really find out, you sort of deep dive into a craft, right?

It’s cool that we have picture frames, but wouldn’t it be neat if we really knew how to make the picture frames? Wouldn’t it be great if we didn’t just glue some wood together? What if we actually measured the picture frames so they were built properly? What if we made sure that we stained them so the picture frames actually lasted a really long time? To take this craft and dive into it and not just take it at face value.

I think the same sort of thing can be said with web design, where I can go ahead and download and quick Tumblr template or a Bootstrap template and get up and running really fast. But that doesn’t necessarily mean I know what goes into dissecting that or seeing what things build in and how to build on that to really make it last a long time.

Jared: That’s funny that you mention that. I recently had this experience where a friend of mine is like a master craftsman woodworker. He’s been doing cabinets and tables and other kitchen counters and things like that for decades, I mean, 30, 40 years.

We went to the Museum of Fine Arts in Boston one afternoon and we looked around the American history exhibits. They have all this furniture from like the Revolutionary War period and 1700s, 1800s. We would walk into this room and there would be this cabinet. He would look at that cabinet, he’d go, “Oh, wow.” I wouldn’t know what he was looking at. Then suddenly he was showing me that, for one thing, the doors were perfectly aligned. This was, of course, if was a museum piece, so of course, it was in perfect condition.

But this was stuff that was not made with power tools. This was stuff that was made 300 years ago with hand tools. Yet you could tell that the wood for both doors was taken from the same tree, because the grains lined up exactly.

This is stuff I would have never seen. It never occurred to me that that was important. But now, I can look at those doors and I can appreciate that level of craft, partially because he had such a strong reaction to it. But partially because he was able to open my eyes and see that.

Is that what you’re talking about? That sort of being able to see the detail that the craftsman put into it, that, me as a person who just goes into the cabinet, grabs a glass, closes the door, I wouldn’t necessarily know, there’s something about it that makes it special.

Jenn: Then think about once you do some research to find out what that is, then you start looking for it. Right? If you go to an Ikea to buy a cabinet and your cabinet breaks in a year, no offense to Ikea. But you might expect that because you might see that maybe the materials aren’t made with the same materials that were being built at maybe a more higher end sort of craftsman like material.

Jared: Right, right. But at least I have an Allen wrench.

Aaron: Or thirteen of them.

Jared: Yes, that’s right.

Jenn: Honest, that’s true. I mean, if you go and if you look at the Space Jam website, right, like Space Jam website is one of those examples of a site that’s been online forever and is still online and you can still actively browse the website. It’s an interesting one.

Jared: That is true, yes.

Aaron: Yeah, I mean, I think isn’t that kind of the goal, to me, in a lot of ways, is that, in this adaptive approach, in making things with progressive enhancement, it is very much about an artisan craft of creating websites. In the end, what we’re trying to do is build robust web experiences that stand the test of time very much like the Space Jam website. Right?

We want to create like the 1964 Chrysler Imperial of websites that actually gets banned from the demolition derby because it’s such a resilient car.

Jared: I didn’t know that. Is that for real?

Aaron: That is for real. A 1964 Chrysler Imperial banned from the derby.

Jared: That’s, because it’s just like this human…

Aaron: It’s a tank.

Jared: Yeah, it’s this armored personnel carrier.

Aaron: Basically, yes. It’s like the A-10 tank killer plane, which is another one that, it’s pretty much indestructible.

Jared: A-10 tank killers from demolition derbies?

Aaron: Yeah, I don’t think you can have those in the demolition derby. But that would be awesome.

Jared: That would be awesome. It would bring it to a whole new level.

Aaron: Oh, yeah.

Jared: But so, you mentioned before, Aaron, the importance of progressive enhancement. Help me understand, what is it about progressive enhancement that sort of changes the game for everybody?

Aaron: I mean, in a lot of ways, progressive enhancement is kind of like going back to the roots and the history of web design. It’s about thinking from the content as well as kind of the key tasks that somebody needs to be able to accomplish on a page, whether that’s reading content, submitting a form, buying a product, whatever it is, starting with that as kind of the core thing that needs to be able to be accomplished by anyone on any device, no matter what.

Whether it’s touch, whether it’s truly a text-based browser in a dumb terminal application or something like that, all the way up to a 60-inch display on a wall somewhere. We want it to be able to do that one thing everywhere.

Then taking that basic nut and enveloping it in layers of enhancement, so I often use the analogy of a peanut to a peanut M&M. You’ve got the peanut, you wrap it in chocolate, it becomes a Goober, which is, I would say, infinitely better than just a peanut, and then you wrap it in a candy shell and it’s frigging amazing. Any of those are a valid snack, assuming you don’t have a peanut allergy. But any of those are a valid snack and they’re part of a continuum.

In the same way, progressive enhancement asks us to build experience as a continuum on the web. We can take advantage of different capabilities of different devices and browsers and so on and so forth as they become available to us.

Design, in some ways, becomes an enhancement. Interaction becomes an enhancement. Different types of interaction become enhancements. If you’re on a store locator, for instance, you may have JavaScript and may be able to load in a Google map that’ll display the locations where you can buy X, Y or Z product.

But if you have JavaScript and you also have geolocation API and the person gives you access to it, you could say, “Hey, here’s the closest one to you.” Somebody doesn’t even need to necessarily type in their zip code, for instance.

I mean, I keep coming back to this concept of a continuum of experience. I think in a lot of cases, in the UX world, we think about experience as this one monolithic thing that we want everybody to have. When, yes, that’s a great ideal, but the reality is that we don’t control how our sites are consumed or even delivered, in some cases.

Jared: I’m still sort of stuck on this idea that I could have the chocolate layer of a Goober turned off.

[laughter]

Jared: And still have…

Aaron: What would that be like?

Jared: Well, I would just have a peanut.

Aaron: Well, yeah, I mean, I imagine it would probably be a lot like, shit, what are those things called? The almonds that you get at Easter time?

Jenn: Jordan almonds.

Aaron: Yes, thank you.

Jenn: Yeah.

Aaron: Jordan almonds would be the equivalent, but with a peanut. It could happen.

Jared: This is the problem of being Jewish is that I don’t know about Jordan almonds. I’m learning about Chrysler Imperials and Jordan almonds today. Oh, this is like the best podcast ever.

Jenn: I mean, we could take it further. You might want a Raisinet for your website, but as much as we hate to admit it, you need a raisin for that. You ask someone if they want a raisin, they’re usually like, “No.”

But when you’re like, “But that makes a Raisinet,” they’re like, “Oh, yes. Sign me up.”

Aaron: I wonder what a candy shell would be like on a Raisinet?

Jenn: Oh, maybe weird.

Aaron: Or it could be amazing.

Jared: It’s like a yogurt covered raisin or something. Right?

Jenn: Oh, yeah. Yeah.

Aaron: Indeed.

Jared: OK, we have definitely digressed.

This isn’t just about turning on and off JavaScript, right? There’s content related stuff. I mean, there’s all sorts of things that could be part of this. Right?

Aaron: Absolutely.

Jenn: Yeah, I’d say of course. I mean, you run into content issues with the different devices and screen sizes that we’re designing for and functionalities all the time.

I was debugging something the other day with someone on an iPhone, one of those lovely instances where you’re trying to figure out how to handle a modal on a small screen, which is always a joy, I’m sure that we’ve all faced.

We were discussing it, and we sort of, we figured out the technology problem behind the issue that was happening. But as soon as you go ahead and do one of those switch up a portrait to landscape, then all of a sudden, you run into a whole different problem, because it’s a different size that you’re sort of QAing for now and it’s a different process that we have to determine.

Because we’re not stuck in one size anymore. We have these constraints that I absolutely love and adore that we have to figure out how to work with them, also.

Sometimes our content, I think we’re so focused on, “Hey, we’re going to design this content for desktop,” or, “Hey, you know what, I remembered to design it for an iPhone, too.” We get stuck in these words of, we’re designing for an iPhone as opposed to maybe designing for a small screen, or something with a slow connection, more features and sizes versus these sort of words we’re using as consumers, such as an iPhone or an Android.

It’s been interesting to see how we tackled these problems with content based on different devices that we’re looking at.

Jared: Are we talking about a lot more work to do this? Or is this one of those things where, once we get the hang of it, it can actually sort of save us work down the road?

Aaron: I would say it’s definitely the latter. In our experience, we had a couple of the projects where we actually, at the request of our client, did not use progressive enhancement, so we were actually able to use that as a kind of foil to our normal process to actually see how much we were saving as we moved into the progressive enhancement mindset.

What we found is, for instance, on one project that we did that was specifically built just for Chrome that happened to work in Safari and worked pretty well on an iPad, as well. But it was made as a Chrome app, specifically, with all the cutting edge bells and whistles and stuff like that. The organization later came to us and said, “Hey, we want to make this work on Firefox and Internet Explorer.”

Well, some of the cutting edge things that Google had implemented in Chrome were no longer specs that the W3C was pursuing, they had never been implemented in IE, they’d never been implemented in Firefox. We had to kind of go back to the drawing board and rewrite a lot of our JavaScript, because we were using client side database for data storage.

That ended up taking, I think it was like an additional 40 percent of the original budget, just to add two new browsers.

Contrast that with another project that we did, which was originally aimed at mobile apps as a sort of window into a web page for the sign in process for these mobile apps. We were targeting iPhone, iPad, and Android. Then we threw in, on our end, Windows phone, because we thought maybe they were good on the route of doing a Windows phone app as well.

But we approached that project, which was aimed only at those four platforms, but we did it from a progressive enhancement standpoint, because we knew that would serve the client well in the long run.

About six months after launch, they came back to us and were like, “This is great, we want to roll this out to our end dot site now. Here’s a list of fourteen thousand devices that accessed login in two days and we need to be able to support them.”

Actually, we kind of took a step back, because fourteen thousand devices is a heck of a lot of devices to try and support.

Jared: Yeah. I mean, most people just stop at thirteen thousand and call it a day.

Aaron: Exactly, exactly. As you would. I wrote a little script to basically pull down for all those user agent strings the various specs of those devices, screen size, processor, browser version, OS version, all that sort of stuff. Then I started doing some manual aggregation into like products.

Then got it down to about 29 or so representative devices that covered about 97 percent of the spectrum and were WiFi compatible. There were a couple that were really old browsers, like, Openwave, that I could not find a WiFi enabled device that had that on there, so we chose an emulator for those instances. There were a couple of others that we just could not get, even on eBay, going way back.

What we said is, OK, we’re going to cover 97 percent of it. If you encounter an issue that we don’t cover in it and somebody alerts you to it, we’ll absolutely take care of it. But we’re fairly confident that if we get that 97 percent, we’ll be covered across the board. Some of those were like BlackBerry 4, BlackBerry 5, all pre-WebKit. Some fairly old, gnarly browsers.

We gave them a budget that was one-third of the original project budget for the four platforms. One-third for 1400 more devices. We actually came in at half budget and half time, because the progressive enhancement philosophy just works.

We had a little bit of work to do in older BlackBerry devices, because we were using HTML5 and BlackBerry devices didn’t know what to do with some of those HTML5 elements. But once we did those few little tweaks, most of our time was just spent looking at the pages in those browsers, not so much actually fixing bugs in those browsers.

That, to me, was just this huge, holy crap, this really is as amazing as I’ve felt like it has been, really gives some validation to something that I’ve been talking about for a number of years. I mean, I think that kind of bears out why this philosophy is so awesome, is because it actually creates less work for us down the road. We can support more devices, we can reach further and we can increase our customer base.

I mean, I think if we look outside the world of web and we look at apps, for instance, one of the big reasons that WhatsApp, which is not all that remarkable as an application. I mean, it’s a chat application. There’s like 2500 of them in the App Store in iOS.

Jared: Yes, but none of them cost $19 billion.

Aaron: Right, exactly. Part of the reason they cost that is because they had, I think it was like 600 million users. The reason they had 600 million users is because they actually embraced platforms outside of the sort of myopic world that we all live in of high end iOS devices and high end Android devices and actually made WhatsApp available on J2ME and all of these feature phones and low end smart phones that are in developing nations.

That’s a huge accessibility thing in terms of the broader scope of the term accessibility. It increased their customer base and made them valued at such a massive amount, because people were able to use them.

I think we get trapped in this very myopic view of, “Oh, I’m designing for the mobile web, I just need to test it on my iPhone.” Ignoring, of course, the fact that we’ve got four different sizes of iPhone now and iPad versus iPad Mini, so a 20 percent reduction for 80 percent the size for the iPad Mini versus the iPad. But they both report as the same from a user agent string perspective, so there’s no way to tell the difference between these devices.

I think the more we begin to think about experience and design and interaction as kind of a fluid thing, the more it kind of frees us from these trappings. That’s where I see progressive enhancement being a really good guiding philosophy, because it does kind of say, control what you can up to a point, but then it’s OK to let go. It actually makes us able to reach more users, which is ultimately beneficial to our bottom line.

Jared: Jenn, is this something that’s really just a, “I’ll leave it to the developers and they’ll take care of it.” Or, as a designer, do I need to really understand some basic things about adaptive design and progressive enhancement and all this stuff in order to make the design process smoother and faster?

Jenn: I think it’s totally a complete team effort. I think that a lot of these decisions, it’s not really technology or development deciding, like, OK, sure, you can hide content or load stuff on your site different ways.

What’s really important is, getting at what is the main goal of your website. What are your visitors going there for? What are the most important interactions that they’ll be having on your site? What’s absolutely necessary versus what is basically fluff that is being added? What are things that we need versus what are things that will help the experience?

One of the things that I think has helped sites I’ve worked on the most is really things like user testing and surveys and A/B testing to see what people were interacting with on the site. What people were reading, where they were spending their time, and sort of coming up with a list of our primary and secondary actions that people would be taking on pages of the site, or what the primary goal was and finding out from them what they were looking for.

What that really lets us do is focus on the main user interactions. What are they here for? What do they really need to see, and sort of building up from there.

One of the things that’s really nice about doing that is you really allow the user experience to match how you’re building out the site. Here are the most important things that your visitors are looking for, so let’s build with those in mind from the beginning.

Jared: Well, I’m really excited about the workshop, because I feel like we’re going to be able to spend an entire day talking about how you take the content and the functionality of the websites we’re trying to build and really make them available on all these different devices, under all these different contexts.

That will really sort of expand the use, and in some ways, protect our work in the future. Because we won’t have to spend a lot of time worrying about, oh, there’s this new device out there, will our stuff work on it? It will just work and if it doesn’t have the features we need, it’ll still just work. I mean, if it didn’t have all the fancy features that we wanted, it’ll still just work. I think that’s really exciting about where we’re at and where things are today.

As you guys are thinking about this workshop, is there something that keeps coming up as a sort of beacon of, this is happening in the future. Maybe it’s, we’re moving to watches or we’ve got all these different Android platforms, because there seems to be now a new release of Android every seventeen minutes. Is there something that is really driving people nuts that this is just going to be a fabulous way to just relieve that pain that developers are feeling?

Aaron: Jenn, do you want to start?

Jenn: Something I’ve seen a lot of is that people have gone sort of all in on a technology or an approach in the past. What they’ve done is they’ve maybe relied heavily on a JavaScript solution to solve something.

Now, what I find that people are facing is that, when you go all in with technologies or multiple technologies, or multiple approaches, and now we’re faced with things like speed. How do we get our websites to be faster? We found that we need to work backwards.

Now we sort of have to start pulling out these solutions that were sort of forced in and maybe not all the way thought through, in order to get back to what we really want, and that’s to iterate just on the content and experience.

Some of the things that I’ve seen for people that have not been building in a progressive enhancement manner is that they’ve sort of gone all whole hog on something that hasn’t worked out so well in keeping their site usable for people with all of the new constraints that we’re dealing with. Especially in the mobile world, where we need to make sure that we’re designing for people and having our sites be fast enough for them to use.

Aaron: Absolutely agree. I think, I guess, when you start to pay attention to the world of devices, when that finally starts to seep into your company or organization or just your workflow, and you start to become aware that there’s more than just what you personally used, it becomes really overwhelming really quickly.

I mean, even just looking, as I mentioned, the range of iOS devices right now. Then you get into the Android devices and it gets really crazy. The thing is, you could have a latest version of Android, I forget what it’s, Cupcake or Chocolate Cake or German Chocolate Cake, who knows what the new one is. But something food related and I’m hungry for dessert now.

Whatever it is, like, that same version of the operating system could be running on Google’s flagship product or Samsung’s flagship phone or it could be running on some $50 piece of hardware that’s being sold at a CVS or a Walgreen’s. For someone who only has $50 to spend on access to the Internet, like, we should be able to deliver them a good experience, too. Right?

It may not be the same experience as somebody on that high end device, but we should be able to, or we should be considerate of their needs and of their situation and be able to give them a experience as opposed to no experience.

To me, once you start to become aware of that, progressive enhancement is really the only way to deal with that broad spectrum. We’re not even getting into talking about Firefox phones or Tizen or all of these other operating systems that are out there in the world, or even Symbian, which is still kicking around.

I think beyond that, if we look beyond the now into the future, where I think progressive enhancement is really going to start to shine is when the voice-based user experiences start to come to the forefront. We’re just scratching the surface right now with systems like Siri and Google Now and Cortana. But as we move forward, voice-based user action, I believe, is going to surpass touch-based interaction in terms of the ways that we interact with things.

It has a lot of potential to even broaden people’s ability to interact with technology. Because right now, even though a lot of us think about video content and we think about images and all these pretty pictures on the web and games and stuff like that, a lot of that is very reliant on text and the ability to read.

The reality is that somewhere north of 14 percent of the world’s population is illiterate and therefore cannot participate in the modern world even if they were to have Internet access. Depending on what grade level you’re talking about in the US, some people put that number aside as 47 percent, in the US, of people are functionally illiterate.

With a percent of the Fortune 500 companies requiring applications to be done on computers in order to be able to have a job in a place like Target or Walmart, it’s really important that we start to create technologies and create systems that are going to be able to be used via voice.

Somebody who may be functionally illiterate but is perfectly fluent in a given language could be able to apply for a job or make a purchase online or what have you, look up information, find out about cancer treatment or whatever it is. They should be able to participate in the public sphere that is the Internet now.

I think progressive enhancement is the way that we can guarantee that that happens, because it’s about thinking about the content first. It’s about thinking about how an interface sounds, how it’s read out. Because we’re thinking about things like accessibility and screen readers, and that is really setting the stage for that future voice-based user interactions.

Jared: Jenn, Aaron, thank you so much for spending the time helping me understand what adaptive design is, what progressive enhancement is and how we can use it to build a better web.

Aaron: Thanks, Jared. It’s been a pleasure.

Jenn: Thanks, guys.

Jared: For those of you listening at home, if you guys thought this was awesome, then you really want to spend an entire day with these guys. It’s going to be a lot of fun, because they’re going to do these interactive sprints where you’re going to build out designs and start taking them apart and then rebuilding them and make them more and more adaptive as the day goes on. I think it’s going to be a really fabulous workshop.

That’s going to be at the UX Immersion Mobile Conference, which is going to be in Salt Lake City, April 13-15. You can find out more about that at uxim.co, where you can see Jenn and Aaron’s workshop and all other things that are happening.

Again, Jenn and Aaron, I look forward to seeing you in Salt Lake. Thank you for joining me today.

Aaron: Thanks again.

Jenn: Always a pleasure.

Jared: Perfect. For those of you listening at home, thank you once again for listening to the podcast, and as always, encouraging our behavior. We’ll talk to you soon.