The Rise Of Tablets: Responsive Web Design is in your future

The Rise of Tablets - How Responsive Web Design Is In Your FutureRick Wilson President/COO Miva MerchantASD/IMA March 2013 – Las Vegas, Nevada

Not a Buzz-Word

There is no such thing as the

“mobile” internet!

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

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 */}

Future Friendly

Responsive Web Design+

Adaptive Web Design=

Progressive Web Design

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!

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

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.

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/

Tablets Are The Future

Desktop

Laptop

Tablet

Smartphone

Queries&

Responses

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