Web Design

4imprint.com

How to optimize for mobile with responsive Web design

Its not just desktops anymore. With the variety of devices and screen sizes on the market today, its imperative to reach visitors regardless of the device theyre 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 theyre 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 isnt good enough anymore. These days, its 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 mobiles 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, theres nothing quite as awe-inspiring as growthespecially when its your own.

Mobile trends and consumer behavior

Its 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 thats 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 designs popularity is due in large part to the intensity with which mobile technology is growing and its 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 mobile
In 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 usebe 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.

Mobile application
A 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 iTunesSM more than 700,0004 downloadable apps. Apps are generally small, individual software units with limited functionality and can reference the phones 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 phones GPS function to facilitate its check-in features. If youre 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-activatedday-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.

Mobile template
The 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. Its 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, its not specifically designed for mobile behavior, and it is less able to adjust to the variety of mobile platformsleaving users potentially less than satisfied.

Mobile site
A 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, lets now turn our attention to yet another mobile design option that may prove to be a good solution for your organizationresponsive Web design.
2013 4imprint, Inc. All rights reserved

The growth of RWD

The 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 buildings 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 doesnt 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 youve seen RWD in action, heres its definition. (Are you ready?) Its 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 devices screen size and resolution. It is, in the words of Wikipedia, crafted to provide an optimal viewing experienceeasy reading and navigation with a minimum of resizing, panning, and scrollingacross a wide range of devices.9 Making pages look the same regardless of the original device isnt easy. Web developers like John Allsopp knew years ago there needed to be some semblance of control over the users 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

Fluid grids and media queries

How 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 fixedwidth mindset is outdated.11 RWD uses multiple fluid grids based on a pages 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, theyre 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 Its 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 couldnt 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 design

The 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 youre 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 Mashables 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. Thats 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. Youve 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: Check demographics. 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, its critical
17  Palmgren, Tai. Responsive Web Design: What It Is and What It Isnt.Responsive Web Design: What It Is and What It Isnt | 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. Check mobile behavior. 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 youre 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 thats 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 youre looking to include on your new responsive site. Content. What kinds of content will your site featurephotos, 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. Browser support. Different browsers render elements on a page differently and not all have adopted RWD. Performance. Part of a Web designers job is to style pages correctly. In the case of RWD, where additional styling is needed to make it all work, the sites 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-awebsite-on-average>.
2013 4imprint, Inc. All rights reserved

Our Web developer friend John Allsopp recommends thinking hard about a pages 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 design and you

Unless youre 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 organizations new digital look:23 Start small. 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. Think about your content. Going with a responsive design means your sites content will appear differently between devices. Where it appears as two or three columns on a screens 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. Make it modular. Modules are the pieces and parts of a grid. These are the different areas of content you have on your site. For example: Theres 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. Bigger sizes. 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 dont 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 whats 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 consider
Responsive design isnt 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 youre prepared to invest in an RWD site. Responsive isnt for everyone. If you and your customers are generally satisfied by the lay of the land on your current site, RWD isnt necessary. Adjusting an existing website to become responsivea potentially more time-intensive endeavor than creating one from scratchmay 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 pages26and thats the point. Responsive design should never just be done because: Its fun. Its 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 cant get done what they need to get done they do care when actions are awkward and broken. After all, thats 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. frost 26  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. Its 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.

Conclusion
Ethans 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, Ethans 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 its so new, its difficult to say whats next. Responsive is certainly a different way to design and, as Googles recommendation, its 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.

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.
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. Beginners Guide to Responsive Web Design.Beginners 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//>
2013 4imprint, Inc. All rights reserved