the rise of tablets how responsive web design is in your future
DESCRIPTION
Your web site needs to be accessible and usable for everyone even as the number of devices, platforms and browsers that are used to access it continue to expand every day. Incorporating a responsive web design represents a fundamental shift in how web sites are built now – and into the future. Join Rick Wilson, President of Miva Merchant as he discusses the explosive growth in tablets and how you need to be making changes to your site now along with things you need to consider as you redesign your ecommerce web site in the future.TRANSCRIPT
![Page 1: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/1.jpg)
The Rise of Tablets - How Responsive Web Design Is In Your FutureRick Wilson President/COO Miva MerchantASD/IMA March 2013 – Las Vegas, Nevada
![Page 2: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/2.jpg)
Not a Buzz-Word
![Page 3: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/3.jpg)
There is no such thing as the
“mobile” internet!
![Page 4: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/4.jpg)
So…What is RWD
• Progressive enhancement based on browser-, device-, or feature-detection
• Flexible, grid-based layouts• Flexible images and media• Utilize CSS3 media queries
![Page 5: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/5.jpg)
CSS3 Media What???• Device agnostic• Media queries look at physical
characteristics:– Browser viewport– Device screen size– Device orientation
@media only screen and (min-width: 480px) {/* CSS FOR SCREENS WIDER THAN 480PX GOES HERE */
}@media only screen and (min-width: 600px) {
/* CSS FOR SCREENS WIDER THAN 600PX GOES HERE */}
![Page 6: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/6.jpg)
Future Friendly
Responsive Web Design+
Adaptive Web Design=
Progressive Web Design
![Page 7: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/7.jpg)
![Page 8: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/8.jpg)
Mobile vs. Responsive
• Should you build a separate mobile site or a responsive Web site?
• Instead of mobile last, build mobile first.
• Tablets are NOT mobile!
![Page 9: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/9.jpg)
PROS
• Your site is available to everyone regardless of the device they use.
• You only have one set of content to update and track analytics for.
• Endorsed by Google.• Future Friendly
![Page 10: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/10.jpg)
CONS
• Higher initial development costs.• Updates must be tested on a variety of
devices.• Possible page performance issues on slower
networks.• Video, third-party code and banners can pose
challenges.
![Page 11: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/11.jpg)
How does this affect me?
• 79% of US smartphone and tablet owners have used their mobile devices for shopping-related activities.
• 42% of tablet owners have “used their device to purchase an item,” compared to 29% of smartphone owners.
Source: http://blog.nielsen.com/nielsenwire/online_mobile/how-us-smartphone-and-tablet-owners-use-their-devices-for-shopping/
![Page 12: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/12.jpg)
Tablets Are The Future
![Page 13: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/13.jpg)
![Page 14: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/14.jpg)
![Page 15: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/15.jpg)
![Page 16: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/16.jpg)
![Page 17: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/17.jpg)
![Page 18: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/18.jpg)
Desktop
![Page 19: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/19.jpg)
Laptop
![Page 20: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/20.jpg)
Tablet
![Page 21: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/21.jpg)
Smartphone
![Page 22: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/22.jpg)
![Page 23: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/23.jpg)
Queries&
Responses
![Page 24: The rise of tablets how responsive web design is in your future](https://reader038.vdocument.in/reader038/viewer/2022102901/5557b77ed8b42a696c8b4f8a/html5/thumbnails/24.jpg)
Credits• http://www.smashingmagazine.com/2013/02/25/there-is-no-mobile-internet/• http://en.wikipedia.org/wiki/Responsive_web_design• http://www.webdesignerdepot.com/2013/01/the-new-rules-of-the-responsive-web/• http://
www.universalmind.com/mindshare/entry/mobile-users-will-exceed-desktop-users-by-2014• http://www.lukew.com/ff/entry.asp?1631• http://www.lukew.com/ff/entry.asp?1551• http://
blog.nielsen.com/nielsenwire/online_mobile/how-us-smartphone-and-tablet-owners-use-their-devices-for-shopping
• http://www.mivamerchant.com/blog/ecommerce-and-tablet-users-on-the-rise