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.
Adapt and respond: keeping responsive into the futureChris Mills
Media queries blah blah blah. You've all heard that talk a hundred times, so I won't do that. Instead, I'll go beyond the obvious, looking at what we can do today to adapt our front-ends to different browsing environments, from mobiles and other alternative devices to older browsers we may be called upon to support.
You'll learn advanced media query and viewport tricks, including a look at @viewport, Insights into responsive images: problems, and current solutions, providing usable alternatives to older browsers with Modernizr and YepNope, other CSS3 responsive goodness - multi-col, Flexbox, and more, and finally where RWD is going — matchMedia, CSS4 media queries, etc.
Pardot Elevate 2012 - Becoming a Dynamic Content DynamoPardot
Pardot’s Dynamic Content feature allows you to display certain content on your website based on a prospect’s score, grade, or field value. This very powerful tool allows you to deliver targeted content to your prospects. In this session, learn how to use Dynamic Content creatively and effectively through real-world examples that you’ll be able to start implementing right away.
Adapt and respond: keeping responsive into the futureChris Mills
Media queries blah blah blah. You've all heard that talk a hundred times, so I won't do that. Instead, I'll go beyond the obvious, looking at what we can do today to adapt our front-ends to different browsing environments, from mobiles and other alternative devices to older browsers we may be called upon to support.
You'll learn advanced media query and viewport tricks, including a look at @viewport, Insights into responsive images: problems, and current solutions, providing usable alternatives to older browsers with Modernizr and YepNope, other CSS3 responsive goodness - multi-col, Flexbox, and more, and finally where RWD is going — matchMedia, CSS4 media queries, etc.
Pardot Elevate 2012 - Becoming a Dynamic Content DynamoPardot
Pardot’s Dynamic Content feature allows you to display certain content on your website based on a prospect’s score, grade, or field value. This very powerful tool allows you to deliver targeted content to your prospects. In this session, learn how to use Dynamic Content creatively and effectively through real-world examples that you’ll be able to start implementing right away.
Learning to Play UX Rugby - Why your Agile UX adoption is failing and what to...Anders Ramsay
These are slides from a talk I have given at Agile UX NYC, the IA Summit and UX London. For the UX London version, I also added some slides on Lean UX from the Lean UX Roundtable panel I participated in.
In this session we will discuss how using UX to validate, refine and even define your product’s strategy and business principles can lead to the coveted innovation we all aim for.
Learning to Play UX Rugby - Why your Agile UX adoption is failing and what to...Anders Ramsay
These are slides from a talk I have given at Agile UX NYC, the IA Summit and UX London. For the UX London version, I also added some slides on Lean UX from the Lean UX Roundtable panel I participated in.
In this session we will discuss how using UX to validate, refine and even define your product’s strategy and business principles can lead to the coveted innovation we all aim for.
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
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
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
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