We’ve entered the age of sequential and simultaneous browsing. According to Google, 90% of consumers now use multiple screens to accomplish tasks on the web. Tablets and mobile remain hot topics for sales, use, and design. In an age where most users are accessing sites via multiple devices, top companies are focusing on fast and clean delivery of information. This webinar focused on how new realities are changing web design, web design process, and usability standards. Session Outline • Ubiquitous computing, ubiquitous internet • Sequential and simultaneous browsing • The rise of the tablet • Flat design for a lumpy web • Speed matters • Usability strategies

1. by
Doug
Gapinski
Speed &
Simplicity

2. chrome.com/racer

5. @DougGapinski mstoner.com responsive.ly
ME

6. SHARE
#mstoner @DougGapinski

7. mstonerblog.com
STEAL

8. STEAL
mstonerblog.com

9. Ubiquitous internet
Planning
Design
Tablets & Touch
Speed
Usability

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
source: ITU
+28%
+45%
+55%
+82%
Americas
Asia-Pacific
Middle East
Africa
Where is the biggest growth
in mobile broadband?

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. What are some of the realities
of ubiquitous internet?

18. SCREENS

19. “The technology required for ubiquitous
computing: cheap, low-power computers that
include equally convenient displays...”
--Mark Weiser of Xerox PARC

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

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

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

23. 6 basic screen
sizes* for 22 of
the most popular
tablets
1200 x 1920
800 x 1280
768 x 1280
600 x 1024
600 x 800
1536 x 2046
Screensiz.es

24. 1200 x 1920
800 x 1280
768 x 1280
600 x 1024
600 x 800
1536 x 2046
1200x1920
800x1280
768x1280
600x1024
600x800
1536x2046
6 basic screen
sizes* for 22 of
the most popular
tablets
Screensiz.es

25. That’s only the tablets!

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.
source: Google
For simultaneous users,
78% multi-tasked

32. for different screen sizes
PLANNING

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.
REMEMBER!

39. 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

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

41. Ask your clients to focus on the
reading experience and typography
as the most important design choice.

42. styletil.es: style prototypes 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. uxpin.com: multi-device, in-browser prototypes

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

48. foundation.zurb.com: responsive, front-end framework

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 are predicted to outpace desktop
and laptop combined sales around 2015.
source: Gartner

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. Designing for speed

64. SKEUO
MOR
PHIC
FLAT

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

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

67. ...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

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

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

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

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

72. That means speed is everyone’s problem.

73. Four things everyone on a web team
can do to help with web performance.

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

76. 2. Work to devise a solution the responsive
images problem on the CMS level.

77. 3. Minimize the number of custom fonts
and external widgets per page.

78. 4. Hire and talk to competent developers.

79. GOOD+FASTEXAMPLES

80. nd.edu 23 page requests / 333 KB mobile size / 2.8 MB desktop size

81. ct.edu 21 page requests / 410 KB mobile size / 420 KB desktop size

82. uvm.edu 38 page requests / 451 KB mobile size / 753 KB desktop size

83. 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.

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

85. USABILITY

86. “If you aren’t talking to your users and letting
them have a say, you aren’t doing UX.
Keep the user at the heart of our work.”
--@TimothyWhalen

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

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

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

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

91. 4. Always do usability tests
for the mobile breakpoint.

92. Gotomeeting.com: make user the presenter, enable webcam, and record.

93. Pros:
Works remotely
Cons:
Doesn’t
work for mobile
Hack:
Ask your desktop users
to make the browser
mobile-sized
This hack exposes
some design flaws, but
does not offer insight
about touch input.

94. uxrecorder.com: make user the presenter, enable webcam, and record.

95. Pros:
Does mobile and
tablets great!
Cons:
Does not work remotely

96. Source: MailChimp
Hack-ish:
Laptop hugging
to test mobile users
remotely

97. 1. User joins gotomeeting or
other screen sharing software
via laptop.
2. User shares laptop camera.
3. User “reverse hugs” laptop,
pointing laptop camera at
mobile device

98. To embrace the complexity of the multi-device
web, design and test for speed and simplicity.

99. @DougGapinski mstoner.com responsive.ly
THANKS