Go Responsive with Magento

My talk from Magento Developers Paradise 2013 in Palma de Mallorca

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
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
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
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
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
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.
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
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?