$30 off During Our Annual Pro Sale. View Details »

Building Responsive Magento Themes as Frontend Engineers

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.

Meanbee

November 01, 2014
Tweet

More Decks by Meanbee

Other Decks in Technology

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