SlideShare a Scribd company logo

Responding Responsively

•Download as PPT, PDF•
•
Ted Hardy, MBA, CBAP
Ted Hardy, MBA, CBAP

A speech I gave to my local Toastmasters club about Responsive Web Design. This was for speech #5 in the Entertaining Speaker manual.

Related slideshows

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Adobe 30iun2011
Adobe 30iun2011Adobe 30iun2011
Adobe 30iun2011
 
1 of 17
Responsive Web Design
Remember this?
It became these
Seeing is Believing
Starbucks.com
What’s The Problem? More devices & more browsers, all with different capabilities, being released more frequently. Supporting different content and development across desktop, tablet & phone channels. Supporting future channels (TV, game consoles, etc) in formats that fit those channels without a major development effort.
Responsive Goals Don’t rely on physical dimensions; rely on context and device capabilities. Develop based on how your consumers will experience and interact with your company. Provide rich media in an experience tailored to the consumer’s goals. Never limit a consumer’s capabilities based on their device.
But Its Not... Scaling down your desktop site. Using images that are so large they take forever to download. Use small buttons to fit on all functionality on a mobile screen. Adding too much text to a tiny screen.
What Responsive Is Three Components Fluid Grids Flexible Images Media Queries
Fluid Grids Most sites use a fixed grid. Content width is 720px and the side-bar is 180px. Responsive says the Content is 70% of the screen with a minimum of 200px width. Allows content to shrink and expand to fill the screen.
Flexible Images Images automatically resize and/or swap-out as the screen size changes. Lower-quality placeholder images load first to allow the consumer to use the site prior to the best image loading. Supports high-res images (retina) in 1x, 1.5x, 2x and any future pixel depths needed.
Media Queries Used to determine device/browser capabilities. Many queries, but width, height & device-pixel-ratio are the most important ones. Not all browsers/devices support media queries, but there are fallback methods (polyfill solutions) for older devices & browsers.
Is Anyone Doing This Yet?
Responsive eCommerce Sites Starbucks United Pixel Workers King of Nothing Mogotix Tattly Attika Puplife Lot 18 Nuts.com Skinnyties.com Sugru Thomson Sport
Its Not From Square 1 There are lots of toolkits that exist to help us move more quickly in the development process. Mobify, FitTextJs, FitVidsJs, RetinaJs, adaptive-images.com LessCss.org, Sass-lang.com, Compass-style.org html5boilerplate.com, getskeleton.com, lessframework.com cssgrid.net, gridpak.com, gridsetapp.com Many more options as well...
Questions?
Thank You!

More Related Content

Responding Responsively

  • 6. What’s The Problem? More devices & more browsers, all with different capabilities, being released more frequently. Supporting different content and development across desktop, tablet & phone channels. Supporting future channels (TV, game consoles, etc) in formats that fit those channels without a major development effort.
  • 7. Responsive Goals Don’t rely on physical dimensions; rely on context and device capabilities. Develop based on how your consumers will experience and interact with your company. Provide rich media in an experience tailored to the consumer’s goals. Never limit a consumer’s capabilities based on their device.
  • 8. But Its Not... Scaling down your desktop site. Using images that are so large they take forever to download. Use small buttons to fit on all functionality on a mobile screen. Adding too much text to a tiny screen.
  • 9. What Responsive Is Three Components Fluid Grids Flexible Images Media Queries
  • 10. Fluid Grids Most sites use a fixed grid. Content width is 720px and the side-bar is 180px. Responsive says the Content is 70% of the screen with a minimum of 200px width. Allows content to shrink and expand to fill the screen.
  • 11. Flexible Images Images automatically resize and/or swap-out as the screen size changes. Lower-quality placeholder images load first to allow the consumer to use the site prior to the best image loading. Supports high-res images (retina) in 1x, 1.5x, 2x and any future pixel depths needed.
  • 12. Media Queries Used to determine device/browser capabilities. Many queries, but width, height & device-pixel-ratio are the most important ones. Not all browsers/devices support media queries, but there are fallback methods (polyfill solutions) for older devices & browsers.
  • 13. Is Anyone Doing This Yet?
  • 14. Responsive eCommerce Sites Starbucks United Pixel Workers King of Nothing Mogotix Tattly Attika Puplife Lot 18 Nuts.com Skinnyties.com Sugru Thomson Sport
  • 15. Its Not From Square 1 There are lots of toolkits that exist to help us move more quickly in the development process. Mobify, FitTextJs, FitVidsJs, RetinaJs, adaptive-images.com LessCss.org, Sass-lang.com, Compass-style.org html5boilerplate.com, getskeleton.com, lessframework.com cssgrid.net, gridpak.com, gridsetapp.com Many more options as well...