6. “My God, it’s full of devices...”
http:/
/flic.kr/p/gS7txD
7. 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)
8. OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS
51%
Percentage of Email Opened
on Mobile in Dec. 2013
http:/
/bit.ly/1iJ6XAH
9. “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%
10.
11. This slide shows how the Boston Globe uses
responsive design.
link to animation
34. SELECT TYPES OF CONTENT CHUNKS
I. Media
II. Forms
III. Tables
IV. Maps
V. Carousels
35. 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.
36. 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.
37. 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.
38. 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.
39. 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.
47. ELEMENTS OF CONTENT CHOREOGRAPHY
I. Defining a Layout
II. Content Layering
III. Interdigitation
IV. Content-based Breakpoints
V. When to Remove Content
52. CONTENT LAYERING: TAKE ADVANTAGE OF Z-INDEX
III
also only viewable after selecting an element...
53. INTERDIGITATION: CHANGE SOURCE ORDER BASED ON VIEWPORT
Title
Desc.
Buy!
Title
Description
Buy!
Specs
Related
Specs
changing order to encourage an action
Related
