CONTENT FIRSTA workflow for building Mura sites with content in mind
Content First: A workflow for building Mura sites with content in mind
t
ABOUT MEHi, 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
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
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
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
Content First: A workflow for building Mura sites with content in mind
WHAT IS CONTENT?
Content represents facts
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
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?
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?
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?
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?
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.
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.
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.
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.
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.
DefinitionStructure 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
AttributesOrganization(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
Content First: A workflow for building Mura sites with content in mind
HOW DO WE PROCESS?Content Object Map 2
Person
CampaignOrganization
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.
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.
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.
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.
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.
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.
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.
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.
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
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
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
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?
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.
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!
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
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?
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?
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?
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.
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
Top Related