Enhancing Design with Adaptive Content
47
Adaptive Content Christine Coughlan Information Architect @hoodedcloak74 Enhancing Design with Adaptive Content Joel Steidl Lead Architect @joelsteidl
-
Upload
design-for-drupal-boston -
Category
Technology
-
view
69 -
download
1
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 of Enhancing Design with Adaptive Content
Adaptive Content
Christine CoughlanInformation Architect
@hoodedcloak74
Enhancing Design with Adaptive ContentJoel Steidl
Lead Architect
@joelsteidl
Adaptive Content● Broken down & structured● Displayed in multiple places● Device agnostic● Distributed across multiple platforms
Card Catalog
Image from http://en.wikipedia.org/wiki/Library_catalog
Book Example
The Stranger by Albert Camus
Translated from the French by Matthew Ward
MARC Record
MARC Record
K-State Libraries OPAC Search Interface
K-State Libraries OPAC Record
Change the Way We Think● No longer just a webpage● More than text and images● Content as individual elements on a page
Content as Legos
Why is it Important● Communicating with your users● Variety of devices and contexts● Always a pleasant experience
Unadaptive Content ● WYSIWYG encourages writing in blobs● Fields Included:
○ Title○ Body with WYSIWYG editor
Content Editors
Content Editors
User’s Perspective
WYSIWYG Events
Adaptive Events
Why Adaptive? 1. Design Control2. Consistency3. Maintenance & Creation of Content4. Contextual Search Interfaces5. Content Reuse
Stanford Bio-X Event
Design Control
Stanford Bio-X Event
Design Control
Consistency - Bad Example
Consistency
Consistency
Maintenance & Creation of Content
Maintenance & Creation of Content
Contextual Search Interfaces
Contextual Search Interfaces
Content Reuse
Content Reuse
Content Reuse
Ready to Go Adaptive?
From WYSIWYG to Adaptive
Title
Image
Date/Time
Location
Description
Presenter
Event Type
Break Your Content Into Fields
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
Planning Process● Content Maps● Wireframes● Technical Architecture● View Modes● Design
Content Maps
Wireframes
Technical Architecture Document
● 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
Defining View Modes
Defining View Modes
Design
Implementation● Content Types● View Modes● Views● Panels● Node templates & preprocess functions● CSS
Content Types
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', ), );
Views
Panels
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">
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);
Questions?
