The Art of Rhetoric: Flexible Content with Drupal

Rob Carr@robertgcarr

30 minutes of me

• Current problems

•What is content

• Responsive design

• Information Architecture

• Flexible content

• Discussion

Too much stuff

•Dropbox: 1bn files/day uploaded

• 1m websites launched/day

•Duplicate information• 2M+ ways to unblock a

sink?

http://mashable.com/2012/06/22/data-created-every-minute/

Death to the Web Page

• Pages != web content:• Boundaries

• Fixed structure

• Dead ends

• Inflexible blobs

• Information silos

• Difficult to recycle

Image: Wikimedia

Many shapes and forms

Browser window != printed page

Mobile != mobile

FT.com figures via themediabriefing.com

Good Content

•Appropriate

•Useful

•User-centered

•Clear & concise

•SupportedErin Kissane The Elements of Content Strategy A Book Apart

Aristotle? Who?

• Rhetoric

• Logic

•Grammar

RhetoricLOGOS

ideas/facts

ETHOScredibility/manner

PATHOSEmotion

Five Canons of Rhetoric

• invention deciding what to say

• arrangement timing or structure

• style graphic/information design

•memory contextual messages

•delivery interaction design

Don’t Lose the Message

Rhetoric. Rhetoric. Rhetoric

Need structure and rules to free ourselves from the page

Content for Robots

• Group similar content

• Look for common chunk types: • Files/media

• Addresses

• Lists

• Product data

• Pull quotes, asides etc...

• Sketch out content types

• Identify relationships

Book

Author

PublisherFormat

Genre

Chunks of Content

• Think structure and markup:

• ♡ Friendly fields

• ☠ Death to WYSIWYG

• Use of taxonomy

• Context: data reuse and transport

Adaptable Content

• COPE: Create Once Publish Anywhere• eg BBC, NPR, Amazon

• Content stores

• Cultural change?

• Use of APIs

Evolution... ?

Desktop browser iPad browseriPhone

browseriPad app WP8 app

Book cover dominates; ‘Buy Now’ prominent

Responsive design• Fluid grids & typography

• Flexible images

• Change of flow

• Client-side CSS3 media queries

Image: http://trentwalton.com/2012/06/19/fluid-type/

Adaptive design

• Different layouts/content for specific breakpoints

• Progressive enhancement

• Call separate markup or scripts

• Can be less effort than a responsive rebuild

• Ultimately doomed

Isn’t This a Drupal Camp?

• Entities, Fields and Relationships

• Adaptive Themes

• Omega, AT etc

• ‘Adaptive’ modules:

• CTools - page templates

• Browscap - browser inspector

• Browscap CTools - Rules/conditions

• Spark distribution

• Layout/Grid builders

• In Place Editing (IPE)

• Mobile theme + device previews

• CTools, Panels, Views, Panelizer, Breakpoints included

As with all things Drupal, could also use blocks with Views and Context... or Adaptivecontent module... or Display Suite... or Theme cunningness... (etc)

TaxonomyBook Format Genre

Need to Enable, then Edit node_view template

Create 2nd Book Variant

Variant 2: Book node type, and Is Mobile

DesktopHeader

Sidebar 1 Sidebar 2Main

Footer

Mobile: Responsive

iPad - Landscape iPhone

Sidebar Body

Footer A

Sidebar

Body

Same DOM

Lego-time• Pane content very flexible

• Render different fields

• But: don’t punish mobile

• Views could also give us related content: • Similar books within genre

• Books by same author

• Customers also purchased...

• Keep pane content appropriate to context...

Adaptive Layout

•Device detection allows us to adapt layouts & content.

• Change visual hierarchy with adaptive selection.

• Responsive design changes float of containers for accessibility.

So?

•Discussed wider problems

•What is content?

•Data modelling

•Responsive vs. Adaptive

•Drupal Spark: Flexible layouts