Optimizing User Experience with Responsive Web Design

Optimizing User Experience Across Devices withResponsive Web Design User Focus - October 19, 2012 Clarissa Peterson @clarissa

Captions have been added for those of you viewing this online. So you canpretend like you were actually there…

Responsive Web DesignBefore starting, I want to make sure everyone knows what responsive design is.

If you’ve visited websites on a smartphone like an iPhone, you’reprobably used to seeing the regular desktop version of a website shrunk down to a small size.You have to zoom in to read any of the text.

And you’ve seen websites that have a separate mobile version. You don’t have to zoom on your mobile phone, but you also may not get all of the content that’s on the full website.

One Website On a responsive website, the browser responds to the size of the screen anddisplays the content in a way that it is appropriate for that screen size. But it’s only one website, one set of code, one set of content. Not separate websites.

It makes more sense if I show you. This is The Boston Globewebsite, which launched a responsive redesign in 2011. At thetime, it was the largest responsive web design project to date.

This is the site at the narrowest width: what you would see on yoursmartphone. The text is all full size, you don’t need to zoom in to read.

As you make the website wider, the content expands to ﬁll the space.

Now there’s enough room for the content to moveinto two columns. It’s the exact same content, though.

At desktop width, there is now room for everything to rearrangeinto three columns.You can see a lot more without scrolling, but it’s the same content as you see on a mobile phone.

Looking at the site in more detail, you’ll notice that there isn’t a full navigation at the top of the page.

But if you click on “Sections,” you’ll get a drop- down menu of the sections of the website.

Click it again and the Sections menu goes away.

At this slightly wider size, the content has expanded to make use of the full screen, and you can also see that the items in the header have been rearranged to take advantage of the space.

There’s still a drop-down menu for the Sections navigation,but now the navigation items are in two columns instead of one. Again, this is to take advantage of the extra space.

There isn’t enough room for the search box to appear at the top ofthe page. So instead there’s a search icon, and when you click on it…

Your search box appears.

Click it again and it goes away.

Now we’re at about the size of a tablet, and there’s enough roomfor two columns. Additionally, the search box in the header now appears by default, you don’t need to click to get it.

You still need to click the Sections link to see the navigation.

At this width, there’s enough room for three columns. Additionally, the full Sections navigation appears at the top; you don’t need to click to see the navigation items.

As we go even wider, things expand to take advantage of the extraroom, including the picture at the top left. The picture continues to be the full width of the column even as the column gets wider.

At a full desktop width, there is plenty of room for a detailed layout, but we stillhave the exact same content as we started with at the narrowest screen width.

Before I tell you how responsive design improves the user experience of a site, I’m ﬁrst going to tell you a little bit about how responsive design came about.

Before

Before mobile, computers and phones were totally separate. Our jobs as UXdesigners were much easier. And we couldn’t have even imagined what was coming.

Now there are all these different devices that we can use to access theinternet: smartphones, feature phones, tablets, laptops, eReaders. Whowould have thought you can carry a computer around in your pocket? Photo credit: Brad Frost via Creative Commons http://ﬂic.kr/p/cfQwL7

Nobody could have predicted the way things are now. So we need to understand we can’t predict the way things may be in the future.

Fixed-width SiteWhen we ﬁrst started designing for mobile phones, there were two main options. The ﬁrst was to just leave the site the way it was.You could still access the site from your mobile phone, you just had to zoom in and out to see everything.

This is what I get when I visit The New York Times website. I imagine they have a mobile site, but I can’t ﬁnd a link from this page.

It seems okay, other than everything being really tiny.

But when I zoom in so that the text is actually large enough for me to read, this is what I get. It’s pretty hard to read when you can’t even see a full line of text all at once.

Separate Mobile Site The other option was to create a separate mobile website. It hadseparate code, and often separate content, from your main website.

This mobile site from USA.gov doesn’t look too bad. It’s very clean and the navigation is easy to understand.

But when I go to the main USA.gov website, there’s all this content that isn’t on the mobile site. If I’m viewing the mobile site, I won’t have access to it.

Neither of those options was the right answer. Web designers tried out a lot of different ideas and techniques, looking for a better solution to the challenge of designing for mobile phones.

Responsive DesignIn 2010, web designer Ethan Marcotte put together a few different techniques into something he called “Responsive Web Design.” It started to catch on.

He described it in an article for A List Apart later that year, then wrote a book about it in 2011. This is a great book to read if you want to learn more about responsive design.Responsive Web Design http://www.abookapart.com/products/responsive-web-design/

Responsive web design offers us a wayforward, ﬁnally allowing us to “design forthe ebb and ﬂow of things.” - Ethan Marcotte

Future-FriendlyOne of the great things about responsive design is it allows us to plan forwhat might be coming in the future. We can’t predict the future and makeour websites future-proof, but we can make our websites future-friendly.

Content ParityAn important user experience issue that we need to think about is content parity, which is the idea that everybody should have access to the same content, no matter what device they’ve using to access the website.

For example, on the Consumer Reports site, the Recalls & Safety section is very important if you need information about recalled products.

But when I try to ﬁnd that content on the mobile Consumer Reports site, I don’t see it.

At the bottom of the page, there’s a helpful-sounding link, “Can’t ﬁnd what you’re looking for?” Perhaps it will lead me to a site map or something else that will help me ﬁnd what I need.

But when I click it, I get this. (read #2 above)

The beauty of the web is its openness. Don’t arbitrarily lock people out because of browser, device or conﬁguration. - Brad Frost @brad_frostSomething to think about:17% of cell phone owners in the United States access theinternet mostly from their phones.You can’t assume that people only do basic tasks on their phones, and do everything else from their desktop computers later.

Here’s another example. When I paid my car insurance bill recently, I found this helpful link on the front page of the Geico website, “make a payment.”

This next page was kind of unnecessary, but then...

I got to this page, where I discovered that I could access the paymentpage by just entering my phone number and zip code. I didn’t need to remember my username, password, or account number.

It makes sense. Why have unnecessary security on a pagewhere the only option is to give them your money? Who is going to try to sneak in to pay someone else’s bill?

I thought I’d check whether I’d have the same option on Geico’s mobile site. First, I got redirected to a page that tried to convince me to download an app to pay my bill. It seemed a lot of effort to just pay a bill, so I clicked “No thanks,” and then...

I got this page, half of which is wasted on a photo of the nightsky. It seems like the only option for paying my bill is to log in.

I thought perhaps the “Explore GEICO” button would give me some of the other options from the website.

But no, that just gives me links to their social mediapages. I’m not sure what that has to do with exploring.

So my only option, if I didn’t want to log in to pay my bill, was to clickthis tiny “Desktop Site” link all the way at the bottom of the screen. It’sclear that they don’t care if I can ﬁnd my way to the rest of the content.

Context of UseAnother important user experience consideration is context of use.This refers to the conditions under which the website is being used.

You’ll hear people talk about “mobile context,” but it’s more complicated thanthat. Not all people using mobile devices are out running around somewhere, and not all people using desktops/laptops are sitting behind a desk.

Some people actually are running around when they’re using their mobile device. Photo credit: Mith Huang via Creative Commons http://ﬂic.kr/p/9B7A4c

But others might be sitting on the sofa at home, browsing the web or buying tickets to Disney World.Photo credit: Kai Chan Vong via Creative Commons http://ﬂic.kr/p/5c4Sfv

I’m not sure what these kids are doing, especially the one on the left, but they’re deﬁnitely not running around.Photo credit: Carlos Smith via Creative Commons http://ﬂic.kr/p/8tLb4P

It can be downright surprising where people are using their mobile devices. Photo credit: Pete Markham via Creative Commons http://ﬂic.kr/p/2zvrrJ

Just as there isn’t only one context of use for people with mobile devices, there also isn’t only one context of use for desktop and laptop computers.

For example, you can’t assume someone on a phone has a slow connection, and someone on a laptop/desktop has a fast connection. Most of us have sufferedthrough slow hotel room wiﬁ where it takes a couple minutes to load one page. Photo credit: Wendi Dunlap via Creative Commons http://ﬂic.kr/p/vMJM6

So then why not make it faster for everybody, not just mobile users?

You also can’t make assumptions about screen size. An ofﬁce worker may have a tiny screen...Photo credit: Channy Yun via Creative Commons http://ﬂic.kr/p/51QJr6

While a home user may have a huge monitor.Photo credit: Matt Hamm via Creative Commons http://ﬂic.kr/p/EyrLG

Responsive Design So you need a site that works for everyone. That’s where responsive design comes in.

Mobile FirstThere are different ways to put together a responsive design. The best wayis to use a mobile-ﬁrst perspective. Designing for the smallest screen ﬁrst forces you to focus on the content, and decide what’s really important.

Trying to ﬁt everything from a desktop site into a mobile site often just doesn’t make sense.

The Washington Post realized this. Their mobile website is much simpler,cleaner, and straightforward. It only has the information you actually want.

But then who do they think is actually going to want the rest of it? This istheir front page. I counted 184 text links (that’s not including images or ads).

Too much visual information thrown at me all at once makes my head hurt.

Mobile use case: I just transferred moneyat my desk using my phone becauselogging into my banking app requiresfewer steps. - Stephanie Rieger @stephanierieger Why is it easier to do a transaction on a mobile phone rather than on the bank’s regular website?

Make it work better for everybody.

Examples

United Pixelworkers is an ecommerce site. Not all responsive sites arecontent-based rather than functionality-based.You can scroll down to see the various products that are featured on the front page.

When the screen gets wider, everything rearranges so you can see more at once.

At full width, you have a beautiful layout. But it’s the exact same content that you saw at the narrowest width.You won’t bemissing anything if you go to this site from your mobile phone.

The WWF site has beautiful photography. They don’t want to waste it by making the photos tiny on a small screen.

At desktop size, there’s space to make the main photo even bigger, but still room to show additional photos below.You’ll get the same content whether you’re on a mobile phone or a huge monitor, you’ll just be able to see more without scrolling.

This is a company that sells surfboards. Instead of making the picture change size...

They show more of the picture. Responsive design gives you a lot of options.

The University of Chicago has a lot of information on their website. By designing from the smallest screen size ﬁrst, they were able to make sure the most important content appears at the top of the screen.

On a desktop screen, you see the same content, but there is room for someadditions, such as the sub-caption on the main photo. That text isn’t an integral part of the content, so it was hidden at the narrower width to save space.

You’ve probably noticed from these examples that responsive designstend to be very clean and uncluttered. Compare that to the Washington Post site we saw earlier. Which is a better user experience?

On responsive designs, since it’s the same website no matter what sizeyou’re viewing it at, the branding and the look & feel are consistent across devices. This often isn’t the case when you have a separate mobile site.

There’s more content on the page at this width, and you see additional elements such as the navigation. But it still looks and feels like the same website.

Emeril’s site does a great job of presenting menus so they’re easily viewable on a small screen.You have to scroll down quite a ways to see everything, but that’s okay.

At desktop width, the menu layout is different and they’ve added pictures forthe three menu types at the top, an enhancement. Mobile users don’t see thepictures, but that’s okay because they aren’t an essential part of the message.

Responsive Web Design1. Give everybody the same content2. Displayed appropriately for their device3. No matter what device they have Bottom line, it’s all about the user.

There is no Mobile Web. There is onlyThe Web, which we view in differentways. There is also no Desktop Web. OrTablet Web. - Stephen Hay @stephenhay

Clarissa Peterson clarissapeterson.com mail@clarissapeterson.com @clarissa

http://www.scoop.it	1357
https://twitter.com	80
http://ajitkular.tumblr.com	26
http://www.womentalkdesign.com	17
http://lanyrd.com	15
http://womentalkdesign.com	8
https://t.co	3
https://si0.twimg.com	3
http://dev.lanyrd.org	3
http://www.bing.com	2
http://translate.googleusercontent.com	2
http://presentationdocs.playableitems.demobo.com	2
http://www.google.com	1
http://www.soso.com	1
http://news.intigi.com	1
http://127.0.0.1	1
http://womentalkdesign.zippysites.com	1
http://bottlenose.com	1
http://feeds.feedburner.com	1

Optimizing User Experience with Responsive Web Design

by Clarissa Peterson on Oct 22, 2012

Accessibility

Categories

Upload Details

Usage Rights

19 Embeds 1,525

Statistics