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.
Building Responsive Themes
as Frontend Engineers
16 fold growth in
• Responsive Design is a won debate
• We’re now in the age of the One Web.
• The same information and services are available for
• Integrating with responsive framework
• Magento 1.9 theme
• Inﬁnite fallback is handy
• Desktop ﬁrst responsive theme
• 10,000 lines of css to consider
• Overladen with CSS
• Hamper upgradability
• Overladen with JS
• Development time versus load time
• Be conservative
Speed of Development
Cost of Build
Quality of Code
• A great exercise to consider content priorities
• Starts with a solid base
• Technically efﬁcient
• Core JS dependencies
• Theme JS can still take this approach
• Will result in better customer experience across the
• Perceived Speed
Mobile Global First
• Minimum viable experience
• Whether considering mobiles or IE 8.
• Polyﬁll versus Polyfull
More than just screen readers
- John Allsopp
“What we really need to do to
design is to look at the extremes.
The middle will take care of itself.”
- Dan Formosa
• Relative units
• Fluid grid and content
• Connection speed
• Inﬁnite inputs theory
Bringing modularity to
Results of Modularity
• Familiar for developers
• Class methods
• Init, Reinit, Destroy
• Responsive JS
• matchMedia + modernizr
• enquire.js, harvey.js
The future is web components
Responsive with Server-side Optimisations
• Admission that practice cannot always match theory.
• Adapt to user-agent to provide device experience.
• Responsive is the foundation to build upon.
• Easy in Magento with theme exceptions
• Smaller product collections
• Quickly optimise images without
5 Success Criteria for
• File size
• Mime types
• Art Direction
Choosing Your Tools
You shoot yourself in the foot with a gun made with
pieces from 300 other guns.
You’ve perfected a robust, rich user experience for
shooting yourself in the foot. You then ﬁnd that bullets
are disabled on your gun.
You shoot yourself in the foot, but nobody can
understand how you did it. Six months later, neither
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.
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
• Always new tools available.
• Key is to understand their principles.
• Using a tool aligns yourself with their philosophy.
• Make informed, conscious decisions.
• Take responsibility
• Be a Frontend Engineer
• Duty to advise and direct client requirements
• Build 80% functionality with 20% of the code.
• Consider the value of the rest.
• Business needs versus code complexity.
• Challenge that requires the entire team.
• UX, Visual Design, Backend, Frontend, Managers.
• Always behind the curve.
• Self-teaching is a requirement to lead the ﬁeld.
• Maintain strengths but invest in your weaknesses.
To provide the best customer experiences that provide value to
the client through independent study, responsible decision
making and building on solid foundations.
We’re hiring PHP & Frontend Developers to grow with us.