Hi there. May, 18 2012
Let’s clarify.
RESPONSIVE WEB DESIGNA broad range of devices can access a singlesource of content, designed to respondto device dimension...
The web is inherently responsive.
PC usage is down     20%   since 2008
traffic to mobilewebsites increased       +600%   ...just in 2010
Evidenced
In fact,
25% of mobile web users,In the U.S.,browse only on their phones,never using a laptop, desktop or tablet to access the Inte...
So many screens,So little time.
So.... how do we do this?
STRICTLY PLATONICResponsive Design + Development --How to avoid digital land(scape) mines• Optimize process• Learn the pat...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             OPTIMIZE PROCESS...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             OPTIMIZE PROCESS...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             LEARN THE PATTER...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             LEARN THE PATTER...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             LEARN THE PATTER...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             LEARN THE PATTER...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             LEARN THE PATTER...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             LEARN THE PATTER...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             LEARN THE PATTER...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             LEARN THE PATTER...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             A COMMON LANGUAG...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             A COMMON LANGUAG...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             A COMMON LANGUAG...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             A COMMON LANGUAG...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             A COMMON LANGUAG...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             A COMMON LANGUAG...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             A COMMON LANGUAG...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             A COMMON LANGUAG...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             You’ve          ...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             DESIGN APPROACH ...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             DESIGN APPROACH ...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             DESIGN APPROACH ...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             DESIGN APPROACH ...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             DESIGN APPROACH ...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines             IF YOU ONLY REME...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines              ASK US SOMETHIN...
STRICTLY PLATONIC   Responsive Design + Development -- How to avoid digital land(scape) mines              HELPFUL RESOURC...
ABOUT WINTRWere a Digital Creative Company. From concept to creation we design, develop and measure brandexperiences. Fuel...
SERVICES
Strictly Platonic - Responsive Design + Development - How to Avoid Digital Land(scape) Mines
Upcoming SlideShare
Loading in …5
×

Strictly Platonic - Responsive Design + Development - How to Avoid Digital Land(scape) Mines

1,356 views

Published on

Published in: Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,356
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Strictly Platonic - Responsive Design + Development - How to Avoid Digital Land(scape) Mines

  1. 1. Hi there. May, 18 2012
  2. 2. Let’s clarify.
  3. 3. RESPONSIVE WEB DESIGNA broad range of devices can access a singlesource of content, designed to respondto device dimensions so as to always be easyto read and navigate.
  4. 4. The web is inherently responsive.
  5. 5. PC usage is down 20% since 2008
  6. 6. traffic to mobilewebsites increased +600% ...just in 2010
  7. 7. Evidenced
  8. 8. In fact,
  9. 9. 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.
  10. 10. So many screens,So little time.
  11. 11. So.... how do we do this?
  12. 12. STRICTLY PLATONICResponsive Design + Development --How to avoid digital land(scape) mines• Optimize process• Learn the patterns• A common language (CSS)• Design approach
  13. 13. 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
  14. 14. 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.
  15. 15. 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
  16. 16. 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.
  17. 17. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines LEARN THE PATTERNS Mostly fluid example
  18. 18. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines LEARN THE PATTERNS Column drop example
  19. 19. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines LEARN THE PATTERNS Layout shi!er example
  20. 20. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines LEARN THE PATTERNS And there are more, check them out!
  21. 21. 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.
  22. 22. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines LEARN THE PATTERNS There are also navigation patterns.
  23. 23. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines A COMMON LANGUAGE (CSS) A *very* brief overview.
  24. 24. 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>
  25. 25. 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; }
  26. 26. 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; }
  27. 27. 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; } }
  28. 28. 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 }
  29. 29. 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 }
  30. 30. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines A COMMON LANGUAGE (CSS) Let’s check out some code!
  31. 31. 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....
  32. 32. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines DESIGN APPROACH Design with responsiveness in mind!
  33. 33. 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 . . .
  34. 34. 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?
  35. 35. 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 :)
  36. 36. 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 :)
  37. 37. 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
  38. 38. STRICTLY PLATONIC Responsive Design + Development -- How to avoid digital land(scape) mines ASK US SOMETHING! Questions?
  39. 39. 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
  40. 40. ABOUT WINTRWere a Digital Creative Company. From concept to creation we design, develop and measure brandexperiences. Fueled by cultural insights, we cra! the platforms and content to engage and motivateconsumers across the digital landscape.We believe content must have intrinsic sharable value and capitalize on trending user desires andpreferences. 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.
  41. 41. SERVICES

×