My director came to me today and asked how we can get more pixel perfect development… “happening”. We discussed the design aspect and of course, the development. I said that the whole front-end development landscape has shifted since we started doing web (late 90s), as I had outlined in The death of “front-end developers”, and I also mentioned that front-end development now is more like figure skating.
“Figure skating?”, he asked
Yes, exactly! I had this thought when after watching this video by Vox. In summary, being more technical and taking technical risk can score higher than perfecting less technical moves. In competition figure skaters are attempting more difficult moves to hit higher base scores than to craft perfected/artistic performances. This is exactly what I’m seeing in the realm of front-end development sans the ice skates. Modern front-end developers are practicing various frameworks, learning middleware, coding backends – partly for deep understanding, but mainly because it pays (not necessarily in monetary value).
How does it pay?
It’s appealing to employers and clients. I asked some friends about this and most of their answers starts with, “it’s fun” or “I heard it was better than React” then eventually talk about, “it’s the new ‘thing’, and these companies (they want to work for) currently uses it”. What ends up getting neglected is visual front-end development practices. More accessible ways to code while achieving the right visuals, different ways to do a grid layout, or even just how to effectively position elements so it matches the intent of the design. Of course, I don’t think somebody’s a poor developer if they can’t get a pixel perfect design into code, but I think in general everybody has the capacity to improve.
I still think there’s a lot of amazing front-end designers out there – just seeing less and less as days go by. Especially now, with a lot of coding bootcamps/academies focus on depth into functionality than visual practice. Fresh grads and juniors are concerned about becoming full stack devs than specialist, hoping to land a job when they graduate. Most will flaunt their React, Angular, Vue or whatever JavaScript experience while most of them (not all) will struggle to even properly understand how to utilize flexbox – let alone build something visually acceptable.
What’s the solution?
I honestly don’t have a fool proof solution right now. Couple years ago I’ve done some talks around component first design and development — which was to mitigate development ambiguity around design; which, should churn out better visual results. In short, designers and developers are required to design and build components before actually building full layouts and pages. The focus is two folds:
- To allow developers to focus on getting pixel perfect components rather than pages, and
- To have designers think more like developers in terms of how the components will fit together.
When it comes time to construct pages and layouts the focus is strictly on how the components fit together. Something I didn’t mention before was that components have to be designed with necessary spacing. If your component needs 20px (margin) around it, it has to be built into the component. This is the challenging and rewarding part of this approach. Sometimes components in layouts don’t play well together, and instead of developers doing a bunch of overrides on specific layouts designers will have to either tweak or design rules around components.
The first time I tried this (couple years ago) on a “simple” marketing site, it was very successful. That’s why I started preaching/praising about it. There hasn’t been more opportunities to utilize since then, because this is a costly approach. It requires a lot more of the designer and the developers time. I’ve been given an opportunity to re-attempt this in an upcoming (more complicated) project. I’ll report back on my findings. Wish me luck!
