the squishy future of content - heemac edition
TRANSCRIPT
The Squishy Future of Content
Dave Olsen, @dmolsenWVU University Relations - WebMarch 2014
@dmolsendmolsen.com
I. Where We AreII. An Opportunity to Reboot
III. Starting SmallIV. Content Choreography
V. Summing Up
THE SQUISHY FUTURE OF CONTENT
2007 A glowing rectangle changes everything
http://flic.kr/p/69ZZhR
http://flic.kr/p/gS7txD
2013 “My God, it’s full of devices...”
2014 How should we deliver our content?
http://flic.kr/p/jK1dxu
native apps
standalonemobile sites
mobile templates
responsive designs
APIs
THESE ARE JUST SOME OF THE SOLUTIONS
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
“Not every mobile device will have your app on it but every mobile
device will have a browser.”- Jason Grigsby, @grigs
INSTALL BASE
THE RISE OF THE MOBILE-ONLY USER
34% of current mobile internet users mostly go 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
mostly on their mobile phone.
Blacks, Hispanics, low-income Americans, less-educated Americans, and young adults are more likely
to be mobile-only users.
1 - source 2 - source 3 - source
1
2
3
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%
WE CAN SEE THIS IN TODAY’S TRAFFIC FOR WVU
51%Percentage of email opened
on mobile in Dec. 2013
http://bit.ly/1iJ6XAH
OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS
77%Mobile searches that take place at home or work, only 17% on-the-go,
according to Google.
OUR USERS ARE FINDING US ON MOBILE
http://bit.ly/1ePylWV
HOW DO WE MAKE OUR WEB CONTENT MOBILE-FRIENDLY?
http://flic.kr/p/4JY1Yr
FLUID LAYOUT ANIMATIONstand-in slide
Layout informs content. Content informs layout.
Neither is more important than the other.
this is really important...
courtesy Ben Callahan, Sparkbox
FRONT-END BACK-ENDDESIGN
THINK ABOUTUSERS
THROW INSOME CONTENT
LAUNCH!
Linear Workflow
Redesign.A process driven by one word...
CONTENT GOES HERE
Our existing standards, workflows, & infrastructure
won’t hold up.
A FUTURE-FRIENDLY TRUTH
http://futurefriend.ly
Redesign.The process can no longer be driven by this word...
Refresh? Reboot?What do we call this new process?
Process
WaterfallPhotoshop
Lorem Ipsum
http://flic.kr/p/7M8Uf5http://flic.kr/p/a2AZv1
The Death of Lorem Ipsum
We Need to Build Teams
http://flic.kr/p/fhQFu
DEVELOPERSWRITERS
DESIGNERS
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
Our New Iterative or Spiral Process
Deliverables.We also need to rethink our
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
You Are Here
Iterative or Spiral Process
styletil.es
Identifying Content Examples
http://flic.kr/p/6DhBCd
EXPLAINING WHY WE NEED TO GET CONTENT EXAMPLES
I. MediaII. FormsIII. TablesIV. Maps
V. Carousels
MEDIA ANIMATIONstand-in slide
FORM ANIMATIONstand-in slide
TABLE EXAMPLEstand-in slide
TABLE EXAMPLEstand-in slide
TABLE EXAMPLEstand-in slide
Exterminate the Carousel!
Exterminate the Carousels!
Editorial Calendars.
The possible answer to carousels is
bit.ly/ZtqUmV
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
You Are Here
Iterative or Spiral Process
ELEMENTS OF CONTENT CHOREOGRAPHY
I. Defining a LayoutII. Content Layering
III. InterdigitationIV. Content-based Breakpoints V. When to Remove Content
Wireframing & Layout
Styleguide
Developing a Component Style Guide
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.
Prioritize Content.
The need to...
SCROLLING... SCROLLING... SCROLLING...
CONTENT LAYERING: MINIMIZING INFORMATION
only viewable after selecting an element...
III
{
CONTENT LAYERING: TAKE ADVANTAGE OF Z-INDEX
also only viewable after selecting an element...
III
INTERDIGITATION: CHANGE SOURCE ORDER BASED ON VIEWPORT
changing order to encourage an action
Desc.
Buy!
Title
Buy!Description
Specs
Related
Title
Specs
Related
CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
Exterminate the Carousel!
NEVER REMOVE CONTENT!
http://flic.kr/p/ejCiT2
Ever Expanding Outlets for Content
PRT APIUpdate once. Publishes to: iOS App (desupported), Mobile Website, Student Portal, Transportation Website, & Twitter
https://austindizzy.me/prt/Mock screenshot from Google Glass
data.eduthe real need for
Layout informs content. Content informs layout.Both inform architecture.
summing up...
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
Iterative or Spiral Process
OUR NEW PROCESS & DELIVERABLES
I. Start Small: Chunks & StyleII. Prioritize Your Content
III. Wireframe in the BrowserIV. Content-based Breakpoints
V. Profit
Real content is critical to the entire process.Be an advocate for it early & often.
Modern web design can’t be done by one person. Find help, be helpful & reboot.
This sh!t is complicated.Don’t get discouraged.
http://flic.kr/p/7jWpEb
Maybe by being Future Friendly...
...and forging future-ready partnerships...
http://flic.kr/p/gidRPX
...we can find unicorns & rainbows.
building.seesparkbox.com
THANKS TO...
Ben Callahan@bencallahan
Brad Frost@brad_frost
Chris Coyier@chriscoyier
Doug Gapinski@douggapinski
Eileen Webb@webmeadow
THANKS FOR LISTENING!
QUESTIONS?
@dmolsendmolsen.com