Outlines the problems in trends in web design, and how a flexible approach to content can maintain the rhetoric. Outlines a sample solution in Drupal Spark

1. The Art of Rhetoric:
Flexible Content with Drupal
Rob Carr
@robertgcarr

2. 30 minutes of me
• Current problems
• What is content
• Responsive design
• Information Architecture
• Flexible content
• Discussion

3. 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/

4. Death to the Web Page
•Pages != web content:
• Boundaries
• Fixed structure
• Dead ends
•Inflexible blobs
•Information silos
•Difficult to recycle
Image:Wikimedia

5. Many shapes and forms
Browser window != printed page

6. Mobile != mobile
FT.com figures via themediabriefing.com

7. Good Content
•Appropriate
•Useful
•User-centered
•Clear & concise
•Supported
Erin Kissane The Elements of Content Strategy A Book Apart

8. Aristotle? Who?
•Rhetoric
•Logic
•Grammar

9. Rhetoric
LOGOS
ideas/facts
ETHOS
credibility/manner
PATHOS
Emotion

10. Five Canons of
Rhetoric
•invention deciding what to say
•arrangement timing or structure
•style graphic/information design
•memory contextual messages
•delivery interaction design

11. Don’t Lose the
Message
Rhetoric. Rhetoric. Rhetoric
Need structure and rules to
free ourselves from the page

12. 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

13. Chunks of Content
•Think structure and markup:
• ♡ Friendly fields
• ☠ Death to WYSIWYG
•Use of taxonomy
•Context: data reuse and transport

14. Adaptable Content
•COPE:Create
Once Publish
Anywhere
• eg BBC,NPR,Amazon
•Content stores
•Cultural change?
•Use ofAPIs

15. Evolution... ?
Desktop browser iPad browser
iPhone
browser
iPad app WP8 app
Book cover dominates;‘Buy Now’ prominent

16. Responsive design
• Fluid grids & typography
• Flexible images
• Change of flow
• Client-side CSS3 media queries
Image: http://trentwalton.com/2012/06/19/fluid-type/

17. 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

18. 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 withViews and
Context... or Adaptivecontent
module... or Display Suite... or
Theme cunningness... (etc)

20. Taxonomy
Book Format Genre

21. Need to Enable, then Edit
node_view template

30. Create 2nd BookVariant
Variant 2: Book node
type, and Is Mobile

34. Desktop
Header
Sidebar 1 Sidebar 2Main
Footer

35. Mobile: Responsive
iPad - Landscape iPhone
Sidebar Body
Footer A
Sidebar
Body
Same
DOM

36. 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...

38. Adaptive Layout
•Device detection allows us to
adapt layouts & content.
•Change visual hierarchy with
adaptive selection.
•Responsive design changes float
of containers for accessibility.

39. So?
•Discussed wider problems
•What is content?
•Data modelling
•Responsive vs.Adaptive
•Drupal Spark: Flexible layouts