Rhetoric and Flexible Content with Drupal
-
Upload
robert-carr -
Category
Technology
-
view
1.409 -
download
1
description
Transcript of Rhetoric and Flexible Content with Drupal
![Page 1: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/1.jpg)
The Art of Rhetoric: Flexible Content with Drupal
Rob Carr@robertgcarr
![Page 2: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/2.jpg)
30 minutes of me
• Current problems
•What is content
• Responsive design
• Information Architecture
• Flexible content
• Discussion
![Page 3: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/3.jpg)
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/
![Page 4: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/4.jpg)
Death to the Web Page
• Pages != web content:• Boundaries
• Fixed structure
• Dead ends
• Inflexible blobs
• Information silos
• Difficult to recycle
Image: Wikimedia
![Page 5: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/5.jpg)
Many shapes and forms
Browser window != printed page
![Page 6: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/6.jpg)
Mobile != mobile
FT.com figures via themediabriefing.com
![Page 7: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/7.jpg)
Good Content
•Appropriate
•Useful
•User-centered
•Clear & concise
•SupportedErin Kissane The Elements of Content Strategy A Book Apart
![Page 8: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/8.jpg)
Aristotle? Who?
• Rhetoric
• Logic
•Grammar
![Page 9: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/9.jpg)
RhetoricLOGOS
ideas/facts
ETHOScredibility/manner
PATHOSEmotion
![Page 10: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/10.jpg)
Five Canons of Rhetoric
• invention deciding what to say
• arrangement timing or structure
• style graphic/information design
•memory contextual messages
•delivery interaction design
![Page 11: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/11.jpg)
Don’t Lose the Message
Rhetoric. Rhetoric. Rhetoric
Need structure and rules to free ourselves from the page
![Page 12: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/12.jpg)
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
![Page 13: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/13.jpg)
Chunks of Content
• Think structure and markup:
• ♡ Friendly fields
• ☠ Death to WYSIWYG
• Use of taxonomy
• Context: data reuse and transport
![Page 14: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/14.jpg)
Adaptable Content
• COPE: Create Once Publish Anywhere• eg BBC, NPR, Amazon
• Content stores
• Cultural change?
• Use of APIs
![Page 15: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/15.jpg)
Evolution... ?
Desktop browser iPad browseriPhone
browseriPad app WP8 app
Book cover dominates; ‘Buy Now’ prominent
![Page 16: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/16.jpg)
Responsive design• Fluid grids & typography
• Flexible images
• Change of flow
• Client-side CSS3 media queries
Image: http://trentwalton.com/2012/06/19/fluid-type/
![Page 17: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/17.jpg)
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
![Page 18: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/18.jpg)
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)
![Page 19: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/19.jpg)
![Page 20: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/20.jpg)
TaxonomyBook Format Genre
![Page 21: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/21.jpg)
Need to Enable, then Edit node_view template
![Page 22: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/22.jpg)
![Page 23: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/23.jpg)
![Page 24: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/24.jpg)
![Page 25: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/25.jpg)
![Page 26: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/26.jpg)
![Page 27: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/27.jpg)
![Page 28: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/28.jpg)
![Page 29: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/29.jpg)
![Page 30: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/30.jpg)
Create 2nd Book Variant
Variant 2: Book node type, and Is Mobile
![Page 31: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/31.jpg)
![Page 32: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/32.jpg)
![Page 33: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/33.jpg)
![Page 34: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/34.jpg)
DesktopHeader
Sidebar 1 Sidebar 2Main
Footer
![Page 35: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/35.jpg)
Mobile: Responsive
iPad - Landscape iPhone
Sidebar Body
Footer A
Sidebar
Body
Same DOM
![Page 36: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/36.jpg)
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...
![Page 37: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/37.jpg)
![Page 38: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/38.jpg)
Adaptive Layout
•Device detection allows us to adapt layouts & content.
• Change visual hierarchy with adaptive selection.
• Responsive design changes float of containers for accessibility.
![Page 39: Rhetoric and Flexible Content with Drupal](https://reader034.fdocuments.in/reader034/viewer/2022042714/555a8d9fd8b42a991b8b46d3/html5/thumbnails/39.jpg)
So?
•Discussed wider problems
•What is content?
•Data modelling
•Responsive vs. Adaptive
•Drupal Spark: Flexible layouts