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. Architecting Content Driven Websites

  2. @souvikdg

  3. Miranj

  4. We architect information and design radically simple, future-proof websites.

  5. Web Communication and Publishing Medium

  6. “Content Driven” Informational Websites

  7. Flexible. Scalable. Lasting. Design

  8. Flexible. Scalable. Lasting. Design information grows information stays information changes

  9. None
  10. None
  11. Mess

  12. Who does it affect?

  13. 1. Website Users can’t find what they want

  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.”
  15. 2. Content Managers make it messier without realising

  16. Information Architecture

  17. – The Information Architecture Institute “Information architecture is the practice

    of deciding how to arrange the parts of something to be understandable.”
  18. History of IA Abby Covert 10th Annual Euro IA Summit,

    Brussels http://abbytheia.com/2014/09/27/euroia/
  19. None
  20. None
  21. IA is evolving and is more relevant than ever

  22. None
  23. None
  24. Structure. Organise. Label.

  25. Structured Content Information or content that is organised in a

    predictable way and is usually classified with metadata.
  26. None
  27. Talk. Extensively. And put everything on the table

  28. For example, let’s look at a conference website.

  29. Event, Subject Dates, Times Venue Speakers, Organisers, Attendees Introduction, Need,

    Value What? When? Where? Who? Why?
  30. Event Name Date Venue Speakers Organisers Attendees Topics Talks Schedule

    Sponsors Hotels Policies Blogposts Local Information Tickets
  31. OOUX Object Oriented UX

  32. Identify the Objects (Content Types)

  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?
  34. Event Name Date Venue Speakers Organisers Attendees Topics Talks Schedule

    Sponsors Hotels Policies Blogposts Local Information Tickets
  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]
  36. Name the Objects (Labelling)

  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]
  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”
  39. Define the Objects (Content Modelling)

  40. None
  41. Person Photo Name Organisation Designation
 Bio Twitter LinkedIn SPEAKER Name

    Organisation Designation
 ATTENDEE Name Designation Bio Contact No.
 ORGANISER
  42. Name* Role* [Organiser, Attendee, Speaker] Designation Photo Organisation Bio Twitter

    LinkedIn Contact No. PERSON
  43. Organise the Objects

  44. Identify Relationships Homogenous or Hetrogenous

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

    [{Person}, {Person}] Related Talk → [{Talk}, {Talk}] … TALK
  46. Treat Taxonomies as Objects

  47. None
  48. • Full Talk • Crisp Talk • Flash Talk •

    BoF • Workshop Name Duration Format No. of Speakers
 SESSION TYPE
  49. Review

  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”
  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”
  52. Repeat until… aha!

  53. • Single • Flat • Index • Daisy • Strict

    Hierarchy • Multidimensional Hierarchy • …
  54. Objects, Collections and Relationships. Well defined, and labelled.

  55. IA ≠ Navigation

  56. IA informs Navigation

  57. Navigation is merely a window into the IA, based on

    user needs
  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/
  59. A Robust Mental Model

  60. 8 Principles of IA Dan Brown https://www.asis.org/Bulletin/Aug-10/AugSep10_Brown.pdf

  61. Capturing Content

  62. Content Management System

  63. None
  64. None
  65. None
  66. None
  67. 51% of the Internet is built on WordPress

  68. Pick a CMS that can capture and represent the IA

    as accurately as possible Content Types, Models and Relationships
  69. DRY Don’t Repeat Yourself

  70. COPE Create Once, Publish Everywhere

  71. Data Modelling

  72. Translate Content Models into Data Models

  73. Translate Content Models into Data Models how is the content

    understood and used? how does is content stored?
  74. None
  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}
  76. Style Semantics

  77. Style Semantics

  78. WYSIWYG ☠

  79. Presenting Content

  80. Pages

  81. Pages cloud information

  82. Pages are hard to scale without mess

  83. Pages are turning obsolete

  84. Pages are a broken unit

  85. None
  86. Patterns based on a design system

  87. Pattern Lab + Atomic Design System http://patternlab.io

  88. Discovering Content

  89. Navigation

  90. We’re moving from hierarchy to heterarchy

  91. We’re moving from deep drill-downs to lateral hops

  92. Navigation is undergoing fundamental evolution

  93. None
  94. Home page

  95. Well, that too’s going

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

    Some users are exploring. • Both are happy to discover relevant
 (or related) content.
  97. Facilitating Discovery • Make everything addressable • Aggressively expose relationships

    in current context • Show examples (a teaser) of the interlinked content
  98. Design System

  99. Identifying Design Patterns

  100. What makes something a pattern?

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

    represent an object — standalone, in a group or in association.
  102. Reusable

  103. Recursive

  104. Responsive

  105. A Simple Scalable Paradigm

  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?
  107. Object (on its own address)

  108. Object in an Object

  109. Collection (object-agnostic)

  110. Collection in a Collection

  111. Object in a Collection

  112. Collection in an Object

  113. Give labels to these views

  114. Detail (an object on its own address)

  115. Embed

  116. List

  117. Teaser

  118. Anticipate Empty Attributes

  119. Firstname Lastname DESIGNATION Organisation This is the bio of the

    person. Has 5 years experience in Web, Architechture…
  120. Firstname Lastname DESIGNATION Organisation

  121. Firstname Lastname DESIGNATION

  122. Firstname Lastname DESIGNATION

  123. Graceful Fallback Templates “post” or “page”

  124. None
  125. Simple. Pretty Scalable.

  126. Content Managers and Authors Want Flexibility

  127. None
  128. Authoring Flexibility vs Design Control

  129. How do we balance our need to control?

  130. None
  131. Capture chunks, not blobs the more granular, the better

  132. Expose Content Types capture structured data

  133. Expose Visual Patterns “containerised” styles

  134. None
  135. None
  136. None
  137. None
  138. None
  139. None
  140. None
  141. None
  142. None
  143. IA is “presentation”agnostic

  144. Information can truly be living

  145. JSFoo
 15—16th September, 2016 M.L.R. Convention Centre, J.P. Nagar JavaScript

    Conference in Bangalore
  146. JSFoo
 15—16th September, 2016 Bangalore, India JavaScript Conference

  147. JSFoo
 15—16th September, 2016 India JavaScript Conference

  148. JSFoo
 15—16th September, 2016 M.L.R. Convention Centre, J.P. Nagar JavaScript

    Conference in Namma Bengaluru
  149. JSFoo
 15—16th September, 2016 M.L.R. Convention Centre, J.P. Nagar JavaScript

    Conference. 10kms from you.
  150. JSFoo
 2 days to go M.L.R. Convention Centre, J.P. Nagar

    JavaScript Conference. 10kms from you.
  151. JSFoo
 2 days to go M.L.R. Convention Centre, J.P. Nagar

    JavaScript Conference. See you next year.
  152. Information Architecture

  153. None
  154. Design Implementation

  155. Good IA is robust and extensible

  156. Talking to other sytems, and yours

  157. Findable

  158. Understandable

  159. Living

  160. Powerful

  161. Timeless

  162. Future Friendly

  163. A free mind approach

  164. None
  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/