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

The Squishy Future of Content - HEEMAC Edition

on

  • 784 views

This talk was given as a keynote for the HEEMAC conference at the University of Southern Florida. ...

This talk was given as a keynote for the HEEMAC conference at the University of Southern Florida.

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 web sites. Placeholder content no longer suffices during development. Copy and paste doesn't work in migrating between designs. With the emergence of the small screen as a primary computing device, web site design is more strongly informed by our content than ever before. With these changes we need to rethink how content affects layouts, and how we can best communicate these changes and engage with stakeholders to create future-friendly web sites.

Learn why we need to be advocates for content at all phases of a project.
Explore the fundamental content types and content rules that will shape how content flows and is viewed by visitors.
Learn how content choreography can help keep our stakeholders most important message the focus of your site.
Review and rethink our web development workflows to create a new process that is better suited to addressing the constraints of the small screen.

Statistics

Views

Total Views
784
Slideshare-icon Views on SlideShare
750
Embed Views
34

Actions

Likes
3
Downloads
7
Comments
0

2 Embeds 34

https://twitter.com 33
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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
  • 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 - HEEMAC Edition The Squishy Future of Content - HEEMAC Edition Presentation Transcript

    • The Squishy Future of Content Dave Olsen, @dmolsen WVU University Relations - Web March 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
    • 2007 A glowing rectangle changes everything http://flic.kr/p/69ZZhR
    • 2013 “My God, it’s full of devices...” http:/ /flic.kr/p/gS7txD
    • 2014 How should we deliver our content? http://flic.kr/p/jK1dxu
    • THESE ARE JUST SOME OF THE SOLUTIONS standalone mobile sites native apps responsive designs mobile templates APIs
    • FOCUSING ON THE WEB FOR THIS TALK FOR THREE REASONS I. Install Base II. The Rise of the Mobile-only User III. How We Share Information
    • INSTALL BASE “Not every mobile device will have your app on it but every mobile device will have a browser.” - Jason Grigsby, @grigs
    • THE RISE OF THE MOBILE-ONLY USER 34% of current mobile internet users mostly go 1 online using their phone. 50% of teen smartphone owners aged 12-17 and 50% of young adults aged 18-29 say they use the internet 2 mostly on their mobile phone. Blacks, Hispanics, low-income Americans, lesseducated Americans, and young adults are more likely 3 to be mobile-only users. 1 - source 2 - source 3 - source
    • WE CAN SEE THIS IN TODAY’S TRAFFIC FOR WVU 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%
    • OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS 51% Percentage of email opened on mobile in Dec. 2013 http:/ /bit.ly/1iJ6XAH
    • OUR USERS ARE FINDING US ON MOBILE 77% Mobile searches that take place at home or work, only 17% on-the-go, according to Google. http://bit.ly/1ePylWV
    • HOW DO WE MAKE OUR WEB CONTENT MOBILE-FRIENDLY? http://flic.kr/p/4JY1Yr
    • 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.
    • Linear Workflow THROW IN SOME CONTENT THINK ABOUT USERS DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox LAUNCH!
    • http://flic.kr/p/9g5Gg8
    • 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. http://futurefriend.ly
    • II. AN OPPORTUNITY TO REBOOT http://bit.ly/1gwTc6V
    • The process can no longer be driven by this word... Redesign.
    • What do we call this new process? Refresh? Reboot?
    • Blow up all the things? http://flic.kr/p/6NVz9K
    • ( 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
    • Our New Iterative or Workflow “1 Deliverable”Spiral Process CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
    • We also need to rethink our Deliverables.
    • III. STARTING SMALL http://flic.kr/p/bpVs1E
    • Iterative or Spiral Process “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
    • EXPLAINING WHY WE NEED TO GET CONTENT EXAMPLES 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 possible answer to carousels is Editorial Calendars.
    • bit.ly/ZtqUmV
    • IV. CONTENT CHOREOGRAPHY http://flic.kr/p/49YSYK
    • Iterative or Spiral Process “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
    • Developing a Component Style Guide Styleguide http://flic.kr/p/9VewrY
    • pattern-lab.info
    • pattern-lab.info Pattern Lab is a collection of tools for creating modular systems, your very own tiny bootstraps and involve your entire team & the client every step of the way.
    • 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!
    • V. WHERE WE’RE GOING http://flic.kr/p/8BPQ2q
    • Leaving Layout Behind http://flic.kr/p/7V8ZUR
    • Content Shifting http://flic.kr/p/96Hbsq
    • Dumb Blobs to Smart Chunks http:/ /flic.kr/p/5DdC9v
    • http://bit.ly/15w4AZc
    • Ever Expanding Outlets for Content http:/ /flic.kr/p/ejCiT2
    • PRT API Update once. Publishes to: iOS App (desupported), Mobile Website, Student Portal, Transportation Website, & Twitter
    • Mock screenshot from Google Glass https://austindizzy.me/prt/
    • the real need for data.edu
    • summing up... Layout informs content. Content informs layout. Both inform architecture.
    • SUMMING UP http://flic.kr/p/byKgrf
    • Iterative or Spiral Process “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
    • OUR NEW PROCESS & DELIVERABLES 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