'Box Lunch: Responsive Web Design
-
Upload
smallbox -
Category
Technology
-
view
763 -
download
1
description
Transcript of 'Box Lunch: Responsive Web Design
![Page 1: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/1.jpg)
Responsive Web Design WITH
Jeb Banner
![Page 2: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/2.jpg)
Quick Survey
In the last 24 hours have you done the following on your phone or tablet?
• Checked or sent email • Posted content to a social network • Watched a video • Searched (Google, Bing, etc) • Purchased something
![Page 3: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/3.jpg)
It’s A Mobile World
• 61% of people are more likely to leave a site if it’s not mobile-friendly
• 67% are more likely to buy from a mobile friendly site. • Moms with smartphones spend 6.1 hours a day on
their smartphone (more than time spent on PC, newspaper, magazine, radio and TV)
- Search Engine Watch
![Page 4: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/4.jpg)
It’s A Mobile World
-KISSmetrics
![Page 5: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/5.jpg)
Mobile and Email
“In the second half of 2012, over 40% of all commercial emails were opened via a smartphone or tablet gadget, which is up from 27% in 2011”
-Knotice Mobile Email Opens Report
![Page 6: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/6.jpg)
Central Indiana Mobile Stats
Compiled Data from over 70 Central Indiana SmallBox clients
2012 Q1/Q2 Mobile Traffic: 10.67%
2013 Q1/Q2 Mobile Traffic: 17.44%
Mobile Growth from 2012 to 2013: 61%
![Page 7: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/7.jpg)
Ok, I get it, we need to go mobile…
![Page 8: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/8.jpg)
What is Responsive Web Design?
![Page 9: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/9.jpg)
What is Responsive Web Design?
“Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)” - Wikipedia
![Page 10: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/10.jpg)
What is Responsive Web Design?
Translation: A responsive website adjusts fluidly to whatever browser/device you are viewing it on.
![Page 11: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/11.jpg)
What is Responsive Web Design?
full screen
![Page 12: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/12.jpg)
What is Responsive Web Design?
tablet
![Page 13: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/13.jpg)
What is Responsive Web Design?
phone
![Page 14: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/14.jpg)
SEO and Responsive
Google’s thoughts on Responsive Web Design:
Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.
-Google Webmaster Guidelines June 6, 2012
![Page 15: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/15.jpg)
SEO and Responsive
“46% of searchers use mobile exclusively to research”
-Search Engine Watch, May 2013
![Page 16: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/16.jpg)
SEO and Responsive
Client experience:
"We saw a 40% increase in conversions when the responsive pages launched. Our search rankings have been increasing as well.”
-Barrett Young, Angie's List SEO Strategist
![Page 17: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/17.jpg)
Angie’s List Responsive Example
![Page 18: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/18.jpg)
Responsive vs Mobile Optimized
![Page 19: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/19.jpg)
Responsive Pros and Cons
Pros
• Works on almost all devices • Future proofs website for
unimagined devices • Gold standard for search
engines • One set of code/CMS to
maintain • Looks awesome
• More expensive (usually) • Takes longer to do • Can be difficult with e-
commerce • Poor ROI for low mobile/
tablet traffic sites
Cons
![Page 20: 'Box Lunch: Responsive Web Design](https://reader033.fdocuments.in/reader033/viewer/2022051513/547b2347b4af9fb9158b4e3d/html5/thumbnails/20.jpg)
Responsive Web Design
Thank you and Q&A