1. Hi there.
May, 18 2012

2. Let’s clarify.

3. RESPONSIVE WEB DESIGN
A broad range of devices can access a single
source of content, designed to respond
to device dimensions so as to always be easy
to read and navigate.

4. The web is inherently responsive.

6. PC usage is down
20%
since 2008

7. traffic to mobile
websites increased
+600%
...just in 2010

8. Evidenced

9. In fact,

10. 25% of mobile web users,
In the U.S.,
browse only on their phones,
never using a laptop, desktop or tablet to access the Internet.

11. So many screens,
So little time.

12. So.... how do we do this?

13. STRICTLY PLATONIC
Responsive Design + Development --
How to avoid digital land(scape) mines
• Optimize process
• Learn the patterns
• A common language (CSS)
• Design approach

14. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
OPTIMIZE PROCESS
• Establish collaborative teams
• Developers explain how you work
• Designers stay involved

15. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
OPTIMIZE PROCESS
The best collaboration and communication can
come from a shared understanding of the
challenges.

16. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
LEARN THE PATTERNS
Map of the planets, moons and asteroids in our solar system created from information collected by spacecraft and telescopes. The
different colors correspond to different structures and features such as basins, craters, mountains, and plains. via the telegraph
and i09 Image by SPL/Bancroft Media

17. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
LEARN THE PATTERNS
Design patterns are generally
reusable solutions to commonly occurring
challenges.

18. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
LEARN THE PATTERNS
Mostly fluid example

19. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
LEARN THE PATTERNS
Column drop example

20. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
LEARN THE PATTERNS
Layout shi!er example

21. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
LEARN THE PATTERNS
And there are more,
check them out!

22. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
LEARN THE PATTERNS
Beware of ‘hiding’ content!
Consider mobile users and important
features,
and
the ‘hidden’ HTML and CSS still gets
downloaded by everyone.

23. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
LEARN THE PATTERNS
There are also navigation patterns.

24. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
A COMMON LANGUAGE (CSS)
A *very* brief overview.

25. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
A COMMON LANGUAGE (CSS)
HTML defines the content:
<h1>Welcome to our website</h1>

26. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
A COMMON LANGUAGE (CSS)
CSS defines the style:
h1 {
font-size: 24px;
color: red;
}

27. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
A COMMON LANGUAGE (CSS)
CSS styles declared later in a document can
override earlier ones:
h1 {
color: green;
}

28. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
A COMMON LANGUAGE (CSS)
CSS3 Media Queries allow for device specific
style declarations:
@media screen and (min-width: 650px) {
h1 {
color: blue;
}
}

29. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
A COMMON LANGUAGE (CSS)
Media query for screens wider than X:
@media screen and (min-width: 500px) {
// Styles go here
}

30. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
A COMMON LANGUAGE (CSS)
Media query for screens narrower than X:
@media screen and (max-width: 500px) {
// Styles go here
}

31. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
A COMMON LANGUAGE (CSS)
Let’s check out some code!

32. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
You’ve
optimized your process
learned the patterns
established a common language (CSS)
now....

33. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
DESIGN APPROACH
Design with responsiveness in mind!

34. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
DESIGN APPROACH
Mobile first (or narrowest)
then, desktop (or widest)
this this
first second
. . .

35. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
DESIGN APPROACH
Define breakpoints,
as the width of the design increases...
lookin
start still how
one get
good.
here, look about
more? crazy.
good? now?

36. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
DESIGN APPROACH
And,
prototyping can help reveal if the design is working.
still how one get
lookin look about more? crazy.
good. good? now?
no
yes. no. yes. budget :)

37. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
DESIGN APPROACH
Also, a design toolkit is helpful and can include
style guides
and adaptable components
still how one get
lookin look about more? crazy.
good. good? now?
no
help! yes. budget :)

38. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
IF YOU ONLY REMEMBER 3 THINGS
• Working together, works
• Consider the small screen first
• @WINTR_US

39. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
ASK US SOMETHING!
Questions?

40. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines
HELPFUL RESOURCES
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://www.netmagazine.com/tutorials/build-responsive-site-week-designing-
responsively-part-1

41. ABOUT WINTR
We're a Digital Creative Company. From concept to creation we design, develop and measure 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.

42. SERVICES