enhancing design with adaptive content
DESCRIPTION
Design is at the core of every project Aten takes on. We believe good design starts with a good content strategy. Join Aten’s Joel Steidl, Lead Architect, and Christine Coughlan, Information Architect, as they share practical tips for breaking down and organizing content for projects of any size. Starting with a well-thoughtout architecture leads to flexibility in design. Creating custom content types assembled from distinct fields allows content to adapt appropriately to different contexts. Joel and Chris will explain how breaking content into smaller pieces can enhance your design and create content that adapts to different views and devices. They will share case studies to reinforce the theory and practice behind adaptive content and best practices for implementing in Drupal and other platforms.TRANSCRIPT
![Page 1: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/1.jpg)
Adaptive Content
Christine CoughlanInformation Architect
@hoodedcloak74
Enhancing Design with Adaptive ContentJoel Steidl
Lead Architect
@joelsteidl
![Page 2: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/2.jpg)
Adaptive Content● Broken down & structured● Displayed in multiple places● Device agnostic● Distributed across multiple platforms
![Page 3: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/3.jpg)
Card Catalog
Image from http://en.wikipedia.org/wiki/Library_catalog
![Page 4: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/4.jpg)
Book Example
The Stranger by Albert Camus
Translated from the French by Matthew Ward
![Page 5: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/5.jpg)
MARC Record
MARC Record
![Page 6: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/6.jpg)
K-State Libraries OPAC Search Interface
![Page 7: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/7.jpg)
K-State Libraries OPAC Record
![Page 8: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/8.jpg)
Change the Way We Think● No longer just a webpage● More than text and images● Content as individual elements on a page
![Page 9: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/9.jpg)
Content as Legos
![Page 10: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/10.jpg)
Why is it Important● Communicating with your users● Variety of devices and contexts● Always a pleasant experience
![Page 11: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/11.jpg)
Unadaptive Content ● WYSIWYG encourages writing in blobs● Fields Included:
○ Title○ Body with WYSIWYG editor
![Page 12: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/12.jpg)
Content Editors
Content Editors
![Page 13: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/13.jpg)
User’s Perspective
![Page 14: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/14.jpg)
WYSIWYG Events
![Page 15: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/15.jpg)
Adaptive Events
![Page 16: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/16.jpg)
Why Adaptive? 1. Design Control2. Consistency3. Maintenance & Creation of Content4. Contextual Search Interfaces5. Content Reuse
![Page 17: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/17.jpg)
Stanford Bio-X Event
Design Control
![Page 18: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/18.jpg)
Stanford Bio-X Event
Design Control
![Page 19: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/19.jpg)
Consistency - Bad Example
![Page 20: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/20.jpg)
Consistency
![Page 21: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/21.jpg)
Consistency
![Page 22: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/22.jpg)
Maintenance & Creation of Content
![Page 23: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/23.jpg)
Maintenance & Creation of Content
![Page 24: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/24.jpg)
Contextual Search Interfaces
![Page 25: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/25.jpg)
Contextual Search Interfaces
![Page 26: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/26.jpg)
Content Reuse
![Page 27: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/27.jpg)
Content Reuse
![Page 28: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/28.jpg)
Content Reuse
![Page 29: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/29.jpg)
Ready to Go Adaptive?
![Page 30: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/30.jpg)
From WYSIWYG to Adaptive
![Page 31: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/31.jpg)
Title
Image
Date/Time
Location
Description
Presenter
Event Type
Break Your Content Into Fields
![Page 32: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/32.jpg)
How-to Go Adaptive
Think about: ● What content needs to be displayed ● How the content will be entered into the
system● Where the content needs to be displayed
![Page 33: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/33.jpg)
Planning Process● Content Maps● Wireframes● Technical Architecture● View Modes● Design
![Page 34: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/34.jpg)
Content Maps
![Page 35: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/35.jpg)
Wireframes
![Page 36: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/36.jpg)
Technical Architecture Document
![Page 37: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/37.jpg)
● Date○ /date
● Video Embed○ /video_embed_field
● Postal Address○ /addressfield
● Office Hours○ /office_hours
Drupal Fields● Entity Reference
○ /entityreference● Link
○ /link● Email
○ /email● Field Collection
○ /field_collection
![Page 38: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/38.jpg)
Defining View Modes
Defining View Modes
![Page 39: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/39.jpg)
Design
![Page 40: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/40.jpg)
Implementation● Content Types● View Modes● Views● Panels● Node templates & preprocess functions● CSS
![Page 41: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/41.jpg)
Content Types
![Page 42: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/42.jpg)
View Modes
$display_view_modes = array( 'node' => array( 'expanded' => 'Expanded', 'featured' => 'Featured', 'fellow_teaser' => 'Fellow Teaser', 'marquee' => 'Marquee', 'overview' => 'Overview', 'simple' => 'Simple', ), 'user' => array( 'teaser' => 'Teaser', ), );
![Page 43: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/43.jpg)
Views
![Page 44: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/44.jpg)
Panels
![Page 45: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/45.jpg)
Node Templates & Preprocess Functions
<article class="<?php print $classes; ?> article--full"> <header class="article-header l--sidebar-after clearfix"> <div class="l-primary"> <?php if (isset($content['field_article_primary_channel'])): ?> <div class="article-channel"> <?php print render($content['field_article_primary_channel']); ?> </div> <?php endif ?> <h1 class="article-title"><?php print $title; ?></h1> </div> <?php if (isset($article_associated_channels)): ?> <div class="l-secondary">
![Page 46: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/46.jpg)
CSS
// Full view mode
.article--full { .article-meta { margin-bottom: rhythm(3); padding-top: rhythm(1); border-top: 1px solid $clr-border; }
.article-image { margin-bottom: rhythm(6);
![Page 47: Enhancing Design with Adaptive Content](https://reader033.vdocuments.net/reader033/viewer/2022060111/55636144d8b42a5c598b4d82/html5/thumbnails/47.jpg)
Questions?