Planning content for responsive layouts

  • 15,209 views
Uploaded on

 

More in: Technology , Real Estate
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
15,209
On Slideshare
0
From Embeds
0
Number of Embeds
34

Actions

Shares
Downloads
63
Comments
1
Likes
16

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Respon sive Design Planning for layouts with Pauly Ting Wednesday, 24 July 2013
  • 2. Respon sive Design Planning Content with Pauly Ting I’m the Lead UX Designer at Tigerspike SF, founder of Feedia, and co-founder of TwoCents. t: @paulyting e: paulyting@gmail.com My name is Pauly Ting
  • 3. My name is Pauly Ting Today I’m talking about planning content for responsive layouts.
  • 4. Respon sive Design Planning Content with Pauly Ting Webinar Agenda Housekeeping Introduction Challenge #1 Challenge #2 Challenge #3 Q&A What do we know about postcards?
  • 5. Respon sive Design Planning Content with Pauly Ting Webinar Agenda Housekeeping Introduction Challenge #1 Challenge #2 Challenge #3 Q&A And TVs
  • 6. Respon sive Design Planning Content with Pauly Ting Webinar Agenda Housekeeping Introduction Challenge #1 Challenge #2 Challenge #3 Q&A And the kitchen cupboards?
  • 7. Respon sive Design Planning Content with Pauly Ting Things don’t always fit as intended.
  • 8. Respon sive Design Planning Content with Pauly Ting Respon sive Design Planning Content with Pauly Ting
  • 9. Respon sive Design Planning Content with Pauly Ting Respon sive Design Planning Content with Pauly Ting
  • 10. Respon sive Design Planning Content with Pauly Ting Typesetting: Orphans and Widows Resource - http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/
  • 11. Respon sive Design Planning Content with Pauly Ting Typesetting: Rags Resource - http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/
  • 12. Respon sive Design Planning Content with Pauly Ting Available medium: Strict rules
  • 13. Respon sive Design Planning Content with Pauly Ting We built all kinds of publishing tools
  • 14. Respon sive Design Planning Content with Pauly Ting And then just applied that to the web
  • 15. Respon sive Design Planning Content with Pauly Ting What we got: Fabric Land. Respon sive Design Planning Content with Pauly Ting
  • 16. Respon sive Design Planning Content with Pauly Ting Chapters and Pages: Design or Dogma? Resource - http://www.taming-openoffice-org.com/newsite/?page_id=90
  • 17. Respon sive Design Planning Content with Pauly Ting Content Tools: Some differences. Static Bound Finished Dynamic Posted WIP
  • 18. Respon sive Design Planning Content with Pauly Ting Content Tools: Some differences. Static Bound Finished Dynamic Posted WIP Paper
  • 19. Respon sive Design Planning Content with Pauly Ting Content Tools: Some differences. Static Bound Finished Dynamic Posted WIP Not Paper
  • 20. Respon sive Design Planning Content with Pauly Ting Content Consumption: Fixed dimensions 1280px 768px 1024px 320px
  • 21. Respon sive Design Planning Content with Pauly Ting Content Consumption: No more fixed dimensions
  • 22. Respon sive Design Planning Content with Pauly Ting Planning for a new type of content. Responsive Content.
  • 23. Respon sive Design Planning Content with Pauly Ting Responsive: 3 Fundamentals Media Queries Fluid Grids Flexible Media %
  • 24. Respon sive Design Planning Content with Pauly Ting Responsive: 3 Fundamentals Media Queries Fluid Grids Flexible Media %
  • 25. Respon sive Design Planning Content with Pauly Ting Responsive: Fluid Grids Pixels Fixed width Percentages Flexible width Resource - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
  • 26. Respon sive Design Planning Content with Pauly Ting Responsive: Content in Grids Header A B C Header A D F B E G C H Header A I B J E Header C F H D G K 320px 1024px +768px
  • 27. Respon sive Design Planning Content with Pauly Ting Responsive: The downside to fluid grids Resource - http://www.lukew.com/ff/entry.asp?1514 Undesired content flow Changes in content structure
  • 28. Respon sive Design Planning Content with Pauly Ting Example: Starbucks Resource - http://www.lukew.com/ff/entry.asp?1514
  • 29. Respon sive Design Planning Content with Pauly Ting Example: Starbucks Resource - http://www.lukew.com/ff/entry.asp?1514 Buy!
  • 30. Respon sive Design Planning Content with Pauly Ting Example: Starbucks Resource - http://www.lukew.com/ff/entry.asp?1514 The original presentation had an embedded screencast. This slide demonstrated that because the endless and often thoughtless stacking of DIVs typical in Responsive layouts, meant that this very important Buy Online button had been pushed to the bottom of the page after a lengthy scroll, thus making it unlikely people would check out. It was literally found after 8+ page lengths of user reviews. *yawn*!
  • 31. Respon sive Design Planning Content with Pauly Ting Example: Starbucks Resource - http://www.lukew.com/ff/entry.asp?1514 The original presentation had an embedded screencast. This slide demonstrated that because the endless and often thoughtless stacking of DIVs typical in Responsive layouts, meant that this very important Buy Online button had been pushed to the bottom of the page after a lengthy scroll, thus making it unlikely people would check out. It was literally found after 8+ page lengths of user reviews. *yawn*!
  • 32. Respon sive Design Planning Content with Pauly Ting Lesson: It’s more than just re-flowing content • Fluidity (although not pixel perfection) still needs a vigilant and thoughtful eye • Mobile use-case doesn’t mean being deprived; rather being accessible • Content priority and order is important
  • 33. Respon sive Design Planning Content with Pauly Ting Important: Start with structuring content
  • 34. Respon sive Design Planning Content with Pauly Ting Content: Types FAQs “I !"" #$%&r'# ()*' pr&%+,(/'#rv*,#” - Somebody forms
  • 35. Respon sive Design Planning Content with Pauly Ting Content: Elements Typefaces Images VIDEO www.url.com Sound Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus massa nulla, posuere at auctor in, varius id justo. Integer nec lectus congue, euismod ligula eget, sodales quam. Duis et elit condimentum, porta urna eu, lacinia metus. Nulla pellentesque facilisis augue tempor vulputate. Nunc ut tellus vitae felis ornare suscipit sit amet ac diam. Aenean commodo sodales nisi ut egestas. Phasellus eleifend tempor sapien, ut semper massa faucibus vel. Cras imperdiet semper odio sit amet porttitor. In eget semper urna, id malesuada nibh. Donec auctor nulla sit amet lacus placerat, eu ullamcorper turpis pellentesque. Proin tincidunt dictum malesuada. Phasellus sed libero nec justo vestibulum fermentum. Header Sub Header • Lists • More Lists • Even more Lists 07/24/2013 19:00:00 Captions for videos or images Graphs “P+"" Q+&(#'” tags, tags, tags $Price ICONs Summary Lorem ipsum dolor sit a m e t , c o n s e c t e t u r adipiscing elit. Phasellus massa nulla, posuere at auctor in, varius id jlectus congue, euismigula eget, sodales quam. BUTTONS
  • 36. Respon sive Design Planning Content with Pauly Ting Content: Make rules and relationships Add to cart $ Description Lorem ipsum dolor sit a m e t , c o n s e c t e t u r adipiscing elit. Phasellus massa nulla, posuere at auctor in, varius id jlectus congue, euismigula eget, sodales quam. Images FAQs • Lists • More Lists • Even more Lists
  • 37. Respon sive Design Planning Content with Pauly Ting Content: Prioritize content Add to cart $PRICE Description Lorem ipsum dolor sit a m e t , c o n s e c t e t u r adipiscing elit. Phasellus massa nulla, posuere at auctor in, varius id jlectus congue, euismigula eget, sodales quam. Images FAQS • Lists • More Lists • Even more Lists = 1 2 3 5 4 7 6
  • 38. Respon sive Design Planning Content with Pauly Ting How to prioritize Meaning What is gained/lost by keeping/losing this? Priority Does it have context or exist for a key task? Relationship What is affected if this disappears?
  • 39. Respon sive Design Planning Content with Pauly Ting Technicalities: Some light reading Conditional Loading Ajax-include patterns http://filamentgroup.com/lab/ajax_includes_modular_content Lazy Loading http://coding.smashingmagazine.com/2010/01/06/page-performance-what-to-know-and- what-you-can-do/ Show/Hide with media queries http://www.frankieroberto.com/responsive_text Flexbox http://www.w3.org/TR/css3-flexbox/ http://www.jordanm.co.uk/contentchoreographydemo CSS3 Grid Layout http://dev.w3.org/csswg/css-grid/ Relocate.js https://github.com/edenspiekermann/minwidth-relocate
  • 40. Respon sive Design Planning Content with Pauly Ting Responsive: Flexible Media 320px 1024px +768px Aa Bb Cc Aa Bb Cc Aa Bb Cc 76kb 200kb 1.4MB
  • 41. Respon sive Design Planning Content with Pauly Ting Flexible Media: Max-width: 100%?
  • 42. Respon sive Design Planning Content with Pauly Ting Flexible Media: Multi-screen use case
  • 43. Respon sive Design Planning Content with Pauly Ting Flexible Media: Use touch events
  • 44. Respon sive Design Planning Content with Pauly Ting Flexible Media: Offer alternatives
  • 45. Respon sive Design Planning Content with Pauly Ting Flexible Media: Check this stuff out Responsive Images http://filamentgroup.com/lab/ajax_includes_modular_content <picture> element http://picture.responsiveimages.org https://github.com/scottjehl/picturefill srcset http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ Video http://fitvidsjs.com
  • 46. Respon sive Design Planning Content with Pauly Ting #1: We’re not designing pages anymore #2: Think in percentages, not pixels #3: Fluid layouts need strategic planning #4: Assess about your content semantically #5: Create content rules based on use cases #6: Flexible media also means offering an alternative Summary: 6 quick take-aways
  • 47. Respon sive Design Contact me t: @paulyting e: paulyting@gmail.com
  • 48. Respon sive Design Planning Content with Pauly Ting Massimo Vignelli Respon sive Design 3 key challenges with Pauly Ting
  • 49. Respon sive Design Planning Content with Pauly Ting Flexible Grids aren’t new Respon sive Design 3 key challenges with Pauly Ting Resource - http://www.cdf.org/issue_journal/a_lasting_impression-2.html Invented by Massimo Vignelli for the NPS. Vince Gleason of the NPS turned to Vignelli for help in finding a way to allow designers to focus more on content, not reinvent the wheel with each piece. The result was Unigrid. At the heart of the Unigrid program's longevity is the fact that it is an open framework, not a fixed formula. There is room for creativity on the part of the many designers, both in-house and contract, who work with it.