Content First: A workflow for building Mura sites with content in mind

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


WHAT WE’LL COVER

WHAT IS CONTENT?

WHAT ARE WE DOING?

HOW DO WE PROCESS?

HOW DO WE IMPLEMENT?

Q & A


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


What Else?

WHAT IS CONTENT?

SecurityMetric

Business Model

Accessibility

Code

Social Currency

StakeholderStructureStyle

ConfigurationDevice

Hardware Language


WHAT IS CONTENT?

Content represents facts


WHAT IS CONTENT?

Anything that describes "a thing" that, when applied with the right tools, also has context.

— yours truly


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?


Or simply... “Information Architecture is about making

meaning out of piles of facts.”

— Christina Wodtke in Towards a New Information Architecture

WHAT IS CONTENT?


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?


HOW DO WE PROCESS?

What tools or methods help us process all this content?


HOW DO WE PROCESS?Business Objectives

Gives stakeholders context of what’s important.


HOW DO WE PROCESS?User PERSONA

Putting a face & name to a user puts context into who you’re doing it for.


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.


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.


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


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.


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.


HOW DO WE PROCESS?Content Audit

Content audit will give you context to what’s important.


HOW DO WE PROCESS?Sitemap

Site maps give context to your site’s architecture.


HOW DO WE PROCESS?Story boards

Give context to where you are now, and where you’re headed.


HOW DO WE PROCESS?aka User Story

Give you context of user flow.


HOW DO WE PROCESS?WOrkflows

Give you context of user flow in full scope.


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.


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


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


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


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?


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.



Define content object attributes, and any dependencies to other objects.* old way to get data for our select, now that we have related sets!



Parent / Child Content Object Dependence with Contextual Relationships


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.



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.



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.



Q & A

TL; DL;

Content dictates form. Form dictates design. Without understanding the content,

you’re just guessing.


t

THANK YOU!

Stay in touch!

DEVENIO

@davidpanzarella

github.com/davidpanzarella

facebook.com/davidjpanzarella

[email protected]

mailto:[email protected]?subject=

Content First: A workflow for building Mura sites with content in mind

Technology

Transcript of Content First: A workflow for building Mura sites with content in mind