FITC Spotlight: Responsive Design 2016
2016-06-04
Toronto, Canada
who it's for
front-end developers, web designers, mobile web developers, ux designers, front-end architects, performance engineers, accessibility engineers
topics
responsive images with srcset; image CDN and resizing workflows; picturefill and lazysizes fallbacks; grunt and gulp image automation; flexbox layout techniques; breakpoint mixins with preprocessors; rem-based typographic scaling; modular CSS reusable objects; Ember apps with Cordova/WK WebView; translateX and translateY compositing
| title | author | length |
|---|---|---|
| Deliver Perfect Images At Any Size | Anne Thomas | 41m |
Concrete workflow that delivers: generate multiple image widths (Shopify limits to 2048×2048), store them on a CDN, and let the browser pick with srcset and… | ||
| Things To Keep In Mind When Working In The World Of Responsive Design | Haris Mahmood | 40m |
Concrete takeaways: use flex-direction: row-reverse and Flex Grow to reorder and size content as ratios rather than fixed widths, adopt REMs for typographic… | ||
| Responsive Design Patterns for an Evolving Web | Bermon Painter | 32m |
Shows about ten concrete responsive patterns built with flexbox and sass, not abstract theory: sidebar reordering via order and flex-direction, toolbar spacing… | ||
| CSS Layout Techniques: Replacing Floats with Flexbox | Bermon Painter | 47m |
Claims that Flexbox replaces float hacks by making centering, equal-height columns and gutters trivial and shows working examples: a full-height two-pane… | ||
| Responsive Design, Past, Present and Future | Andrew Smyk | 43m |
Claims that a text-first baseline with progressive enhancement delivers the widest compatibility, proven by loading stripped HTML on a 1998 iMac, Opera Mini on… | ||
| Designing True Cross-Platform Apps | Alexander Blom | 38m |
Claims a single Ember codebase renders desktop, tablet and native apps with near-native performance if memory and reflow are managed; demos a small app called… | ||
| nothing matches | ||