Luke Wroblewski, LukeW, Warm Gun 2012

1Thursday, November 29, 12

MULTI-DEVICE DESIGN STRATEGY WARM GUN 2012 LUKE WROBLEWSKI 1Thursday, November 29, 12

4.3” Motorola Droid RAZR M 2Thursday, November 29, 12

4.3” Screen: 4.3" with 960 x 540 & 256 ppi Browser: Chrome for Android (Chrome 18) OS: Google Android 4.0 Motorola Droid RAZR M 2Thursday, November 29, 12

4.3” Motorola Droid RAZR M 2Thursday, November 29, 12

4.3” 5.5” Motorola Droid Samsung Galaxy RAZR M Note II 2Thursday, November 29, 12

4.3” 5.5” Screen: 5.5" with 720 x 1280 & 276 ppi Browser: Android Webkit OS: Google Android 4.1 (modiﬁed) Motorola Droid Samsung Galaxy RAZR M Note II 2Thursday, November 29, 12

4.3” 5.5” Motorola Droid Samsung Galaxy RAZR M Note II 2Thursday, November 29, 12

4.3” 5.5” 7.9” Motorola Droid Samsung Galaxy RAZR M Note II Apple iPad Mini 2Thursday, November 29, 12

4.3” 5.5” 7.9” Screen: 7.9" with 768 x 1024 pixels and 163 ppi Browser: Apple Safari 6 OS: iOS 6 Motorola Droid Samsung Galaxy RAZR M Note II Apple iPad Mini 2Thursday, November 29, 12

4.3” 5.5” 7.9” Motorola Droid Samsung Galaxy RAZR M Note II Apple iPad Mini 2Thursday, November 29, 12

4.3” 5.5” 7.9” 12.5 ” Motorola Droid Samsung Galaxy Apple iPad Mini Dell XPS 12 RAZR M Note II 2Thursday, November 29, 12

4.3” 5.5” 7.9” 12.5 ” Screen: 12.5" with 1920 x 1080 pixels Browser: Internet Explorer 10 OS: Microsoft Windows 8 RT Motorola Droid Samsung Galaxy Apple iPad Mini Dell XPS 12 RAZR M Note II 2Thursday, November 29, 12

4.3” 5.5” 7.9” 12.5 ” Motorola Droid Samsung Galaxy Apple iPad Mini Dell XPS 12 RAZR M Note II 2Thursday, November 29, 12

PC Desktop Internet Mobile Consumer 100M+ 1B+ 10B+ 1990 2000 2010 2020 Source: Morgan Stanley Research 3Thursday, November 29, 12

3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” 4Thursday, November 29, 12

SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” 4Thursday, November 29, 12

SMARTPHONE 5Thursday, November 29, 12

SMARTPHONE 3.5” iPhone 3GS 5Thursday, November 29, 12

SMARTPHONE 3.1” 3.5” Palm Pre iPhone 3GS 5Thursday, November 29, 12

SMARTPHONE 3.1” 3.5” 3.7” Palm Pre iPhone 3GS HTC Nexus One 5Thursday, November 29, 12

SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” 6Thursday, November 29, 12

TABLET SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” 6Thursday, November 29, 12

TABLET 7Thursday, November 29, 12

TABLET 9.7” Apple iPad 7Thursday, November 29, 12

IPAD Source: http://www.lukew.com/ff/entry.asp?1640 8Thursday, November 29, 12

IPAD 94% of tablet traffic May 2012 Source: http://www.lukew.com/ff/entry.asp?1640 8Thursday, November 29, 12

IPAD 94% of tablet traffic May 2012 98% of tablet traffic Sept 2012 Source: http://www.lukew.com/ff/entry.asp?1640 8Thursday, November 29, 12

IPAD 94% of tablet traffic May 2012 98% of tablet traffic Sept 2012 91% of tablet traffic on Web Source: http://www.lukew.com/ff/entry.asp?1640 8Thursday, November 29, 12

TABLET SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” 9Thursday, November 29, 12

TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” 9Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” 9Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” WEB SITE 9Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” MOBILE WEB SITE 9Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” MOBILE TABLET WEB SITE 10Thursday, November 29, 12

SMARTPHONE 3.5” iPhone 3GS 11Thursday, November 29, 12

SMARTPHONE 3.5” 4.0” iPhone 3GS HTC Windows Phone 8S 11Thursday, November 29, 12

SMARTPHONE 3.5” 4.0” 4.3” iPhone 3GS HTC Windows Motorola Droid Phone 8S RAZR M 11Thursday, November 29, 12

SMARTPHONE 3.5” 4.0” 4.3” 4.5” iPhone 3GS HTC Windows Motorola Droid Nokia Lumia 920 Phone 8S RAZR M 11Thursday, November 29, 12

SMARTPHONE 3.5” 4.0” 4.3” 4.5” 4.7” iPhone 3GS HTC Windows Motorola Droid Nokia Lumia 920 LG Nexus 4 Phone 8S RAZR M 11Thursday, November 29, 12

4.3” 4.5” 4.7” Motorola Droid Nokia Lumia 920 LG Nexus 4 RAZR M 12Thursday, November 29, 12

4.3” 4.5” 4.7” 5.3” Motorola Droid Nokia Lumia 920 LG Nexus 4 Samsung Galaxy Note RAZR M 12Thursday, November 29, 12

4.3” 4.5” 4.7” 5.3” 5.5” Motorola Droid Nokia Lumia 920 LG Nexus 4 Samsung Galaxy Note Samsung Galaxy Note II RAZR M 12Thursday, November 29, 12

MOBILE Source: http://www.lukew.com/ff/entry.asp?1640 13Thursday, November 29, 12

MOBILE Android 29% smartphones sold in last 3 months were over 4.5” Source: http://www.lukew.com/ff/entry.asp?1640 13Thursday, November 29, 12

MOBILE Android 29% smartphones sold in last 3 months were over 4.5” 5M iPhone5 (4”) sales in ﬁrst 24 hours Source: http://www.lukew.com/ff/entry.asp?1640 13Thursday, November 29, 12

TABLET 15Thursday, November 29, 12

TABLET 9.7” 10.1 ” Lenovo ThinkPad Tablet 2 Acer Iconia Tab W510 Dell Latitude 10 Dell XPS 10 Apple iPad Asus Vivo Tab RT 15Thursday, November 29, 12

TABLET 8.9” 9.7” Kindle Fire HD Apple iPad 16Thursday, November 29, 12

TABLET 7.9” 8.9” 9.7” Apple iPad Mini Kindle Fire HD Apple iPad 16Thursday, November 29, 12

TABLET 7.0” 7.9” 8.9” 9.7” Google Nexus 7 Apple iPad Mini Kindle Fire HD Apple iPad 16Thursday, November 29, 12

LAPTOP 18Thursday, November 29, 12

LAPTOP 11” Apple Macbook Air 18Thursday, November 29, 12

LAPTOP 11” 13” Apple Macbook Air Apple Macbook Air 18Thursday, November 29, 12

LAPTOP 11” 13” 15” Apple Macbook Air Apple Macbook Air Apple Macbook Pro 18Thursday, November 29, 12

13” 15” Apple Macbook Air Apple Macbook Pro 19Thursday, November 29, 12

13” 15” 17” Apple Macbook Air Apple Macbook Pro Apple Macbook Pro 19Thursday, November 29, 12

DESKTOP 21Thursday, November 29, 12

DESKTOP 17” Samsung Display 21Thursday, November 29, 12

DESKTOP 17” 19” Samsung Display Samsung Display 21Thursday, November 29, 12

17” 19” Samsung Display Samsung Display 22Thursday, November 29, 12

17” 19” 21” Samsung Display Samsung Display Samsung Display 22Thursday, November 29, 12

21.5 ” Apple iMac 23Thursday, November 29, 12

21.5 27.5 ” ” Apple iMac Apple iMac 23Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” 25Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” PALM 25Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” PALM LAP 25Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” PALM LAP DESK 25Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” PALM LAP SIZE CONTINUUM. DESK 25Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” PALM LAP DESK 26Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” PALM LAP DESK TOUCH/GESTURES 26Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” PALM LAP DESK TOUCH/GESTURES CURSOR/KEYBOARD 26Thursday, November 29, 12

TABLET SMARTPHONE 27Thursday, November 29, 12

TABLET SMARTPHONE 4.0” HTC Windows Phone 8S 27Thursday, November 29, 12

TABLET SMARTPHONE 4.0” 7.0” HTC Windows Phone 8S Google Nexus 7 27Thursday, November 29, 12

TABLET SMARTPHONE 4.0” 7.0” 9.7” HTC Windows Phone 8S Google Nexus 7 Apple iPad 27Thursday, November 29, 12

LAPTOP 29Thursday, November 29, 12

LAPTOP 11.6 ” Lenovo IdeaTab Lynx 29Thursday, November 29, 12

LAPTOP 11.6 12.5 ” ” Lenovo IdeaTab Lynx Lenovo ThinkPad Twist 29Thursday, November 29, 12

11.6 12.5 ” ” Lenovo IdeaTab Lynx Lenovo ThinkPad Twist 30Thursday, November 29, 12

11.6 12.5 13.3 ” ” ” Lenovo IdeaTab Lynx Lenovo ThinkPad Twist Lenovo IdeaPad Yoga 30Thursday, November 29, 12

12.5 ” Dell XPS 12 32Thursday, November 29, 12

11.6 12.5 13.3 ” ” ” Lenovo IdeaTab Lynx Lenovo ThinkPad Twist Lenovo IdeaPad Yoga 34Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” MOBILE TABLET WEB SITE Where do you draw the line? 35Thursday, November 29, 12

DESKTOP 20” Sony Tap 20 38Thursday, November 29, 12

DESKTOP 21.5 ” Apple iMac 42Thursday, November 29, 12

DESKTOP 21.5 27.5 ” ” Apple iMac Apple iMac 42Thursday, November 29, 12

Source: http://live.leapmotion.com/about.html 43Thursday, November 29, 12

Source: http://live.leapmotion.com/about.html 44Thursday, November 29, 12

SMARTPHONE 3.1” Palm Pre 47Thursday, November 29, 12

SMARTPHONE 3.1” 3.7” Palm Pre HTC Nexus One 47Thursday, November 29, 12

SMARTPHONE 3.1” 3.7” 4.0” Palm Pre HTC Nexus One Samsung Captivate 47Thursday, November 29, 12

3.7” 4.0” HTC Nexus One Samsung Captivate 48Thursday, November 29, 12

3.7” 4.0” 4.3” HTC Nexus One Samsung Captivate Motorola Droid Razr 48Thursday, November 29, 12

TABLET SMARTPHONE 51Thursday, November 29, 12

TABLET SMARTPHONE 4.0” Apple iPhone 5 51Thursday, November 29, 12

TABLET SMARTPHONE 4.0” 9.7” Apple iPhone 5 Apple iPad 51Thursday, November 29, 12

LAPTOP 9.7” Apple iPad 52Thursday, November 29, 12

LAPTOP 9.7” 15” Apple iPad Apple Macbook Pro Retina 52Thursday, November 29, 12

5-inch LG display with 440ppi and 1080p resolution 53Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” PALM LAP DESK TOUCH/GESTURES CURSOR/KEYBOARD HIGH-DPI 54Thursday, November 29, 12

MULTI-DEVICE DESIGN 1. Support a Continuum of Screens 2. Account for High Resolution 3. Optimize for Touch 4. Support Cursor & Keyboard 55Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” MOBILE TABLET WEB SITE Limited content/ 56Thursday, November 29, 12

DESKTOP TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” PALM LAP DESK TOUCH/GESTURES CURSOR/KEYBOARD HIGH-DPI 57Thursday, November 29, 12

DESKTOP DESIGN & BUILD MOBILE FIRST TABLET LAPTOP SMARTPHONE 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” PALM LAP DESK TOUCH/GESTURES CURSOR/KEYBOARD HIGH-DPI 57Thursday, November 29, 12

MULTI-DEVICE DESIGN 1. Work Mobile First 2. Account for High Resolution 3. Optimize for Touch 4. Support Cursor & Keyboard 5. Support a Continuum of Screens 58Thursday, November 29, 12

GOOD NEWS 59Thursday, November 29, 12

GOOD NEWS You only need one Web design: a multi-device design. 59Thursday, November 29, 12

BAD NEWS 60Thursday, November 29, 12

BAD NEWS It’s a new & different way of doing Web design. 60Thursday, November 29, 12

THANKS 61Thursday, November 29, 12

THANKS @LUKEW LUKEW.COM 61Thursday, November 29, 12

http://song.cvtest.com	273
http://www.iphone-entreprise.com	57
https://twitter.com	53
http://www.twylah.com	2
https://si0.twimg.com	1
http://localhost	1

Luke Wroblewski, LukeW, Warm Gun 2012

by 500 Startups on Nov 29, 2012

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 387

Statistics

Luke Wroblewski, LukeW, Warm Gun 2012 Presentation Transcript