10 Skills to Become a Frontend Developer worth Millions

Yesterday we had a very enjoyable Fronteers meeting at our offices. Fronteers is the Dutch association for frontend developers. Their monthly meetups consist of pizza, drinks and presentations about frontend related stuff.

We had four 15 minute presentations, all related to testing and organizing frontend development. I was up last and decided to go a bit philosophical I find that slides either suck as slides during presentation, or they’re useless standalone. So here’s my slides with explanation so they might make sense. Your comments are very welcome!

In the background is one of the pitch designs for the rebranding/redesign of our company to Springest. So, nothing official yet, but a big reason we’re still looking for another frontend developer

My talk is about the changing role of the frontender: he’s becoming more important (and worth more ), but only if he has the right skills…

About a third of the audience (35 people) had experience with multivariate or A/B testing, half of them for clients and the other half for their own site. A big part of what a frontender should do is iterating design, in part by testing a lot.

Small overview of most-used MVT / AB testing tools. We only use Visual Website Optimizer and Optimizely since they are easier to implement without developers, and they’re cheap. For using the other tools you need help from your developers to get them up and running, making it harder to iterate quickly. Heavy use of the more frontend-oriented tools means more power to the frontender…

To prove that mere mortal frontenders also have tons of good ideas about conversion improvement, I challenged them with our “Request information form” page. As can be seen on the slide, the dropoff rate is 56% even though it’s free to request information. The often-heard dropoff rate for shopping carts on retail websites is about 66%, so we should do better, right?

Some ideas that I wrote down on our wall for future testing:

• Make it clear that it’s free
• Split the form in two parts (first the required fields, then the rest)
• Bigger fonts and input fields
• Right-align the form labels

So, I present my list of 10 skills to become a millionaire (worth) frontender. But not without a disclaimer that this is just my possibly skewed vision of reality, more on this in my last slide.

There are tons of very useful and cheap tools to get insights into what can improve conversion. I named a few like:

• Kissmetrics (for monitoring funnels and asking your users questions based on behavior),
• Usabilla (for testing pages or designs with specific questions, measuring attitude and get qualitative and quantitative feedback) and
• Padi Act (suggest newsletter signups based on behavior).

I think a frontender should stay current on tools to help product / marketing people with their questions. This is all about generating ideas for tests, that have to be built in large part by… yes, the frontend developer.

The frontender’s job though, is to focus on how design iteration should be done. You can use tons of tools and run dozens of tests, and of course people like me without technical skills but with fantasy will always want to. But the frontender has to be a guard of the frontend code, speed, scalability, quality, etc.

Here’s the epic video that of course played onload and out loud during the presentation:

Most frontenders will need help from other (more backend oriented) developers. So they have to have technical skills as well, to be able to relate to them and really understand implications of what they want. We just hired our first official frontender and we were debting wether he should be in the daily developer standup / scrum meeting, or in the non-developer (marketing/sales/support) meeting. We concluded he should take turns, as he is very much part of both teams. So communication skills are very important, especially if there are no formal project or product managers.

Since it’s the frontender’s job to guard the frontend code of the site, he really has to understand what all those sexy conversion-raising webapps do. Optimizely partly shows what happens by showing you the Javascript code that they will have their script execute on your page.

I have made “fun” mistakes in this area. One was where I wanted to change the layout of a submit button, but happened to also change the post URL of it. This caused all ~20.000 buttons on our site to post to one, wrong URL. Oops…

In my ideal world, the frontender does a lot more design seperate from a “real” designer. Of course you have people that are Photoshop guru’s AND HTML/CSS heroes, but they are scarce. So the frontend developer has to smartly re-use parts from the original design to create variations for testing. This requires a certain “feel” for design.

By their very nature, conversion optimization tests have a negative result most of the time. Unless your site sucks, in which case you want to do more tests!

So the frontender has to dare to test, even though he knows it might fail. Or she has to be very convincing, in case there is a boss involved that is scared…

We’ve worked hard to always improve conversion at Eduhub. It went from 2,8% to 4,8% but in the graph you can see that at some point it got really hard. We have to do bold changes to make something happen.

As a frontend developer, you should love this quest for conversion improvement. Otherwise it will get boring and you won’t manage to motivate yourself to push for another 0.1%.

I don’t have a clue how it should be done, but it would be great if you could write HTML, CSS and Javascript in a way that’s easy to manipulate later. I’m sure there are things that obstruct simple manipulation with an interface like Visual Website Optimizer, so learn which they are and adapt to allow for easy iteration!

Speed is getting more important, mainly because users demand it. IT has been proven often that slower sites convert worse. Google even uses speed as a factor in it’s rankings and next to showing it in Webmaster Tools, now reports page speed in Google Analytics.

Eduhub is faster than 69% of sites on the web, but Google still says that’s too slow. Our pages take on average 2 seconds to load, this includes Javascript and CSS (but probably not full execution of them). So the frontend developer has to prove his value here as well, by doing his part in frontend optimization. During my presentation it was pointed out that the biggest speed performance gains are usually backend related. However, I think the frontender will be “closer to the fire” in measuring speed and demanding performance from the backenders. So ultimately it depends on your determination to be in Google’s green scale…

If a colleague shares an idea, or some stuff comes up during lunch, you should be able to quickly whip something together to get feedback on. Maybe in raw HTML, especially if interaction is important for the idea. Or just in a tool like Balsamiq, which we use a lot for creating mockups / prototypes / interaction briefings.

You’ll be forced to really understand the idea and see the implications for implementation. This is valuable for when you’ll have to start really building it. For developers it’s also good to have more then just a sketch. Something to interact with is always a better briefing. So be sure you have the tools to make something out of nothing very easily!

So is my hunch true that there will be a bigger emphasis on frontend then backend development the coming years? Will the frontender be more important, and will he really need many other skills to do his job right? I’m pretty sure that if you can leave the game of slicing and creating templates, you’ll be worth (proverbial ) millions.

I do wonder: am I asking too much here? Is my dream frontender a 5-legged sheep? Please share your opinion in the comments or on Twitter or wherever…

My ending thought: Amazon has insane resources to create self-optimizing pages and therewith a site that beats others and creates it’s own optimized universe. You don’t have that option, and you shouldn’t mimic Amazon.

But frontend developers have the power to enable quick iteration, high quality and constant optimization. So essentially, you’re my only hope to come close to Amazon… Agree?