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

1. Responsive Web Design

2. Remember this?

3. It became these

4. Seeing is Believing

5. Starbucks.com

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...

16. Questions?

17. Thank You!