Award Confetti logo-bs logo-dxn logo-odl Magento Piggy Bank 09AEAE68-D07E-4D40-8D42-8F832C1A04EC 79C8C7E9-0D9D-48AB-B03B-2589EFEE9380 1A734D92-E752-46DD-AA03-14CE6F5DAD57 E622E2D4-3B9C-4211-8FC3-A1CE90B7DFB2 Group 19

Static Development from the eyes of a front-end developer

What is Static Development?

The static development is a browser representation of the projects visual design. It allows the design to be fully tested without the influence of the Magento development framework. The design is the focus and implementing it into the browser requires time, dedication and much consideration to see it completed with care.

We love this stage

At JH the design team understands the importance and reasoning behind this step. We live by and trust it to help deliver an even greater experience. If your team doesn’t believe in the process they follow, you’ll have problems throughout.

We ask ourselves why a team wouldn’t want to complete this stage in a project – and I’ve written a few assumptions and some solutions.

Merging and mixing – a big no

Normally Magento teams are very development driven. This means for starters they focus on the data and functional side and take steps to ensure that those areas are kept up to standard primarily. When that happens they mix design focus with the functional and Magento implementation.

Design and visual implementation deserves its own focal point within a project. Both functional and visual should be seen as equally important and reflected as such in the project.

A misconception is that by merging the two processes together you will save time – this simply isn’t true. The truth is that if you actually care for the design you’ll spend too much time trying to dodge around the Magento framework rather than focusing on what’s required to deliver.

Communication Breakdown

You’ll know this old chestnut – Lack of communication between designers and developers. At Jh we share our ideas and thoughts with developers and often ask what is causing them the worst headaches. As front-end developers we’re also regularly searching for moments where developers need our assistance. But it’s not just about solving a problem it’s about reducing it in future static builds.

Static Anxiety

And a general hatred for the static nature of HTML templates. Since starting front-end development my work has always been using PHP including loops and arrays for storing data. So if you’re a developer reading this then help your front-end developer understand some basic principles. We hate repeating ourselves so we reduce it as much as possible by making our static templates more dynamic. There are a number of applications to help with this, including template systems such as:

We apply both here and love the variety of tools at our fingertips. The key is to evaluate which tools and methods work for your process.

A minor negative and a hidden positive

One thing worth mentioning is front-end edits should happen on both static and development environments. This means that when your front-end team makes edits on one environment it should be copied over to the other. You might think this is double the work but believe me, the ability to make design changes on the static, for design reflection and sign off, out-weighs that concern a hundred fold. I believe an average merge between one environment to another at Jh takes roughly around 30 seconds. So time is never an issue, as long as the build was well managed from the beginning.

Final note

The visual attention to a project is extremely important and you shouldn’t need me to tell you that. The static environment enforces quality on the front-end. It allows more testing to happen before server functionality is added and focuses on the user experience from the ground up.

I could go on all day and list many more reasons why a static environment is important for any project. If you do this in your team then it’s always good to reflect what you’re doing to improve this stage. Are you creating e-commerce boilerplates that your team can analyse and improve? Are you thinking about responsive projects and how the static environment can be improved to include methods like conditional loading?

We’d love to hear how you approach this stage, how you present them to clients and what the general feedback is.