4imprint responsive info fnlinfo.4imprint.com/wp-content/uploads/4imprint_responsive_info_fn… ·...

Responsivesites

decreasebounce rates

Responsive Web design is Google’s® “recommended configuration.”

Sources“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>.

“Global Mobile Statistics 2012 Home: All the Latest Stats on Mobile Web, Apps, Marketing, Advertising, Subscribers, and Trends...” Global Mobile Statistics 2012 Home: All the Latest Stats on Mobile Web, Apps, Marketing, Advertising, Subscribers, and Trends... | MobiThinking. MobiThinking, n.d. Web. 21 Dec. 2012. <http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats>.

“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>.

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

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/>. “Mobile Phone Usage Statistics.” Digital for Real Life RSS. Convonix, 26 Mar. 2012. Web. 21 Dec. 2012.

www.4imprint.com

Infographic created by www.4imprint.com, based on the Responsive Web Design Blue Paper®. Download Blue Paper at:http://info.4imprint.com/bluepapers/responsive-web-design/

You may reproduce and distribute this infographic in its entirety. You may not create derivative works. (Licensed under the Creative Commons: http://creativecommons.org/licenses/by-nd/3.0/)

Responsive design

Responsive Web design

for a better mobile experience

With so many mobile devices in use—each with different screen sizes – it is important that your website can be

viewed properly on ALL of them.

Desktop Laptop Tablet Mobile

Mobile usage in today’s world

Smartphone userscheck their phones

an average of

each day.150x

have their mobile device within reach 24/7.

of all U.S. citizens

91%25%

don’t use a laptop or PC to surf the Web.

of mobile usersin the U.S.

Mobile Web browsing will take over desktop Internet

usage by 2015 or sooner.

Key components for responsive design

1 Fluid grids 2 Media queries

Allow for the content to resize and rearrange as the percentage-

based width of a webpage grid expands or contracts.

Helps a device decide howto view the website depending

on the size of its screen.