Web design is not an interactive brochure anymore. Smart mobile devices have forever changed the way we think and interact with websites. Now you have to consider an array of things you didn’t have to worry about before, such as HiDPI graphics, UI/UX patterns, touch target sizes, gestures, and managing expectations. All the while not losing track of what’s important: Content. We’re going to discuss the influence of mobile on design, trends, and implementation methods, as well as how touch is changing our lives. As designers and developers, we can benefit from learning about how mobile is changing the way we interact with websites, and what that means for the future of UI.

1. How Mobile Design Is Shaping
The Web
SARA CANNON WP MONTREAL
The Future of UI

2. SARA CANNON
Co-founder / Creative Director At Range
sara-cannon.com @saracannon slideshare.net/saracannon

3. The Future

4. INTERNATIONAL DATA CORPORATION (IDC)
http://www.idc.com/getdoc.jsp?containerId=prUS23028711
The total number of
people using the web on
mobile devices is set to
surpass desktops by 2015.

5. Desktop Mobile
2007 20152009 20132011

6. The Mobile Web

7. The Mobile Web

8. The Web

9. ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf

10. Mobile Should
Never Be An
Afterthought

11. CONTENT
DESIGIN

12. Responsive
Web Design

16. Mobile First

17. Flexible Grids

18. Flexible Media

19. Adaptive Images

20. HiDPI

22. 163 DPI
153,600 PIXELS
480PX
320 PX
iPHONE 3GS -

23. 326 DPI
614,4OO PIXELS
96OPX
64O PX
iPHONE 4 +

24. 460,800
MORE PIXELS
iPHONE 4 +iPHONE 3GS -

25. 220 DPI
2,304,0OO
PIXELS
2880PX
1800 PX
MACBOOK PRO
15-INCH RETINA

26. image by Geoff Teehan

27. HiDPI First

29. Speed
AWESOME
V.S.

30. 2G Is The
New Dial-up

31. CONNECTIONSPEED
IMAGE SIZE

32. CONNECTIONSPEED
IMAGE SIZE

33. Design Styles
& Trends

34. Skeuomorphic

42. synth76.com

43. Flat Design

44. Hyperlink
Button

45. Clippy Calendar by
Ricardo Carlet

50. http://www.theverge.com/2013/4/22/4251610/windows-8-1-start-button

54. http://sachagreif.com/flat-pixels

55. SkeuoFlat

56. Eyedrop.me

59. Gestures

61. How Is It Held?
image via http://thetechblock.com/visual-language-designing-for-touch

63. http://maniacdev.com/2012/05/
open-source-library-for-easy-
clear-app-style-and-more-
folding-transitions-between-
any-uiviews/
http://
markpospesel.wordpress.com/
2012/05/10/anatomy-of-a-
folding-animation/

66. Motion As
Refinement

67. Medium.com/design-ux/926eb80d64e3
Pasquale D’Silva

71. App-Influenced
Web Design

73. Are All Websites
Web Apps?!

74. Are All Websites
Web Apps?!
No.

75. Are All Websites
Web Apps?!
No.

76. Navigation Patterns

80. Http://bradfrostweb.com/blog/web/
responsive-nav-patterns/
The Left Nav Flyout

81. Http://bradfrostweb.com/blog/web/
responsive-nav-patterns/
The Toggle

82. Http://bradfrostweb.com/blog/web/
responsive-nav-patterns/
The Select

83. ResponsiveNavigation.net
Erick Arbe

84. What Is The
Future?

85. Touch
Influenced &
Enabled

86. Motion As
Refinement

87. Attention To
Detail &
Subtlety

88. Merging Of
App & Web
Design

89. Our work is never over.“
- DAFT PUNK