"smarter responsive design" by sam otis
TRANSCRIPT
Smarter Responsive Design
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?
Create one design, that responds to the shape of the display rendering it.
– Ethan Marcotte
Responsive Design:
How can we improve the user experience with smarter design patterns?
Question:
Column Stacking
Column Stacking
GOAL:
Display the full content legibly on any size device.
Column Stacking
PROBLEM:
Results in awkwardly long pages on small devices.
Column Stacking
SmartUse in-page anchor navigation and a back-to-top link.
Column Stacking
SmarterCollapse columns or sections into an accordion on small devices.
+ News
+ Athletic Events
+ Arts Events
+ Live at Heritage Center
Try converting tabs to an accordion structure on small screens too.
bootstrap-tabcollapse.js
Column Stacking
Column Stacking
Extra CreditCollect promoted content or features in a feature menu.
Hooray column stacking!
Image Slider
Image Slider
GOAL:
Highlight the main purpose of the site with a strong visual first impression.
Image Slider
PROBLEMS:
A fixed aspect ratio means the image won’t fit on wide screens, and is too small on narrow ones.
Image Slider
SmartCrop the image at a max height with CSS, or set a max width on the overall site.
Image Slider
SmarterAdd a column to one side of the slider to better use the extra screen width.
Nothing makes a device feel smaller than a page element that doesn’t fit on
the screen.
Pro Tip:
Image Slider
SmartPush the overlaid text below the image when it no longer fits.
Image Slider
SmarterCrop the images with CSS to feature the “live” area of the photo on smaller screens.
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?
Image Slider
responsiveimages.org
● picture element● srcset and sizes
attributes● black magic
Responsive Tables
Responsive Tables
GOAL:
Display tabular data in a way that preserves the relationships between rows and columns.
Responsive Tables
PROBLEM:
Multiple columns won’t fit on a narrow screen.
Responsive Tables
SmartCreate an alternate list view of a table to display on a narrow screen.
Responsive Tables
SmarterEnable horizontal scrolling on the table.
Responsive Tables
SmartererDynamically hide columns to fit, and provide a way to toggle through hidden data.
Responsive Tables
tablesaw.js
Responsive Tables
Smart AlecJust download a PDF.
Any design pattern can be broken with reckless content management.
Pro Tip:
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:
Questions?
Questions?
