Designing Your Webstore for Multiple User Devices
62
DESIGNING YOUR WEBSTORE FOR MULTIPLE USER DEVICES PRESENTER YVAN LAMOUREUX PRINCIPAL & CREATIVE STRATEGIST WHAT IT MEANS TO YOU
-
Upload
crankworks-creative-inc -
Category
Design
-
view
201 -
download
4
description
Responsive site design is here to stay. The debate over whether online retailers need a mobile site, one that adapts to various devices - computers, tablets and smartphones - is over. Responsive site design means that you don't have to separate your site into various versions specific to any one computer, tablet, or smartphone. In the past, multi-site designs resulted in twice curation and a higher likelihood of broken links, errors, and/or omissions. As the user switches from their laptop to iPad, the website automatically switches to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferred experience and device. Responsive sites eliminate the need for a different design and development phase for each new gadget. Regardless of what device a customer is using to access your site, they'll see all of the content you have to offer. Customers will no longer experience “partial-content” on mobile versions of your site. They will immediately experience readable content and you’ll immediately experience reduced bounce rates due to the supplied immediacy.
Transcript of Designing Your Webstore for Multiple User Devices
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
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
