O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Rhetoric and Flexible Content with Drupal

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

  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

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