"smarter responsive design" by sam otis
TRANSCRIPT
![Page 1: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/1.jpg)
Smarter Responsive Design
![Page 2: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/2.jpg)
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?
![Page 3: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/3.jpg)
![Page 4: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/4.jpg)
Create one design, that responds to the shape of the display rendering it.
– Ethan Marcotte
Responsive Design:
![Page 5: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/5.jpg)
How can we improve the user experience with smarter design patterns?
Question:
![Page 6: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/6.jpg)
Column Stacking
![Page 7: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/7.jpg)
Column Stacking
GOAL:
Display the full content legibly on any size device.
![Page 8: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/8.jpg)
Column Stacking
PROBLEM:
Results in awkwardly long pages on small devices.
![Page 9: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/9.jpg)
Column Stacking
SmartUse in-page anchor navigation and a back-to-top link.
![Page 10: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/10.jpg)
Column Stacking
SmarterCollapse columns or sections into an accordion on small devices.
![Page 11: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/11.jpg)
+ News
+ Athletic Events
+ Arts Events
+ Live at Heritage Center
![Page 12: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/12.jpg)
Try converting tabs to an accordion structure on small screens too.
bootstrap-tabcollapse.js
Column Stacking
![Page 13: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/13.jpg)
![Page 14: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/14.jpg)
Column Stacking
Extra CreditCollect promoted content or features in a feature menu.
![Page 15: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/15.jpg)
![Page 16: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/16.jpg)
Hooray column stacking!
![Page 17: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/17.jpg)
Image Slider
![Page 18: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/18.jpg)
Image Slider
GOAL:
Highlight the main purpose of the site with a strong visual first impression.
![Page 19: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/19.jpg)
Image Slider
PROBLEMS:
A fixed aspect ratio means the image won’t fit on wide screens, and is too small on narrow ones.
![Page 20: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/20.jpg)
![Page 21: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/21.jpg)
Image Slider
SmartCrop the image at a max height with CSS, or set a max width on the overall site.
![Page 22: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/22.jpg)
![Page 23: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/23.jpg)
Image Slider
SmarterAdd a column to one side of the slider to better use the extra screen width.
![Page 24: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/24.jpg)
![Page 25: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/25.jpg)
Nothing makes a device feel smaller than a page element that doesn’t fit on
the screen.
Pro Tip:
![Page 26: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/26.jpg)
Image Slider
SmartPush the overlaid text below the image when it no longer fits.
![Page 27: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/27.jpg)
![Page 28: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/28.jpg)
Image Slider
SmarterCrop the images with CSS to feature the “live” area of the photo on smaller screens.
![Page 29: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/29.jpg)
![Page 30: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/30.jpg)
Image Slider
Extra CreditIn 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?
![Page 31: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/31.jpg)
![Page 32: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/32.jpg)
Image Slider
responsiveimages.org
● picture element● srcset and sizes
attributes● black magic
![Page 33: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/33.jpg)
Responsive Tables
![Page 34: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/34.jpg)
Responsive Tables
GOAL:
Display tabular data in a way that preserves the relationships between rows and columns.
![Page 35: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/35.jpg)
Responsive Tables
PROBLEM:
Multiple columns won’t fit on a narrow screen.
![Page 36: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/36.jpg)
Responsive Tables
SmartCreate an alternate list view of a table to display on a narrow screen.
![Page 37: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/37.jpg)
![Page 38: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/38.jpg)
Responsive Tables
SmarterEnable horizontal scrolling on the table.
![Page 39: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/39.jpg)
Responsive Tables
SmartererDynamically hide columns to fit, and provide a way to toggle through hidden data.
![Page 40: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/40.jpg)
Responsive Tables
tablesaw.js
![Page 41: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/41.jpg)
Responsive Tables
Smart AlecJust download a PDF.
![Page 42: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/42.jpg)
Any design pattern can be broken with reckless content management.
Pro Tip:
![Page 43: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/43.jpg)
Luke Wroblewskihttp://www.lukew.com/ff/entry.asp?1514
Brad Frosthttp://bradfrost.github.io/this-is-responsive/patterns.html
Ethan Marcottehttp://abookapart.com/products/responsive-web-design
Additional References:
![Page 44: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/44.jpg)
Questions?
![Page 45: "Smarter Responsive Design" by Sam Otis](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a665491a28abe11b8b46d9/html5/thumbnails/45.jpg)
Questions?