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

Building Responsive Magento Themes as Frontend Engineers

November 01, 2014

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.


November 01, 2014

More Decks by Meanbee

Other Decks in Technology


  1. Building Responsive Themes as Frontend Engineers Tom Robertshaw @meanbee @bobbyshaw

  2. None
  3. None
  4. None
  5. None
  6. None
  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
  10. None
  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 •

  13. JS • Overladen with JS • Development time versus load

    time • Be conservative
  14. Free lunch Speed of Development Cost of Build Quality of

  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
  22. None
  23. Bringing modularity to your themes

  24. OOCSS + OOJS

  25. None
  26. None
  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
  32. None
  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
  36. None
  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/