Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

1

Share

Download to read offline

"Smarter Responsive Design" by Sam Otis

Download to read offline

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

Related Audiobooks

Free with a 30 day trial from Scribd

See all

"Smarter Responsive Design" by Sam Otis

  1. 1. Smarter Responsive Design
  2. 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?
  3. 3. Create one design, that responds to the shape of the display rendering it. – Ethan Marcotte Responsive Design:
  4. 4. How can we improve the user experience with smarter design patterns? Question:
  5. 5. Column Stacking
  6. 6. Column Stacking GOAL: Display the full content legibly on any size device.
  7. 7. Column Stacking PROBLEM: Results in awkwardly long pages on small devices.
  8. 8. Column Stacking Smart Use in-page anchor navigation and a back-to-top link.
  9. 9. Column Stacking Smarter Collapse columns or sections into an accordion on small devices.
  10. 10. + News + Athletic Events + Arts Events + Live at Heritage Center
  11. 11. Try converting tabs to an accordion structure on small screens too. bootstrap-tabcollapse.js Column Stacking
  12. 12. Column Stacking Extra Credit Collect promoted content or features in a feature menu.
  13. 13. Hooray column stacking!
  14. 14. Image Slider
  15. 15. Image Slider GOAL: Highlight the main purpose of the site with a strong visual first impression.
  16. 16. Image Slider PROBLEMS: A fixed aspect ratio means the image won’t fit on wide screens, and is too small on narrow ones.
  17. 17. Image Slider Smart Crop the image at a max height with CSS, or set a max width on the overall site.
  18. 18. Image Slider Smarter Add a column to one side of the slider to better use the extra screen width.
  19. 19. Nothing makes a device feel smaller than a page element that doesn’t fit on the screen. Pro Tip:
  20. 20. Image Slider Smart Push the overlaid text below the image when it no longer fits.
  21. 21. Image Slider Smarter Crop the images with CSS to feature the “live” area of the photo on smaller screens.
  22. 22. 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?
  23. 23. Image Slider responsiveimages.org ● picture element ● srcset and sizes attributes ● black magic
  24. 24. Responsive Tables
  25. 25. Responsive Tables GOAL: Display tabular data in a way that preserves the relationships between rows and columns.
  26. 26. Responsive Tables PROBLEM: Multiple columns won’t fit on a narrow screen.
  27. 27. Responsive Tables Smart Create an alternate list view of a table to display on a narrow screen.
  28. 28. Responsive Tables Smarter Enable horizontal scrolling on the table.
  29. 29. Responsive Tables Smarterer Dynamically hide columns to fit, and provide a way to toggle through hidden data.
  30. 30. Responsive Tables tablesaw.js
  31. 31. Responsive Tables Smart Alec Just download a PDF.
  32. 32. Any design pattern can be broken with reckless content management. Pro Tip:
  33. 33. 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:
  34. 34. Questions?
  35. 35. Questions?
  36. 36. Thanks @sam_otis sam@blendinteractive.com
  • MichaelLabz

    Apr. 13, 2015

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

Views

Total views

1,172

On Slideshare

0

From embeds

0

Number of embeds

149

Actions

Downloads

13

Shares

0

Comments

0

Likes

1

×