The era of desktop-first methodologies has ended. According to Google, 90% of consumers now use multiple screens to accomplish tasks on the web. People aren't just visiting your site on phones and desktop computers, they are also using game consoles, laptops, tablets, and other devices. As we enter into the renaissance of the postdesktop web, we must be prepared to boldly alter how we prototype, design, and gather feedback from audiences. Two of the most important factors for current web usability are considering the screen (designing and testing for multiple displays) and context.

1. Screen and Context
by Doug Gapinski

2. chrome.com/racer

4. Debunk this!
mStoner.com

5. @DougGapinski
ME

6. SHARE
#heweb13 #uad8

7. STEAL
slideshare.net/thedougco

8. STEAL
slideshare.net/thedougco

9. Context
Screens
Planning and Design
Speed
Usability Testing

10. as coined by Mark Weiser of Xerox PARC
UBIQUITOUSCOMPUTING

12. UBIQUITOUSCOMPUTINGINTERNET

13. 61%
39%
offline
online
How much of the
world’s population
is online?
Source: ITU

14. 0
22.5
45
67.5
90
Americas Asia Pacific Middle East Africa
+28%
+45%
+55%
+82%
Americas
Asia-Pacific
Middle East
Africa
Where is the biggest growth
in mobile broadband (2010 to 2013)?
Source: ITU

15. 0
750000000
1500000000
2250000000
Americas Asia Pacific
Total mobile
broadband
subscriptions,
2007 vs. 2013
268MILLION
2.1BILLION
in 2007
in 2013
Source: ITU

16. 2020
The year Google predicts the
entire world will be online.
Source: CNN

17. 61% of the world will be coming
online for the first time soon using
(mostly) cheap mobile devices.

18. Many of these users will intially be
mobile-only.

19. If you aren’t
providing users with
sites optimized for
mobile use, it’s time
to catch up.

20. SCREENS

21. Aakash Ubislate tablet
$69 ($20 for students in India)
Archos 35 Carbon smartphone
$120
Cheap devices and displays for browsing

22. Lower quality displays that display limited information
Pebble smartwatch
$150
Fitbit Zip fitness data collector
$60

23. In some objects, sensors + connectivity matter more than display
Fitbit Aria
transmits weight to app
Parrot Flower Power
transmits plant
data to app

24. MULTI-DEVICEvs.RESPONSIVE

25. Dude, WTF? :(^

26. SEQUENTIAL+SIMULTANEOUSUSE
using more than one device
using more than one device at the same time

27. 98% used more than one
device within 24 hours.
Source: Google

28. 90% browsed sequentially:
beginning a task on one device
and finishing on another.
Source: Google

29. 66% used more than one
device at the same time.
Source: Google

30. 66% used more than one
device at the same time.
81% if you also
include televisions.
Source: Google

31. 22% performed
complementary
activities.
For simultaneous users,
78% multi-tasked
Source: Google

32. MULTIPLEDEVICES&YOU

36. teehanlax.com: pixel density converter for handling images

37. PROTOTYPES

38. The primary purpose of a prototype
is to get to better, more useful work.
client educationbuy-in iterative building
early user testing visualizing content strategy

39. The primary purpose of a prototype
is to get to better, more useful work.
IT’S CRAP!

40. “All our decisions should start from
content out, not canvas in.”
--@Viljamis (Viljami Salminen)
Read this: Valjami Salminen’s blog

41. Ask your clients to focus on typography,
legibility, and real content in prototypes.

42. Styletil.es: style prototypes mStoner: our own in-browser version

43. Typecast.com: typography prototypes

44. Typecast.com: can also generate style guides

45. Seesparkbox.com: mobile-first content prototype
with an in-browser responsive style tile
+

46. Adobe Edge Reflow: import PSDs, edit/add media queries, and
export CSS to the editor of your choice

47. Foundation.zurb.com: responsive, front-end framework

48. pattern-lab.info: static site generator, pattern
starter kit, design and presentation system

49. TABLETS
The rise of the

50. Tablet traffic to the web surpassed
smartphone traffic in December 2012.
Source: Adobe

51. All countries saw tablet traffic double
(or more) in 2012.
Source: Adobe

52. Users spend 54% more time on tablets
than they do on smartphones.
Source: Adobe

53. Users view 70% more pages on tablets
than they do on smartphones.
Source: Adobe

54. Tablets: 14.6%
Smartphones: 65.1%
Desktops: 8.6%
Laptops: 11.6%
Predicted market share for Q4 2013
Source: IDC

55. “New rule: every desktop design
has to go finger-friendly.”
--Josh Clark (@globalmoxie)
Read this: Global Moxie blog

56. To build for the future, we need to make
our responsive designs more tablet-friendly.

57. Places primary navigation in easy range of fingers, on the sides or bottom.
Example: Google +

58. Adjust designs for height to accommodate the dual display nature of tablets.
Read this: Luke W’s blog

59. u
Example: Apple iPhone
Adjust designs for height to accommodate the dual display nature of tablets.

60. Use bigger touch target areas to accommodate finger / thumb input.
Example: Good.is
MIT research
showed the average
fingertip is
8 to 10 mm.
~7 to 9 mm
minimum
recommended
based on
manufacturer.

61. Consider side-swipe navigation where appropriate.
Example: Yale School of Management

62. Anchor content to the side of the browser (not just to the side of the body).
Example: Quartz

63. Bonus round: use transitional interfaces (carefully) to
augment the touch experience and add affordances.
Read this: Pasquale D’Silva on Medium

64. SKEUO
MOR
PHIC
FLAT
THEYAREBOTHTERRIBLE.

65. Talk about speed, not style.

66. Designing for speed

67. Responsive design requires different
layouts for different breakpoints.
webster.edu

68. Layout means more design and
development time per breakpoint...
webster.edu

69. ...and multiply the breakpoints times
the browsers / devices you’re testing for.
Baseline browsers we test:
• IE 8+
• Firefox 18+
• Chrome 24+
Devices for mobile / tablet testing:
• iPad 3
• iPhone 4s
• HTC DNA
• Kindle Fire 2
• Nexus 7
• Galaxy S II
• Droid Razr
• iPhone 5

70. Simpler design makes it easier to design
across layouts, devices, and browsers.

71. Page weight has a linear, negative impact
on conversions, page views, bounce
rate, and returning visitors.
Source: Web Performance Today

72. Tests at Amazon showed that every 100 ms
increase in load time decreased sales by 1%.
Source: Web Site Optimization

73. Speed touches nearly every measurable
metric of a web project.

74. That means speed is everyone’s problem.

75. What can you do?

76. 1. Learn how to check page
weight in your browser.

78. Reading the nuances of the inspector:
slideshare.net/dmolsenwvu
Check out his blog at dmolsen.com.

79. 2. Minimize the number of custom fonts
and external widgets per page.

80. 3. Include designers and developers who
understand web performance
from the beginning.

81. GOOD+FASTEXAMPLES

82. nd.edu 23 network requests / 333 KB mobile size / 2.8 MB desktop size

83. ct.edu 21 network requests / 410 KB mobile size / 420 KB desktop size

84. uvm.edu 38 network requests / 451 KB mobile size / 753 KB desktop size

85. Thanks to Erik Runyon,
Director of Web Communications at Notre Dame,
for the examples and data.
Check out his blog and Higher Education RWD Directory at weedygarden.net.

86. Further reading on web performance:
www.stevesouders.com
www.igvita.com
www.dmolsen.com

87. USABILITY

88. “If you aren’t talking to your users and letting
them have a say, you aren’t doing UX.”
--@TimothyWhalen

89. What is a minimum viable strategy for
postdesktop usability testing?

90. 1. If you can, always user test
your prototypes AND your alpha site.

91. 2. Perform critical path testing for each
breakpoint where layout changes.
mobile tablet desktop

92. 3. Test users on different devices to
confirm input types work intuitively—
a minimum is mouse & trackpad vs. touch.

93. 4. Always do usability tests specifically
for the mobile breakpoint.

94. Two things that need to be impossible
to miss at any mobile breakpoint:

95. Two things that need to be impossible
to miss at any mobile breakpoint:

96. 5. Test people on
their own devices.

97. Design for speed and simplicity.

98. @DougGapinski
mstoner.com
THANKS