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.
The Squishy Future
of Content
Dave Olsen, @dmolsen
WVU University Relations - Web
Confab Higher Ed, November 2013
@dmolsen
dmolsen.com
THE SQUISHY FUTURE OF CONTENT

I. Where We Are
II. Opportunity to Reboot
III. Starting Small
IV. Content Choreography
V. W...
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 Designs
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...
*facepalm*
http://flic.kr/p/69ZZhR
“My God, it’s full of devices...”

http:/
/flic.kr/p/gS7txD
It’s Overwhelming!

http://flic.kr/p/6qidN1
II. OPPORTUNITY TO REBOOT

http://bit.ly/1gwTc6V
futurefriend.ly
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.
a Future Friendly truth...

Our existing standards,
workflows, & infrastructure
won’t hold up.
“1 Deliverable” Workflow

CONTENT

UX

BACK-END

DESIGN

FRONT-END

courtesy Ben Callahan, Sparkbox
(
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
III. STARTING SMALL

http://flic.kr/p/bpVs1E
Identify a Small Project
http://flic.kr/p/5Tbchf
“1 Deliverable” Workflow

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!
bit.ly/ZtqUmV
Developing a Component Style Guide

Styleguide

http://flic.kr/p/9VewrY
IV. CONTENT CHOREOGRAPHY

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

CONTENT

UX

BACK-END

DESIGN

FRONT-END

courtesy Ben Callahan, Sparkbox
Wireframing & Layout
ELEMENTS OF CONTENT CHOREOGRAPHY

I. Defining a Layout
II. Content-based Breakpoints
III. Content Layering
IV. Interdigita...
FINDING MEANING IN ORDER

I. Sequential Order
II. Visual Hierarchy
III. Associative Connections
IV. Usage Patterns
from “R...
Content-based Breakpoints

http://bit.ly/12xuLR1
CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
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 vs. 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
Upcoming SlideShare
Loading in …5
×

of

The Squishy Future of Content Slide 1 The Squishy Future of Content Slide 2 The Squishy Future of Content Slide 3 The Squishy Future of Content Slide 4 The Squishy Future of Content Slide 5 The Squishy Future of Content Slide 6 The Squishy Future of Content Slide 7 The Squishy Future of Content Slide 8 The Squishy Future of Content Slide 9 The Squishy Future of Content Slide 10 The Squishy Future of Content Slide 11 The Squishy Future of Content Slide 12 The Squishy Future of Content Slide 13 The Squishy Future of Content Slide 14 The Squishy Future of Content Slide 15 The Squishy Future of Content Slide 16 The Squishy Future of Content Slide 17 The Squishy Future of Content Slide 18 The Squishy Future of Content Slide 19 The Squishy Future of Content Slide 20 The Squishy Future of Content Slide 21 The Squishy Future of Content Slide 22 The Squishy Future of Content Slide 23 The Squishy Future of Content Slide 24 The Squishy Future of Content Slide 25 The Squishy Future of Content Slide 26 The Squishy Future of Content Slide 27 The Squishy Future of Content Slide 28 The Squishy Future of Content Slide 29 The Squishy Future of Content Slide 30 The Squishy Future of Content Slide 31 The Squishy Future of Content Slide 32 The Squishy Future of Content Slide 33 The Squishy Future of Content Slide 34 The Squishy Future of Content Slide 35 The Squishy Future of Content Slide 36 The Squishy Future of Content Slide 37 The Squishy Future of Content Slide 38 The Squishy Future of Content Slide 39 The Squishy Future of Content Slide 40 The Squishy Future of Content Slide 41 The Squishy Future of Content Slide 42 The Squishy Future of Content Slide 43 The Squishy Future of Content Slide 44 The Squishy Future of Content Slide 45 The Squishy Future of Content Slide 46 The Squishy Future of Content Slide 47 The Squishy Future of Content Slide 48 The Squishy Future of Content Slide 49 The Squishy Future of Content Slide 50 The Squishy Future of Content Slide 51 The Squishy Future of Content Slide 52 The Squishy Future of Content Slide 53 The Squishy Future of Content Slide 54 The Squishy Future of Content Slide 55 The Squishy Future of Content Slide 56 The Squishy Future of Content Slide 57 The Squishy Future of Content Slide 58 The Squishy Future of Content Slide 59 The Squishy Future of Content Slide 60 The Squishy Future of Content Slide 61 The Squishy Future of Content Slide 62 The Squishy Future of Content Slide 63 The Squishy Future of Content Slide 64 The Squishy Future of Content Slide 65 The Squishy Future of Content Slide 66 The Squishy Future of Content Slide 67 The Squishy Future of Content Slide 68 The Squishy Future of Content Slide 69 The Squishy Future of Content Slide 70 The Squishy Future of Content Slide 71
Upcoming SlideShare
The Server Side of Responsive Web Design
Next
Download to read offline and view in fullscreen.

42 Likes

Share

Download to read offline

The Squishy Future of Content

Download to read offline

With the adoption of responsive design, we’re finding that our pixel-perfect content is no longer being placed in pixel-perfect boxes on pixel-perfect websites. Placeholder content no longer suffices during development. Copy-and-paste doesn’t work in migrating between designs. Rather, website design is more strongly informed by our content than ever before. With these changes we need to rethink how content affects our development workflow as well as understand how content and messaging affect layouts.

• Learn why you need to be an advocate for content at all phases of a project.
• Explore the fundamental content types and content rules that will shape how your content flows and is viewed by visitors.
• Learn how content choreography can help you keep your most important message the focus of your site.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

The Squishy Future of Content

  1. The Squishy Future of Content Dave Olsen, @dmolsen WVU University Relations - Web Confab Higher Ed, November 2013
  2. @dmolsen dmolsen.com
  3. THE SQUISHY FUTURE OF CONTENT I. Where We Are II. Opportunity to Reboot III. Starting Small IV. Content Choreography V. Where We’re Going
  4. I. WHERE WE ARE http://flic.kr/p/87gkH5
  5. Linear Workflow THROW IN SOME CONTENT THINK ABOUT USERS DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox LAUNCH!
  6. Pixel Perfect Designs http://flic.kr/p/8cPU9D
  7. CONTENT GOES HERE
  8. Linear Workflow THROW IN SOME CONTENT THINK ABOUT USERS DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox LAUNCH!
  9. *facepalm* http://flic.kr/p/69ZZhR
  10. “My God, it’s full of devices...” http:/ /flic.kr/p/gS7txD
  11. It’s Overwhelming! http://flic.kr/p/6qidN1
  12. II. OPPORTUNITY TO REBOOT http://bit.ly/1gwTc6V
  13. futurefriend.ly
  14. stand-in slide FLUID LAYOUT ANIMATION
  15. http://flic.kr/p/9ux7kJ Content Flows Like Water?
  16. http://flic.kr/p/8AE4ha glasses with chunky content
  17. http:/ /flic.kr/p/fJ9GEX
  18. The Reality: Chunky Water http:/ /flic.kr/p/6DxS9D
  19. Layout informs content. Content informs layout.
  20. this is really important... Neither is more important than the other.
  21. a Future Friendly truth... Our existing standards, workflows, & infrastructure won’t hold up.
  22. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  23. ( No More Pixel Perfection http://flic.kr/p/8cPU9D
  24. Process Waterfall Photoshop Lorem Ipsum The Death of Lorem Ipsum http:/ /flic.kr/p/a2AZv1 http://flic.kr/p/7M8Uf5
  25. We Need to Build Teams WRITERS DEVELOPERS DESIGNERS http://flic.kr/p/fhQFu
  26. III. STARTING SMALL http://flic.kr/p/bpVs1E
  27. Identify a Small Project http://flic.kr/p/5Tbchf
  28. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  29. styletil.es
  30. Identifying Content Examples http://flic.kr/p/6DhBCd
  31. SELECT TYPES OF CONTENT CHUNKS I. Media II. Forms III. Tables IV. Maps V. Carousels
  32. stand-in slide MEDIA ANIMATION
  33. stand-in slide FORM ANIMATION
  34. stand-in slide TABLE EXAMPLE
  35. stand-in slide TABLE EXAMPLE
  36. stand-in slide TABLE EXAMPLE
  37. Exterminate the Carousels! Exterminate the Carousel!
  38. bit.ly/ZtqUmV
  39. Developing a Component Style Guide Styleguide http://flic.kr/p/9VewrY
  40. IV. CONTENT CHOREOGRAPHY http://flic.kr/p/49YSYK
  41. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  42. Wireframing & Layout
  43. ELEMENTS OF CONTENT CHOREOGRAPHY I. Defining a Layout II. Content-based Breakpoints III. Content Layering IV. Interdigitation V. When to Remove Content
  44. FINDING MEANING IN ORDER I. Sequential Order II. Visual Hierarchy III. Associative Connections IV. Usage Patterns from “Responsive Layouts Beyond the Sidebar” by Jen Simmons http:/ /responsivelayouts.jensimmons.com
  45. Content-based Breakpoints http://bit.ly/12xuLR1
  46. CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
  47. CONTENT LAYERING: MINIMIZING INFORMATION III { only viewable after selecting an element...
  48. CONTENT LAYERING: TAKE ADVANTAGE OF Z-INDEX III also only viewable after selecting an element...
  49. INTERDIGITATION: CHANGE SOURCE ORDER BASED ON VIEWPORT Title Desc. Buy! Title Description Buy! Specs Related Specs changing order to encourage an action Related
  50. NEVER REMOVE CONTENT! Exterminate the Carousel!
  51. V. WHERE WE’RE GOING http://flic.kr/p/8BPQ2q
  52. Leaving Layout Behind http://flic.kr/p/7V8ZUR
  53. Ever Expanding Outlets for Content http:/ /flic.kr/p/ejCiT2
  54. http://bit.ly/15w4AZc
  55. Content Shifting http://flic.kr/p/96Hbsq
  56. Dumb Blobs vs. Smart Chunks http:/ /flic.kr/p/5DdC9v
  57. Layout informs content. Content informs layout. Both inform architecture.
  58. SUMMING UP http://flic.kr/p/byKgrf
  59. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  60. OUR NEW PROCESS I. Start Small: Chunks & Style II. Prioritize Your Content III. Wireframe in the Browser IV. Content-based Breakpoints IV. Profit
  61. Real content is critical to the entire process. Be an advocate for it early & often.
  62. This sh!t is complicated. Don’t get discouraged. Modern web design can’t be done by one person. Find help, be helpful & reboot.
  63. Maybe By Being Future Friendly... http://flic.kr/p/7jWpEb
  64. ...and Forging Future-Ready Partnerships... http://flic.kr/p/gidRPX
  65. ...we can find unicorns & rainbows.
  66. http://flic.kr/p/agyEkb
  67. building.seesparkbox.com
  68. THANKS TO... Ben Callahan @bencallahan Brad Frost @brad_frost Eileen Webb Chris Coyier @webmeadow @chriscoyier Doug Gapinski @douggapinski
  69. THANKS FOR LISTENING! QUESTIONS?
  70. @dmolsen dmolsen.com
  • davidej

    Nov. 13, 2014
  • AndrewMiller32

    Nov. 13, 2014
  • TNTDevelopment

    Aug. 7, 2014
  • kathrynspybaby

    May. 25, 2014
  • chrisXkevin

    Mar. 21, 2014
  • paulshapiro

    Feb. 28, 2014
  • mwalls2

    Feb. 28, 2014
  • zephsnapp

    Feb. 21, 2014
  • kent5741

    Jan. 26, 2014
  • folktrash

    Jan. 21, 2014
  • lisabeecroft

    Jan. 2, 2014
  • jesuscuadra

    Dec. 28, 2013
  • cwil

    Dec. 20, 2013
  • sonyadavid

    Dec. 10, 2013
  • avyatsenko

    Dec. 9, 2013
  • GodsOwnKerala

    Dec. 3, 2013
  • gleonhard

    Dec. 3, 2013
  • hilarymarsh

    Dec. 2, 2013
  • marcospinello

    Nov. 27, 2013
  • john_newton

    Nov. 21, 2013

With the adoption of responsive design, we’re finding that our pixel-perfect content is no longer being placed in pixel-perfect boxes on pixel-perfect websites. Placeholder content no longer suffices during development. Copy-and-paste doesn’t work in migrating between designs. Rather, website design is more strongly informed by our content than ever before. With these changes we need to rethink how content affects our development workflow as well as understand how content and messaging affect layouts. • Learn why you need to be an advocate for content at all phases of a project. • Explore the fundamental content types and content rules that will shape how your content flows and is viewed by visitors. • Learn how content choreography can help you keep your most important message the focus of your site.

Views

Total views

27,646

On Slideshare

0

From embeds

0

Number of embeds

2,533

Actions

Downloads

115

Shares

0

Comments

0

Likes

42

×