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.
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
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.
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/
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.
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.”
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.
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.
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.
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
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.
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?
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.
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.