Speed and Simplicity: Design and Usability for Multi-device Websites
-
Upload
doug-gapinski -
Category
Technology
-
view
108 -
download
2
description
Transcript of Speed and Simplicity: Design and Usability for Multi-device Websites
![Page 1: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/1.jpg)
by Doug
Gapinski
Speed &Simplicity
![Page 2: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/2.jpg)
chrome.com/racer
![Page 3: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/3.jpg)
![Page 4: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/4.jpg)
![Page 5: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/5.jpg)
@DougGapinski mstoner.com responsive.ly
ME
![Page 6: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/6.jpg)
SHARE#mstoner @DougGapinski
![Page 7: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/7.jpg)
mstonerblog.com
STEAL
![Page 8: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/8.jpg)
STEALmstonerblog.com
![Page 9: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/9.jpg)
Ubiquitous internet
Planning
Design
Tablets & Touch
Speed
Usability
![Page 10: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/10.jpg)
as coined by Mark Weiser of Xerox PARC
UBIQUITOUS COMPUTING
![Page 11: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/11.jpg)
![Page 12: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/12.jpg)
UBIQUITOUS COMPUTINGINTERNET
![Page 13: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/13.jpg)
61%39%
offline
online
How much of the world’s population
is online?
source: ITU
![Page 14: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/14.jpg)
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?
![Page 15: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/15.jpg)
0
750000000
1500000000
2250000000
3000000000
Americas Asia Pacific
Total mobile broadband subscriptions,2007 vs. 2013
268 MILLION
2.1 BILLION
in 2007
in 2013
source: ITU
![Page 16: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/16.jpg)
2020The year Google predicts the
entire world will be online.
source: CNN
![Page 17: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/17.jpg)
What are some of the realities of ubiquitous internet?
![Page 18: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/18.jpg)
SCREENS
![Page 19: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/19.jpg)
“The technology required for ubiquitous computing: cheap, low-power computers that
include equally convenient displays...”
--Mark Weiser of Xerox PARC
![Page 20: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/20.jpg)
Aakash Ubislate tablet$69 ($20 for students in India)
Archos 35 Carbon smartphone$120
Cheap devices and displays for browsing
![Page 21: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/21.jpg)
Lower quality displays that display limited information
Pebble smartwatch $150
Fitbit Zip fitness data collector$60
![Page 22: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/22.jpg)
In some objects, sensors + connectivity matter more than display
Fitbit Ariatransmits weight to app
Parrot Flower Powertransmits plant
data to app
![Page 23: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/23.jpg)
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
![Page 24: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/24.jpg)
1200 x 1920
800 x 1280
768 x 1280
600 x 1024
600 x 800
1536 x 2046
1200 x 1920
800 x 1280
768 x 1280
600 x 1024
600 x 800
1536 x 2046
6 basic screen sizes* for 22 of
the most popular tablets
Screensiz.es
![Page 25: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/25.jpg)
That’s only the tablets!
![Page 26: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/26.jpg)
SEQUENTIAL + SIMULTANEOUS USEusing more than one device
using more than one device at the same time
![Page 27: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/27.jpg)
98% used more than one device within 24 hours.
source: Google
![Page 28: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/28.jpg)
90% browsed sequentially: beginning a task on one device and finishing on another.
source: Google
![Page 29: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/29.jpg)
66% used more than one device at the same time.
source: Google
![Page 30: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/30.jpg)
66% used more than one device at the same time.
81% if you also include televisions.
source: Google
![Page 31: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/31.jpg)
22% performedcomplementary activities.
source: Google
For simultaneous users, 78% multi-tasked
![Page 32: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/32.jpg)
for different screen sizes
PLANNING
![Page 33: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/33.jpg)
![Page 34: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/34.jpg)
![Page 35: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/35.jpg)
![Page 36: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/36.jpg)
teehanlax.com: pixel density converter for handling images
![Page 37: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/37.jpg)
PROTOTYPES
![Page 38: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/38.jpg)
The primary purpose of a prototype is to get to better, more useful work.
REMEMBER!
![Page 39: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/39.jpg)
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
![Page 40: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/40.jpg)
The primary purpose of a prototype is to get to better, more useful work.IT’S CRAP!
![Page 41: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/41.jpg)
Ask your clients to focus on thereading experience and typography
as the most important design choice.
![Page 45: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/45.jpg)
Seesparkbox.com: mobile-first content prototype with an in-browser responsive style tile+
![Page 47: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/47.jpg)
Adobe Edge Reflow: import PSDs, edit/add media queries, and export CSS to the editor of your choice
JUNE 17Coming
![Page 49: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/49.jpg)
TABLETS
The rise of the
![Page 50: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/50.jpg)
Tablet traffic to the web surpassedsmartphone traffic in December 2012.
source: Adobe
![Page 51: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/51.jpg)
All countries saw tablet traffic double(or more) in 2012).
source: Adobe
![Page 52: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/52.jpg)
Users spend 54% more time on tabletsthan they do on smartphones.
source: Adobe
![Page 53: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/53.jpg)
Users view 70% more pages on tabletsthan they do on smartphones.
source: Adobe
![Page 54: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/54.jpg)
Tablets are predicted to outpace desktop and laptop combined sales around 2015.
source: Gartner
![Page 55: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/55.jpg)
“New rule: every desktop design has to gofinger-friendly.” --Josh Clark (@globalmoxie)
read this: Global Moxie blog
![Page 56: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/56.jpg)
To build for the future, we need to makeour responsive designs more tablet-friendly.
![Page 57: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/57.jpg)
Places primary navigation in easy range of fingers, on the sides or bottom.
Example: Google +
![Page 58: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/58.jpg)
Adjust designs for height to accommodate the dual display nature of tablets.
read this: Luke W’s blog
![Page 59: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/59.jpg)
u
Example: Apple iPhone
Adjust designs for height to accommodate the dual display nature of tablets.
![Page 60: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/60.jpg)
Use bigger touch target areas to accommodate finger / thumb input.
Example: Good.is
MIT researchshowed the average
fingertip is8 to 10 mm.
~7 to 9 mmminimum
recommendedbased on
manufacturer.
![Page 61: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/61.jpg)
Consider side-swipe navigation where appropriate.
Example: Yale School of Management
![Page 62: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/62.jpg)
Anchor content to the side of the browser (not just to the side of the body).
Example: Quartz
![Page 63: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/63.jpg)
Designing for speed
![Page 64: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/64.jpg)
SKEUOMORPHIC
FLAT
![Page 65: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/65.jpg)
Responsive design requires different layouts for different breakpoints.
webster.edu
![Page 66: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/66.jpg)
Layout means more design and development time per breakpoint...
webster.edu
![Page 67: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/67.jpg)
...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
![Page 68: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/68.jpg)
Simpler design makes it easier to design across layouts, devices, and browsers.
![Page 69: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/69.jpg)
Page weight has a linear, negative impact on conversions, page views, bounce
rate, and returning visitors.
Source: Web Performance Today
![Page 70: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/70.jpg)
Tests at Amazon showed that every 100 msincrease in load time decreased sales by 1%.
Source: Web Site Optimization
![Page 71: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/71.jpg)
Speed touches nearly every measurable metric of a web project.
![Page 72: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/72.jpg)
That means speed is everyone’s problem.
![Page 73: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/73.jpg)
Four things everyone on a web teamcan do to help with web performance.
![Page 74: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/74.jpg)
1. Learn how to check page weight in your browser.
![Page 75: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/75.jpg)
![Page 76: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/76.jpg)
2. Work to devise a solution the responsive images problem on the CMS level.
![Page 77: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/77.jpg)
3. Minimize the number of custom fonts and external widgets per page.
![Page 78: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/78.jpg)
4. Hire and talk to competent developers.
![Page 79: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/79.jpg)
GOOD + FAST EXAMPLES
![Page 80: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/80.jpg)
nd.edu 23 page requests / 333 KB mobile size / 2.8 MB desktop size
![Page 81: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/81.jpg)
ct.edu 21 page requests / 410 KB mobile size / 420 KB desktop size
![Page 82: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/82.jpg)
uvm.edu 38 page requests / 451 KB mobile size / 753 KB desktop size
![Page 83: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/83.jpg)
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.
![Page 84: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/84.jpg)
Further reading on web performance:www.stevesouders.com
www.igvita.comwww.dmolsen.com
![Page 85: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/85.jpg)
USABILITY
![Page 86: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/86.jpg)
“If you aren’t talking to your users and lettingthem have a say, you aren’t doing UX.
Keep the user at the heart of our work.”
--@TimothyWhalen
![Page 87: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/87.jpg)
What is a minimum viable strategy forpostdesktop usability testing?
![Page 88: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/88.jpg)
1. If you can, always user test your prototypes AND your alpha site.
![Page 89: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/89.jpg)
2. Perform critical path testing for eachbreakpoint where layout changes.
mobile tablet desktop
![Page 90: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/90.jpg)
3. Test users on different devices toconfirm input types work intuitively—
a minimum is mouse & trackpad vs. touch.
![Page 91: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/91.jpg)
4. Always do usability tests for the mobile breakpoint.
![Page 92: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/92.jpg)
Gotomeeting.com: make user the presenter, enable webcam, and record.
![Page 93: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/93.jpg)
Pros:Works remotely
Cons:Doesn’t
work for mobile
Hack: Ask your desktop users
to make the browser mobile-sized
This hack exposessome design flaws, butdoes not offer insight
about touch input.
![Page 94: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/94.jpg)
uxrecorder.com: make user the presenter, enable webcam, and record.
![Page 95: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/95.jpg)
Pros:Does mobile and
tablets great!
Cons:Does not work remotely
![Page 96: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/96.jpg)
Source: MailChimp
Hack-ish: Laptop hugging
to test mobile usersremotely
![Page 97: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/97.jpg)
1. User joins gotomeeting orother screen sharing software
via laptop.
2. User shares laptop camera.
3. User “reverse hugs” laptop, pointing laptop camera at
mobile device
![Page 98: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/98.jpg)
To embrace the complexity of the multi-deviceweb, design and test for speed and simplicity.
![Page 99: Speed and Simplicity: Design and Usability for Multi-device Websites](https://reader031.fdocuments.us/reader031/viewer/2022013100/54c748504a7959c27e8b4697/html5/thumbnails/99.jpg)
@DougGapinski mstoner.com responsive.ly
THANKS