�ݺ�ߣ

© 2013. All rights reserved.
Mobile Utilisation
2

Quiz
3
Desktop
Mobile
Tablet
April 2012
April 2013
21% mobile 37% mobile
How much in July 2013?

Quiz
4
Desktop
Mobile
Tablet
April 2012
April 2013
21% mobile 37% mobile
How much in July 2013?
42%

In July 2012 the Sportscraft website was
accessed by 104 unique mobile devices.
What was that number in July 2013?
a) 163 b) 298 c) 412
Quiz
5

In July 2012 a the Sportscraft website
was accessed by 104 unique mobile
devices.
What was that number in July 2013?
a) 163 b) 298 c) 412
Quiz
6

Responsive Design: What you need to know

What is Responsive Design?
“Sites that serve all devices on the same
set of URLs, with each URL serving the
same HTML to all devices and using just
CSS to change how the page is
rendered on the device“
Google

Technically speaking

Media Queries
13
320 x 480
480 x 320
768 x 1024
1024 x 768
Anything larger

#2 Fluid Grids

Broad Browser Support
Source: http://caniuse.com/css-mediaqueries

Design Considerations

Device Agnostic
19 Photo Source: http://thecodezombie.co.uk/

Mobile First
20

Adopt a different approch
21
User
Research
Content
Strategy
Sketch
Wireframe
Visual
Design
Prototype
Test
Source: Ron Kattera

Content Inventory & Prioritisation
22 Source:http://www.slideshare.net/pkattera/design-process-for-responsive-web-design

Retina Images
23 Source: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

HTML5 Input Types
25 Source:http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/

HTML5 Input Types
26 Source: http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

Avoid �ݺ�ߣrs
27

Use Price Range Dropdown
28

Swipe to rotate images
29

Navigation Considerations
30 Source: http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

Designer meet Developer
31

What does it mean

The Verdict
33
PROS
- one link
- one cart
- improved SEO
- one codebase
- control over font size
- consistent user experience
- integrated analytics
- it's not just about the device
CONS
-large image downloads
-design limitations
-cross browser compatibilities
-image resize issues

Results on case study
34
54% up
37% up
~7% up

Other Published Results
35

 http://alistapart.com/article/responsive-web-design
 http://mobilewebbestpractices.com/strategy/know-when-to-make-a-seperate-mobile-site/
 http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-
presidential-smackdown/
Resources
39

Great Implementations
40
www.indochino.com www.suitsupply.com
www.nixon.com www.burton.com

My Details
Justus Wilde
Strategy Director
jw@amblique.com / @justuswilde

“Selling across the ditch &
beyond”
Wed 13th Nov 2013
Same venue & time
RSVP on meetup.com/shoptalk-
nz
Next Meetup
42

�ݺ�ߣ

Inaugural Shoptalk Auckland - Responsive Design

More Related Content

Inaugural Shoptalk Auckland - Responsive Design

Editor's Notes