Slide 1

Slide 1 text

Architecting Content Driven Websites

Slide 2

Slide 2 text

@souvikdg

Slide 3

Slide 3 text

Miranj

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Web Communication and Publishing Medium

Slide 6

Slide 6 text

“Content Driven” Informational Websites

Slide 7

Slide 7 text

Flexible. Scalable. Lasting. Design

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Mess

Slide 12

Slide 12 text

Who does it affect?

Slide 13

Slide 13 text

1. Website Users can’t find what they want

Slide 14

Slide 14 text

– Ambient Findability by Peter Morville “Findability precedes usability. In the alphabet and on the Web. You can’t use what you can’t find.”

Slide 15

Slide 15 text

2. Content Managers make it messier without realising

Slide 16

Slide 16 text

Information Architecture

Slide 17

Slide 17 text

– The Information Architecture Institute “Information architecture is the practice of deciding how to arrange the parts of something to be understandable.”

Slide 18

Slide 18 text

History of IA Abby Covert 10th Annual Euro IA Summit, Brussels http://abbytheia.com/2014/09/27/euroia/

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

IA is evolving and is more relevant than ever

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Structure. Organise. Label.

Slide 25

Slide 25 text

Structured Content Information or content that is organised in a predictable way and is usually classified with metadata.

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Talk. Extensively. And put everything on the table

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Event, Subject Dates, Times Venue Speakers, Organisers, Attendees Introduction, Need, Value What? When? Where? Who? Why?

Slide 30

Slide 30 text

Event Name Date Venue Speakers Organisers Attendees Topics Talks Schedule Sponsors Hotels Policies Blogposts Local Information Tickets

Slide 31

Slide 31 text

OOUX Object Oriented UX

Slide 32

Slide 32 text

Identify the Objects (Content Types)

Slide 33

Slide 33 text

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?

Slide 34

Slide 34 text

Event Name Date Venue Speakers Organisers Attendees Topics Talks Schedule Sponsors Hotels Policies Blogposts Local Information Tickets

Slide 35

Slide 35 text

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]

Slide 36

Slide 36 text

Name the Objects (Labelling)

Slide 37

Slide 37 text

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]

Slide 38

Slide 38 text

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”

Slide 39

Slide 39 text

Define the Objects (Content Modelling)

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Person Photo Name Organisation Designation
 Bio Twitter LinkedIn SPEAKER Name Organisation Designation
 ATTENDEE Name Designation Bio Contact No.
 ORGANISER

Slide 42

Slide 42 text

Name* Role* [Organiser, Attendee, Speaker] Designation Photo Organisation Bio Twitter LinkedIn Contact No. PERSON

Slide 43

Slide 43 text

Organise the Objects

Slide 44

Slide 44 text

Identify Relationships Homogenous or Hetrogenous

Slide 45

Slide 45 text

Title* Description* Type* [Full, Crisp, Workshop,…] Slides Topic Speaker → [{Person}, {Person}] Related Talk → [{Talk}, {Talk}] … TALK

Slide 46

Slide 46 text

Treat Taxonomies as Objects

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

• Full Talk • Crisp Talk • Flash Talk • BoF • Workshop Name Duration Format No. of Speakers
 SESSION TYPE

Slide 49

Slide 49 text

Review

Slide 50

Slide 50 text

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”

Slide 51

Slide 51 text

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”

Slide 52

Slide 52 text

Repeat until… aha!

Slide 53

Slide 53 text

• Single • Flat • Index • Daisy • Strict Hierarchy • Multidimensional Hierarchy • …

Slide 54

Slide 54 text

Objects, Collections and Relationships. Well defined, and labelled.

Slide 55

Slide 55 text

IA ≠ Navigation

Slide 56

Slide 56 text

IA informs Navigation

Slide 57

Slide 57 text

Navigation is merely a window into the IA, based on user needs

Slide 58

Slide 58 text

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/

Slide 59

Slide 59 text

A Robust Mental Model

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Capturing Content

Slide 62

Slide 62 text

Content Management System

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

51% of the Internet is built on WordPress

Slide 68

Slide 68 text

Pick a CMS that can capture and represent the IA as accurately as possible Content Types, Models and Relationships

Slide 69

Slide 69 text

DRY Don’t Repeat Yourself

Slide 70

Slide 70 text

COPE Create Once, Publish Everywhere

Slide 71

Slide 71 text

Data Modelling

Slide 72

Slide 72 text

Translate Content Models into Data Models

Slide 73

Slide 73 text

Translate Content Models into Data Models how is the content understood and used? how does is content stored?

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

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}

Slide 76

Slide 76 text

Style Semantics

Slide 77

Slide 77 text

Style Semantics

Slide 78

Slide 78 text

WYSIWYG ☠

Slide 79

Slide 79 text

Presenting Content

Slide 80

Slide 80 text

Pages

Slide 81

Slide 81 text

Pages cloud information

Slide 82

Slide 82 text

Pages are hard to scale without mess

Slide 83

Slide 83 text

Pages are turning obsolete

Slide 84

Slide 84 text

Pages are a broken unit

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

Patterns based on a design system

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

Discovering Content

Slide 89

Slide 89 text

Navigation

Slide 90

Slide 90 text

We’re moving from hierarchy to heterarchy

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

Navigation is undergoing fundamental evolution

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

Home page

Slide 95

Slide 95 text

Well, that too’s going

Slide 96

Slide 96 text

Users • Some users know what they’re looking for. • Some users are exploring. • Both are happy to discover relevant
 (or related) content.

Slide 97

Slide 97 text

Facilitating Discovery • Make everything addressable • Aggressively expose relationships in current context • Show examples (a teaser) of the interlinked content

Slide 98

Slide 98 text

Design System

Slide 99

Slide 99 text

Identifying Design Patterns

Slide 100

Slide 100 text

What makes something a pattern?

Slide 101

Slide 101 text

1. Elementary visual language (purely stylistic) 2. Different forms to represent an object — standalone, in a group or in association.

Slide 102

Slide 102 text

Reusable

Slide 103

Slide 103 text

Recursive

Slide 104

Slide 104 text

Responsive

Slide 105

Slide 105 text

A Simple Scalable Paradigm

Slide 106

Slide 106 text

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?

Slide 107

Slide 107 text

Object (on its own address)

Slide 108

Slide 108 text

Object in an Object

Slide 109

Slide 109 text

Collection (object-agnostic)

Slide 110

Slide 110 text

Collection in a Collection

Slide 111

Slide 111 text

Object in a Collection

Slide 112

Slide 112 text

Collection in an Object

Slide 113

Slide 113 text

Give labels to these views

Slide 114

Slide 114 text

Detail (an object on its own address)

Slide 115

Slide 115 text

Embed

Slide 116

Slide 116 text

List

Slide 117

Slide 117 text

Teaser

Slide 118

Slide 118 text

Anticipate Empty Attributes

Slide 119

Slide 119 text

Firstname Lastname DESIGNATION Organisation This is the bio of the person. Has 5 years experience in Web, Architechture…

Slide 120

Slide 120 text

Firstname Lastname DESIGNATION Organisation

Slide 121

Slide 121 text

Firstname Lastname DESIGNATION

Slide 122

Slide 122 text

Firstname Lastname DESIGNATION

Slide 123

Slide 123 text

Graceful Fallback Templates “post” or “page”

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

Simple. Pretty Scalable.

Slide 126

Slide 126 text

Content Managers and Authors Want Flexibility

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

Authoring Flexibility vs Design Control

Slide 129

Slide 129 text

How do we balance our need to control?

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

Capture chunks, not blobs the more granular, the better

Slide 132

Slide 132 text

Expose Content Types capture structured data

Slide 133

Slide 133 text

Expose Visual Patterns “containerised” styles

Slide 134

Slide 134 text

No content

Slide 135

Slide 135 text

No content

Slide 136

Slide 136 text

No content

Slide 137

Slide 137 text

No content

Slide 138

Slide 138 text

No content

Slide 139

Slide 139 text

No content

Slide 140

Slide 140 text

No content

Slide 141

Slide 141 text

No content

Slide 142

Slide 142 text

No content

Slide 143

Slide 143 text

IA is “presentation”agnostic

Slide 144

Slide 144 text

Information can truly be living

Slide 145

Slide 145 text

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

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

JSFoo
 15—16th September, 2016 India JavaScript Conference

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

JSFoo
 15—16th September, 2016 M.L.R. Convention Centre, J.P. Nagar JavaScript Conference. 10kms from you.

Slide 150

Slide 150 text

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

Slide 151

Slide 151 text

JSFoo
 2 days to go M.L.R. Convention Centre, J.P. Nagar JavaScript Conference. See you next year.

Slide 152

Slide 152 text

Information Architecture

Slide 153

Slide 153 text

No content

Slide 154

Slide 154 text

Design Implementation

Slide 155

Slide 155 text

Good IA is robust and extensible

Slide 156

Slide 156 text

Talking to other sytems, and yours

Slide 157

Slide 157 text

Findable

Slide 158

Slide 158 text

Understandable

Slide 159

Slide 159 text

Living

Slide 160

Slide 160 text

Powerful

Slide 161

Slide 161 text

Timeless

Slide 162

Slide 162 text

Future Friendly

Slide 163

Slide 163 text

A free mind approach

Slide 164

Slide 164 text

No content

Slide 165

Slide 165 text

• 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/