• Save
Adaptive Experiences
Upcoming SlideShare
Loading in...5
×
 

Adaptive Experiences

on

  • 915 views

Presented at Seattle Interactive Conference 2012, by Matt Fordham and Taylor Winters

Presented at Seattle Interactive Conference 2012, by Matt Fordham and Taylor Winters

Statistics

Views

Total Views
915
Views on SlideShare
915
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Adaptive Experiences Adaptive Experiences Presentation Transcript

    • ADAPTIVE EXPERIENCES October 29, 2012 | Seattle Interactive Conference @wintr_usMonday, November 5, 12
    • RESPONSIVE WEB DESIGN A single source of content designed to respond to browser dimensions providing access to a broad range of devices.Monday, November 5, 12
    • The web is inherently responsive.Monday, November 5, 12
    • CONSIDER CONTEXT Tablet Mobile Desktop LaptopMonday, November 5, 12
    • THE IDEAL EFFECT An on-strategy experience and brand consistency across all user interactions.Monday, November 5, 12
    • ADAPTIVE EXPERIENCES Strategy & Planning and Design & DevelopmentMonday, November 5, 12
    • STRATEGY & PLANNING • Not a trend, it’s the future • More room for the brand • Access, performance, interactionMonday, November 5, 12
    • AGENDAS AND OBJECTIVESMonday, November 5, 12
    • “we found the wisest decisions are usually made by those closest to the problem.”Monday, November 5, 12
    • DESIGN & DEVELOPMENT • Optimize process • Learn the patterns • A common language (CSS) • Design approachMonday, November 5, 12
    • OPTIMIZE PROCESS • Establish collaborative teams • Developers explain how you work • Designers stay involvedMonday, November 5, 12
    • OPTIMIZE PROCESS The best collaboration and communication can come from a shared understanding of the challenges.Monday, November 5, 12
    • LEARN THE PATTERNS Design patterns are generally reusable solutions to commonly occurring challenges.Monday, November 5, 12
    • LEARN THE PATTERNS Mostly fluidMonday, November 5, 12
    • LEARN THE PATTERNS Column dropMonday, November 5, 12
    • LEARN THE PATTERNS Layout shi!erMonday, November 5, 12
    • LEARN THE PATTERNS • dev.wintr.us/responsive • therealawards.com • mediaqueri.esMonday, November 5, 12
    • A COMMON LANGUAGE (CSS) A *very* brief overview.Monday, November 5, 12
    • A COMMON LANGUAGE (CSS) HTML defines the content: <h1>Welcome to our website</h1>Monday, November 5, 12
    • A COMMON LANGUAGE (CSS) CSS defines the style: h1 { font-size: 24px; color: red; }Monday, November 5, 12
    • A COMMON LANGUAGE (CSS) CSS3 Media Queries allow for dimension specific style declarations: @media screen and (min-width: 650px) { h1 { color: blue; } }Monday, November 5, 12
    • A COMMON LANGUAGE (CSS) Media query for screens narrower than X: @media screen and (max-width: 500px) { // Styles go here }Monday, November 5, 12
    • A COMMON LANGUAGE (CSS) Media query for screens wider than X: @media screen and (min-width: 500px) { // Styles go here }Monday, November 5, 12
    • DEVELOP MOBILE FIRST Develop initially for the lowest common denominator and then progressively enhance the experience.Monday, November 5, 12
    • DESIGN APPROACH Step 1 – Design without dimension Step 2 – Design with responsiveness in mind!Monday, November 5, 12
    • STYLE TILESMonday, November 5, 12
    • DESIGN APPROACH Mobile first (or narrowest) then, desktop (or widest) this first this secondMonday, November 5, 12
    • DESIGN APPROACH Define breakpoints, as the width of the design increases... lookin’ still look how about good. good? now?Monday, November 5, 12
    • NEW DEVICES IN THE LAST 2 MONTHSMonday, November 5, 12
    • DESIGN APPROACH And, prototyping can help reveal if the design is working, or not. lookin’ till look how about good. good? now? yes noMonday, November 5, 12
    • DESIGN APPROACH Also, a design toolkit is helpful and can include style guides and adaptable components.Monday, November 5, 12
    • IF YOU ONLY REMEMBER 3 THINGS • The wisest decisions are usually made by those closest to the problem. • Integrated and educated teams are rad. • Design and build for the lowest common denominator first.Monday, November 5, 12
    • ASK US SOMETHING! Questions?Monday, November 5, 12
    • HELPFUL RESOURCES 1.http://www.abookapart.com/products/responsive-web-design 2.http://www.lukew.com/ff/entry.asp?1514 3.http://static.lukew.com/MobileFirst_LukeW.pdf 4.http://www.abookapart.com/products/mobile-first 5.http://bradfrostweb.com/blog/web/responsive-nav-patterns/ 6.http://24ways.org/2011/collaborative-development-for-a-responsively- designed-web 7.http://styletil.es/Monday, November 5, 12
    • ABOUT WINTR Were a Digital Creative Company. From concept to creation we design and develop multi-screen brand experiences. Fueled by cultural insights, we cra! the platforms and content to engage and motivate consumers across the digital landscape. We believe content must have intrinsic sharable value and capitalize on trending user desires and preferences. Cultural currency is king.  We help both Companies and Agencies rationalize possibilities and align objectives. Because creative ideas, technical parameters and strategic requirements must mutually reinforce each other. Harmony rules.  We call this Creative Content Engineering.Monday, November 5, 12
    • SERVICESMonday, November 5, 12