Device-Agnostic Content Strategy for Drupal

Our expertise. Your digital DNA | evolvingweb.ca | @evolvingweb
MOBILE DEVICE-AGNOSTIC
CONTENT STRATEGY FOR
DRUPAL 8

SUZANNE DERGACHEVA
• Drupal trainer
• Co-founded Evolving Web in 2007
• Manage Drupal projects
• Experienced site builder, themer,
and developer
• Follow me @suzanne_kennedy

WE MAKE DRUPAL WEBSITES
FOR ALL TYPES OF CLIENTS

UPCOMING DRUPAL TRAININGS
• Site Building - Online - August 28
• Theming - Online - August 30-31
• Module Development - Online - Sept 6-7
• Site Building - DC - October 16
• Theming - DC - October 17-18
• Migrate to Drupal 8 - DC - October 19-20
• All trainings: http://evolvingweb.ca/training

WHAT IS CONTENT STRATEGY?
• Storytelling: connecting users to content that engages them
• Marketing: Achieving business goals by communicating to
users
• Making information accessible to all users

CROSS-DEVICE CONTENT STRATEGY
• Designing content structures that can be easily adapted to
different devices
• Making content consistent across devices
• Giving the user a clear path to the content they need from
any entry point
• Solving problems in content rather than hiding content
problems with design

OVERALL CONTENT STRATEGY GOALS
• Make the output of your
content relevant-ﬁrst, and
let the design take care of
display/ordering for different
contexts
• Let the design output the
content according to: screen
resolution, input method,
browser capability, browser
speed

TECHNIQUES
• Structure content in a controlled/granular way
• Keep the navigation simple
• Clear path to key content
• Optimize the use of media
• Clean up legacy HTML

GOALS
• Semantic content: a design-free presentation should still
work
• Allow for skimability and readability of content

GUIDELINES FOR STRUCTURING CONTENT
• Break down content into individual fields
• Make fields required
• Order fields in a logical way (e.g. titles before meta data)
• Limit length of text components

LONG-FORM CONTENT
• Limit WYSIWYG usage
• Limit complexity of HTML
• Break up text ﬁelds into multi-value ﬁelds with titles

NAVIGATION GUIDELINES
• Prioritize important menu items, remove un-needed ones
• Flatten navigation
• Create secondary menus for less important content
• Don’t rely on mega menus
• Use calls to action to augment/replace menus
• Place all content within the navigation hierarchy

GUIDELINES FOR CALLS TO ACTION
• Limit the number of calls to action per page
• Make the link between the content on the page and the call
to action
• Ask: what is the user trying to achieve on the page, and what
do you want the user to do (make sure both are possible)
• Use calls to action to highlight the most important nav items

GUIDELINES FOR SLIDESHOWS
• Avoid slideshows as key communication tools
• Adding something to a slideshow doesn’t make it accessible
• Look for alternatives like a gallery of thumbnails
• Use slideshows for visual/supplementary information
• Don’t use auto-advance
• Do use slideshow controls

MEDIA GUIDELINES
• Start with image sizes/proportions that can be adapted
• Add image treatments and re-size images on display (image styles)
• Make sure that even on large devices, that image sizes are optimized
• For large images, use the responsive image module to create
alternate versions
• Don’t auto-play audio/video
• Use video thumbnails instead of loading the video player

CONTENT AUDIT
• Static HTML to clean up:
• Fixed-width tables
• Inline media
• Floats within content
• Convert unstructured content to content types
• Prioritize high-visibility content

SUMMARY
• Create granular content
• Cleanup WYSIWYG-generated HTML
• Plan your mobile navigation
• Optimize media on mobile
• Simplify your landing pages and calls to action
• Do user testing on mobile to test!

Device-Agnostic Content Strategy for Drupal

More Related Content

What's hot

Similar to Device-Agnostic Content Strategy for Drupal

More from Suzanne Dergacheva

Recently uploaded

Device-Agnostic Content Strategy for Drupal