The document discusses adaptive experiences and responsive web design. It emphasizes designing first for mobile and the lowest common device, then progressively enhancing the experience. It recommends establishing collaborative teams of designers and developers with a shared understanding. Design patterns and a common CSS language can help provide responsive solutions. Prototyping can reveal how the design works at different breakpoints. The document provides helpful resources and information about the company Wintr and their services in digital creative and content engineering.

1. ADAPTIVE EXPERIENCES
October 29, 2012 | Seattle Interactive Conference
@wintr_us
Monday, November 5, 12

2. 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

3. The web is inherently responsive.
Monday, November 5, 12

4. CONSIDER CONTEXT
Tablet
Mobile
Desktop
Laptop
Monday, November 5, 12

5. THE IDEAL EFFECT
An on-strategy experience and brand consistency
across all user interactions.
Monday, November 5, 12

6. ADAPTIVE EXPERIENCES
Strategy & Planning
and
Design & Development
Monday, November 5, 12

7. STRATEGY & PLANNING
• Not a trend, it’s the future
• More room for the brand
• Access, performance, interaction
Monday, November 5, 12

8. AGENDAS AND OBJECTIVES
Monday, November 5, 12

9. “we found the wisest decisions are usually
made by those closest to the problem.”
Monday, November 5, 12

10. DESIGN & DEVELOPMENT
• Optimize process
• Learn the patterns
• A common language (CSS)
• Design approach
Monday, November 5, 12

11. OPTIMIZE PROCESS
• Establish collaborative teams
• Developers explain how you work
• Designers stay involved
Monday, November 5, 12

12. OPTIMIZE PROCESS
The best collaboration and communication
can come from a shared understanding of
the challenges.
Monday, November 5, 12

13. LEARN THE PATTERNS
Design patterns are generally reusable solutions
to commonly occurring challenges.
Monday, November 5, 12

14. LEARN THE PATTERNS
Mostly fluid
Monday, November 5, 12

15. LEARN THE PATTERNS
Column drop
Monday, November 5, 12

16. LEARN THE PATTERNS
Layout shi!er
Monday, November 5, 12

17. LEARN THE PATTERNS
• dev.wintr.us/responsive
• therealawards.com
• mediaqueri.es
Monday, November 5, 12

18. A COMMON LANGUAGE (CSS)
A *very* brief overview.
Monday, November 5, 12

19. A COMMON LANGUAGE (CSS)
HTML defines the content:
<h1>Welcome to our website</h1>
Monday, November 5, 12

20. A COMMON LANGUAGE (CSS)
CSS defines the style:
h1 {
font-size: 24px;
color: red;
}
Monday, November 5, 12

21. 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

22. A COMMON LANGUAGE (CSS)
Media query for screens narrower than X:
@media screen and (max-width: 500px) {
// Styles go here
}
Monday, November 5, 12

23. A COMMON LANGUAGE (CSS)
Media query for screens wider than X:
@media screen and (min-width: 500px) {
// Styles go here
}
Monday, November 5, 12

24. DEVELOP MOBILE FIRST
Develop initially for the lowest common
denominator and then progressively enhance
the experience.
Monday, November 5, 12

25. DESIGN APPROACH
Step 1 – Design without dimension
Step 2 – Design with responsiveness in mind!
Monday, November 5, 12

26. STYLE TILES
Monday, November 5, 12

27. DESIGN APPROACH
Mobile first (or narrowest)
then, desktop (or widest)
this first this second
Monday, November 5, 12

28. DESIGN APPROACH
Define breakpoints, as the width of the
design increases...
lookin’ still look how about
good. good? now?
Monday, November 5, 12

29. NEW DEVICES IN THE
LAST 2 MONTHS
Monday, November 5, 12

30. DESIGN APPROACH
And, prototyping can help reveal if the
design is working, or not.
lookin’ till look how about
good. good? now?
yes no
Monday, November 5, 12

31. DESIGN APPROACH
Also, a design toolkit is helpful and can include
style guides and adaptable components.
Monday, November 5, 12

32. 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

33. ASK US SOMETHING!
Questions?
Monday, November 5, 12

34. 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

35. ABOUT WINTR
We're 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

36. SERVICES
Monday, November 5, 12