Content Strategy / Content First Design

Slide 1

Slide 1 text

Content-First Design UX AKRON Christopher Hallahan @challahan @rwdkent

Slide 2

Slide 2 text

IdeaBase

Slide 3

Slide 3 text

Content-First Design http://alistapart.com/blog/post/content-ﬁrst-design Steph Hay

Slide 4

Slide 4 text

“The shift of working content ﬁrst (conversation design) instead of structure ﬁrst (system design) is how we worked … before we ever moved to layout and design.” Stephanie Hay, Content First Design, A List Apart

Slide 5

Slide 5 text

“Content strategy helps organizations provide the right content, to the right people, at the right times, for the right reasons. ” Megan Casey, The Content Strategy Toolkit

Slide 6

Slide 6 text

Fixed-Width 960px

Slide 7

Slide 7 text

iPhone 2007

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

BradFrost.com

Slide 10

Slide 10 text

http://www.lukew.com/ﬀ/entry.asp?1946

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.” John Allsopp, “A Dao of Web Design”

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Fluid Grid Flexible Images Media Queries

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

RWD Today

Slide 23

Slide 23 text

http://karenmcgrane.com/2014/01/13/the-mobile-content-mandate/ “You don’t get to decide which device people use to access the internet: they do.” Karen McGrane, The Mobile Content Mandate

Slide 24

Slide 24 text

2/3 http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/ 2/3 of Americans own a smartphone.

Slide 25

Slide 25 text

85% http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/ 85% Americans 18-29 own a smartphone

Slide 26

Slide 26 text

10% http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/ 10% of Americans smartphone-only

Slide 27

Slide 27 text

334 million http://www.idc.com/prodserv/smartphone-os-market-share.jsp 334 million worldwide smartphone shipments, Q1-2015

Slide 28

Slide 28 text

-2.4% http://www.idc.com/getdoc.jsp?containerId=prUS25372415 -2.4% Q4-2014 Worldwide PC shipments

Slide 29

Slide 29 text

77% https://developers.google.com/webmasters/mobile-sites/get-started/why 77% of mobile searches occur at work or home.

Slide 30

Slide 30 text

“We think we should be offering a familiar experience across all of the different devices, and people may want to be getting different things from BBC News at different times of the day.” BBC, Responsive Web Design Podcast

Slide 31

Slide 31 text

https://developers.google.com/webmasters/mobile-sites/

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

http://farm1.static.ﬂickr.com/29/67433282_f3eb423e24.jpg

Slide 38

Slide 38 text

Process Change

Slide 39

Slide 39 text

Collaborative Team 1 1

Slide 40

Slide 40 text

2 Scope & Timeline 2

Slide 41

Slide 41 text

3 Design Process 3

Slide 42

Slide 42 text

4 Research & Usability 4

Slide 43

Slide 43 text

Content Strategy 5 5

Slide 44

Slide 44 text

Research + UX Design Development Launch

Slide 45

Slide 45 text

Research + UX Design Development Content? ^

Slide 46

Slide 46 text

Content + Architecture UX +   Research Project Kickoff +  Business Needs Content + Architecture Design &   Development Content   Management   System UX +   Research

Slide 47

Slide 47 text

Project Manager Visual Designer Front-End Developer Information Architect/UX Designer Back-End Developer Content Strategist Client (Subject Expert)

Slide 48

Slide 48 text

CMS Design

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Surveys

Slide 52

Slide 52 text

Competitive Analysis

Slide 53

Slide 53 text

Card Sorting

Slide 54

Slide 54 text

Interviews

Slide 55

Slide 55 text

Personas & User Stories

Slide 56

Slide 56 text

Usability Testing

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Content Audit Owner Type Representation Quality Updated Hierarchy Format Tone

Slide 59

Slide 59 text

What’s __________ ? missing

Slide 60

Slide 60 text

Google Docs JumpChart GatherContent

Slide 61

Slide 61 text

Sitemaps Outlines Content Prototype

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

New CMS

Slide 65

Slide 65 text

Most Important

Slide 66

Slide 66 text

“How Users Read on the Web: They don't. People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences.” Jakob Nielsen http://www.nngroup.com/articles/how-users-read-on-the-web/

Slide 67

Slide 67 text

Desktop

Slide 68

Slide 68 text

Mobile http://www.lukew.com/ﬀ/entry.asp?1117 80% Less

Slide 69

Slide 69 text

HEADING 1 Heading 2 HEADING 1 This is a paragraph of content. This is a paragraph of content. This is a paragraph of content. •List Item •List Item •List Item •List Item This is a paragraph of content. This is a paragraph of content. This is a paragraph of content. Logo and Navigation

Slide 70

Slide 70 text

Slide 71

Slide 71 text

Header/Logo Products Store Locations Contact Information

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

The Content Strategy Toolkit

Slide 75

Slide 75 text

http://karenmcgrane.com/2014/01/13/the-mobile-content-mandate/ “There is no “how to write for mobile.” There’s only good writing. Period” Karen McGrane: “Content Strategy for Mobile”

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

Company Name Name, Telephone, Email Contact Information Our Products Map Locations Search

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

“The web aﬀords us a wonderful opportunity: to be able to design and test a design in the actual medium for which we’re designing. It’s time to stop designing pictures of websites and start designing all aspects of the user experience simultaneously and in a practical way.” Stephen Hay. “Responsive Design Workﬂow”

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

Content Types

Slide 85

Slide 85 text

Content Types Book Event Location Product News Article Bio

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

Br Book Title: Category: Summary: Subcategory: Date Added: Book Cover: Author(s): Upload + Link:

Slide 88

Slide 88 text

ChildBr Category: Children’s Books

Slide 89

Slide 89 text

ChildBr Green Eggs and Ham Author: Dr. Seuss Added April 2015 Green Eggs and Ham is a best-selling and critically acclaimed children's book by Dr. Seuss, ﬁrst published on August 12, 1960. As of 2001, according to Publishers Weekly, it was the fourth best-selling English-language children's book of all time.[1] The story has appeared in several animated videos starting with 1973's Dr. Seuss on the Loose: The Sneetches, The Zax; Green Eggs and Ham starring Paul Winchell as the voice of both Sam-I-am and the ﬁrst-person narrating man.

Slide 90

Slide 90 text

http://abookapart.com/products/content-strategy-for-mobile

Slide 91

Slide 91 text

Which Content Management System?

Slide 92

Slide 92 text

Open-Source Drupal Magento Joomla! WordPress Movable Type

Slide 93

Slide 93 text

Proprietary ExpressionEngine Cascade Craft Perch SharePoint

Slide 94

Slide 94 text

Editors/Workﬂow Types of Content Scalability and Performance Cost Backend User Experience Separation of Content & Design Expandability Lifespan

Slide 95

Slide 95 text

“We’re not designing pages, we’re designing systems of components.” Stephen Hay, “Responsive Web Design Workﬂow” http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workﬂow/

Slide 96

Slide 96 text

Related Stories Header and Search Footer Photo   Gallery

Slide 97

Slide 97 text

Content Governance

Slide 98

Slide 98 text

Roles & Responsibilities Content Calendars & Editorial Planning Content Reviews/Audits Style Guide

Slide 99

Slide 99 text

We Need Good Content Remember:

Slide 100

Slide 100 text

We Aren’t In Control Remember:

Slide 101

Slide 101 text

We Aren’t The User Remember:

Slide 102

Slide 102 text

Thanks! Christopher Hallahan @challahan www.chrishallahan.com www.ideabasekent.com

Slide 103

Slide 103 text

Content Prioritization ACTIVITY

Slide 104

Slide 104 text

http://www.kent.edu/chemistry/graduate-programs http://www.kent.edu/philosophy/undergraduate-programs http://www.kent.edu/EducationAbroad

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

Eliminate Unnecessary Content Adjust the Voice/Tone Break Into Subheadings/Bullets Prioritize Most Important Content

Slide 109

Slide 109 text

Content Mapping ACTIVITY

Slide 110

Slide 110 text

Example: www.nytimes.com

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

Br Add New Video Long Title: Short Title: Category: Description: Subcategory: Date Added: Video File: Author(s): Related: Pre-roll Ad: Upload + +

Slide 113

Slide 113 text

This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 2 Content-First Design Selected Website: www.nytimes.com Core Content Types: News Article Author Opinion Article Video Review Crossword Puzzle Slideshow/Gallery Book Ad Frequently Asked Question Comment Stock

Slide 114

Slide 114 text

This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 3 Content-First Design Content Type: Video Content Pieces: ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ Title Video File Date Added Category Author(s) Description Related Content Preroll Ad

Slide 115

Slide 115 text

This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 4 Content-First Design Selected Website: ___________________________________________ Core Content Types: ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________

Slide 116

Slide 116 text

This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 5 Content-First Design Content Type: ____________________________________________ Content Pieces: ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________

Slide 117

Slide 117 text

Please turn in your surveys! View the slide deck at https://speakerdeck.com/challahan/responsive-web-design-workshop