Architecting Content Driven Websites

F94f921203292a9ef700807e9cd5061f?s=47 Souvik Das Gupta
September 17, 2016

Architecting Content Driven Websites

Tasteful visual design is merely the tip of the design iceberg to deliver a great experience for content driven websites. What’s needed is a robust strategy around structuring information and presentation. This talk explores the iceberg that remains underwater — from architecting information, to achieving balance between flexibility for content managers and control for designers — and suggests an approach towards designing and scaling informational websites.

Talk recording: https://youtu.be/aGCRWBWwuDg

F94f921203292a9ef700807e9cd5061f?s=128

Souvik Das Gupta

September 17, 2016
Tweet

Transcript

  1. 3.
  2. 9.
  3. 10.
  4. 11.
  5. 14.

    – Ambient Findability by Peter Morville “Findability precedes usability. In

    the alphabet and on the Web. You can’t use what you can’t find.”
  6. 17.

    – The Information Architecture Institute “Information architecture is the practice

    of deciding how to arrange the parts of something to be understandable.”
  7. 18.

    History of IA Abby Covert 10th Annual Euro IA Summit,

    Brussels http://abbytheia.com/2014/09/27/euroia/
  8. 19.
  9. 20.
  10. 22.
  11. 23.
  12. 25.

    Structured Content Information or content that is organised in a

    predictable way and is usually classified with metadata.
  13. 26.
  14. 30.

    Event Name Date Venue Speakers Organisers Attendees Topics Talks Schedule

    Sponsors Hotels Policies Blogposts Local Information Tickets
  15. 33.

    It this a real-world thing? A noun? What attributes will

    this have? Will this be made up of lots of that? How will this talk to that? Can this inherit from that? Can they be grouped, arranged or categorised? Is this chronological or spatial or tabular? Does alphabetical make sense? Is there a hierarchy? Can it be archived? … Is this an object?
  16. 34.

    Event Name Date Venue Speakers Organisers Attendees Topics Talks Schedule

    Sponsors Hotels Policies Blogposts Local Information Tickets
  17. 35.

    Event Name Date Venue Speakers Organisers Attendees Topics Talks Schedule

    Sponsors Hotels Policies Blogposts Local Information Tickets Event Metadata Humans Platinum, Gold, Silver, … [Room + Time-Slot + T alk]
  18. 37.

    Event Name Date Venue Speakers Organisers Attendees Topics Talks Schedule

    Sponsors Hotels Policies Blogposts Local Information Tickets Event Metadata Humans Platinum, Gold, Silver, … [Room + Time-Slot + T alk]
  19. 38.

    Event Name Date Venue Speakers Organisers Attendees Topics Talks Schedule

    Sponsors Hotels Policies Blogposts Local Information Tickets Event Metadata [Room + Time-Slot + T alk] “Person” Platinum, Gold, Silver, … “Session”
  20. 40.
  21. 41.

    Person Photo Name Organisation Designation
 Bio Twitter LinkedIn SPEAKER Name

    Organisation Designation
 ATTENDEE Name Designation Bio Contact No.
 ORGANISER
  22. 45.

    Title* Description* Type* [Full, Crisp, Workshop,…] Slides Topic Speaker →

    [{Person}, {Person}] Related Talk → [{Talk}, {Talk}] … TALK
  23. 47.
  24. 48.

    • Full Talk • Crisp Talk • Flash Talk •

    BoF • Workshop Name Duration Format No. of Speakers
 SESSION TYPE
  25. 49.
  26. 50.

    Event Name Date Venue Speakers Organisers Attendees Topics Talks Schedule

    Sponsors Hotels Policies Blogposts Local Information Tickets Event Metadata [Room + Time-Slot + T alk] “Person” Platinum, Gold, Silver, … “Session”
  27. 51.

    Event Name Date Venue Speakers Organisers Attendees Topics Talks Schedule

    Sponsors Hotels Policies Blogposts Local Information Tickets Event Metadata “Person” Platinum, Gold, Silver, … “Authors” [Room + Time-Slot + T alk] “Session”
  28. 53.

    • Single • Flat • Index • Daisy • Strict

    Hierarchy • Multidimensional Hierarchy • …
  29. 58.

    Role of IA • primarily to focus on the structure

    of information, and sometimes the design of the actual user interface (wireframes) • to understand how people actually use content and how the structure should function to support that • to grasp the range of content and functionality on a project and how that needs to be structured http://www.webdesignerdepot.com/2015/02/the-ultimate-guide-to-information-architecture/
  30. 63.
  31. 64.
  32. 65.
  33. 66.
  34. 68.

    Pick a CMS that can capture and represent the IA

    as accurately as possible Content Types, Models and Relationships
  35. 73.

    Translate Content Models into Data Models how is the content

    understood and used? how does is content stored?
  36. 74.
  37. 75.

    EVENT DATE PLACE JSFoo 2016 15-16 September MLR, JP Nagar,

    Bangalore Day {Number} Start {Datetime} End {Datetime} Auditorium {String} Locality {String} City {String} Longitude {Number} Latitude {Number} Title {String} Edition {Number}
  38. 80.
  39. 85.
  40. 93.
  41. 94.
  42. 96.

    Users • Some users know what they’re looking for. •

    Some users are exploring. • Both are happy to discover relevant
 (or related) content.
  43. 97.

    Facilitating Discovery • Make everything addressable • Aggressively expose relationships

    in current context • Show examples (a teaser) of the interlinked content
  44. 101.

    1. Elementary visual language (purely stylistic) 2. Different forms to

    represent an object — standalone, in a group or in association.
  45. 102.
  46. 103.
  47. 104.
  48. 106.

    Each object and collection needs to be represented in broadly

    3 forms— 1. How is it presented on its own address? 2. How is it presented in a collection? 3. How is it presented as an association to other objects?
  49. 115.
  50. 116.
  51. 117.
  52. 119.

    Firstname Lastname DESIGNATION Organisation This is the bio of the

    person. Has 5 years experience in Web, Architechture…
  53. 124.
  54. 127.
  55. 130.
  56. 134.
  57. 135.
  58. 136.
  59. 137.
  60. 138.
  61. 139.
  62. 140.
  63. 141.
  64. 142.
  65. 150.

    JSFoo
 2 days to go M.L.R. Convention Centre, J.P. Nagar

    JavaScript Conference. 10kms from you.
  66. 151.

    JSFoo
 2 days to go M.L.R. Convention Centre, J.P. Nagar

    JavaScript Conference. See you next year.
  67. 153.
  68. 157.
  69. 159.
  70. 160.
  71. 161.
  72. 164.
  73. 165.

    • wtf-am-i-supposed-to-do-wit by kris krüg from Flickr
 https://www.flickr.com/photos/kk/18768224/ • Artificial

    Intelligence by Maximilian Becker from the Noun Project
 https://thenounproject.com/term/artificial-intelligence/81056 • Web Nodes by Oliviu Stoian from the Noun Project
 https://thenounproject.com/term/web-nodes/575017 • Document by Maximilian Becker from the Noun Project
 https://thenounproject.com/term/document/5718
 https://thenounproject.com/term/document/5713 • User by Vivian Ziereisen from the Noun Project
 https://thenounproject.com/term/user/39208 • jigsaw puzzle by Davo Sime from the Noun Project
 https://thenounproject.com/term/jigsaw-puzzle/614233 • Bridge by RomanP from the Noun Project
 https://thenounproject.com/term/bridge/366586 • information by gato-gato-gato from Flickr
 https://www.flickr.com/photos/gato-gato-gato/12851862915/