Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Bendable Content - MidwestUX 2012

Responsive. Adaptive. Mobile first. Cross-channel. We all want a future that’s flexible, fluid, and unfixed from the desktop, right?

Great. Then it’s time to get to the core of the matter: the content.

Fixed firmly to inflexible pages, today’s content is too often stuck in meaningless blobs—blobs that break under the weight of responsive designs, mobile sites, and cross-channel distribution.

Which elements are most important? What’s primary and what’s corollary? What’s related or interdependent? What stays, what goes, and what gets truncated on small screens?

When we can answer these questions—and structure our content accordingly—we’ll replace those messy blobs with content that bends, shifting and reshaping to fit varied displays and devices.

  • Login to see the comments

Building Bendable Content - MidwestUX 2012

  1. Sara Wachter-Boettcher Midwest UX 2012Building Bendable Content Why the future web needs content- focused IA
  2. Ourresponsiveadaptivemobile-firstcross-channelmulti-devicesuper-awesomefuture
  3. Ourresponsiveadaptivemobile-firstcross-channelmulti-devicesuper-awesomefuture
  4. Why? #MWUX12 | 06.01.2012 @sara_ann_marie
  5. From Brad Frost, “This is the Web” #MWUX12 | 06.01.2012 @sara_ann_marie
  6. 1 in 2 Americans owns a smartphone,up from 1 in 3 in 2011.Pew 2012 Update #MWUX12 | 06.01.2012 @sara_ann_marie
  7. Mobile internet usage is expected toovertake desktop by 2014.comScore #MWUX12 | 06.01.2012 @sara_ann_marie
  8. From Brad Frost, “This is the Web” #MWUX12 | 06.01.2012 @sara_ann_marie
  9. What does the future mean for IA? #MWUX12 | 06.01.2012 @sara_ann_marie
  10. We’ve done hierarchy. Home Main Main Main Main Main Sub Sub Sub Sub Sub Sub Sub Sub Sub Sub Sub Sub Sub Sub Sub Sub Sub Sub Sub Sub Detail Main Detail Main Detail Main Main Main Main #MWUX12 | 06.01.2012 @sara_ann_marie
  11. We’ve audited pages. #MWUX12 | 06.01.2012 @sara_ann_marie
  12. We get templates. Data Library | News & Events | International Search GPEC Logo Doing Business Here Key Industries Living Here Communities Membership About Us Home > GPEC Communities > Avondale GPEC Communities Maricopa County > Apache Junction Avondale Avondale Buckeye Casa Grande Chandler Fountain Hills Gila Bend Gilbert Glendale Goodyear Maricopa Mesa Peoria Avondale is located along the Interstate 10 corridor and Phoenix Top Employers just a 15-minute commute from the heart of Phoenix, Queen Creek Employer nestled at the base of the scenic Estrella Mountains Scottsdale Employer where the Agua Fria and Gila rivers meet. Surprise Employer Tempe Employer The quality of life and the variety of cultural, economic, Tolleson Employer geographic and educational advantages in the area Wickenburg provides a progressive atmosphere rich in resources and Related Downloads opportunity. Download Download Avondale is the proud home of Phoenix International CONNECT WITH GPEC Download Raceway, which sponsors two NASCAR events a year. Avondale also plays host to regional basketball, volleyball 602.256.7700 and soccer tournaments at its parks and American Sports Photo Gallery Center - Avondale, a new state of the art indoor EMAIL US recreational sports facility located at the heart of our planned Avondale City Center. INITIATE A PROJECT Natural beauty including mountains and wetlands – less than six miles from our city core – provide an opportunity for residents and visitors alike to experience nature and wildlife and all the at the great outdoors has to offer. Sign up for GPEC News First Name Last Name Email Address SIGN UP EXPANDED FOOTER NAV (PER HOME COMP) Sitemap | Terms of Use | E-Track Login | Initiate a Project | FAQ | Member Directory | Careers | Press Room 2 N. Central Ave., Suite 2500, Phoenix, AZ 85004 | Phone: 602.256.7700 | Fax: 602.256.7744 © 2011 Greater Phoenix Economic Council. All Rights Reserved GPEC - Avondale 4.1 #MWUX12 | 06.01.2012 @sara_ann_marie
  13. This won’t hold up.
  14. We need IA that gets at the core. #MWUX12 | 06.01.2012 @sara_ann_marie
  15. The content #MWUX12 | 06.01.2012 @sara_ann_marie
  16. Content that’s unfixed from the desktop. #MWUX12 | 06.01.2012 @sara_ann_marie
  17. Content that’s ready for new devices. #MWUX12 | 06.01.2012 @sara_ann_marie
  18. Content that’s portable to future platforms. #MWUX12 | 06.01.2012 @sara_ann_marie
  19. Content like water #MWUX12 | 06.01.2012 @sara_ann_marie
  20. COPE: Create Once,Publish Everywhere. #MWUX12 | 06.01.2012 @sara_ann_marie
  21. Writers enter contentinto the CMS once It’s stored without presentational code Then sent via API Editors approve to NPR and 3rd and double- parties check metadata #MWUX12 | 06.01.2012 @sara_ann_marie
  22. #MWUX12 | 06.01.2012 @sara_ann_marie
  23. But. #MWUX12 | 06.01.2012 @sara_ann_marie
  24. Content is chunky. #MWUX12 | 06.01.2012 @sara_ann_marie
  25. Chunkyis good. #MWUX12 | 06.01.2012 @sara_ann_marie
  26. Chunky gets stuck.
  27. 2009: I learned thisthe hard way. #MWUX12 | 06.01.2012 @sara_ann_marie
  28. Later that year... #MWUX12 | 06.01.2012 @sara_ann_marie
  29. Wait a second. #MWUX12 | 06.01.2012 @sara_ann_marie
  30. Soaring peaks #WVpdx | 05.18.2012 @sara_ann_marie
  31. Historic charm #WVpdx | 05.18.2012 @sara_ann_marie
  32. Americana galore #WVpdx | 05.18.2012 @sara_ann_marie
  33. Trip ideas
  34. I want to go there. #MWUX12 | 06.01.2012 @sara_ann_marie
  35. Not so much
  36. #WVpdx | 05.18.2012 @sara_ann_marie
  37. 2010: We’ve gottago mobile. #MWUX12 | 06.01.2012 @sara_ann_marie
  38. #MWUX12 | 06.01.2012 @sara_ann_marie
  39. There’s only onerestaurant in town? #MWUX12 | 06.01.2012 @sara_ann_marie
  40. This will fixeverything! #MWUX12 | 06.01.2012 @sara_ann_marie
  41. #WVpdx | 05.18.2012 @sara_ann_marie
  42. 2011: Fixing (part of)the problem. #MWUX12 | 06.01.2012 @sara_ann_marie
  43. ✦ Not just hierarchical, but relational Links to Related Links to Feature Links to Business Author Bio Related Article Related Tagged by Tagged by Landmark Tagged by City Links to Related Tagged Tagged Blog Post by by Links to Related Related to Deal Event #MWUX12 | 06.01.2012 @sara_ann_marie
  44. ✦ Not big blobs, but elements #MWUX12 | 06.01.2012 @sara_ann_marie
  45. Local | attractio ns & Lo cal parks | m onumen ts n Events i | Flags taffFeature Stories | | Local deals
  46. Flexible content needs to have structure. #MWUX12 | 06.01.2012 @sara_ann_marie
  47. This is acontent problem #MWUX12 | 06.01.2012 @sara_ann_marie
  48. This is a uxproblem #MWUX12 | 06.01.2012 @sara_ann_marie
  49. This is asolvable problem #MWUX12 | 06.01.2012 @sara_ann_marie
  50. It’s IA, brought to the micro level. #MWUX12 | 06.01.2012 @sara_ann_marie
  51. Saywhat?
  52. “The structural design of sharedinformation environments.” – Morville & Rosenfeld #MWUX12 | 06.01.2012 @sara_ann_marie
  53. “The art and science of organizing andlabeling support usability.” - IA Institute #MWUX12 | 06.01.2012 @sara_ann_marie
  54. Same skills, new challenge. #MWUX12 | 06.01.2012 @sara_ann_marie
  55. 3 steps toward more bendable content. #MWUX12 | 06.01.2012 @sara_ann_marie
  56. ✦ GET CLOSER TO CONTENT✦ GO FROM PAGES TO PARTS✦ RULE THE ROBOTS #MWUX12 | 06.01.2012 @sara_ann_marie
  57. ✦ GET CLOSER TO CONTENT✦ GO FROM PAGES TO PARTS✦ RULE THE ROBOTS #MWUX12 | 06.01.2012 @sara_ann_marie
  58. “We are all content strategists now.” - Karen McGrane #MWUX12 | 06.01.2012 @sara_ann_marie
  59. Interaction isn’t everything
  60. Substance. #MWUX12 | 06.01.2012 @sara_ann_marie
  61. Small screensStrange new screensLoad time concernsSave for laterReader view #MWUX12 | 06.01.2012 @sara_ann_marie
  62. As the bells and whistlesdisappear, what’s left? #MWUX12 | 06.01.2012 @sara_ann_marie
  63. “Those who don’t design for readersmight soon not be designing for anyone.” - Jeffrey Zeldman #MWUX12 | 06.01.2012 @sara_ann_marie
  64. We need to focusso our users can, too. #MWUX12 | 06.01.2012 @sara_ann_marie
  65. ✦ PURPOSE What’s the content supposed to accomplish?✦ MESSAGE What’s it saying? How is it saying it?✦ RELATIONSHIPS What other content is conceptually connected?✦ PRIORITIES How important is it for the business? The user? #MWUX12 | 06.01.2012 @sara_ann_marie
  66. ✦ GET CLOSER TO CONTENT✦ GO FROM PAGES TO PARTS✦ RULE THE ROBOTS #MWUX12 | 06.01.2012 @sara_ann_marie
  67. “Permanently placing content on a becoming a thing of the past.” - Trent Walton #MWUX12 | 06.01.2012 @sara_ann_marie
  68. FINALLY!
  69. asn’t W hy w tenttha t con up h ere?back
  70. Content Stacking vs. InterdigitationFrom Trent Walton, “Content Choreography” #MWUX12 | 06.01.2012 @sara_ann_marie
  71. Before content can shift,it needs structure. #MWUX12 | 06.01.2012 @sara_ann_marie
  72. m uc hCan’t do w it h t h is #MWUX12 | 06.01.2012 @sara_ann_marie
  73. , opt ions!Hello #MWUX12 | 06.01.2012 @sara_ann_marie
  74. But before you build structure,you need meaning. #MWUX12 | 06.01.2012 @sara_ann_marie
  75. ✦ PURPOSE Does each element contribute toward a goal?✦ MESSAGE How does each element communicate meaning?✦ RELATIONSHIPS What’s the relationship between content elements?✦ PRIORITIES Which elements are most important? Why? #MWUX12 | 06.01.2012 @sara_ann_marie
  76. Then you put the pieces together. #MWUX12 | 06.01.2012 @sara_ann_marie
  77. don’t haveYo u e t h is to mak #MWUX12 | 06.01.2012 @sara_ann_marie
  78. jus t Maybe heseContent Item o ne of t Content ItemAttributes: Attributes: ⁃ Title ⁃ Title ⁃ Date Relation ⁃ Date ⁃ Author -ship ⁃ Location ⁃ Abstract ⁃ Teaser ⁃ Detailed ⁃ Detailed Content Content Content Item Relation Attributes: -ship ⁃ Title ⁃ Date Relation ⁃ Author -ship ⁃ Abstract ⁃ DetailedContent Item ContentAttributes: ⁃ Title Relation Relation -ship ⁃ Address -ship ⁃ Short Description Content Item Attributes: ⁃ Title Relation ⁃ Date -ship ⁃ Author ⁃ Abstract ⁃ Detailed Content #MWUX12 | 06.01.2012 @sara_ann_marie
  79. And then you’re gonna have totalk to the developers. A lot. #MWUX12 | 06.01.2012 @sara_ann_marie
  80. ✦ GET CLOSER TO CONTENT✦ GO FROM PAGES TO PARTS✦ RULE THE ROBOTS #MWUX12 | 06.01.2012 @sara_ann_marie
  81. “Adaptive web pages are cooked up fromrelevant content chunks and ingredients,using the special sauce of metadata.” - Lyza Danger Gardner #MWUX12 | 06.01.2012 @sara_ann_marie
  82. We can’t manually managehow each bit of content looks. #MWUX12 | 06.01.2012 @sara_ann_marie
  83. But when we have structure,we can make rules. #MWUX12 | 06.01.2012 @sara_ann_marie
  84. Robots like rules.
  85. P -> Q #MWUX12 | 06.01.2012 @sara_ann_marie
  86. f resizing forI all screens... low thesm t hen ref ews m o dules. n
  87. If the page is ears...a bo ut black b ck bear en pul l in bla th news... vi d eos and bitats and show ha ck to bla relate d bears.
  88. ontent If we make c arties... t h ir d paccess ible to titles, inclu de the n only , links, ad par agrap hs le a in t h e API. and m etadat
  89. Better content knowledge v | More meaningful parts v |Rules that best reflect human choices #MWUX12 | 06.01.2012 @sara_ann_marie
  90. Robots aren’t human, but our content must be. #MWUX12 | 06.01.2012 @sara_ann_marie
  91. : ing a bo ok ss t! I ’m writ ere f ro m P wh t Ever y Conten Me d ia. eld Rosenf Thank you, Midwest UX! // @sara_ann_mariePhoto Credits ✦ PB Spoon from✦ Swaying Trees from ✦ Flagstaff photos courtesy Arizona Office of Tourism✦ Future by Morimoto from ✦ Deflated balloons from✦ Storm from 6799133336/ and✦ Faucet from ✦ Polar Bear from✦ PB Toast from ✦ Button from✦ Girl with PBJ from ✦ Robot from