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

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
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/
21. IA is evolving and is more relevant than ever
24. Structure. Organise. Label.
25. Structured Content Information or content that is organised in a predictable way and is usually classified with metadata.
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)
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
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
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?
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
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
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”
125. Simple. Pretty Scalable.
126. Content Managers and Authors Want Flexibility
128. Authoring Flexibility vs Design Control
129. How do we balance our need to control?
131. Capture chunks, not blobs the more granular, the better
132. Expose Content Types capture structured data
133. Expose Visual Patterns “containerised” styles
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
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
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/