"smarter responsive design" by sam otis

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?

Thanks

@sam_otissam@blendinteractive.com