Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Go Responsive with Magento

0c2d0824a7a800720ae5ef5d38c3bed6?s=47 Hrvoje Jurišić
September 17, 2013

Go Responsive with Magento

My talk from Magento Developers Paradise 2013 in Palma de Mallorca

0c2d0824a7a800720ae5ef5d38c3bed6?s=128

Hrvoje Jurišić

September 17, 2013
Tweet

More Decks by Hrvoje Jurišić

Other Decks in Design

Transcript

  1. Go Responsive with Magento

  2. Hrvoje Jurisic @hrvojejurisic

  3. Inchoo @inchoo www.inchoo.net

  4. WHY?

  5. Inchooers comic http://inchoo.net/tag/inchooers/

  6. “You don’t get to decide which platform or device your

    customers use to access your content: they do.” Karen McGrane @karenmcgrane
  7. None
  8. Photo by Brad Frost: http://goo.gl/3nMbkQ

  9. sheldon surprised

  10. people access the web from their mobile devices 1.2 billion

    Globally Source: Trinity Digital Marketing
  11. adults owns a smartphone 59% In USA Source: comScore

  12. of all internet traffic is mobile 15% Globally Source: KPCB

  13. smartphone users had a negative experience shopping on mobile. 88%

    Source: GetElastic
  14. users turned to competitor’s website after bad mobile experience 40%

    Source: Google
  15. of business don’t have a mobile optimized website or an

    app 45% Source: eConsultancy
  16. market share 20% Not one screen size has more than

    Source: Mobify
  17. The web is not fixed width

  18. WHAT should we do?

  19. Native app 1. Access to device hardware 2. Works offline

    3. Fast performance 4. Monetization 5. Personalization
  20. Native app 1. Works only on one platform 2. Higher

    maintenance costs 3. Requires user action 4. App store approval process
  21. Mobile site 1. Unique mobile experience 2. Easier and faster

    implementation
  22. Mobile site 1. One resolution 2. Separate URL 3. Maintenance

  23. Responsive site 1. Use same code and content 2. Device

    agnostic 3. Single URL 4. Future ready
  24. Responsive site 1. Higher initial development costs 2. Multiple design

    variations
  25. USERS DON'T CARE IF YOUR SITE IS RESPONSIVE

  26. USERS DON'T CARE IF YOUR SITE IS RESPONSIVE OR MOBILE...

  27. USERS DON'T CARE IF YOUR SITE IS RESPONSIVE OR MOBILE…

    OR DESKTOP
  28. Your content needs to be accessible from anywhere, anytime...

  29. WHAT is RWD?

  30. A List Apart

  31. Ethan Marcotte @beep

  32. Responsive web design means designing your website so that it

    responds to users environment based on screen size, platform or orientation.
  33. Website without CSS RESPONSIVE WEB DESIGN IS...

  34. Not mobile nor tablet nor desktop nor touch RESPONSIVE WEB

    DESIGN IS...
  35. “Responsive web design isn’t your site working on phones and

    tablets. It’ s about your site working everywhere.” Scott Kellum @ScottKellum
  36. minority report RESPONSIVE WEB DESIGN IS...

  37. Not “one size fits it all.” RESPONSIVE WEB DESIGN IS...

  38. http://www.bostonglobe.com

  39. http://www.microsoft.com

  40. http://skinnyties.com/

  41. http://www.digumz.com

  42. http://www.zeeandco.co.uk

  43. HOW?

  44. START WITH CONTENT http://blog.braintraffic.com

  45. Prepare your content to go anywhere.

  46. Content out, Mobile first design "Content precedes design. Design in

    the absence of content is not design, it's decoration."
  47. MOBILE FIRST

  48. • Embrace mobile constraints to focus • Prioritize what really

    matters • Use mobile capabilities to innovate http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  49. NEW WORKFLOW

  50. • Content Based Mockups • Out with the Photoshop •

    Move quickly into Browser • Develop a Design System http://vimeo.com/45915667 http://styletil.es/ http://medium.com/what-i-learned-today/270048a88c70
  51. We are still figuring it out.

  52. RWD TECHNIQUES

  53. Three Core Techniques 1. Fluid grid 2. Adaptive content 3.

    Media queries
  54. FLUID GRID

  55. Think in proportions, not pixels.

  56. .main { width: 1000px; margin: 0 auto; } .col-main {

    margin-left: 30px; width: 750px; float: left; } .col-left { float: left; width: 220px; } .main { width: 100% max-width: 1000px; margin: 0 auto; } .col-main { margin-left: 3%; width: 75%; float: left; } .col-left { float: left; width: 22%; }
  57. target / context = result

  58. target / context = result 750px / 1000px = 0.75

  59. target / context = result 750px / 1000px = 0.75

    0.75 = 75%
  60. ADAPTIVE CONTENT

  61. Once we have layout based on proportions, the content needs

    also to adapt.
  62. img { max-width: 100%; }

  63. MEDIA QUERIES

  64. When fluid layouts and adaptive content don’t work in harmony

    anymore, it is time to make a larger shift in layout.
  65. Media queries let you specify different CSS rules for different

    mediums.
  66. <link rel = "stylesheet" type = "text/css" media = "screen"

    href = "style.css" />
  67. <link rel = "stylesheet" type = "text/css" media = "screen

    and (min-width: 480px)" href = "style-480.css" />
  68. IN CSS @media screen and (max-width:800px) { ... }

  69. MAGENTO RESPONSIVE

  70. FLEXIBLE COMPONENTS 1. Layout 2. Navigation 3. Images 4. Forms

    5. Tables
  71. BEFORE WE START...

  72. VIEWPORT META TAG <meta name="viewport" content="width=device-width, initial-scale=1">

  73. BOX SIZING * { box-sizing:border-box; } http://css-tricks.com/box-sizing/

  74. box-sizing:content-box; box-sizing:border-box;

  75. .item { float: left; width: 25%; }

  76. .item { float: left; width: 25%; border: 1px solid #ccc;

    }
  77. LAYOUT

  78. header product image description images gallery footer add to cart

    form share buttons custom block header title product image images gallery share buttons title description add to cart
  79. Source Order is important

  80. • Mobile first! • Generic layouts don’t work • Use

    One Column page layout • Create your custom templates
  81. REARRANGING CONTENT navigation navigation

  82. REARRANGING CONTENT .wrap { display: table; } @media screen and

    (min-width: 600px) { .navigation { display: table-header-group; } }
  83. NAVIGATION

  84. Responsive navigation patterns 1. DO NOTHING APPROACH 2. FOOTER ANCHOR

    3. SELECT MENU 4. TOGGLE 5. OFF CANVAS http://bradfrost.github.io/this-is-responsive/patterns.html#navigation
  85. None
  86. None
  87. None
  88. None
  89. IMAGES

  90. img { max-width: 100%; }

  91. img { max-width: 100%; height: auto; }

  92. BACKGROUND IMAGES .logo { background: url(images/logo.png) no-repeat; } @media screen

    and (min-width: 400px) { .logo { background: url(logo-big.png) no-repeat; } }
  93. CONTENT IMAGES 1. Multiple image sources 2. Single image source

    aka server side solution 3. Native solution 4. One image to rule them all 5. SVG 6. Icon fonts
  94. 1. Multiple image sources - possible to serve different images

    for different devices - special markup is usually required :( <noscript> <img src="low.png" alt="Responsive Image"> </noscript> <img id="ri" src="loader.gif" data-src-1="low.png" data-src-2="high.png" alt="Responsive Image" /> https://github.com/ivanweiler/mri.js
  95. 1. Multiple image sources - possible to serve different images

    for different devices - special markup is usually required :( <script> if( window.matchMedia(‘(min-width: 800px)’).matches || window.matchMedia("(-webkit-device-pixel-ratio:2)"). matches){ document.getElementById(‘ir’).scr = document. getElementById(‘ir’).getAttribute(‘data-src-2’); } else { document.getElementById(‘ir’).scr = document. getElementById(‘ir’).getAttribute(‘data-src-1’); } </script> https://github.com/ivanweiler/mri.js
  96. 2. Single image source aka server side solution - markup

    stays the same - depends on server side configuration and code - impact on the server - problem to serve from static servers <img src="image.png" alt="Image" /> http://adaptive-images.com/
  97. 3. Native solution SRCSET ATTRIBUTE <img alt="The Breakfast Combo" src="banner.jpeg"

    srcset="banner-HD.jpeg 2x, banner-phone.jpeg 500w, banner-phone-HD.jpeg 500w 2x"> http://responsiveimages.org/ http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
  98. 3. Native solution SRCSET ATTRIBUTE <img alt="The Breakfast Combo" src="banner.jpeg"

    srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x"> webkit implementation <img src="low-res.jpg" srcset="high-res.jpg 2x"> www.webkit.org
  99. 3. Native solution <picture> ELEMENT <picture width="500" height="500"> <source media="(min-width:

    45em)" src="large.jpg"> <source media="(min-width: 18em)" src="med.jpg"> <source src="small.jpg"> <img src="small.jpg" alt=""> <p>Accessible text</p> </picture> http://github.com/scottjehl/picturefill http://picture.responsiveimages.org/
  100. 4. One image to rule them all • Design for

    suitable average • Create 1.5x image for all resolutions. • “Compressive images” http://filamentgroup.com/lab/rwd_img_compression/ http://dbushell.com
  101. 5. SVG • Use SVG where you can • Resolution

    independent images • Use Modernizr to detect if browser supports svg, and provide .png fallback http://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/
  102. 6. Icon fonts • Fonts are resolution independent • You

    can create your own icon font on http://icomoon.io/app/ • Icon fonts require additional markup, and JS for IE7 http://www.hongkiat.com/blog/webfont-icons/
  103. http://www.digumz.com

  104. FORMS

  105. WEB FORMS - inputs are pain on mobile - reduce

    number of required inputs - make your forms linear
  106. None
  107. WEB FORMS - HTML5 INPUT TYPES <input type="text" name="login">

  108. WEB FORMS - HTML5 INPUT TYPES <input type="email">

  109. WEB FORMS - HTML5 INPUT TYPES <input type="tel">

  110. WEB FORMS - HTML5 INPUT TYPES <input type="url">

  111. WEB FORMS - HTML5 INPUT TYPES <input type="number"> <input type="text"

    pattern="[0-9]*">
  112. TABLES

  113. None
  114. None
  115. RESPONSIVE TABLES - the fancy way @media only screen and

    (max-width: 760px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; }
  116. RESPONSIVE TABLES - the fancy way td:before { /* Now

    like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Label the data */ td:nth-of-type(1):before { content: "First Name"; } td:nth-of-type(2):before { content: "Last Name"; } ..... ..... }
  117. RESPONSIVE TABLES - the usual way <div class="table-wrapper"> <table> <tr>

    <td>Property</td> <td>Value</td> </tr> </table> </div> .table-wrapper { overflow: auto; } table { min-width: 100%; /* DON’T set width: 100% */ }
  118. PERFORMANCE

  119. 320 x 480 px != at a street corner in

    a hurry
  120. 1920 x 1200 px != at the office or at

    home
  121. DON’T ASSUME

  122. DON’T ASSUME OPTIMIZE!

  123. The top eCommerce sites in the world are 22% slower

    than they were last year. http://www.yottaa.com
  124. AUGUST 2013 AVERAGE WEB PAGE WEIGHTS 1,5MB http://httparchive.org

  125. None
  126. None
  127. None
  128. 80-90% of the end-user response time is spent on the

    frontend. Start there. http://www.stevesouders.com Steve Sounders @sounders
  129. OPTIMIZING RWD TIPS & TRICKS http://developer.yahoo.com/ http://www.sitepoint.com/

  130. 1. Reduce http requests - use css sprites - use

    icon fonts - merge javascript - merge css
  131. 2. Gzip Components - serve compressed files - up to

    70% smaller
  132. 3. Minify Javascript and CSS - removing comments and white

    space - smaller files - additional 5% reduce on gzip-ed files
  133. 4. Optimize Images - use right format - optimize compression

    - use responsive images
  134. 5. Javascript at the bottom - JS blocks downloads -

    put JS before </body> tag
  135. 6. Async load Javascript - JS blocks downloads - Load

    it asynchronous <script async src="resource.js"></script>
  136. 7. CSS at the top - CSS blocks rendering -

    render page progressively - load it early. in the <head>
  137. 8. Use Content Delivery Network - Deploys content across multiple

    servers - servers distributed across multiple locations - closer to user, faster delivery
  138. 9. Use Multiple Domains for Static Assets - Maximize parallel

    download - Beware DNS lookup
  139. 10. Use DNS pre-fetching - 20-120 ms for DNS to

    lookup the IP address - No download until lookup is completed <link href="//my.domain.com" rel="dns-prefetch" />
  140. 11. Use Cookie-less domains for static - prevent sending cookies

    with static content
  141. 12. Use conditional loading - load assets only when you

    need them CSS: @media all and (min-width: 600px) { body:after { content: 'desktop'; display: none; } } JS: var size = window.getComputedStyle(document.body,':after'). getPropertyValue('content'); if (size=='desktop') { //load desktop stuff. }
  142. 13. Use far future header expires - cache files on

    client side - no request is made - problems with file updates <link rel="stylesheet" href="style.css?v2323" type="text/css" />
  143. Illusion of speed != actual speed

  144. BACK TO REALITY

  145. Zee&Co http://www.zeeandco.co.uk

  146. Independent retailer for the latest men's and women's designer clothing,

    shoes and accessories.
  147. None
  148. None
  149. Numbers after rewamp 35% - transactions 48% - revenue 52%

    - conversion rate
  150. Numbers after rewamp 267% - mobile traffic 265% - mobile

    revenue 178% - mobile conversion rate
  151. None
  152. WHAT’S NEXT?

  153. Prepare to be deprecated.

  154. There are many problems left to solve.

  155. This stuff is hard. Help each other. Talk about it.

  156. Experiment. Learn. Share.

  157. THANK YOU

  158. QUESTIONS?