The document discusses designing webstores for multiple user devices. It notes that mobile usage is growing significantly and will surpass desktop usage by 2016. It emphasizes the importance of responsive design which automatically adapts content for different screen sizes rather than separate mobile sites. Common responsive layouts include fluid, column drop, layout shifting, and off-canvas designs. Considerations for responsive webstores include logical content flow, breakpoints based on content not devices, and top-down hierarchy of information.

1. DESIGNING
YOUR WEBSTORE
FOR MULTIPLE
USER DEVICES
PRESENTER
YVAN LAMOUREUX
PRINCIPAL & CREATIVE STRATEGIST
WHAT IT MEANS TO YOU

2. UNDERSTANDING
THE ROLE OF
MOBILE TODAY
T: 519 • 572 • 4434@YvanJLam

3. @YvanJLam
PRINT
We Mastered
Distribution of Content
T: 519 • 572 • 4434

4. @YvanJLam
IMAGE: An American girl listens to a radio
during the Great Depression.
RADIO
We Mastered
Instant Content to a
Vast Audience
T: 519 • 572 • 4434

5. @YvanJLam
IMAGE: Family watching television 1958
TELEVISION
We Mastered
Demonstration of Key
Features and Emotion
through Story
T: 519 • 572 • 4434

6. @YvanJLam
SO WHAT HAS
CHANGED?
T: 519 • 572 • 4434

7. @YvanJLam
IMAGE: The CERN datacenter with WWW
and Mail servers.
THE WEB
We Mastered the
Democratization of
Mass Media
T: 519 • 572 • 4434

8. @YvanJLam T: 519 • 572 • 4434

9. @YvanJLam
NEW MEDIA HAS BECOME
T: 519 • 572 • 4434

10. @YvanJLam
IMAGE: Bell on the telephone in New York (calling
Chicago) in 1892
SMARTPHONE
We Mastered
Messaging
T: 519 • 572 • 4434

11. @YvanJLam T: 519 • 572 • 4434

12. @YvanJLam T: 519 • 572 • 4434

13. CONSUMER USE OF
MOBILE DEVICES
T: 519 • 572 • 4434@YvanJLam

14. @YvanJLam T: 519 • 572 • 4434

15. @YvanJLam
80%
Source: www.emarketer.com
of the US population will
use a Mobile Phone by 2016
T: 519 • 572 • 4434

16. @YvanJLam
50%
Source: www.emarketer.com
of North America’s Population will
use/adopt tablet by 2016
T: 519 • 572 • 4434

17. @YvanJLam
Source: www.msdn.microsoft.com
T: 519 • 572 • 4434

18. @YvanJLam
CLICKED ON
OPENED
69%
56%
27%
41%
Mobile Phone PC
MOBILE OPPORTUNITY!
T: 519 • 572 • 4434
Source: www.compendium.com

19. @YvanJLam
92% Text Messaging
92% Taking Photos
84% Internet Browsing
76% E-Mailing
59% Social Media
55% Maps
Source: www.tatango.com
T: 519 • 572 • 4434

20. @YvanJLam
Mobile Phone:
$97.39
Tablet:
$96.11
PC:
$91.86
Source: www.returnpath.com
T: 519 • 572 • 4434

21. @YvanJLam T: 519 • 572 • 4434

22. NEW MARKETING
LANDSCAPE
T: 519 • 572 • 4434@YvanJLam

23. @YvanJLam
NEW MULTI SCREEN WORLD
Source: www.google.com
T: 519 • 572 • 4434

24. @YvanJLam
NEW MULTI SCREEN WORLD
Source: www.google.com
T: 519 • 572 • 4434

25. @YvanJLam T: 519 • 572 • 4434

26. @YvanJLam T: 519 • 572 • 4434

27. @YvanJLam T: 519 • 572 • 4434

28. HOW TO ADAPT
T: 519 • 572 • 4434@YvanJLam

29. @YvanJLam
POOR EXPERIENCE EXCELLENT
EXPERIENCE
RESPONSIVEAVERAGE WEBSITE
A NEW EXPERIENCE
T: 519 • 572 • 4434

30. @YvanJLam T: 519 • 572 • 4434

31. @YvanJLam
Size: Buttons should be at
least 44px
Placement: keep inks/buttons to
the center and/or left
Space: separate links to avoid
touching two links at once
Avoid: hovers & other interactive
features that carry “Flash”
Don’t Say: “Click Here” 43%
mobile users are tapping.
ENGAGING MOBILE FEATURES
T: 519 • 572 • 4434

32. @YvanJLam
MOBILE-AWARE (MULTI-SITE)
Simple improvement without
specialization of existing site
Design-only tactic
(GOOD)
MOBILE DESIGN: 2 APPROACHES
RESPONSIVE
Deliver a customized mobile
experience
Special Design + code
(IDEAL)
T: 519 • 572 • 4434

33. @YvanJLam
MOBILE AWARE (ADAPTIVE)
T: 519 • 572 • 4434

34. @YvanJLam
RESPONSIVE
T: 519 • 572 • 4434

35. @YvanJLam
RESPONSIVE: LIVE VIEW
T: 519 • 572 • 4434

36. BENEFITS OF
RESPONSIVE
T: 519 • 572 • 4434@YvanJLam

37. @YvanJLam
Mobile viewers have a higher
conversion rate and lower
bounce rate when using an
adaptive website.
T: 519 • 572 • 4434

38. @YvanJLam
No need to manage and
build multiple sites for
multiple devices means
less time and money spent
on development.
T: 519 • 572 • 4434

39. @YvanJLam
No need to build a costly
web app for iPhones, iPads,
Android, etc.
T: 519 • 572 • 4434

40. @YvanJLam
Better brand and
webstore experience
consistency.
T: 519 • 572 • 4434

41. @YvanJLam
Adaptability for other
devices down the road.
T: 519 • 572 • 4434

42. @YvanJLam
Less development means
less overhead, and more
cost savings.
T: 519 • 572 • 4434

43. COMMON
RESPONSIVE
LAYOUTS

44. @YvanJLam
1. Mostly Fluid
2. Column Drop
3. Layout Shifting
4. Tiny Tweaks
5. Off-Canvas
T: 519 • 572 • 4434

45. @YvanJLam
MOSTLY FLUID
T: 519 • 572 • 4434

46. @YvanJLam
COLUMN DROP
T: 519 • 572 • 4434

47. @YvanJLam
LAYOUT SHIFTING
T: 519 • 572 • 4434

48. @YvanJLam
TINY TWEAKS
T: 519 • 572 • 4434

49. @YvanJLam
OFF-CANVAS
T: 519 • 572 • 4434

50. CONSIDERATIONS
FOR YOUR
WEBSTORE SITE
T: 519 • 572 • 4434@YvanJLam

51. @YvanJLam
ENSURE THAT
CONTENT FLOWS
LOGICALLY
T: 519 • 572 • 4434

52. @YvanJLam
TREAT LAYOUT
AS AN
ENHANCEMENT
TO BUYING
HABITS
T: 519 • 572 • 4434

53. @YvanJLam
LET THE
CONTENT, NOT
THE DEVICE
DETERMINE
BREAKPOINTS
T: 519 • 572 • 4434

54. @YvanJLam
DON’T GO
OVERBOARD
T: 519 • 572 • 4434

55. @YvanJLam
TOP-DOWN
HIERARCHY OF
INFORMATION
T: 519 • 572 • 4434

56. @YvanJLam
LINKS TO
DEEPER DIVES
T: 519 • 572 • 4434

57. THE FUTURE
IS NOW,
CONDITIONAL
LOADING
T: 519 • 572 • 4434@YvanJLam

58. @YvanJLam
SERVE THEM WHAT THEY WANT
T: 519 • 572 • 4434

59. @YvanJLam
• It reduces the load on the content hosts.
• It reduces the load on the application servers.
• It speeds the delivery of requested resources
to end users.
• It reduces bandwidth usage between servers.
• It improves scalability for websites that create
or serve dynamically generated content.
CONDITIONAL LOADING NOT
ONLY HELPS PERFORMANCE
T: 519 • 572 • 4434

60. CONCLUSION
T: 519 • 572 • 4434@YvanJLam

61. WHAT IS NEXT?
T: 519 • 572 • 4434@YvanJLam

62. YVAN
LAMOUREUX
• Over 15 years of national and
international experience in Marketing,
Advertising, and Design for retail,
pharmaceuticals, food and beverage,
and industrial applications.
• Practical knowledge public relations,
web design, social media, brand
identity development, promotional
campaigns, integrated SEO, and
content marketing.
• Passion for New Media led him to
founding Crankworks Creative Inc.
www.crankworkscreative.com
@YvanJLam
http://ca.linkedin.com/in/
yvanlamoureux