Building Responsive Magento Themes as Frontend Engineers

Bf9f3f29049791136b9b815f59e1f09c?s=47 Meanbee
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


  1. 2.
  2. 3.
  3. 4.
  4. 5.
  5. 6.
  6. 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.
  7. 10.
  8. 11.

    Magento 1.9 • Infinite fallback is handy • Desktop first

    responsive theme • 10,000 lines of css to consider
  9. 15.

    Mobile First • A great exercise to consider content priorities

    • Starts with a solid base • Technically efficient
  10. 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
  11. 17.

    Mobile Global First • Minimum viable experience • Whether considering

    mobiles or IE 8. • Polyfill versus Polyfull
  12. 20.

    “What we really need to do to design is to

    look at the extremes. The middle will take care of itself.” - Dan Formosa
  13. 21.

    • Relative units • Fluid grid and content • Connection

    speed • Infinite inputs theory Accessibility
  14. 22.
  15. 25.
  16. 26.
  17. 28.

    OOJS • Class methods • Init, Reinit, Destroy • Responsive

    JS • matchMedia + modernizr • enquire.js, harvey.js • require.js
  18. 31.

    • Admission that practice cannot always match theory. • Adapt

    to user-agent to provide device experience. • Responsive is the foundation to build upon. RESS
  19. 32.
  20. 33.

    • Easy in Magento with theme exceptions • Examples •

    Smaller product collections • Quickly optimise images without <picture> RESS (in Magento)
  21. 35.

    • Fluid • File size • Resolution • Mime types

    • Art Direction Responsive Imagery
  22. 36.
  23. 38.

    You shoot yourself in the foot with a gun made

    with pieces from 300 other guns. PHP
  24. 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
  25. 40.

    You shoot yourself in the foot, but nobody can understand

    how you did it. Six months later, neither can you. Perl
  26. 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
  27. 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
  28. 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.
  29. 45.

    Engineers • Take responsibility • Be a Frontend Engineer •

    Duty to advise and direct client requirements
  30. 46.

    Pareto’s Law • Build 80% functionality with 20% of the

    code. • Consider the value of the rest. • Business needs versus code complexity.
  31. 47.

    Team Success • Challenge that requires the entire team. •

    UX, Visual Design, Backend, Frontend, Managers.
  32. 48.

    Independent Study • Always behind the curve. • Self-teaching is

    a requirement to lead the field. • Maintain strengths but invest in your weaknesses.
  33. 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.