3. There is no such
thing as the
“mobile” internet!
4. 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
5. 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 */
}
8. 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!
9. 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
10. 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.
11. 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/