Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
The Art of Rhetoric:Flexible Content with DrupalRob Carr@robertgcarr
30 minutes of me• Current problems• What is content• Responsive design• Information Architecture• Flexible content• Discus...
Too much stuff•Dropbox:1bn files/day uploaded•1m websiteslaunched/day•Duplicateinformation• 2M+ ways to unblock asink?http...
Death to the Web Page•Pages != web content:• Boundaries• Fixed structure• Dead ends•Inflexible blobs•Information silos•Dif...
Many shapes and formsBrowser window != printed page
Mobile != mobileFT.com figures via themediabriefing.com
Good Content•Appropriate•Useful•User-centered•Clear & concise•SupportedErin Kissane The Elements of Content Strategy A Boo...
Aristotle? Who?•Rhetoric•Logic•Grammar
RhetoricLOGOSideas/factsETHOScredibility/mannerPATHOSEmotion
Five Canons ofRhetoric•invention deciding what to say•arrangement timing or structure•style graphic/information design•mem...
Don’t Lose theMessageRhetoric. Rhetoric. RhetoricNeed structure and rules tofree ourselves from the page
Content for Robots• Group similar content• Look for common chunktypes:• Files/media• Addresses• Lists• Product data• Pull ...
Chunks of Content•Think structure and markup:• ♡ Friendly fields• ☠ Death to WYSIWYG•Use of taxonomy•Context: data reuse an...
Adaptable Content•COPE:CreateOnce PublishAnywhere• eg BBC,NPR,Amazon•Content stores•Cultural change?•Use ofAPIs
Evolution... ?Desktop browser iPad browseriPhonebrowseriPad app WP8 appBook cover dominates;‘Buy Now’ prominent
Responsive design• Fluid grids & typography• Flexible images• Change of flow• Client-side CSS3 media queriesImage: http://...
Adaptive design• Different layouts/content for specificbreakpoints• Progressive enhancement• Call separate markup or script...
Isn’t This a DrupalCamp?• Entities, Fields and Relationships• Adaptive Themes• Omega,AT etc• ‘Adaptive’ modules:• CTools -...
TaxonomyBook Format Genre
Need to Enable, then Editnode_view template
Create 2nd BookVariantVariant 2: Book nodetype, and Is Mobile
DesktopHeaderSidebar 1 Sidebar 2MainFooter
Mobile: ResponsiveiPad - Landscape iPhoneSidebar BodyFooter ASidebarBodySameDOM
Lego-time• Pane content very flexible• Render different fields• But:don’t punish mobile• Views could also give usrelated c...
Adaptive Layout•Device detection allows us toadapt layouts & content.•Change visual hierarchy withadaptive selection.•Resp...
So?•Discussed wider problems•What is content?•Data modelling•Responsive vs.Adaptive•Drupal Spark: Flexible layouts
Rhetoric and Flexible Content with Drupal
Rhetoric and Flexible Content with Drupal
Rhetoric and Flexible Content with Drupal
Rhetoric and Flexible Content with Drupal
Rhetoric and Flexible Content with Drupal
Rhetoric and Flexible Content with Drupal
Rhetoric and Flexible Content with Drupal
Rhetoric and Flexible Content with Drupal
Rhetoric and Flexible Content with Drupal
Rhetoric and Flexible Content with Drupal
Rhetoric and Flexible Content with Drupal
Rhetoric and Flexible Content with Drupal
Rhetoric and Flexible Content with Drupal
Nächste SlideShare
Wird geladen in …5
×

Rhetoric and Flexible Content with Drupal

1.977 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Hi there! Get Your Professional Job-Winning Resume Here - Check our website! http://bit.ly/resumpro
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Gehören Sie zu den Ersten, denen das gefällt!

Rhetoric and Flexible Content with Drupal

  1. 1. The Art of Rhetoric:Flexible Content with DrupalRob Carr@robertgcarr
  2. 2. 30 minutes of me• Current problems• What is content• Responsive design• Information Architecture• Flexible content• Discussion
  3. 3. Too much stuff•Dropbox:1bn files/day uploaded•1m websiteslaunched/day•Duplicateinformation• 2M+ ways to unblock asink?http://mashable.com/2012/06/22/data-created-every-minute/
  4. 4. Death to the Web Page•Pages != web content:• Boundaries• Fixed structure• Dead ends•Inflexible blobs•Information silos•Difficult to recycleImage:Wikimedia
  5. 5. Many shapes and formsBrowser window != printed page
  6. 6. Mobile != mobileFT.com figures via themediabriefing.com
  7. 7. Good Content•Appropriate•Useful•User-centered•Clear & concise•SupportedErin Kissane The Elements of Content Strategy A Book Apart
  8. 8. Aristotle? Who?•Rhetoric•Logic•Grammar
  9. 9. RhetoricLOGOSideas/factsETHOScredibility/mannerPATHOSEmotion
  10. 10. Five Canons ofRhetoric•invention deciding what to say•arrangement timing or structure•style graphic/information design•memory contextual messages•delivery interaction design
  11. 11. Don’t Lose theMessageRhetoric. Rhetoric. RhetoricNeed structure and rules tofree ourselves from the page
  12. 12. Content for Robots• Group similar content• Look for common chunktypes:• Files/media• Addresses• Lists• Product data• Pull quotes,asides etc...• Sketch out content types• Identify relationshipsBookAuthorPublisherFormatGenre
  13. 13. Chunks of Content•Think structure and markup:• ♡ Friendly fields• ☠ Death to WYSIWYG•Use of taxonomy•Context: data reuse and transport
  14. 14. Adaptable Content•COPE:CreateOnce PublishAnywhere• eg BBC,NPR,Amazon•Content stores•Cultural change?•Use ofAPIs
  15. 15. Evolution... ?Desktop browser iPad browseriPhonebrowseriPad app WP8 appBook cover dominates;‘Buy Now’ prominent
  16. 16. Responsive design• Fluid grids & typography• Flexible images• Change of flow• Client-side CSS3 media queriesImage: http://trentwalton.com/2012/06/19/fluid-type/
  17. 17. Adaptive design• Different layouts/content for specificbreakpoints• Progressive enhancement• Call separate markup or scripts• Can be less effort than a responsiverebuild• Ultimately doomed
  18. 18. Isn’t This a DrupalCamp?• 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 includedAs with all things Drupal, couldalso use blocks withViews andContext... or Adaptivecontentmodule... or Display Suite... orTheme cunningness... (etc)
  19. 19. TaxonomyBook Format Genre
  20. 20. Need to Enable, then Editnode_view template
  21. 21. Create 2nd BookVariantVariant 2: Book nodetype, and Is Mobile
  22. 22. DesktopHeaderSidebar 1 Sidebar 2MainFooter
  23. 23. Mobile: ResponsiveiPad - Landscape iPhoneSidebar BodyFooter ASidebarBodySameDOM
  24. 24. Lego-time• Pane content very flexible• Render different fields• But:don’t punish mobile• Views could also give usrelated content:• Similar books within genre• Books by same author• Customers also purchased...• Keep pane contentappropriate to context...
  25. 25. Adaptive Layout•Device detection allows us toadapt layouts & content.•Change visual hierarchy withadaptive selection.•Responsive design changes floatof containers for accessibility.
  26. 26. So?•Discussed wider problems•What is content?•Data modelling•Responsive vs.Adaptive•Drupal Spark: Flexible layouts

×