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
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. 16 fold growth in
   responsive
   ecommerce sites
   

   View Slide

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.
   

   View Slide

9. Our Options
   • Purpose-built
   • Integrating with responsive framework
   • Magento 1.9 theme
   

   View Slide

10. View Slide

11. Magento 1.9
    • Infinite fallback is handy
    • Desktop first responsive theme
    • 10,000 lines of css to consider
    

    View Slide

12. CSS Frameworks
    • Overladen with CSS
    • Hamper upgradability
    • Sub-optimal
    

    View Slide

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

    View Slide

14. Free lunch
    Speed of Development
    Cost of Build
    Quality of Code
    

    View Slide

15. Mobile First
    • A great exercise to consider content priorities
    • Starts with a solid base
    • Technically efficient
    

    View Slide

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
    

    View Slide

17. Mobile Global First
    • Minimum viable experience
    • Whether considering mobiles or IE 8.
    • Polyfill versus Polyfull
    

    View Slide

18. Accessibility
    More than just screen readers
    

    View Slide

19. “Adaptability is
    accessibility”
    - John Allsopp
    

    View Slide

20. “What we really need to do to
    design is to look at the extremes.
    The middle will take care of itself.”
    - Dan Formosa
    

    View Slide

21. • Relative units
    • Fluid grid and content
    • Connection speed
    • Infinite inputs theory
    Accessibility
    

    View Slide

22. View Slide

23. Bringing modularity to
    your themes
    

    View Slide

24. OOCSS
    +
    OOJS
    

    View Slide

25. View Slide

26. View Slide

27. Results of Modularity
    • DRY
    • Reusable
    • Scalable
    • Familiar for developers
    

    View Slide

28. OOJS
    • Class methods
    • Init, Reinit, Destroy
    • Responsive JS
    • matchMedia + modernizr
    • enquire.js, harvey.js
    • require.js
    

    View Slide

29. The future is web components
    http://webcomponents.org
    

    View Slide

30. RESS
    Responsive with Server-side Optimisations
    

    View Slide

31. • Admission that practice cannot always match theory.
    • Adapt to user-agent to provide device experience.
    • Responsive is the foundation to build upon.
    RESS
    

    View Slide

32. View Slide

33. • Easy in Magento with theme exceptions
    • Examples
    • Smaller product collections
    • Quickly optimise images without
    RESS
    (in Magento)
    

    View Slide

34. 5 Success Criteria for
    Responsive Imagery
    

    View Slide

35. • Fluid
    • File size
    • Resolution
    • Mime types
    • Art Direction
    Responsive Imagery
    

    View Slide

36. View Slide

37. Choosing Your Tools
    

    View Slide

38. You shoot yourself in the foot with a gun made with
    pieces from 300 other guns.
    PHP
    

    View Slide

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
    

    View Slide

40. You shoot yourself in the foot, but nobody can
    understand how you did it. Six months later, neither
    can you.
    Perl
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

44. Emergent Properties
    • Speed
    • Maintainability
    • Extensibility
    

    View Slide

45. Engineers
    • Take responsibility
    • Be a Frontend Engineer
    • Duty to advise and direct client requirements
    

    View Slide

46. Pareto’s Law
    • Build 80% functionality with 20% of the code.
    • Consider the value of the rest.
    • Business needs versus code complexity.
    

    View Slide

47. Team Success
    • Challenge that requires the entire team.
    • UX, Visual Design, Backend, Frontend, Managers.
    

    View Slide

48. Independent Study
    • Always behind the curve.
    • Self-teaching is a requirement to lead the field.
    • Maintain strengths but invest in your weaknesses.
    

    View Slide

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.
    

    View Slide

50. Sound good?
    We’re hiring PHP & Frontend Developers to grow with us.
    

    View Slide

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/
    

    View Slide