• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building Bendable Content - MidwestUX 2012
 

Building Bendable Content - MidwestUX 2012

on

  • 8,874 views

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

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.

Statistics

Views

Total Views
8,874
Views on SlideShare
7,324
Embed Views
1,550

Actions

Likes
35
Downloads
210
Comments
4

16 Embeds 1,550

http://intranet 694
http://www.iphone-entreprise.com 276
http://www.scoop.it 180
http://www.conseilsmarketing.com 139
http://wwwblogsdecarlosalarcongomez.blogspot.com.es 56
http://lanyrd.com 52
http://www.siggyvolgt.nl 52
http://curation.mezzolabs.co.uk 39
https://twitter.com 20
http://wwwblogsdecarlosalarcongomez.blogspot.com 14
http://us-w1.rockmelt.com 10
http://www.twylah.com 7
http://feeds.feedburner.com 6
http://bottlenose.com 2
http://zootool.com 2
http://expressionisticbuilding.buntt.us 1
More...

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Building Bendable Content - MidwestUX 2012 Building Bendable Content - MidwestUX 2012 Presentation Transcript

  • Sara Wachter-Boettcher Midwest UX 2012Building Bendable Content Why the future web needs content- focused IA
  • Ourresponsiveadaptivemobile-firstcross-channelmulti-devicesuper-awesomefuture
  • Ourresponsiveadaptivemobile-firstcross-channelmulti-devicesuper-awesomefuture
  • Why? #MWUX12 | 06.01.2012 @sara_ann_marie
  • From Brad Frost, “This is the Web” #MWUX12 | 06.01.2012 @sara_ann_marie
  • 1 in 2 Americans owns a smartphone,up from 1 in 3 in 2011.Pew 2012 Update #MWUX12 | 06.01.2012 @sara_ann_marie
  • Mobile internet usage is expected toovertake desktop by 2014.comScore #MWUX12 | 06.01.2012 @sara_ann_marie
  • From Brad Frost, “This is the Web” #MWUX12 | 06.01.2012 @sara_ann_marie
  • What does the future mean for IA? #MWUX12 | 06.01.2012 @sara_ann_marie
  • 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
  • We’ve audited pages. #MWUX12 | 06.01.2012 @sara_ann_marie
  • 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
  • This won’t hold up.
  • We need IA that gets at the core. #MWUX12 | 06.01.2012 @sara_ann_marie
  • The content #MWUX12 | 06.01.2012 @sara_ann_marie
  • Content that’s unfixed from the desktop. #MWUX12 | 06.01.2012 @sara_ann_marie
  • Content that’s ready for new devices. #MWUX12 | 06.01.2012 @sara_ann_marie
  • Content that’s portable to future platforms. #MWUX12 | 06.01.2012 @sara_ann_marie
  • Content like water #MWUX12 | 06.01.2012 @sara_ann_marie
  • COPE: Create Once,Publish Everywhere. #MWUX12 | 06.01.2012 @sara_ann_marie
  • 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
  • #MWUX12 | 06.01.2012 @sara_ann_marie
  • But. #MWUX12 | 06.01.2012 @sara_ann_marie
  • Content is chunky. #MWUX12 | 06.01.2012 @sara_ann_marie
  • Chunkyis good. #MWUX12 | 06.01.2012 @sara_ann_marie
  • Chunky gets stuck.
  • 2009: I learned thisthe hard way. #MWUX12 | 06.01.2012 @sara_ann_marie
  • Later that year... #MWUX12 | 06.01.2012 @sara_ann_marie
  • Wait a second. #MWUX12 | 06.01.2012 @sara_ann_marie
  • Soaring peaks #WVpdx | 05.18.2012 @sara_ann_marie
  • Historic charm #WVpdx | 05.18.2012 @sara_ann_marie
  • Americana galore #WVpdx | 05.18.2012 @sara_ann_marie
  • Trip ideas
  • I want to go there. #MWUX12 | 06.01.2012 @sara_ann_marie
  • Not so much
  • #WVpdx | 05.18.2012 @sara_ann_marie
  • 2010: We’ve gottago mobile. #MWUX12 | 06.01.2012 @sara_ann_marie
  • #MWUX12 | 06.01.2012 @sara_ann_marie
  • There’s only onerestaurant in town? #MWUX12 | 06.01.2012 @sara_ann_marie
  • This will fixeverything! #MWUX12 | 06.01.2012 @sara_ann_marie
  • #WVpdx | 05.18.2012 @sara_ann_marie
  • 2011: Fixing (part of)the problem. #MWUX12 | 06.01.2012 @sara_ann_marie
  • ✦ 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
  • ✦ Not big blobs, but elements #MWUX12 | 06.01.2012 @sara_ann_marie
  • Local | attractio ns & Lo cal parks | m onumen ts n Events i | Flags taffFeature Stories | | Local deals
  • Flexible content needs to have structure. #MWUX12 | 06.01.2012 @sara_ann_marie
  • This is acontent problem #MWUX12 | 06.01.2012 @sara_ann_marie
  • This is a uxproblem #MWUX12 | 06.01.2012 @sara_ann_marie
  • This is asolvable problem #MWUX12 | 06.01.2012 @sara_ann_marie
  • It’s IA, brought to the micro level. #MWUX12 | 06.01.2012 @sara_ann_marie
  • Saywhat?
  • “The structural design of sharedinformation environments.” – Morville & Rosenfeld #MWUX12 | 06.01.2012 @sara_ann_marie
  • “The art and science of organizing andlabeling websites...to support usability.” - IA Institute #MWUX12 | 06.01.2012 @sara_ann_marie
  • Same skills, new challenge. #MWUX12 | 06.01.2012 @sara_ann_marie
  • 3 steps toward more bendable content. #MWUX12 | 06.01.2012 @sara_ann_marie
  • ✦ GET CLOSER TO CONTENT✦ GO FROM PAGES TO PARTS✦ RULE THE ROBOTS #MWUX12 | 06.01.2012 @sara_ann_marie
  • ✦ GET CLOSER TO CONTENT✦ GO FROM PAGES TO PARTS✦ RULE THE ROBOTS #MWUX12 | 06.01.2012 @sara_ann_marie
  • “We are all content strategists now.” - Karen McGrane #MWUX12 | 06.01.2012 @sara_ann_marie
  • Interaction isn’t everything
  • Substance. #MWUX12 | 06.01.2012 @sara_ann_marie
  • Small screensStrange new screensLoad time concernsSave for laterReader view #MWUX12 | 06.01.2012 @sara_ann_marie
  • As the bells and whistlesdisappear, what’s left? #MWUX12 | 06.01.2012 @sara_ann_marie
  • “Those who don’t design for readersmight soon not be designing for anyone.” - Jeffrey Zeldman #MWUX12 | 06.01.2012 @sara_ann_marie
  • We need to focusso our users can, too. #MWUX12 | 06.01.2012 @sara_ann_marie
  • ✦ 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
  • ✦ GET CLOSER TO CONTENT✦ GO FROM PAGES TO PARTS✦ RULE THE ROBOTS #MWUX12 | 06.01.2012 @sara_ann_marie
  • “Permanently placing content on a webpage...is becoming a thing of the past.” - Trent Walton #MWUX12 | 06.01.2012 @sara_ann_marie
  • FINALLY!
  • asn’t W hy w tenttha t con up h ere?back
  • Content Stacking vs. InterdigitationFrom Trent Walton, “Content Choreography” #MWUX12 | 06.01.2012 @sara_ann_marie
  • Before content can shift,it needs structure. #MWUX12 | 06.01.2012 @sara_ann_marie
  • m uc hCan’t do w it h t h is #MWUX12 | 06.01.2012 @sara_ann_marie
  • , opt ions!Hello #MWUX12 | 06.01.2012 @sara_ann_marie
  • But before you build structure,you need meaning. #MWUX12 | 06.01.2012 @sara_ann_marie
  • ✦ 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
  • Then you put the pieces together. #MWUX12 | 06.01.2012 @sara_ann_marie
  • don’t haveYo u e t h is to mak #MWUX12 | 06.01.2012 @sara_ann_marie
  • 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
  • And then you’re gonna have totalk to the developers. A lot. #MWUX12 | 06.01.2012 @sara_ann_marie
  • ✦ GET CLOSER TO CONTENT✦ GO FROM PAGES TO PARTS✦ RULE THE ROBOTS #MWUX12 | 06.01.2012 @sara_ann_marie
  • “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
  • We can’t manually managehow each bit of content looks. #MWUX12 | 06.01.2012 @sara_ann_marie
  • But when we have structure,we can make rules. #MWUX12 | 06.01.2012 @sara_ann_marie
  • Robots like rules.
  • P -> Q #MWUX12 | 06.01.2012 @sara_ann_marie
  • f resizing forI all screens... low thesm t hen ref ews m o dules. n
  • 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.
  • 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
  • Better content knowledge v | More meaningful parts v |Rules that best reflect human choices #MWUX12 | 06.01.2012 @sara_ann_marie
  • Robots aren’t human, but our content must be. #MWUX12 | 06.01.2012 @sara_ann_marie
  • : 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! sarawb.com // @sara_ann_mariePhoto Credits ✦ PB Spoon from http://www.flickr.com/photos/certified_su/234726096/✦ Swaying Trees from http://www.flickr.com/photos/bala_/1282565897/ ✦ Flagstaff photos courtesy Arizona Office of Tourism✦ Future by Morimoto from http://50watts.com/2483236/Space-Teriyaki-3 ✦ Deflated balloons from http://www.flickr.com/photos/silverfuture/✦ Storm from http://www.flickr.com/photos/mikebaird/4084235781/ 6799133336/ and http://www.flickr.com/photos/silverfuture/5432635206/✦ Faucet from http://www.flickr.com/photos/briangaid/2909765394/ ✦ Polar Bear from http://www.flickr.com/photos/davidw/2132684141✦ PB Toast from http://www.flickr.com/photos/luzbonita/2558151303/ ✦ Button from http://www.flickr.com/photos/jamescridland/2271986251✦ Girl with PBJ from http://www.flickr.com/photos/judybaxter/59996764 ✦ Robot from http://www.flickr.com/photos/johngreenaway/3356358479/