The Squishy Future
of Content
Dave Olsen, @dmolsen
WVU University Relations - Web
January 2014
@dmolsen
dmolsen.com
’99 Geography
THE SQUISHY FUTURE OF CONTENT

I. Where We Are
II. An Opportunity to Reboot
III. Starting Small
IV. Content Choreography
V...
I. WHERE WE ARE

http://flic.kr/p/87gkH5
Linear Workflow

THROW IN
SOME CONTENT

THINK ABOUT
USERS

DESIGN

FRONT-END

BACK-END

courtesy Ben Callahan, Sparkbox

L...
Pixel Perfect Previews
http://flic.kr/p/8cPU9D
CONTENT GOES HERE
Linear Workflow

THROW IN
SOME CONTENT

THINK ABOUT
USERS

DESIGN

FRONT-END

BACK-END

courtesy Ben Callahan, Sparkbox

L...
A process driven by one word...

Redesign.
*insert jean-luc picard facepalm here*
http://flic.kr/p/69ZZhR
“My God, it’s full of devices...”

http:/
/flic.kr/p/gS7txD
“MOBILE” IS A BIG PART OF OUR TRAFFIC

www.wvu.edu: 23%
mountainlair.wvu.edu: 45%
parentsclub.wvu.edu: 33%
braxton.housing...
OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS

51%
Percentage of Email Opened
on Mobile in Dec. 2013

http:/
/bit.ly...
THE RISE OF THE MOBILE-ONLY USER

34% of current mobile internet users mostly go
online using their phone. (source)
50% of...
What do we do?!

http://flic.kr/p/6qidN1
stand-in slide
FLUID LAYOUT ANIMATION
http://flic.kr/p/9ux7kJ

Content Flows Like Water?
http://flic.kr/p/8AE4ha

glasses with chunky content
http:/
/flic.kr/p/fJ9GEX
The Reality: Chunky Water
http:/
/flic.kr/p/6DxS9D
Layout informs content.
Content informs layout.
this is really important...

Neither is more important
than the other.
II. AN OPPORTUNITY TO REBOOT

http://bit.ly/1gwTc6V
futurefriend.ly
a Future Friendly truth...

Our existing standards,
workflows, & infrastructure
won’t hold up.
The process can no longer be
driven by this word...

Redesign.
What to call it?

Refresh?
Reboot?
Blow up all the
things?
(
No More Pixel Perfection
http://flic.kr/p/8cPU9D
Process

Waterfall
Photoshop
Lorem Ipsum

The Death of Lorem Ipsum
http:/
/flic.kr/p/a2AZv1

http://flic.kr/p/7M8Uf5
We Need to Build Teams

WRITERS

DEVELOPERS

DESIGNERS

http://flic.kr/p/fhQFu
“1 Deliverable” Workflow

CONTENT

UX

BACK-END

DESIGN

FRONT-END

courtesy Ben Callahan, Sparkbox
III. STARTING SMALL

http://flic.kr/p/bpVs1E
UTILIZING CHANGE MANAGEMENT

change management
http://bit.ly/1eeYB09

http://bit.ly/1eeYB09

http:/
/bit.ly/1eeYB09
UTILIZING CHANGE MANAGEMENT

I. Awareness
II. Desire
III. Knowledge
IV. Ability
V. Reinforcement
ADKAR is a registered tra...
Identify a Small Project
http://flic.kr/p/5Tbchf
“1 Deliverable” Workflow
e
Her
re

ou A
Y

CONTENT

UX

BACK-END

DESIGN

FRONT-END

courtesy Ben Callahan, Sparkbox
styletil.es
Identifying Content Examples

http://flic.kr/p/6DhBCd
SELECT TYPES OF CONTENT CHUNKS

I. Media
II. Forms
III. Tables
IV. Maps
V. Carousels
stand-in slide
MEDIA ANIMATION
stand-in slide
FORM ANIMATION
stand-in slide
TABLE EXAMPLE
stand-in slide
TABLE EXAMPLE
stand-in slide
TABLE EXAMPLE
Exterminate the Carousels!

Exterminate the Carousel!
The rise of...

Editorial
Calendars.
bit.ly/ZtqUmV
Developing a Component Style Guide

Styleguide

http://flic.kr/p/9VewrY
Wireframing & Layout
pattern-lab.info
IV. CONTENT CHOREOGRAPHY

http://flic.kr/p/49YSYK
“1 Deliverable” Workflow

CONTENT

UX

You Are Here

BACK-END

DESIGN

FRONT-END

courtesy Ben Callahan, Sparkbox
ELEMENTS OF CONTENT CHOREOGRAPHY

I. Defining a Layout
II. Content-based Breakpoints
III. Content Layering
IV. Interdigita...
The need to...

Prioritize
Content.
Content-based Breakpoints

http://bit.ly/12xuLR1
CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
SCROLLING... SCROLLING... SCROLLING...
CONTENT LAYERING: MINIMIZING INFORMATION

III

{
only viewable after selecting an element...
CONTENT LAYERING: TAKE ADVANTAGE OF Z-INDEX

III

also only viewable after selecting an element...
INTERDIGITATION: CHANGE SOURCE ORDER BASED ON VIEWPORT

Title
Desc.
Buy!

Title
Description

Buy!

Specs
Related

Specs
ch...
NEVER REMOVE CONTENT!

Exterminate the Carousel!
V. WHERE WE’RE GOING

http://flic.kr/p/8BPQ2q
Leaving Layout Behind
http://flic.kr/p/7V8ZUR
Ever Expanding Outlets for Content

http:/
/flic.kr/p/ejCiT2
http://bit.ly/15w4AZc
Content Shifting
http://flic.kr/p/96Hbsq
Dumb Blobs to Smart Chunks

http:/
/flic.kr/p/5DdC9v
Layout informs content.
Content informs layout.
Both inform architecture.
SUMMING UP

http://flic.kr/p/byKgrf
“1 Deliverable” Workflow

CONTENT

UX

BACK-END

DESIGN

FRONT-END

courtesy Ben Callahan, Sparkbox
OUR NEW PROCESS

I. Start Small: Chunks & Style
II. Prioritize Your Content
III. Wireframe in the Browser
IV. Content-base...
Real content is critical to
the entire process.
Be an advocate for it early & often.
This sh!t is complicated.
Don’t get discouraged.
Modern web design can’t be done by one
person. Find help, be helpful & re...
Maybe by being Future Friendly...
http://flic.kr/p/7jWpEb
...and forging future-ready partnerships...

http://flic.kr/p/gidRPX
...we can find unicorns & rainbows.
http://flic.kr/p/agyEkb
building.seesparkbox.com
THANKS TO...

Ben Callahan
@bencallahan

Brad Frost
@brad_frost

Eileen Webb Chris Coyier
@webmeadow @chriscoyier

Doug Ga...
THANKS FOR LISTENING!
QUESTIONS?
@dmolsen
dmolsen.com
The Squishy Future of Content - Penn State Lunch Edition
Upcoming SlideShare
Loading in...5
×

The Squishy Future of Content - Penn State Lunch Edition

410

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
410
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

The Squishy Future of Content - Penn State Lunch Edition

  1. 1. The Squishy Future of Content Dave Olsen, @dmolsen WVU University Relations - Web January 2014
  2. 2. @dmolsen dmolsen.com ’99 Geography
  3. 3. THE SQUISHY FUTURE OF CONTENT I. Where We Are II. An Opportunity to Reboot III. Starting Small IV. Content Choreography V. Where We’re Going
  4. 4. I. WHERE WE ARE http://flic.kr/p/87gkH5
  5. 5. Linear Workflow THROW IN SOME CONTENT THINK ABOUT USERS DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox LAUNCH!
  6. 6. Pixel Perfect Previews http://flic.kr/p/8cPU9D
  7. 7. CONTENT GOES HERE
  8. 8. Linear Workflow THROW IN SOME CONTENT THINK ABOUT USERS DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox LAUNCH!
  9. 9. A process driven by one word... Redesign.
  10. 10. *insert jean-luc picard facepalm here* http://flic.kr/p/69ZZhR
  11. 11. “My God, it’s full of devices...” http:/ /flic.kr/p/gS7txD
  12. 12. “MOBILE” IS A BIG PART OF OUR TRAFFIC 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%
  13. 13. OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS 51% Percentage of Email Opened on Mobile in Dec. 2013 http:/ /bit.ly/1iJ6XAH
  14. 14. 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) Blacks, Hispanics, low-income Americans, lesseducated Americans, and young adults are more likely to be mobile-only users. (source) 77% of mobile searches take place at home or work, only 17% on-the-go, according to Google. (source)
  15. 15. What do we do?! http://flic.kr/p/6qidN1
  16. 16. stand-in slide FLUID LAYOUT ANIMATION
  17. 17. http://flic.kr/p/9ux7kJ Content Flows Like Water?
  18. 18. http://flic.kr/p/8AE4ha glasses with chunky content
  19. 19. http:/ /flic.kr/p/fJ9GEX
  20. 20. The Reality: Chunky Water http:/ /flic.kr/p/6DxS9D
  21. 21. Layout informs content. Content informs layout.
  22. 22. this is really important... Neither is more important than the other.
  23. 23. II. AN OPPORTUNITY TO REBOOT http://bit.ly/1gwTc6V
  24. 24. futurefriend.ly
  25. 25. a Future Friendly truth... Our existing standards, workflows, & infrastructure won’t hold up.
  26. 26. The process can no longer be driven by this word... Redesign.
  27. 27. What to call it? Refresh? Reboot? Blow up all the things?
  28. 28. ( No More Pixel Perfection http://flic.kr/p/8cPU9D
  29. 29. Process Waterfall Photoshop Lorem Ipsum The Death of Lorem Ipsum http:/ /flic.kr/p/a2AZv1 http://flic.kr/p/7M8Uf5
  30. 30. We Need to Build Teams WRITERS DEVELOPERS DESIGNERS http://flic.kr/p/fhQFu
  31. 31. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  32. 32. III. STARTING SMALL http://flic.kr/p/bpVs1E
  33. 33. UTILIZING CHANGE MANAGEMENT change management http://bit.ly/1eeYB09 http://bit.ly/1eeYB09 http:/ /bit.ly/1eeYB09
  34. 34. UTILIZING CHANGE MANAGEMENT I. Awareness II. Desire III. Knowledge IV. Ability V. Reinforcement ADKAR is a registered trademark of Prosci Research
  35. 35. Identify a Small Project http://flic.kr/p/5Tbchf
  36. 36. “1 Deliverable” Workflow e Her re ou A Y CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  37. 37. styletil.es
  38. 38. Identifying Content Examples http://flic.kr/p/6DhBCd
  39. 39. SELECT TYPES OF CONTENT CHUNKS I. Media II. Forms III. Tables IV. Maps V. Carousels
  40. 40. stand-in slide MEDIA ANIMATION
  41. 41. stand-in slide FORM ANIMATION
  42. 42. stand-in slide TABLE EXAMPLE
  43. 43. stand-in slide TABLE EXAMPLE
  44. 44. stand-in slide TABLE EXAMPLE
  45. 45. Exterminate the Carousels! Exterminate the Carousel!
  46. 46. The rise of... Editorial Calendars.
  47. 47. bit.ly/ZtqUmV
  48. 48. Developing a Component Style Guide Styleguide http://flic.kr/p/9VewrY
  49. 49. Wireframing & Layout
  50. 50. pattern-lab.info
  51. 51. IV. CONTENT CHOREOGRAPHY http://flic.kr/p/49YSYK
  52. 52. “1 Deliverable” Workflow CONTENT UX You Are Here BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  53. 53. ELEMENTS OF CONTENT CHOREOGRAPHY I. Defining a Layout II. Content-based Breakpoints III. Content Layering IV. Interdigitation V. When to Remove Content
  54. 54. The need to... Prioritize Content.
  55. 55. Content-based Breakpoints http://bit.ly/12xuLR1
  56. 56. CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
  57. 57. SCROLLING... SCROLLING... SCROLLING...
  58. 58. CONTENT LAYERING: MINIMIZING INFORMATION III { only viewable after selecting an element...
  59. 59. CONTENT LAYERING: TAKE ADVANTAGE OF Z-INDEX III also only viewable after selecting an element...
  60. 60. INTERDIGITATION: CHANGE SOURCE ORDER BASED ON VIEWPORT Title Desc. Buy! Title Description Buy! Specs Related Specs changing order to encourage an action Related
  61. 61. NEVER REMOVE CONTENT! Exterminate the Carousel!
  62. 62. V. WHERE WE’RE GOING http://flic.kr/p/8BPQ2q
  63. 63. Leaving Layout Behind http://flic.kr/p/7V8ZUR
  64. 64. Ever Expanding Outlets for Content http:/ /flic.kr/p/ejCiT2
  65. 65. http://bit.ly/15w4AZc
  66. 66. Content Shifting http://flic.kr/p/96Hbsq
  67. 67. Dumb Blobs to Smart Chunks http:/ /flic.kr/p/5DdC9v
  68. 68. Layout informs content. Content informs layout. Both inform architecture.
  69. 69. SUMMING UP http://flic.kr/p/byKgrf
  70. 70. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  71. 71. OUR NEW PROCESS I. Start Small: Chunks & Style II. Prioritize Your Content III. Wireframe in the Browser IV. Content-based Breakpoints IV. Profit
  72. 72. Real content is critical to the entire process. Be an advocate for it early & often.
  73. 73. This sh!t is complicated. Don’t get discouraged. Modern web design can’t be done by one person. Find help, be helpful & reboot.
  74. 74. Maybe by being Future Friendly... http://flic.kr/p/7jWpEb
  75. 75. ...and forging future-ready partnerships... http://flic.kr/p/gidRPX
  76. 76. ...we can find unicorns & rainbows.
  77. 77. http://flic.kr/p/agyEkb
  78. 78. building.seesparkbox.com
  79. 79. THANKS TO... Ben Callahan @bencallahan Brad Frost @brad_frost Eileen Webb Chris Coyier @webmeadow @chriscoyier Doug Gapinski @douggapinski
  80. 80. THANKS FOR LISTENING! QUESTIONS?
  81. 81. @dmolsen dmolsen.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×