"Smarter Responsive Design" by Sam Otis, given at the Sioux Falls Content + Design Meetup, March 25, 2015

1. Smarter Responsive Design

2. Mobile first development, accessibility,
progressive enhancement, responsive
design workflow, designing for touch
devices, responsive site vs. mobile
specific site vs. native app, the
hamburger menu icon, etc.
What is Responsive Design?

4. Create one design, that responds to the
shape of the display rendering it.
– Ethan Marcotte
Responsive Design:

5. How can we improve the user experience
with smarter design patterns?
Question:

6. Column Stacking

7. Column Stacking
GOAL:
Display the
full content
legibly on any
size device.

8. Column Stacking
PROBLEM:
Results in
awkwardly
long pages on
small devices.

9. Column Stacking
Smart
Use in-page anchor navigation
and a back-to-top link.

10. Column Stacking
Smarter
Collapse columns or sections
into an accordion on small
devices.

11. + News
+ Athletic Events
+ Arts Events
+ Live at Heritage
Center

12. Try converting tabs to an accordion
structure on small screens too.
bootstrap-tabcollapse.js
Column Stacking

14. Column Stacking
Extra Credit
Collect promoted content or
features in a feature menu.

16. Hooray column
stacking!

17. Image Slider

18. Image Slider
GOAL:
Highlight the
main purpose
of the site
with a strong
visual first
impression.

19. Image Slider
PROBLEMS:
A fixed aspect
ratio means
the image
won’t fit on
wide screens,
and is too
small on
narrow ones.

21. Image Slider
Smart
Crop the image at a max
height with CSS, or set a max
width on the overall site.

23. Image Slider
Smarter
Add a column to one side of
the slider to better use the
extra screen width.

25. Nothing makes a device feel smaller
than a page element that doesn’t fit on
the screen.
Pro Tip:

26. Image Slider
Smart
Push the overlaid text below the
image when it no longer fits.

28. Image Slider
Smarter
Crop the images with CSS to
feature the “live” area of the photo
on smaller screens.

30. Image Slider
Extra Credit
In some cases, the image still doesn’t display very
effectively. Is there a reasonable way to adjust an
image to proportionally fit the screen better?

32. Image Slider
responsiveimages.org
● picture element
● srcset and sizes
attributes
● black magic

33. Responsive Tables

34. Responsive Tables
GOAL:
Display tabular
data in a way
that preserves
the relationships
between rows
and columns.

35. Responsive Tables
PROBLEM:
Multiple
columns won’t
fit on a narrow
screen.

36. Responsive Tables
Smart
Create an alternate list view of
a table to display on a narrow
screen.

38. Responsive Tables
Smarter
Enable horizontal scrolling on
the table.

39. Responsive Tables
Smarterer
Dynamically hide columns to
fit, and provide a way to toggle
through hidden data.

40. Responsive Tables
tablesaw.js

41. Responsive Tables
Smart Alec
Just download a PDF.

42. Any design pattern can be broken with
reckless content management.
Pro Tip:

43. Luke Wroblewski
http://www.lukew.com/ff/entry.asp?1514
Brad Frost
http://bradfrost.github.io/this-is-responsive/patterns.html
Ethan Marcotte
http://abookapart.com/products/responsive-web-design
Additional References:

44. Questions?

45. Questions?

46. Thanks
@sam_otis
sam@blendinteractive.com