DESIGNING YOUR WEBSTORE FOR MULTIPLE USER DEVICES

PRESENTER

YVAN LAMOUREUX PRINCIPAL & CREATIVE STRATEGIST

WHAT IT MEANS TO YOU

UNDERSTANDING THE ROLE OF

MOBILE TODAY

T: 519 • 572 • 4434 @YvanJLam

@YvanJLam

PRINT

We Mastered Distribution of Content

T: 519 • 572 • 4434

@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

@YvanJLam

IMAGE: Family watching television 1958 TELEVISION

We Mastered Demonstration of Key Features and Emotion

through Story

T: 519 • 572 • 4434

@YvanJLam

SO WHAT HAS CHANGED?

T: 519 • 572 • 4434

@YvanJLam

IMAGE: The CERN datacenter with WWW and Mail servers.

THE WEB

We Mastered the Democratization of

Mass Media

T: 519 • 572 • 4434

@YvanJLam T: 519 • 572 • 4434

@YvanJLam

NEW MEDIA HAS BECOME

T: 519 • 572 • 4434

@YvanJLam

IMAGE: Bell on the telephone in New York (calling Chicago) in 1892

SMARTPHONE

We Mastered Messaging

T: 519 • 572 • 4434

@YvanJLam T: 519 • 572 • 4434

@YvanJLam T: 519 • 572 • 4434

CONSUMER USE OF MOBILE DEVICES

T: 519 • 572 • 4434 @YvanJLam

@YvanJLam T: 519 • 572 • 4434

@YvanJLam

80%

Source: www.emarketer.com

of the US population will use a Mobile Phone by 2016

T: 519 • 572 • 4434

@YvanJLam

50% Source: www.emarketer.com

of North America’s Population will use/adopt tablet by 2016

T: 519 • 572 • 4434

@YvanJLam

Source: www.msdn.microsoft.com

T: 519 • 572 • 4434

@YvanJLam

CLICKED ON

OPENED

69%

56%

27%

41%

Mobile Phone PC

MOBILE OPPORTUNITY!

T: 519 • 572 • 4434

Source: www.compendium.com

@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

@YvanJLam

Mobile Phone: $97.39 Tablet: $96.11 PC: $91.86

Source: www.returnpath.com

T: 519 • 572 • 4434

@YvanJLam T: 519 • 572 • 4434

NEW MARKETING LANDSCAPE

T: 519 • 572 • 4434 @YvanJLam

@YvanJLam

NEW MULTI SCREEN WORLD

Source: www.google.com

T: 519 • 572 • 4434

@YvanJLam

NEW MULTI SCREEN WORLD

Source: www.google.com

T: 519 • 572 • 4434

@YvanJLam T: 519 • 572 • 4434

@YvanJLam T: 519 • 572 • 4434

@YvanJLam T: 519 • 572 • 4434

HOW TO ADAPT

T: 519 • 572 • 4434 @YvanJLam

@YvanJLam

POOR EXPERIENCE EXCELLENT EXPERIENCE

RESPONSIVE AVERAGE WEBSITE

A NEW EXPERIENCE

T: 519 • 572 • 4434

@YvanJLam T: 519 • 572 • 4434

@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

@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

@YvanJLam

MOBILE AWARE (ADAPTIVE)

T: 519 • 572 • 4434

@YvanJLam

RESPONSIVE

T: 519 • 572 • 4434

@YvanJLam

RESPONSIVE: LIVE VIEW

T: 519 • 572 • 4434

BENEFITS OF RESPONSIVE

T: 519 • 572 • 4434 @YvanJLam

@YvanJLam

Mobile viewers have a higher conversion rate and lower bounce rate when using an adaptive website.

T: 519 • 572 • 4434

@YvanJLam

No need to manage and build multiple sites for multiple devices means less time and money spent on development.

T: 519 • 572 • 4434

@YvanJLam

No need to build a costly web app for iPhones, iPads, Android, etc.

T: 519 • 572 • 4434

@YvanJLam

Better brand and webstore experience consistency.

T: 519 • 572 • 4434

@YvanJLam

Adaptability for other devices down the road.

T: 519 • 572 • 4434

@YvanJLam

Less development means less overhead, and more cost savings.

T: 519 • 572 • 4434

COMMON RESPONSIVE

LAYOUTS

@YvanJLam

1.  Mostly Fluid 2.  Column Drop 3.  Layout Shifting 4.  Tiny Tweaks 5.  Off-Canvas

T: 519 • 572 • 4434

@YvanJLam

MOSTLY FLUID

T: 519 • 572 • 4434

@YvanJLam

COLUMN DROP

T: 519 • 572 • 4434

@YvanJLam

LAYOUT SHIFTING

T: 519 • 572 • 4434

@YvanJLam

TINY TWEAKS

T: 519 • 572 • 4434

@YvanJLam

OFF-CANVAS

T: 519 • 572 • 4434

CONSIDERATIONS FOR YOUR

WEBSTORE SITE

T: 519 • 572 • 4434 @YvanJLam

@YvanJLam

ENSURE THAT CONTENT FLOWS

LOGICALLY

T: 519 • 572 • 4434

@YvanJLam

TREAT LAYOUT AS AN

ENHANCEMENT TO BUYING

HABITS

T: 519 • 572 • 4434

@YvanJLam

LET THE CONTENT, NOT

THE DEVICE DETERMINE

BREAKPOINTS

T: 519 • 572 • 4434

@YvanJLam

DON’T GO OVERBOARD

T: 519 • 572 • 4434

@YvanJLam

TOP-DOWN HIERARCHY OF INFORMATION

T: 519 • 572 • 4434

@YvanJLam

LINKS TO DEEPER DIVES

T: 519 • 572 • 4434

THE FUTURE IS NOW,

CONDITIONAL LOADING

T: 519 • 572 • 4434 @YvanJLam

@YvanJLam

SERVE THEM WHAT THEY WANT

T: 519 • 572 • 4434

@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

CONCLUSION

T: 519 • 572 • 4434 @YvanJLam

WHAT IS NEXT?

T: 519 • 572 • 4434 @YvanJLam

YV

AN

L

AM

OU

RE

UX

• 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