Building Responsive Magento Themes as Frontend Engineers

Slide 1

Slide 1 text

Building Responsive Themes as Frontend Engineers Tom Robertshaw @meanbee @bobbyshaw Meanbee

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

16 fold growth in responsive ecommerce sites

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Magento 1.9 • Inﬁnite fallback is handy • Desktop ﬁrst responsive theme • 10,000 lines of css to consider

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Free lunch Speed of Development Cost of Build Quality of Code

Slide 15

Slide 15 text

Mobile First • A great exercise to consider content priorities • Starts with a solid base • Technically efﬁcient

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Mobile Global First • Minimum viable experience • Whether considering mobiles or IE 8. • Polyﬁll versus Polyfull

Slide 18

Slide 18 text

Accessibility More than just screen readers

Slide 19

Slide 19 text

“Adaptability is accessibility” - John Allsopp

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

• Relative units • Fluid grid and content • Connection speed • Inﬁnite inputs theory Accessibility

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Bringing modularity to your themes

Slide 24

Slide 24 text

OOCSS + OOJS

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

RESS Responsive with Server-side Optimisations

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

5 Success Criteria for Responsive Imagery

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Choosing Your Tools

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

You’ve perfected a robust, rich user experience for shooting yourself in the foot. You then ﬁnd that bullets are disabled on your gun. JavaScript

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Choosing Tools • Always new tools available. • Key is to understand their principles. • Using a tool aligns yourself with their philosophy. • Make informed, conscious decisions.

Slide 44

Slide 44 text

Emergent Properties • Speed • Maintainability • Extensibility

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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/