MuraCon 2016 Presentation

1. CONTENT FIRST
A workflow for building Mura sites with content in mind

2. Content First: A workflow for building Mura sites with content in mind
t
ABOUT ME
Hi, I’m David. I own a small consulting & development
company in Bend, Oregon.
Here are some of my typical roles:
FRONTEND DEVELOPER
DESIGNER
PROJECT MANAGER
SERVER ADMIN
BACKEND DEVELOPER
DIGITAL STRATEGIST
TEAM LEAD
BUSINESS OWNER
DEVENIO

3. Content First: A workflow for building Mura sites with content in mind
WHAT WE’LL COVER
WHAT IS CONTENT?
WHAT ARE WE DOING?
HOW DO WE PROCESS?
HOW DO WE IMPLEMENT?
Q & A

4. Content First: A workflow for building Mura sites with content in mind
WHAT IS CONTENT?
Common / Generic Types
Text Image Document Video Audio
Core Mura Types
File LinkFolderPage Gallery Calendar
Other Types
Person Org Song Group Recipe
Other Mura Types
Comment Tag FormCategory Component

5. Content First: A workflow for building Mura sites with content in mind
What Else?
WHAT IS CONTENT?
SecurityMetric
Business Model
Accessibility
Code
Social Currency
StakeholderStructureStyle
ConfigurationDevice
Hardware Language

6. Content First: A workflow for building Mura sites with content in mind
WHAT IS CONTENT?
Content represents facts

7. Content First: A workflow for building Mura sites with content in mind
WHAT IS CONTENT?
Anything that describes "a thing" that, when
applied with the right tools, also has context.
— yours truly

8. Content First: A workflow for building Mura sites with content in mind
Information Architecture (IA) is the structural design of shared information
environments; the art and science of organizing and labelling websites,
intranets, online communities and software to support usability and
findability; and an emerging community of practice focused on bringing
principles of design and architecture to the digital landscape
— Wikipedia
WHAT IS CONTENT?

9. Content First: A workflow for building Mura sites with content in mind
Or simply...
“Information Architecture is about making
meaning out of piles of facts.”
— Christina Wodtke in Towards a New Information Architecture
WHAT IS CONTENT?

10. Content First: A workflow for building Mura sites with content in mind
WHAT ARE WE DOING?
Before beginning, we need scope. Without knowing the answers to these
questions, context will be hard to come by, and “scope creep” will be inevitable.
WHAT IS THE BUSINESS / PRODUCT TRYING TO ACCOMPLISH?
WHO’S INVOLVED? WHO ARE THE STAKEHOLDERS?
IF EXISTING, WHAT METRICS ARE AVAILABLE? IF NOT, IS THERE MARKET RESEARCH?
WHO IS THE END USER, AND WHAT DO THEY WANT?

11. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
What tools or methods help us process all this content?

12. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
Business Objectives
Gives stakeholders context of
what’s important.

13. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
User PERSONA
Putting a face & name to a user puts
context into who you’re doing it for.

14. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
Stakeholders
ACME
(Client)
Stacy
(writer)
Derek
(VP)
Their client
Chris
(VP - Accounts)
Joe
(CEO)
Trisha
(CFO)
Our client
Lisa
(PM)
Phil
(Designer)
Steve
(Developer)
Lynn
(Developer)
our team
Knowing who’s
involved will save you
from wondering
who’s doing what.

15. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
Content Object Map
If you forget everything else, don’t forget
this. It’s gives everything else context.
Structure
Time
Period
Style
PersonOrganization
Neighbourhood
Character
Defining
Elements
Someone planned itSome company built it
Only matter if
structure exists
Can exist without
a structure
structure independentstructure independent
Everything on the site revolves
around core content types. They
typically have a central one,
which most other types depend
on.

16. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
Content Object Definition
Every content type needs
definition, attributes, and context
(relationship) to other types.
Definition
Structure is a generic content object (page type) that
holds information specific to a Structure. It is the end-
all, be-all reason for the site's existence, but couldn't
exist without someone creating it, whether that was by
a company and/or individual.
Structure Object Example
Attributes
Organization(s)*, Person(s)*, Time Period(s)*,
Neighborhood(s)*, Style(s)*, CDE(s)*, Year Built,
Architect(Person(s)*), Address (separated out into fields),
Historical Info, Additions, Architecture, Relocation History,
Type (residential, commercial, etc), Longitude, Latitude,
* denotes other objects - e.g relationships

17. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
Content Object Map 2
Person
Campaign
Organization
person
may belong to
organization(s)
Event
Group
Collection
Promo
Recipe
Fact
Quiz
Base
Quote
Question
promo belongs to
campaigns(s)
collections may
associate
campaign(s)
group
may comprise of
organization(s)
group
may comprise of
people
quote
belongs to
person
recipe
belongs to
person(s)
recipe
may belong
to organiztion(s)
collection may
belong to
promo(s)
Document
(could refer to
Report, Study,
Minutes, etc.)
Tip
The more types you
have, the bigger the
map gets.

18. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
Content Object Map 2
Base object will
extend to all other
objects.
In this example, you can see just
how far we can go to give any
object even more context.

19. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
Content Audit
Content audit will give
you context to what’s
important.

20. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
Sitemap
Site maps give
context to
your site’s
architecture.

21. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
Story boards
Give context to where
you are now, and where
you’re headed.

22. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
aka User Story
Give you context of
user flow.

23. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
WOrkflows
Give you context of
user flow in full scope.

24. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
User Interface Inventory
Print a few pages from your site. Cut up the
elements & components you see. See how many
duplicate or similar ones you can find, and group
them.
Gives you context to your
display objects.

25. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
Display Patterns
Gives context to the presentation of
content (objects) patterns.
A Display pattern describes a specific rendering and
can be applied to multiple types of Content patterns.
— Daniel Mall in Content & Display Patterns

26. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
Display Patterns
There might be 3 display patterns
for 10 content patterns.
This video shows that you can achieve many options
on how to display content by finding the similarities
amongst the content patterns.
— Video by Daniel Mall in Content & Display Patterns

27. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
Display object map
Gives context to the content &
display patterns within components.
Whether by plugin or component, if you have a
complex object such as a Player, it might factor in
several display and content patterns.
* display pattern * content pattern

28. Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?
Many others to visualize your content
DIRECTORY MAP
SCHEMA MAP
UML MAP
TECHNOLOGY MAP
What paradigm is used for folder structure on disk?
If we have an app with a database, visualize it.
If we have an app, visualize it.
What technology is being used and where?
NAMING CONVENTIONS
STYLE GUIDE
WIREFRAMES
MOCKUPS
BEM, SMACSS, Atomic Design, ITCSS.
Logo, color palette, font stacks, and other specifics
What’s the template look like one patterns are in place?
What’s the final page look like once real content is in?

29. Content First: A workflow for building Mura sites with content in mind
HOW DO WE IMPLEMENT?
Config Xml Examples
Now that we know our content types, we can tell Mura to be more
explicit. Not only will this reinforce our content object model, but it will
also reduce human error since we can impose allowable subtypes.

30. Content First: A workflow for building Mura sites with content in mind
HOW DO WE IMPLEMENT?
Config Xml Examples
Define content object attributes, and any dependencies to other objects.
* old way to get data for our select, now that we have related sets!

31. Content First: A workflow for building Mura sites with content in mind
HOW DO WE IMPLEMENT?
Config Xml Examples
Parent / Child Content Object Dependence with Contextual Relationships

32. Content First: A workflow for building Mura sites with content in mind
Code Examples
Code without context or
meaning.
This is highly coupled to content type
specific styles, when it can be easily
consolidated with a display pattern.
HOW DO WE IMPLEMENT?

33. Content First: A workflow for building Mura sites with content in mind
Code Examples
Contextual code.
Now this code has meaning, both
semantically and through micro
formatting. And its display pattern is
decoupled from its content (object)
pattern.
HOW DO WE IMPLEMENT?

34. Content First: A workflow for building Mura sites with content in mind
Code Examples
Contextual CSS.
Why can’t we use the same content
objects in our code? If we need to style
something specifically to that content
pattern, we can hook it quite easily.
HOW DO WE IMPLEMENT?

35. Content First: A workflow for building Mura sites with content in mind
Q & A
TL; DL;
Content dictates form. Form dictates design.
Without understanding the content,
you’re just guessing.

36. Content First: A workflow for building Mura sites with content in mind
t
THANK YOU!
Stay in touch!
DEVENIO
@davidpanzarella
github.com/davidpanzarella
facebook.com/davidjpanzarella
david@deven.io