4imprint.com

Web Des ign

© 2013 4imprint, Inc. All rights reserved

How to opt imize for mobi le with responsive Web des ignIt’s not just desktops anymore. With the variety of devices and screen sizes on

the market today, it’s imperative to reach visitors regardless of the device they’re

using. In fact, mobile Internet usage is expected to surpass desktop Internet

usage this year. Mobile devices like smartphones and tablets are the reason why

responsive Web design (RWD) is all the rage.

Responsive Web design is about reaching end users whether they’re on

a Blackberry®, iPhone®, Android® or iPad®. Responsive is a method that

works for various widths and screen resolutions. It allows you to design sites

so none of your valuable content is lost or lacking basic aesthetic appeal—

things that might cause visitors to “X” out of your page and visit those of

your competitors instead.

The advent of mobile devices compounds the complexity of Web design

because, instead of just a PC or laptop, there are hundreds of variations of

mobile devices on the market, all of which have different resolutions and

dimensions. Simply having a website isn’t good enough anymore. These days, it’s

all about being accessible online no matter what the technological weapon of

choice.

This Blue Paper® will help you understand this innovative trend in Web design

and use it to your advantage. It will illustrate mobile’s future, explain why

responsive matters and allude to other options to optimize your Web presence. It

does so with the help of a handful of respected Web designers and developers, all

of whom agree that RWD helps grow reach. In business, there’s nothing quite as

awe-inspiring as growth—especially when it’s your own.

Mobi le trends and consumer behaviorIt’s tough to tell how many websites are now responsive, but research gleaned

from an array of sources indicates that peoples’ habits are changing, fast,

and that’s what matters. Recent research by MobiThinking®, a leading mobile

marketing research company, indicates that 25 percent of mobile users in the

United States never use a laptop or PC to surf the Web anymore.1 More and more

people are using an array of mobile devices to browse the Web and connect with

people, brands and causes they care about.

1 “2012 Mobile Marketing.” Marketing Sherpa, Nov. 2012. Web. 20 Dec. 2012. <http://www.meclabs.com/training/misc/2012-Mobile-Marketing-BMR-EXCERPT-launch-special-save-100.pdf>.

© 2013 4imprint, Inc. All rights reserved

Responsive Web design’s popularity is due in large part to the intensity with which

mobile technology is growing … and it’s staggering. Of the seven billion people

on the planet, more than a third of them are online. A billion of those people

have access to active mobile broadband, which allows them to use their mobile

phones as often as they want.

Smartphone users are especially enamored by their phones, checking them an

average of 150 times each day.2 From text messages to social networks, emails and

Web browsing, they seem to serve every purpose. Believe it or not, there

are more smartphones being activated every second than babies being

born ... worldwide.3

Going mobi leIn order for companies to keep visitors happy, they need a Web presence

optimized for mobile, one that fits the screen of whichever device they

choose to use—be it a smartphone, tablet or desktop computer. That

kind of adaptability is exactly what makes RWD such an alluring option;

However, it is only one option among many because optimization can be

done in a couple different ways: with a mobile site, a mobile app, mobile

templates or RWD.

Mobi le appl icat ionA mobile application is a software application (or, “app”) designed for specific

mobile devices. It is the mobile solution most people are familiar with thanks

to iTunes’SM more than 700,0004 downloadable apps. Apps are generally small,

individual software units with limited functionality and can reference the

phone’s capabilities, including the camera or GPS, to enhance the features of the

application.

FourSquare® stands as a great example of mobile application. For instance,

it utilizes a phone’s GPS function to facilitate its check-in features. If you’re a

company or organization needing to provide a specific function to its customers,

then a mobile application may be a preferred choice to other mobile options.

Some of the challenges you should be aware of include the inability to cross

platforms between iOS, Android, Blackberry and Windows® operating systems,

and the time it takes to upload and approve an application to a platform market

place, which can be extensive and costly. However, it can be an elegant solution

2 Ibid.3 Waugh, Rob. “Resistance Is Futile! More Androids Are Activated Every Day than Babies Are Born.” CES 2012:

More Androids Are Activated Every Day than Babies Are Born | Mail Online. Daily Mail Online, 13 Jan. 2012. Web. 20 Dec. 2012. <http://www.dailymail.co.uk/sciencetech/article-2086144/CES-2012-More-Androids-activated-day-babies-born.html>.

4 De Vere, Kathleen. “400 Million IOS Devices Sold, 700k Apps â” 90 Percent of Which See Downloads Every Month.” Inside Mobile Apps. Inside Network, 12 Sept. 2012. Web. 12 Jan. 2013.

© 2013 4imprint, Inc. All rights reserved

designed for a specific purpose and can provide users exactly what they want,

when they want it.

Mobi le templateThe middle ground between an app and a full-on mobile site is a mobile template

which “lives” as code within the desktop website as a solution to address mobile

compatibility. It’s a quick and affordable solution that strips or eliminates some

site content and images to provide a cleaner site that makes it easier to access

on a mobile platform. The downside to this solution is that some graphics and

content may not display, it’s not specifically designed for mobile behavior, and it

is less able to adjust to the variety of mobile platforms—leaving users potentially

less than satisfied.

Mobi le s i teA mobile site, on the other hand, is programmed specifically for a variety of

mobile devices and does not “live” on the desktop site, but exists alone. It

ensures that content remains compact and accessible to quicken load time. Often,

mobile sites are designed to provide the most critical information users seek,

enabling them to access information quickly and efficiently, leading to high user

satisfaction. However, if a user is accustomed to the desktop site or looking for

more detailed information, they may not be able to find it on a targeted mobile

site. Additionally, because it is its own site, it is possible that content updates will

be needed for both the desktop site and mobile site. More time inevitably means

more costs and more resources dedicated to sustainability.

Mobile sites are easier to recognize because their Web addresses differ from

normative URLs (universal/uniform resource locator) as the letter “m”

is likely included within the address. The Marcus Theaters® in the

Midwest has a mobile site you can peruse to get a better idea: http://m.

marcustheatres.com/Theatre. Notice that the content and layout in general

is very specific and targeted. Notice, also, that there are minimal graphics as

they would slow load time. Some other companies that utilize mobile URLs

to complement their Web presence are Amazon®, eBay®, 3M®, Forbes® and

Wikipedia®.

There are advantages and disadvantages that come with each mobile option

and each deserves to be weighed against the other as you clarify your

customers’ mobile needs and behavior.

With that said, let’s now turn our attention to yet another mobile design option

that may prove to be a good solution for your organization—responsive Web

design.

© 2013 4imprint, Inc. All rights reserved

The growth of RWDThe idea for responsive Web design began in the spring of 2010 when Web

developer Ethan Marcotte wrote a brief article about responsive Web design. He

introduced the topic by way of architecture, writing that buildings are designed

with a sense of permanence about them and that, by default, a building’s design

defines how people move through it.

He continued, though, noting that there has been a shift. Instead of buildings

shaping how people move within them, people are beginning to shape how

buildings move around them. The concept is called responsive architecture and it

is far more than climate control and ambient lighting; architects are now using

robotics, art installations and wall fixtures that “bend, flex and respond as crowds

approach.”5 If steel structures are succumbing to interactive architecture and

becoming more malleable by the minute as part of a “continual and constructive

information exchange,” redesigning the Web should be a cinch.6

The Internet has evolved quickly and it certainly looks and operates differently

than it did ten years ago. But despite the incredible change, its design is a

continual challenge. For John Allsopp, a Web developer like Ethan, Web design is

still reminiscent of the printed page. Then as they do now, designers use “grids”

to plan site design. Those grids have proven problematic over the years and John

senses a “real tension between the Web as we know it and the Web as it would

be … the tension between an existing medium, the printed

page, and its child, the Web.”7

Here is a simple way to better understand RWD:

• Use a laptop to open a Web browser.

• Open two tabs.

• Type www.bostonglobe.com into one and www.

nytimes.com into another.

• Next, resize the window and pay close attention to

what happens to each site.

Content on the New York Times® website doesn’t move

or conform to shape to the new smaller size. But on the

Boston Globe® page, the navigation, menu and news stories

automatically resize to fit the width of the window.

5 Marcotte, Ethan. “Responsive Web Design.” A List Apart: Articles: Responsive Web Design. A List Apart, 25 May 2010. Web. 17 Dec. 2012. <http://www.alistapart.com/articles/responsive-web-design>.

6 Ibid.7 Allsopp, John. “A Dao of Web Design.” A List Apart: Articles: A Dao of Web Design. A List Apart, 7 Apr. 2000.

Web. 17 Dec. 2012. <http://www.alistapart.com/articles/dao/>.

© 2013 4imprint, Inc. All rights reserved

Source:

http://en.wikipedia.org/wiki/File:Boston_Globe_responsive_website.jpg#file

Pretty cool, huh? Google® thinks so, too. In fact, responsive is its “recommended

configuration.”8

Now that you’ve seen RWD in action, here’s its definition. (Are you ready?) It’s

real simple … Responsive Web design is a single design that fits all screen sizes.

Responsive sites can serve all devices on the same set of URLs. Each URL serves

the same HTML code to all devices and uses a special kind of grid to render the

page according to the device’s screen size and resolution. It is, in the words of

Wikipedia, “crafted to provide an optimal viewing experience—easy reading and

navigation with a minimum of resizing, panning, and scrolling—across a wide

range of devices.”9

Making pages look the same regardless of the original device isn’t easy. Web

developers like John Allsopp knew years ago there needed to be some semblance

of control over the user’s browser in order to design for it.10 Finally, the right tools

have arrived and RWD employs two of them in particular: fluid grids and media

queries.

8 “Building Smartphone-Optimized Websites.” Building Smartphone-Optimized Websites - Webmasters -- Google Developers. Google Developers, 2 Aug. 2012. Web. 17 Dec. 2012. <https://developers.google.com/webmasters/smartphone-sites/details>.

9 “Responsive Web Design.” Responsive Web Design - the Free Encyclopedia. Wikimedia Foundation, 14 Dec. 2012. Web. 17 Dec. 2012. <http://en.wikipedia.org/wiki/Responsive_web_design>

10 Allsopp, John. “A Dao of Web Design.” A List Apart: Articles: A Dao of Web Design. A List Apart, 7 Apr. 2000. Web. 17 Dec. 2012. <http://www.alistapart.com/articles/dao/>.

© 2013 4imprint, Inc. All rights reserved

F lu id gr ids and media quer iesHow does RWD fit all of those screens with just one design? With the help of fluid

grids and media queries. Each of these tools has been refined over the years and

now plays an integral part in the “sustainable solution” responsive design has

become.

Much of the Internet is still modeled on immovable grid-like designs. These

rigid grids are becoming a hindrance to Web design because, for a long time,

grids for the Web were set to a certain screen resolution. But, with the advent

of products that range from petite smartphones to mega tablets, the fixed-

width mindset is outdated.11 RWD uses multiple fluid grids based on a page’s

proportions. That way, content modules within it can be “reorganized, resized

and shuffled without their original significance getting lost.”12 This is possible

because as the percentage-based width of a Web page grid expands or contracts,

the content moves with it.13 Fluid grids have become so convenient and versatile

that Web developers are no longer referring to them as niceties. Instead, they’re

referring to them as necessities.14

The second feature that makes responsive so special is something called a media

query, which “inspects the characteristics of a device and adjusts specific website

styles accordingly.” Media queries help determine the screen resolution and

pixel density of a device. It can also detect whether or not a device is being held

landscape or portrait.15 It’s important to note that these features are widely

supported. Ethan, the aforementioned “father” of RWD, notes that media queries

“enjoy robust support among modern browsers.”16

Another meaningful component of working responsive design, without

which fluid grids and media queries couldn’t function, is the next evolution of

code known as HTML5, or the fifth version of Hypertext Markup Language.

Programming can become quickly convoluted, so suffice to say that it makes

responsive Web design possible because it allows for more flexible coding.

11 Lazuriaga, Max. “Designing for a Responsive Web.” Designing for a Responsive Web | Webdesigntuts+. Webdesigntuts+, 9 Aug. 2011. Web. 18 Dec. 2012. <http://webdesign.tutsplus.com/articles/design-theory/designing-for-a-responsive-web/>.

12 Ibid.13 DenBleyker, Casey. “A Responsive Web Design Tutorial for Beginners.” A Responsive Web Design Tutorial for

Beginners | Social Driver®| Get with the Future. Social Driver®, 27 June 2012. Web. 17 Dec. 2012. <http://socialdriver.com/2012/06/a-responsive-web-design-tutorial-for-beginners/>

14 Lazuriaga, Max. “Designing for a Responsive Web.” Designing for a Responsive Web | Webdesigntuts+. Webdesigntuts+, 9 Aug. 2011. Web. 18 Dec. 2012. <http://webdesign.tutsplus.com/articles/design-theory/designing-for-a-responsive-web/>.

15 DenBleyker, Casey. “A Responsive Web Design Tutorial for Beginners.” A Responsive Web Design Tutorial for Beginners | Social Driver®| Get with the Future. Social Driver®, 27 June 2012. Web. 17 Dec. 2012. <http://socialdriver.com/2012/06/a-responsive-web-design-tutorial-for-beginners/>

16 Marcotte, Ethan. “Responsive Web Design.” A List Apart: Articles: Responsive Web Design. A List Apart, 25 May 2010. Web. 17 Dec. 2012. <http://www.alistapart.com/articles/responsive-web-design>.

© 2013 4imprint, Inc. All rights reserved

Making the move to responsive des ignThe idea for RWD surfaced in 2008, grew through 2010 and now, in 2013, is

positively exploding. Many sizeable organizations have made the switch, the

biggest thus far being the Boston Globe®, but Starbucks®, Sony®, Smashing

Magazine® and Mashable® have all had their websites redone in RWD, too.17

Mashable, an online social media magazine, has gone so far as to call 2013 the

Year of RWD.

If you’re still wavering, here are a few more important consumer trends

to help you understand the urgency behind mobile optimized designs

like RWD:18

• Desktop sales are projected to fall for the first year in over a

decade.

• Tablet sales will likely surpass 100 million, set to exceed the number of

notebooks sold in the next year.

• Thirty percent of Mashable’s traffic is mobile and they expect it to hit 50

percent next year.

According to their own internal data, Mashable [alone] was accessed by more

than 2,500 different devices. That’s a lot to cater to. Luckily, RWD can handle it.

The benefits of RWD are singular and simple: Instead of developing multiple

designs to fit each device, RWD ensures that websites work equally well on each

device with just one, saving organizations both time and money. On the front

end, the number of people leaving, or “bouncing” to another site, decreases

dramatically. On the back end, RWD sites typically require much less maintenance

than having a desktop and mobile site.

All the same, there are still a number of things to take into consideration before

making the move to responsive. You’ve got to know who your customers are as

well as some of their behaviors. Here are a couple important questions your Web

team can help you answer to get started:

• Checkdemographics. Do you serve primarily older people, or do you work

with many young people? Is there a good mix of both or more of one

than another? The vast majority, 83 percent, of 18-29 year olds, are active

Internet users.19 If your target audience is within this age range, it’s critical

17 Palmgren, Tai. “Responsive Web Design: What It Is and What It Isn’t.” Responsive Web Design: What It Is and What It Isn’t | Mightybytes. Mightybytes, 9 Apr. 2012. Web. 19 Dec. 2012. <http://www.mightybytes.com/blog/entry/responsive_web_design_what_it_is_and_what_it_isnt/>.

18 Cashmore, Pete. “Why 2013 Is the Year of Responsive Web Design.” Mashable, 11 Dec. 2012. Web. 19 Dec. 2012. <http://mashable.com/2012/12/11/responsive-web-design/>.

19 “The New Marketing Trifecta.” Flowtown, n.d. Web. 7 Jan. 2013.

© 2013 4imprint, Inc. All rights reserved

to cater to the growing behavioral trend within their age demographic,

namely that they are more social and more active on their mobile devices.

• Checkmobilebehavior. Basic analytic programs like Google® Analytics

allow you to track which kind of devices, browsers and operating systems

are being used by visitors to your site. Install the analytics code into the

footer of your site and then watch as the data rolls in and the graphs

begin to populate according to that data. Collect information on how

end users are accessing your site to determine what kind of percentage of

traffic is mobile.

With a few of those numbers in hand, you now have to make the decision: Should

you make the switch to RWD? This question heavily depends on what kind of

investment you’re prepared to make as a business owner. Implementing RWD is

not an inexpensive project, but your Web team or outside partner can help you

make an informed mobile decision that’s right for you.20 Here are a few key things

to consider:

• Time. As a new concept, RWD can be a more time-consuming

process as developers still grow and learn with it. Responsive

also requires a very thoughtful approach that has more

upfront planning time.

• Money. Some people estimate that an additional 10 to 50

percent more dollars should be allocated for greater markup

and design time.21 Time lengthens and costs rise to reflect the

complexity of features you’re looking to include on your new

responsive site.

• Content. What kinds of content will your site feature—photos, videos,

blogs? The more complex the content, the greater the time and money

it will take to build it. But, in terms of long-term site maintenance,

there tend to be fewer problems with RWD sites, which will save you

unnecessary headaches down the road.

• Browsersupport. Different browsers render elements on a page

differently and not all have adopted RWD.

• Performance. Part of a Web designer’s job is to style pages correctly. In the

case of RWD, where additional styling is needed to make it all work, the

site’s performance can be adversely affected so that the more styling you

need, the slower the page gets.

<http://www.pamorama.net/wp-content/uploads/2010/12/ft-new-marketing-trifecta.png>.20 Polacek, John. “What The Heck Is Responsive Web Design?” N.p., 17 Dec. 2012. Web. 17 Dec. 2012.

<http://johnpolacek.github.com/scrolldeck.js/decks/responsive//>21 Rau, John. “How Much Longer Does It Take to Produce a Responsive Design for a Website on Average?” How

Much Longer Does It Take to Produce a Responsive Website on Average? - Quora. Quora, 8 Apr. 2012. Web. 03 Jan. 2013. <http://www.quora.com/How-much-longer-does-it-take-to-produce-a-responsive-design-for-a-website-on-average>.

© 2013 4imprint, Inc. All rights reserved

Our Web developer friend John Allsopp recommends thinking hard about a page’s

utility. Avoid getting caught up in how it looks. Instead, he notes, ask yourself

what your page does. He advises, “Let form follow function.”22

Responsive des ign and youUnless you’re an experienced Web developer yourself, your biggest role

is as the decision maker, whether or not to implement RWD versus the

actual implementation of it. So, while the decision is yours to make, the

proverbial nuts and bolts of RWD are best handled by experienced Web

developers with experience in Web languages like HTML, XML, CSS, Java

and JavaScript. Below is some advice on best practices to help guide you in

the process as you work with your team to design your organization’s new

digital look:23

• Startsmall. And start simply. Even though RWD with fluid grids is

becoming the “It” IT trend, it may not be the right choice for you. A mobile

template or a separate mobile site are both alternative possibilities.

• Thinkaboutyourcontent. Going with a responsive design means your site’s

content will appear differently between devices. Where it appears as two

or three columns on a screen’s laptop, it will more than likely appear as

one column on an iPhone. Think about which information is most relevant

to people searching on a mobile device and order it accordingly.

• Makeitmodular. Modules are the pieces and parts of a grid. These are the

different areas of content you have on your site. For example: There’s likely

a search feature, a space for share icons, images, spaces for who you are,

what you do, a live stream from your social media channels, pictures and

maybe even some video.

• Biggersizes. With people using their fingers to navigate, search and scroll

on mobile devices, font size and links need to be bigger. In RWD, small

links and smaller fonts just don’t cut it.

Like any new idea, RWD is the subject of ongoing conversation. From fine-tuning

those grids to improving best practices and maximizing results, it pays to pay

attention to RWD. Refer to your Web team for the latest on RWD so that you

know what’s next and how best to optimize for it.

22 Allsopp, John. “A Dao of Web Design.” A List Apart: Articles: A Dao of Web Design. A List Apart, 7 Apr. 2000. Web. 17 Dec. 2012. <http://www.alistapart.com/articles/dao/>.

23 Polacek, John. “What The Heck Is Responsive Web Design?” N.p., 17 Dec. 2012. Web. 17 Dec. 2012. <http://johnpolacek.github.com/scrolldeck.js/decks/responsive//>

© 2013 4imprint, Inc. All rights reserved

Thoughts to considerResponsive design isn’t without its fair share of problems and pitfalls. For one,

more code is needed to optimize for mobile which makes the initial coding

and construction more time-consuming (and costly). But that also means less

time spent on site maintenance and management over the long term. It all

comes down to what kind of time and money you’re prepared to invest in an

RWD site.

Responsive isn’t for everyone. If you and your customers are generally satisfied by

the lay of the land on your current site, RWD isn’t necessary. Adjusting an existing

website to become responsive—a potentially more time-intensive endeavor than

creating one from scratch—may be better suited for a mobile solution instead.

One thing mobile is good at is speed. Web developer Brad Frost cites his colleague

Jason Grigsby, who wrote about optimizing sites for mobile:24

If you could only do one thing to prepare your desktop site for mobile and

had to choose between employing media queries to make it look good

on a mobile device or optimizing the site for performance, you would be

better served by making the desktop site blazingly fast.

Brad goes on to explain that the “point of creating adaptive (responsive) sites

is to create functional (and hopefully optimal) user experiences for a growing

number of Web-enabled devices and contexts.”25 No matter what degree of

responsive you choose to implement (or not implement), making the decision to

design adaptable pages is to design more accessible pages26—and that’s the point.

Responsive design should never just be done because:

• It’s fun.

• It’s trendy.

• Or, you feel the need to impress.

Nevertheless, Brad & Co. agree that RWD is needed and that it enhances the

overall user experience. Brad notes that users are fairly easy to please, but also

that “They do care if they can’t get done what they need to get done … they do

care when actions are awkward and broken.” After all, that’s what responsive

Web design boils down to in the end: Helping the end user experience your

24 Frost, Brad. “Responsive Web Design: Missing the Point.” Responsive Web Design: Missing the Point | Brad Frost Web. Brad Frost Web, 19 Mar. 2012. Web. 17 Dec. 2012. <http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/>.

25 Ibid. frost26 Allsopp, John. “A Dao of Web Design.” A List Apart: Articles: A Dao of Web Design. A List Apart, 7 Apr. 2000.

Web. 17 Dec. 2012. <http://www.alistapart.com/articles/dao/>.

© 2013 4imprint, Inc. All rights reserved

business or organization as best as they can online regardless of which mobile

tools they choose to use.

It’s not just for their sake, but also for yours. Better user experiences often results

in noticeable jumps in conversions. And as far as conversions are concerned … no

one needs to be told twice that conversions are good for business.

Conclus ionEthan’s affinity for responsive began simply. He noted the unprecedented number

of devices, input modes and browsers that society and the individual consumer

confront and choose between each day. “Can we really continue to commit to

supporting each new user agent with its own bespoke experience?” he wondered.

“At some point, this begins to feel like a zero-sum game.”27 At that moment, the

wheels began to spin, the right tools emerged and responsive design surfaced.

Steel beams and interactive wall fixtures aside, Ethan’s May 2010 article on

RWD is still regarded as required reading for anyone embarking on a better

understanding of Web development and responsive design.

For “the gradient of different experiences,” responsive design was and remains

the answer for the foreseeable future.28 But because it’s so new, it’s difficult to

say what’s next. Responsive is certainly a different way to design and, as Google’s

recommendation, it’s likely here to stay.

Notable Web developer and author Jeremy Keith agrees. He

encourages us to move forward. “[S]top thinking in pages …

[and] start thinking in systems.”29

Onward.

27 Marcotte, Ethan. “Responsive Web Design.” A List Apart: Articles: Responsive Web Design. A List Apart, 25 May 2010. Web. 17 Dec. 2012. <http://www.alistapart.com/articles/responsive-web-design>.

28 Pettit, Nick. “Beginner’s Guide to Responsive Web Design.” Beginner’s Guide to Responsive Web Design - Treehouse Blog. Treehouse Blog, 18 Aug. 2012. Web. 17 Dec. 2012. <http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design>.

29 Polacek, John. “What The Heck Is Responsive Web Design?” N.p., 17 Dec. 2012. Web. 17 Dec. 2012. <http://johnpolacek.github.com/scrolldeck.js/decks/responsive//>

4imprint serves more than 100,000 businesses with innovative promotional items throughout the United States,

Canada, United Kingdom and Ireland. Its product offerings include giveaways, business gifts, personalized gifts,

embroidered apparel, promotional pens, travel mugs, tote bags, water bottles, Post-it Notes, custom calendars,

and many other promotional items. For additional information, log on to www.4imprint.com.