Building Responsive Magento Themes as Frontend Engineers

It’s easy to build a responsive theme but the best Magento themes consider more than just device size. In a similar manner to backend development, frontend development requires considerable effort to build maintainable, performant and documented code as part of a multi-faceted team. This presentation discusses the many responsibilities of a frontend engineer. We will cover responsive design, user experience, accessibility, client communication, keeping up to date and tools.

Transcript

1. Building Responsive Themes as Frontend Engineers Tom Robertshaw @meanbee @bobbyshaw Meanbee
7. 16 fold growth in responsive ecommerce sites
8. One Web • Responsive Design is a won debate • We’re now in the age of the One Web. • The same information and services are available for all devices.
9. Our Options • Purpose-built • Integrating with responsive framework • Magento 1.9 theme
11. Magento 1.9 • Infinite fallback is handy • Desktop first responsive theme • 10,000 lines of css to consider
12. CSS Frameworks • Overladen with CSS • Hamper upgradability • Sub-optimal
13. JS • Overladen with JS • Development time versus load time • Be conservative
14. Free lunch Speed of Development Cost of Build Quality of Code
15. Mobile First • A great exercise to consider content priorities • Starts with a solid base • Technically efficient
16. Mobile First (in Magento) • Core JS dependencies • Theme JS can still take this approach • Will result in better customer experience across the board. • Perceived Speed
17. Mobile Global First • Minimum viable experience • Whether considering mobiles or IE 8. • Polyfill versus Polyfull
18. Accessibility More than just screen readers
19. “Adaptability is accessibility” - John Allsopp
20. “What we really need to do to design is to look at the extremes. The middle will take care of itself.” - Dan Formosa
21. • Relative units • Fluid grid and content • Connection speed • Infinite inputs theory Accessibility
23. Bringing modularity to your themes
24. OOCSS + OOJS
27. Results of Modularity • DRY • Reusable • Scalable • Familiar for developers
28. OOJS • Class methods • Init, Reinit, Destroy • Responsive JS • matchMedia + modernizr • enquire.js, harvey.js • require.js
29. The future is web components http://webcomponents.org
30. RESS Responsive with Server-side Optimisations
31. • Admission that practice cannot always match theory. • Adapt to user-agent to provide device experience. • Responsive is the foundation to build upon. RESS
33. • Easy in Magento with theme exceptions • Examples • Smaller product collections • Quickly optimise images without <picture> RESS (in Magento)
34. 5 Success Criteria for Responsive Imagery
35. • Fluid • File size • Resolution • Mime types • Art Direction Responsive Imagery
37. Choosing Your Tools
38. You shoot yourself in the foot with a gun made with pieces from 300 other guns. PHP
39. You’ve perfected a robust, rich user experience for shooting yourself in the foot. You then find that bullets are disabled on your gun. JavaScript
40. You shoot yourself in the foot, but nobody can understand how you did it. Six months later, neither can you. Perl
41. You locate the Gun class, but discover that the Bullet class is abstract, so you extend it and write the missing part of the implementation. Then you implement the ShootAble interface for your foot, and recompile the Foot class. The interface lets the bullet call the doDamage method on the Foot , so the Foot can damage itself in the most effective way. Now you run the program, and call the doShoot method on the instance of the Gun class. First the Gun creates an instance of Bullet, which calls the doFire method on the Gun. The Gun calls the hit(Bullet) method on the Foot, and the instance of Bullet is passed to the Foot . But this causes an IllegalHitByBullet exception to be thrown, and you die. Java
42. You don’t need to shoot yourself in the foot. You have 15 other Magento Connect extension developers to shoot it for you. But you don’t have any control over what and how many bullets they use so they’ve probably taken off half your leg in the process. Magento
43. Choosing Tools • Always new tools available. • Key is to understand their principles. • Using a tool aligns yourself with their philosophy. • Make informed, conscious decisions.
44. Emergent Properties • Speed • Maintainability • Extensibility
45. Engineers • Take responsibility • Be a Frontend Engineer • Duty to advise and direct client requirements
46. Pareto’s Law • Build 80% functionality with 20% of the code. • Consider the value of the rest. • Business needs versus code complexity.
47. Team Success • Challenge that requires the entire team. • UX, Visual Design, Backend, Frontend, Managers.
48. Independent Study • Always behind the curve. • Self-teaching is a requirement to lead the field. • Maintain strengths but invest in your weaknesses.
49. Our Mission To provide the best customer experiences that provide value to the client through independent study, responsible decision making and building on solid foundations.
50. Sound good? We’re hiring PHP & Frontend Developers to grow with us.
51. Sources http://www.lukew.com/ff/entry.asp?1732 http://alistapart.com/article/dao/ http://liquidapsive.com/ http://aneventapart.com/event/san-diego-2014 http://www.lukew.com/ff/entry.asp?1875 http://www.fullduplex.org/humor/2006/10/how-to-shoot-yourself-in-the-foot-in-any- programming-language/