The Squishy Future of Content - Key Communicators Edition
Upcoming SlideShare
Loading in...5
×
 

The Squishy Future of Content - Key Communicators Edition

on

  • 997 views

 

Statistics

Views

Total Views
997
Views on SlideShare
987
Embed Views
10

Actions

Likes
8
Downloads
12
Comments
0

1 Embed 10

https://twitter.com 10

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

    The Squishy Future of Content - Key Communicators Edition The Squishy Future of Content - Key Communicators Edition Presentation Transcript

    • The Squishy Future of Content Dave Olsen, @dmolsen WVU University Relations - Web January 2014
    • @dmolsen dmolsen.com
    • THE SQUISHY FUTURE OF CONTENT I. Where We Are II. An Opportunity to Reboot III. Starting Small IV. Content Choreography V. Summing Up
    • I. WHERE WE ARE http://flic.kr/p/87gkH5
    • *insert jean-luc picard facepalm here* http://flic.kr/p/69ZZhR
    • “My God, it’s full of devices...” http:/ /flic.kr/p/gS7txD
    • 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)
    • OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS 51% Percentage of Email Opened on Mobile in Dec. 2013 http:/ /bit.ly/1iJ6XAH
    • “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%
    • This slide shows how the Boston Globe uses responsive design. link to 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.
    • Linear Workflow THROW IN SOME CONTENT THINK ABOUT USERS DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox LAUNCH!
    • A process driven by one word... Redesign.
    • Pixel Perfect Previews http://flic.kr/p/8cPU9D
    • CONTENT GOES HERE
    • a Future Friendly truth... Our existing standards, workflows, & infrastructure won’t hold up.
    • II. AN OPPORTUNITY TO REBOOT http://bit.ly/1gwTc6V
    • 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
    • “1 Deliverable” Workflow e Her re ou A Y CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
    • III. STARTING SMALL http://flic.kr/p/bpVs1E
    • 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
    • This slide shows how a media element like an image might react in a responsive design. link to animation Think about how info-graphics or the focus of an image might change as they’re resized.
    • This slide shows how a form might react in a responsive design. link to animation Think about how the form labels shift as they’re resized. Also the length of a form.
    • This slide shows how a table might react in a responsive design. link to animation Think about how the columns shift to rows on smaller screens. Just one option.
    • This slide shows how a table might react in a responsive design. link to animation Think about how less important columns are dropped on smaller screens.
    • This slide shows how a map might react in a responsive design. link to animation This isn’t the best example. Should be thinking about touch, width, focus and download size.
    • Exterminate the Carousels! Exterminate the Carousel!
    • The rise of... Editorial Calendars.
    • “1 Deliverable” Workflow CONTENT UX BACK-END re uA Yo e Her DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
    • Developing a Component Style Guide Styleguide http://flic.kr/p/9VewrY
    • 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
    • Content Influencing Layout http:/ /flic.kr/p/6DxS9D
    • ELEMENTS OF CONTENT CHOREOGRAPHY I. Defining a Layout II. Content Layering III. Interdigitation IV. Content-based Breakpoints V. When to Remove Content
    • Wireframing & Layout
    • The need to... Prioritize Content.
    • 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 changing order to encourage an action Related
    • CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
    • NEVER REMOVE CONTENT! Exterminate the Carousel!
    • 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-based Breakpoints V. Profit
    • 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 & reboot.
    • 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 Gapinski @douggapinski
    • THANKS FOR LISTENING! QUESTIONS?
    • @dmolsen dmolsen.com