Responsive Design - What you need


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Go morning everyone.My name is Justus Wilde. I’m the strategy director at Amblique, we are an eCommerce consultancy and have been working with the Apparel Group in the past few months to relaunchSportscraft and SABA webstore including an initial responsive design implementation. I’m going to talk about our expierence today and provide an introduction to responsive design and some key concepts that will hopefully help you with your next project.
  • So first some background on Amblique and myself. I have been involved in the ecommerce spcae since 98 and started a web business which became Amblique in 99. In the past 14 years we have worked with many leading retailers and brand owners. Amblique offers strategic and technical services. From an ecommerce technology perspective we are partnered with Demandware, a cloud based enterprise platform used by many leading brands/retailers gloablly which is only just starting to get adopted here. We used this platform for the Apparel Group.Our key market proposition is to help SELL more.
  • “Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices”
  • “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“
  • Or the simple version. Responsive design is about creating one website that can be easily access by your customers on any device.
  • This was one of the key objectives for the Apparel Group Now a little about the Apparel Group project. As I mentioned we rolled out the Demandware platform with the Apparel Group and launched both Sportscraft and Saba. The objective for us was to create a consistent mobile experience.
  • And this is what it looks like for SABA
  • Technically speaking there are 3 key concepts you need to be aware of.Media queriesFluid GridsFlexible images
  • Modern browsers are able to dynamically detect the users device paramters such as screen widht, device size etc. Probably the most important one here is the screen width.You need to consider device orientation when you look at mobile as that introduces additional widhts
  • Now the second part are flexible grids. Given the device/screen width differs between smartphone, tablet and desktops. Physically not all the content will fit on the screen if you want the retain legible font size and images. Grids can be configured to wrap or hide components.
  • Here is another example.Responsive design is not just about devices it is also about different screen sizes. You can see here that the first two screens here showcase different resolutions.
  • The third party. Flexible images. As you can see here the hero image is adapted to the smaller screen.You need to be aware of any content within images such as the text here. This is often a marketing education process.In one of the earlier sessions there was a question about images sizes. It has often be a criticism of responsive design that all devices much download the biggest images and then scale down. There are frameworks such as respond.js that will do the opposite and load the smallest image first and then scale up. This is made much easier if you have a digital asset management solution that produces scaled images and then delivers this via a CDN.
  • So we mentioned 3 key technical requirements to enable responsive design. Let’s have a look at the browser support.As you can see there is now very broad support for responsive design. Even internet explorer which is usually our biggest problem has supported it for the past 2 versions.
  • OK so we have looked at the technical implications which are fairly straight forward so let’s look at how this impacts site design and usabiliy
  • The fist thing to consider is that there is a plephora of devices. Targeting just a standard smartphone and desktop to serve the majority is no longer good enough. Today that will still service the majority of users but tomorrow that could be a different story.To future proof your site you should take a device agnostic approch to design. A design that works for any resolution within a certain range.
  • The process needs to be agile and focused on content. Content is more important than ever in the quation here as on a smaller device you will have less room for content so you need to think about what is essential.
  • If you are designing a brand new site you should consider taking a bottom up a approach and designing the mobile site first t
  • As I mentioned before content is very important so as part of producing wireframes I would recommend doing a content inventory and prioritising how the content will be displayed on the pages. At this point you can also delete some items.
  • From a usability perspective there are a few tweaks you can deliver with responsive design. You can set HTML input types in your CSS which will automatically change the keyword on touch devices and switch from letters to numbers for phone fields etc.
  • Now that we have retina display this is another opportunity where we can create a rich experience.Pinch & zoom feature is enhanced by this.
  • Devs & designers need to work much more closely togetherSet business/client expectations earlyadham-dannaway
  • 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)
  • 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)
  • 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)
  • Responsive Design - What you need

    1. 1. © 2013. All rights reserved.Responsive Design: What you need to knowJustus WildeStrategy Director, / @justuswilde
    2. 2. © 2013. All rights reserved.2• eCommerce consultancy• Est 1999 ~60 team• Demandware partner• Proposition: Sell More
    3. 3. © 2013. All rights reserved.What is Responsive Design?“Responsive web design (RWD) is aweb design approach aimed at craftingsites to provide an optimal viewingexperience—easy reading andnavigation with a minimum of resizing,panning, and scrolling—across a widerange of devices”Wikipedia
    4. 4. © 2013. All rights reserved.What is Responsive Design?“Sites that serve all devices on the sameset of URLs, with each URL serving thesame HTML to all devices and using justCSS to change how the page isrendered on the device“Google
    5. 5. © 2013. All rights reserved.5
    6. 6. © 2013. All rights reserved.6
    7. 7. © 2013. All rights reserved.7
    8. 8. © 2013. All rights reserved.Technically speaking
    9. 9. © 2013. All rights reserved.#1 Media Queries9320 x 480480 x 320768 x 10241024 x 768Anything larger
    10. 10. © 2013. All rights reserved.#2 Fluid Grids
    11. 11. © 2013. All rights reserved.#2 Fluid GridsSource:
    12. 12. © 2013. All rights reserved.12
    13. 13. © 2013. All rights reserved.Broad Browser SupportSource:
    14. 14. © 2013. All rights reserved.Design & Usability Considerations
    15. 15. © 2013. All rights reserved.Device Agnostic15 Photo Source:
    16. 16. © 2013. All rights reserved.Adopt a Agile Approch16UserResearchContentStrategySketchWireframeVisualDesignPrototypeTestSource: Ron Kattera
    17. 17. © 2013. All rights reserved.Mobile First17
    18. 18. © 2013. All rights reserved.Content Inventory & Prioritisation18 Source:
    19. 19. © 2013. All rights reserved.HTML5 Input Types19 Source:
    20. 20. © 2013. All rights reserved.Retina Images20 Source:
    21. 21. © 2013. All rights reserved.21
    22. 22. © 2013. All rights reserved.Avoid Sliders22
    23. 23. © 2013. All rights reserved.Use Price Range Dropdown23
    24. 24. © 2013. All rights reserved.Swipe to Rotate Images24
    25. 25. © 2013. All rights reserved.Designer meet Developer25 Photo Source:
    26. 26. © 2013. All rights reserved.Learning: Frameworks Save Time!26Twitter Bootstrap saved38%
    27. 27. © 2013. All rights reserved.What does it mean
    28. 28. © 2013. All rights reserved.The Verdict28PROS- one link- one cart- improved SEO- one codebase- control over font size- consistent user experience- integrated analytics- its not just about the deviceCONS-large image downloads-design limitations-cross browser compatibilities-image resize issues
    29. 29. © 2013. All rights reserved.Early Results – Conversion Rates29134% up165% up165% up195% upCompared to previous m. site
    30. 30. © 2013. All rights reserved.Other Published Case Studies30Revenue from all devices increased by 42.4%.The conversion rate improved by 13.6%.The conversion rate for iPhone increased by 71.9%.Source:
    31. 31. © 2013. All rights reserved.31Photo Source:
    32. 32. © 2013. All rights reserved.32Photo Source:
    33. 33. © 2013. All rights reserved.33Photo Source:
    34. 34. © 2013. All rights reserved.
    35. 35. © 2013. All rights reserved.Great
    36. 36. © 2013. All rights reserved.15% Off @ code “AMBLIQUE” during checkout (April 2013)
    37. 37. © 2013. All rights reserved.Thank You!Justus WildeStrategy / @justuswilde