The Squishy Future of Content - Penn State Edition
-
Upload
dave-olsen -
Category
Technology
-
view
111 -
download
1
description
Transcript of The Squishy Future of Content - Penn State Edition
![Page 1: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/1.jpg)
The Squishy Future of Content
Dave Olsen, @dmolsenWVU University Relations - WebJanuary 2014
![Page 2: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/2.jpg)
@dmolsendmolsen.com
’99 Geography
![Page 3: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/3.jpg)
I. Where We AreII. An Opportunity to Reboot
III. Starting SmallIV. Content Choreography
V. Where We’re Going
THE SQUISHY FUTURE OF CONTENT
![Page 5: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/5.jpg)
courtesy Ben Callahan, Sparkbox
FRONT-END BACK-ENDDESIGN
THINK ABOUTUSERS
THROW INSOME CONTENT
LAUNCH!
Linear Workflow
![Page 7: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/7.jpg)
CONTENT GOES HERE
![Page 8: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/8.jpg)
courtesy Ben Callahan, Sparkbox
FRONT-END BACK-ENDDESIGN
THINK ABOUTUSERS
THROW INSOME CONTENT
LAUNCH!
Linear Workflow
![Page 9: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/9.jpg)
Redesign.A process driven by one word...
![Page 10: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/10.jpg)
*insert jean-luc picard facepalm here*
http://flic.kr/p/69ZZhR
![Page 11: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/11.jpg)
http://flic.kr/p/gS7txD
“My God, it’s full of devices...”
![Page 12: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/12.jpg)
www.wvu.edu: 23%mountainlair.wvu.edu: 45%parentsclub.wvu.edu: 33%
braxton.housing.wvu.edu: 32%construction.wvu.edu: 30%
visit.wvu.edu: 30%fashion.wvu.edu: 27%
president.wvu.edu: 25%tuition.wvu.edu: 21%
admissions.wvu.edu: 15%
“MOBILE” IS A BIG PART OF OUR TRAFFIC
![Page 13: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/13.jpg)
51%Percentage of Email Opened
on Mobile in Dec. 2013
http://bit.ly/1iJ6XAH
OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS
![Page 14: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/14.jpg)
THE RISE OF THE MOBILE-ONLY USER
34% of current mobile internet users mostly go online using their phone. (source)
50% of teen smartphone owners aged 12-17 and 50% of young adults aged 18-29 say they use the internet
mostly on their mobile phone. (source)
77% of mobile searches take place at home or work, only 17% on-the-go, according to Google. (source)
Blacks, Hispanics, low-income Americans, less-educated Americans, and young adults are more likely
to be mobile-only users. (source)
![Page 16: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/16.jpg)
![Page 17: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/17.jpg)
FLUID LAYOUT ANIMATIONstand-in slide
![Page 22: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/22.jpg)
Layout informs content. Content informs layout.
![Page 23: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/23.jpg)
Neither is more important than the other.
this is really important...
![Page 25: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/25.jpg)
futurefriend.ly
![Page 26: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/26.jpg)
Our existing standards, workflows, & infrastructure
won’t hold up.
a Future Friendly truth...
![Page 27: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/27.jpg)
Redesign.The process can no longer be driven by this word...
![Page 28: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/28.jpg)
Refresh?Reboot?Blow up all the things?
What to call it?
![Page 30: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/30.jpg)
Process
WaterfallPhotoshop
Lorem Ipsum
http://flic.kr/p/7M8Uf5http://flic.kr/p/a2AZv1
The Death of Lorem Ipsum
![Page 31: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/31.jpg)
We Need to Build Teams
http://flic.kr/p/fhQFu
DEVELOPERSWRITERS
DESIGNERS
![Page 32: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/32.jpg)
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
![Page 34: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/34.jpg)
change management
http://bit.ly/1eeYB09
http://bit.ly/1eeYB09
http://bit.ly/1eeYB09
UTILIZING CHANGE MANAGEMENT
![Page 35: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/35.jpg)
UTILIZING CHANGE MANAGEMENT
I. AwarenessII. Desire
III. KnowledgeIV. Ability
V. Reinforcement
ADKAR is a registered trademark of Prosci Research
![Page 37: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/37.jpg)
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
You Are Here
![Page 38: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/38.jpg)
styletil.es
![Page 39: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/39.jpg)
Identifying Content Examples
http://flic.kr/p/6DhBCd
![Page 40: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/40.jpg)
SELECT TYPES OF CONTENT CHUNKS
I. MediaII. FormsIII. TablesIV. Maps
V. Carousels
![Page 41: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/41.jpg)
MEDIA ANIMATIONstand-in slide
![Page 42: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/42.jpg)
FORM ANIMATIONstand-in slide
![Page 43: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/43.jpg)
TABLE EXAMPLEstand-in slide
![Page 44: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/44.jpg)
TABLE EXAMPLEstand-in slide
![Page 45: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/45.jpg)
TABLE EXAMPLEstand-in slide
![Page 46: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/46.jpg)
Exterminate the Carousel!
Exterminate the Carousels!
![Page 47: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/47.jpg)
Editorial Calendars.
The rise of...
![Page 48: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/48.jpg)
bit.ly/ZtqUmV
![Page 49: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/49.jpg)
Styleguide
Developing a Component Style Guide
http://flic.kr/p/9VewrY
![Page 50: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/50.jpg)
Wireframing & Layout
![Page 51: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/51.jpg)
pattern-lab.info
![Page 53: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/53.jpg)
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
You Are Here
![Page 54: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/54.jpg)
ELEMENTS OF CONTENT CHOREOGRAPHY
I. Defining a LayoutII. Content-based Breakpoints
III. Content LayeringIV. Interdigitation
V. When to Remove Content
![Page 55: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/55.jpg)
Prioritize Content.
The need to...
![Page 57: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/57.jpg)
CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
![Page 58: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/58.jpg)
SCROLLING... SCROLLING... SCROLLING...
![Page 59: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/59.jpg)
CONTENT LAYERING: MINIMIZING INFORMATION
only viewable after selecting an element...
III
{
![Page 60: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/60.jpg)
CONTENT LAYERING: TAKE ADVANTAGE OF Z-INDEX
also only viewable after selecting an element...
III
![Page 61: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/61.jpg)
INTERDIGITATION: CHANGE SOURCE ORDER BASED ON VIEWPORT
changing order to encourage an action
Desc.
Buy!
Title
Buy!Description
Specs
Related
Title
Specs
Related
![Page 62: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/62.jpg)
Exterminate the Carousel!
NEVER REMOVE CONTENT!
![Page 65: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/65.jpg)
http://flic.kr/p/ejCiT2
Ever Expanding Outlets for Content
![Page 69: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/69.jpg)
Layout informs content. Content informs layout.Both inform architecture.
![Page 71: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/71.jpg)
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
![Page 72: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/72.jpg)
OUR NEW PROCESS
I. Start Small: Chunks & StyleII. Prioritize Your Content
III. Wireframe in the BrowserIV. Content-based Breakpoints
IV. Profit
![Page 73: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/73.jpg)
Real content is critical to the entire process.Be an advocate for it early & often.
![Page 74: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/74.jpg)
Modern web design can’t be done by one person. Find help, be helpful & reboot.
This sh!t is complicated.Don’t get discouraged.
![Page 75: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/75.jpg)
http://flic.kr/p/7jWpEb
Maybe by being Future Friendly...
![Page 76: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/76.jpg)
...and forging future-ready partnerships...
http://flic.kr/p/gidRPX
![Page 77: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/77.jpg)
...we can find unicorns & rainbows.
![Page 79: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/79.jpg)
building.seesparkbox.com
![Page 80: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/80.jpg)
THANKS TO...
Ben Callahan@bencallahan
Brad Frost@brad_frost
Chris Coyier@chriscoyier
Doug Gapinski@douggapinski
Eileen Webb@webmeadow
![Page 81: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/81.jpg)
THANKS FOR LISTENING!QUESTIONS?
![Page 82: The Squishy Future of Content - Penn State Edition](https://reader030.fdocuments.us/reader030/viewer/2022013011/54c717924a795928408b474f/html5/thumbnails/82.jpg)
@dmolsendmolsen.com