• Save
Inaugural Shoptalk Auckland - Responsive Design
Upcoming SlideShare
Loading in...5
×
 

Inaugural Shoptalk Auckland - Responsive Design

on

  • 583 views

Responsive design presentation given at Inaugural ShopTalk Meetup in Auckland. 14th August 2013 by Justus Wilde.

Responsive design presentation given at Inaugural ShopTalk Meetup in Auckland. 14th August 2013 by Justus Wilde.

Statistics

Views

Total Views
583
Slideshare-icon Views on SlideShare
583
Embed Views
0

Actions

Likes
1
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • “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“
  • Devs & designers need to work much more closely togetherSet business/client expectations early
  • CONS-large image downloads-design limitations (i.e. more rearrangement)-different devices, varying objectives-cross browser compatibilities-image resize issues (sometimes resizing images can be problematic)

Inaugural Shoptalk Auckland - Responsive Design Inaugural Shoptalk Auckland - Responsive Design Presentation Transcript

  • © 2013. All rights reserved.
  • © 2013. All rights reserved. Mobile Utilisation 2
  • © 2013. All rights reserved. Quiz 3 Desktop Mobile Tablet April 2012 April 2013 21% mobile 37% mobile How much in July 2013?
  • © 2013. All rights reserved. Quiz 4 Desktop Mobile Tablet April 2012 April 2013 21% mobile 37% mobile How much in July 2013? 42%
  • © 2013. All rights reserved. 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
  • © 2013. All rights reserved. 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
  • © 2013. All rights reserved. Responsive Design: What you need to know
  • © 2013. All rights reserved. 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
  • © 2013. All rights reserved.9
  • © 2013. All rights reserved.10
  • © 2013. All rights reserved.11
  • © 2013. All rights reserved. Technically speaking
  • © 2013. All rights reserved. Media Queries 13 320 x 480 480 x 320 768 x 1024 1024 x 768 Anything larger
  • © 2013. All rights reserved. #2 Fluid Grids
  • © 2013. All rights reserved. #2 Fluid Grids
  • © 2013. All rights reserved.16
  • © 2013. All rights reserved. Broad Browser Support Source: http://caniuse.com/css-mediaqueries
  • © 2013. All rights reserved. Design Considerations
  • © 2013. All rights reserved. Device Agnostic 19 Photo Source: http://thecodezombie.co.uk/
  • © 2013. All rights reserved. Mobile First 20
  • © 2013. All rights reserved. Adopt a different approch 21 User Research Content Strategy Sketch Wireframe Visual Design Prototype Test Source: Ron Kattera
  • © 2013. All rights reserved. Content Inventory & Prioritisation 22 Source:http://www.slideshare.net/pkattera/design-process-for-responsive-web-design
  • © 2013. All rights reserved. Retina Images 23 Source: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
  • © 2013. All rights reserved.24
  • © 2013. All rights reserved. HTML5 Input Types 25 Source:http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
  • © 2013. All rights reserved. HTML5 Input Types 26 Source: http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/
  • © 2013. All rights reserved. Avoid Sliders 27
  • © 2013. All rights reserved. Use Price Range Dropdown 28
  • © 2013. All rights reserved. Swipe to rotate images 29
  • © 2013. All rights reserved. Navigation Considerations 30 Source: http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/
  • © 2013. All rights reserved. Designer meet Developer 31
  • © 2013. All rights reserved. What does it mean
  • © 2013. All rights reserved. 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
  • © 2013. All rights reserved. Results on case study 34 54% up 37% up ~7% up
  • © 2013. All rights reserved. Other Published Results 35
  • © 2013. All rights reserved.36
  • © 2013. All rights reserved.37
  • © 2013. All rights reserved.38
  • © 2013. All rights reserved.  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
  • © 2013. All rights reserved. Great Implementations 40 www.indochino.com www.suitsupply.com www.nixon.com www.burton.com
  • © 2013. All rights reserved. My Details Justus Wilde Strategy Director jw@amblique.com / @justuswilde
  • © 2013. All rights reserved. “Selling across the ditch & beyond” Wed 13th Nov 2013 Same venue & time RSVP on meetup.com/shoptalk- nz Next Meetup 42