Capital Campaigns Blue Paper by promotional products retailer 4imprint
Web Design - 4imprint Promotional Products Blog
Transcript of Web Design - 4imprint Promotional Products Blog
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.