is to also release apps on the Apple
and Google stores, which naturally use
completely different coding languages
and require a huge amount of expense to
build—twice—and then distribute. This has
worked brilliantly for a handful of gaming
apps, social media giants like Twitter and
others, but as an industry-wide trend, it
sets the bar high for mostly offline brands.
You either have to create four different
mobile experiences—an Android app, an
iPhone app, a separate smartphone site
and even a separate tablet site for real go-getters—or you risk losing a huge chunk of
your audience, which are invariably young
and trendy. If you want to catch people at
the start of their brand affinity process for
lifelong value, you need to get them young,
and young is mobile.
Creating all these websites and apps is
expensive to design, expensive to build and
a huge pain to maintain. It’s great news for
digital agencies that bill by the hour, but it’s
a mess to manage.
Things Started to Change
By 2012, a new practice had emerged—
responsive web design—which grew in
popularity in 2013, with the Grey Goose
and Barack Obama websites as early
examples. Now, responsiveness has become,
arguably, the new standard, even as its
various technologies and techniques are
very young and continually evolving.
Responsive web design, or just being
“responsive,” means that you can now
create a single website at a single URL that
automatically adapts to whatever device
the consumer uses. No more “m.” anything.
You don’t even need an app. A well-crafted
responsive site reformats itself for a narrow
iPhone that uses touch and has a super
high-res retina display, an Android phone
lacking retina, a 7" mini tablet, a 10" regular
tablet and a desktop computer using a
mouse. All the same website. It’s flexible,
easy and “responsive” to the device at hand.
I’ve seen responsive sites programmed
to support five different displays—don’t
forget about portrait versus landscape
modes as you turn a tablet. Generally, most
responsive sites account for four display
widths: phone, small tablet, big tablet (or a
landscaped smaller tablet) and desktop. And
as the method progresses, I imagine you’ll
see up to seven “breakpoints,” or width
optimizations emerge, especially as more
device styles proliferate in the fast-paced
mobile device market. If consumers start
using really small 3" phones and really huge
14" tablets, being responsive will make it
easy to keep up with them.
How Does It Work?
Responsiveness is enabled by a blend of web
technologies, design and coding techniques
that enable flexibility for how wide or
narrow a webpage displays. It utilizes flexible
images that can resize themselves based
on the width of the page, as well as fluid
columns that collapse as the device narrows
and expand as a device widens. Check out
the latest version of www.nytimes.com on
your phone and laptop to see an example of
columns changing in action.
Crafting a responsive website requires
much more time and energy than banging
out a beautiful desktop site with a mobile
afterthought tacked on. You have to code
four websites at once. Web designers have
to start with a specific screen size and then
adapt the visual design three or four times.
After visually designing these various
sizes of the website and ensuring the
experience looks right, you then need an
experienced front-end web coder to create
these variations in code. This person or
team will work with the designer to make
sure the various breakpoints look right—
breakpoints are the moments at which the
site transitions to different screen sizes. My
advice is to focus on four widths: smart
phone, small tablet, big tablet and desktop.
There’s also a lot of talk in the digital
agency world about the right process for
creating a responsive site. Do you craft
them iteratively, with design and coding
happening at nearly the same time using
pieces of reusable code? Or do you employ
a more traditional waterfall approach where
the designer designs the site first and then
the coder takes over, with only minimal
iterations towards the end of the process?
Either way, by late 2014, the trend is
all major websites will be responsive—or
at least those sites that want to maintain
relevance to consumers. The methodology
for creating these sites will refine and evolve
since this is still a very nascent development
method. The important thing is to catch up
to the consumer and get started now with
your responsive project. n GCI
WEB, MOBILE DESIGN
ZACHARY THACHER in the principal
of Thacher Interactive, an award-winning
full service digital agency based in New York.
Thacher develops web marketing strategies,
responsive websites and social media
campaigns for B2C and B2B brands across
multiple industries. Follow Thacher on Twitter @zthacher and
on Facebook at facebook.com/thacherinteractive. For more
information, visit thacherinteractive.com or contact Thacher
directly at email@example.com.
PROBLEMS AND APPS
By now you’re probably convinced creating one site that’s works perfectly on multiple devices is far
better than creating two or three different sites, some of which don’t offer full functionality. Instead
of leaving 30–50% of your traffic in the cold, you’ll now be capturing 100% of your consumers.
Conversion can only happen if consumers have a site to view.
There are pitfalls, however. Some responsive sites are poorly designed, so they only really look
right on a phone or a desktop. You’ll see some sites on your laptop with vast amounts of empty
space or mobile sites that require too much scrolling.
And what if you have apps or are considering building an app? There’s a lot of strong opinions
about this. If you’re a big brand with huge budgets, you do everything. But if you’re leaner, you may
want to skip the app and instead try to get consumers to bookmark your site on their phone. It’s
almost the same as an app but no store or download needed.
CNN is now seeing more traffic to its mobile site than with its mobile apps. Personally, I think mobile
optimization is the future as consumers tire of having scores of non-core apps on their phones. Some
apps will never go away—Twitter, Facebook and Google Maps likely are relatively permanent. But, as
a consumer, if you make only an occasional beauty purchase, you don’t need an app for that brand or
store. You want to search for an item and click on the first website that correctly displays on your phone
while you’re on the bus, your tablet while you’re on the sofa or your desktop while you’re at work.
Technology and social media blog Mashable said 2013 is the year of responsive design. That
was for the cutting-edge few. By the end of 2014, you’ll see all new sites being designed for
responsiveness. It requires a lot of work, but the payoff is worth it.