responsive web design [infographic]

Responsive sites decrease bounce rates Responsive Web design is Google’s ® “recommended conﬁguration.” 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 users check 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 users in 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 how to view the website depending on the size of its screen.

Upload: 4imprint

Post on 07-Nov-2014

44 views

Category:

Documents

6 download

Report

Download

Embed Size (px):

DESCRIPTION

It’s not just desktops anymore. With the variety of devices and screen sizes onthe market today, it’s imperative to reach visitors regardless of the device they’reusing. In fact, mobile Internet usage is expected to surpass desktop Internetusage this year. Mobile devices like smartphones and tablets are the reason whyresponsive Web design (RWD) is all the rage.

TRANSCRIPT

Page 1: Responsive Web Design [INFOGRAPHIC]

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