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.

1. Enhancing Design
with Adaptive Adaptive
Content
Content
Joel Steidl
Lead Architect
Christine Coughlan
Information Architect
@hoodedcloak74
@joelsteidl

2. Adaptive Content
● Broken down & structured
● Displayed in multiple places
● Device agnostic
● Distributed across multiple platforms

3. Card Catalog
Image from http://en.wikipedia.org/wiki/Library_catalog

4. The Stranger
by Albert Camus
Translated from the French
by Matthew Ward
Book Example

5. MARC Record
MARC Record

6. K-State Libraries OPAC Search Interface

7. K-State Libraries OPAC Record

8. Change the Way We Think
● No longer just a webpage
● More than text and images
● Content as individual elements on a page

9. Content as Legos

10. Why is it Important
● Communicating with your users
● Variety of devices and contexts
● Always a pleasant experience

11. Unadaptive Content
● WYSIWYG encourages writing in blobs
● Fields Included:
○ Title
○ Body with WYSIWYG editor

12. Content Editors
Content Editors

13. User’s Perspective

14. WYSIWYG Events

15. Adaptive Events

16. Why Adaptive?
1. Design Control
2. Consistency
3. Maintenance & Creation of Content
4. Contextual Search Interfaces
5. Content Reuse

17. Stanford Bio-X Event
Design Control

18. Stanford Bio-X Event
Design Control

19. Consistency - Bad Example

20. Consistency

21. Consistency

22. Maintenance & Creation of Content

23. Maintenance & Creation of Content

24. Contextual Search Interfaces

25. Contextual Search Interfaces

26. Content Reuse

27. Content Reuse

28. Content Reuse

29. Ready to Go
Adaptive?

30. From WYSIWYG to Adaptive

31. Title
Date/Time
Location
Image
Description
Event
Type
Presenter
Break Your Content Into Fields

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

33. Planning Process
● Content Maps
● Wireframes
● Technical Architecture
● View Modes
● Design

34. Content Maps

35. Wireframes

36. Technical Architecture Document

37. Drupal Fields
● Date
○ /date
● Video Embed
○ /video_embed_field
● Postal Address
○ /addressfield
● Office Hours
○ /office_hours
● Entity Reference
○ /entityreference
● Link
○ /link
● Email
○ /email
● Field Collection
○ /field_collection

38. Defining View Modes
Defining View Modes

39. Design

40. Implementation
● Content Types
● View Modes
● Views
● Panels
● Node templates & preprocess functions
● CSS

41. Content Types

42. $display_view_modes = array(
'node' => array(
'expanded' => 'Expanded',
'featured' => 'Featured',
'fellow_teaser' => 'Fellow Teaser',
'marquee' => 'Marquee',
'overview' => 'Overview',
'simple' => 'Simple',
),
'user' => array(
'teaser' => 'Teaser',
),
);
View Modes

43. Views

44. Panels

45. <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">
Node Templates & Preprocess Functions

46. // 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);
CSS

47. Questions?