Getting Flexible: Working Content into Responsive Design—MIMA Summit

Publicité

Publicité

Publicité

Publicité

Publicité

Publicité

Publicité

Publicité

Publicité

Publicité

Publicité

Publicité

GETTING
FLEXIBLE
working content ...

It started last summer.

2012 MIMA Summit
@sara_ann_marie

I was hooked.

2012 MIMA Summit
@sara_ann_marie

It caught on fast.

2012 MIMA Summit
@sara_ann_marie

Now it’s changing
workﬂows.

2012 MIMA Summit
@sara_ann_marie

2012 MIMA Summit
@sara_ann_marie

Design in the
browser. PROTOTYPE!
Make it modular.
What about wireframes?
MOBILE FIRST!Style tiles,
...

What does RWD mean
for content?

2012 MIMA Summit
@sara_ann_marie

‘‘
In order to embrace designing native
layouts for the web—whatever the device
—we need to shed the notion that we
create...

This is manageable when
things are small.

www.ﬂickr.com/photos/subharnab/5548506834

Event Event
basics basics

Theme Theme
Overview
Overview

Keynote
Keynote

S...

Big brands are
getting there.

But you can’t reach
scale overnight.

‘‘
The Microsoft.com team built tools,
guidelines, and processes to help localize
everything from responsive images to
res...

Yet, we know
scale can be done.

So how’d Boston Globe
do it?

2012 MIMA Summit
@sara_ann_marie

They had editors. Writers.
Content people.

2012 MIMA Summit
@sara_ann_ma...

Those people knew a
few things:
✦ What kinds of content they publish
✦ How often
✦ What’s most important, when
✦ W...

You’re probably not the
Boston Globe.

2012 MIMA Summit
@sara_ann_marie

How can you build a
content-focused workﬂow?

2012 MIMA Summit
@sara_ann_marie

First you
need a content
strategy.
2012 MIMA Summit
@sara_ann_marie

Content strategy
helps us determine what we should publish,
for whom, where, why, when, and how we’ll
actually get it done...

It’s about knowing what
you’re trying to say.
www.ﬂickr.com/photos/theparadigmshifter/

And what users actually want.

http://xkcd.com/773/

It’s a plan to keep your
message intact on any screen.

It requires taking stock.

The content audit
✦ What do we have?
✦ Is it any good?
✦ What’s its form and shape?
✦ H...

It requires taking stock.

The content audit
✦ What do we have?
✦ Is it any good?
✦ What’s its form and shape?
✦ H...

But it’s not just what you have.
It’s how it’s stored.

2012 MIMA Summit
...

The CMS often looks like this.

2012 MIMA Summit
@sara_ann_marie

The CMS often looks like this.

CONTENT
GOES HERE.
2012 MIMA Summit
@sar...

Because we were planning
on this.

Because we were planning
on this.

CONTENT
GOES
HERE.

Now we’ve ended up with this.

Now we’ve ended up with this.

CONTENT
GOES
HERE.

Big blobs don’t do much for
responsive design.

2012 MIMA Summit
@sara_ann_...

It’s time we get a bit
more modular.

2012 MIMA Summit
@sara_ann_ma...

The content audit, revisited
✦ What type of content is this?
✦ What’s the inherent shape of that sort of content?
...

This will help you ﬁnd
patterns.

...

Patterns help create a
content system.

2012 MIMA Summit
@sara_ann_...

Why do we
need a content
system?
2012 MIMA Summit
@sara_ann_marie

A system helps you design
responsively—at scale.

2012 MIMA Summit
@sara_ann_...

It’s not just “pages.”

2012 MIMA Summit
...

!=
2012 MIMA Summit
@sara_ann_marie

What we talk about when
we talk about content.

2012 MIMA Summit
@sara_ann_ma...

Event Listings
Shows
Blog Posts
Articles
Proﬁles
Bios
Help Modules
Press Releases
Directories
Recipes
Shows
Product Listin...

How content should respond
depends on what it’s intended to do.

2012 MIMA Summit
...

Give your content the right
shape for its purpose.
By Eva-Lotta Lamm

Content purpose
Content type
Content structure

2012 MIMA Summit
@sara_ann_marie

W e want
pageviews

We publish
recipes

Tha t have Title

these parts Attribution
Pub Date
Rating
Yield
...

So users
keep
exploring

How do we determine
content’s structure?

2012 MIMA Summit
@sara_ann_ma...

✦ PURPOSE
Does each element contribute toward a goal? How?
✦ MESSAGE
How does each element communicate meaning...

Less like this.

2012 MIMA Summit
@sara_ann_marie

Less like this.

2012 MIMA Summit
@sara_ann_marie

And a little more like this.

2012 MIMA Summit
@sara_ann_marie

And a little more like this.

2012 MIMA Summit
@sara_ann_marie

Structure lets
us choose

By Eva-Lotta Lamm

We can’t manually manage
how each bit of content looks.

2012 MIMA Summit
@s...

But when we have structure,
we can make rules.

2012 MIMA Summit
@sara_ann_ma...

Q
2012 MIMA Summit
...

Content Stacking vs. Interdigitation

From Trent Walton, “Content Choreography”

...

AD

RECIPE NAME
...

Finally!

asn’t
hy w tent
W
that con ere?
back up h

When we have rules,
we make systems.

2012 MIMA Summit
@sara_ann_marie

Systems are scalable,
instead of manual.

2012 MIMA Summit
@sara_ann_...

Systems work
for robots
www.ﬂickr.com/photos/johngreenaway/335635847...

And meaning
works for us
www.ﬂickr.com/photos/mujitra/4868415523

Close content analysis
Content patterns and systems
Better, more scalable responsive design

...

Responsiveness
can’t start with
layout.
2012 MIMA Summit
@sara_an...

Partager Slideshare

LinkedIn
Facebook
Twitter

Intégrer

Taille (px)

Afficher les Slideshows associés à la fin

Code abrégé pour WordPress

Lien

Partager
E-mail

Content that Travels: Euro IA 2012 by Sara Wachter-Boet... 15941 views
Nci Facebook Medicine 2.0 Lg Final by lgrama 719 views
Changing Content, Changing Culture by Sara Wachter-Boet... 22555 views
What you don't know will hurt you: ... by Sara Wachter-Boet... 14888 views
Flexible Content Requires Future-Re... by Sara Wachter-Boet... 23756 views
All Together Now: Content & Collabo... by Sara Wachter-Boet... 29937 views

Afficher sur Slideshare

1 sur 83 Publicité

Afficher sur Slideshare

1 sur 83 Publicité