adaptive design: the next generation of responsive
TRANSCRIPT
@techconf #tech13
Thomas KuglerWebsite [email protected]@tom8gem202-326-9515
Adaptive Design:The Next Generation of Responsive
Stardate: 12.05.2013Time: 0900Hashtag: #tech13 LM6
John MillsManager, Digital Strategy
@kesseljunkie571-612-3206
John MillsManager, Digital Strategy
PMMI: The Association for Packaging and Processing
@kesseljunkie571-612-3206
@techconf #tech13@techconf #tech13
The basic formula
{[Adaptive (Responsive) Design] + Adaptive Content} = ☺
@techconf #tech13
{Adaptive [Responsive] Design}, Adaptive Content
• Adaptive Design: A layered approach to deliver a baseline experience which grows richer as limitations are removed.
• Responsive Design: A subset of Adaptive Design; method to optimize the viewing experience across a wide device range.
• Adaptive Content: Flexible content which adapts to different screen sizes/contexts and device capabilities.
“Content is king”
@techconf #tech13
“What works is better than what looks good—a new definition of beautiful.” -Ethan Marcotte
@techconf #tech13
• Determine context and adapt UX. • Successive layers:
1. Text (Web-optimized Copy)2. Semantics (HTML/Markup)3. Style (CSS)4. Interactivity (JavaScript)5. Accessibility
• Progressive Enhancement > Graceful Degradation All experiences created w/ Progressive Enhancement will degrade
gracefully.** not all experiences created w/ Graceful Degradation are progressively enhanced
Progressive Enhancement:The Strategies
@techconf #tech13
Semantics (HTML/Markup):• Well-written copy• Semantic HTML• Use microformats • Use classification to group like
elements (via “class”) • Identify landmark elements (via “id”)
Style (CSS):• Order matters• Hide advanced rule sets from old
browsers (@media)• Use conditional comments for IE• Account for alternate media
Progressive Enhancement: The Mechanics
Interactivity (JavaScript)• Content is accessible
and tasks can be completed without scripts
• Deliver scripts á la carte when possible
Accessibility:• Use ARIA landmarks,
roles and states• Use Tabindex to control
user’s journey through page
@techconf #tech13
@techconf #tech13
Design—Screen Size is Not Enough• Screen Width/Resolution doesn’t tell us input capabilities
(cursor/keyboard, touch, D- pad, combinations of these)• Nor does it tell us User Posture (e.g., distance from
screen: ~1’ for phone, ~10’ for TV)• Various Device Widths: you can’t target them all—be
“device-width agnostic”!
Luke Wroblewski, Multi-Device Web Design & Beyond
“If there’s a coming zombie apocalypse of devices, TVs are the likely next wave.”
-Jason Grigsby
@techconf #tech13
Design for Various Contexts:Style Tiles (p. 1)
Samantha Warren, Style Tiles and How They Work
More precise than mood boards, less precise than full mockups; they set a common visual language for use across multiple interfaces. Create systems, not pages .
Option 1: Option 2: Option 3:
@techconf #tech13
Style Tiles (p. 2)
Samantha Warren, Style Tiles and How They Work
Option 1: Option 2: Option 3:
Final Tile—Defines styles for multi-device design
@techconf #tech13
Adaptation
@techconf #tech13
Adaptive Content“Chunk Your Blobs”
Karen McGrane, Adapting Ourselves to Adaptive Content
• Content Parity = Everything for Everyone
• Pages can no longer be one inseparable blob of content; we must identify chunks in the blob and put them in appropriate, predefined places.
• These chunks can then be reused in many contexts and managed in one place; a system of content objects to use flexibly.
“You don’t get to choose how users access your site. They do.”
-Karen McGrane
@techconf #tech13
Adaptive Content (p. 2)• One Code Base, One Content Set• Don’t double your workload, or fork your content• Structure and Metadata attached to content determines
how it responds to various devices• Serve different versions to different contexts, e.g., for
article descriptions, the “short version” displays on phones while the “long version” displays on desktop
• This also applies to images, not only per size/resolution but crops as well.
“The good news: you only need one web design, a multi-device one. The bad news: it’s a new & different way of doing design.”
-Luke Wroblewski
@techconf #tech13@techconf #tech13
Adaptive Content (p. 3)Reusable Content, Alternative Content
Karen McGrane, Content Strategy for Mobile
The short version—√ “Truncation is not a content strategy”
@techconf #tech13@techconf #tech13
• Responsive Frameworks: e.g., Foundation by Zurb, Bootstrap, Squarespace, WordPress
• SASS: Syntactically Awesome Style Sheets • CMS:1.Detect & Display: URL tied to content layer, not display
layer, allowing CMS to detect the device and choose the right display layer for the device.
2.Hybrid: RWD with some detect & display page elements built in.
3.
Tools
@techconf #tech13
• One codebase, deployment, & URL• Device detection only used at component level• Only send what client needs: navigation, media,
images, etc.• Combines best of both worlds:1. Adaptation—RWD2. Optimization—Separate Templates
RESS: RWD + Server-Side Optimization
Luke Wroblewski, Multi-Device Web Design & Beyond
@techconf #tech13
Resources
Content Strategy for Mobile-Karen McGrane
Adaptive Web Design-Aaron Gustafson
Responsive Web Design-Ethan Marcotte
@techconf #tech13
http://asae.conferences.io/sessions/66
Share Your Thoughts
@techconf #tech13
Thomas KuglerWebsite [email protected]
John MillsManager, Digital StrategyPMMI: The Association for Packaging and Processing [email protected]@kesseljunkie571-612-3206Bat Signal also acceptable.
Contact Us