Website building needs development and design, not design and development

Back to the Articles
Website building needs development and design, not design and development

Have we got it wrong: should we be building websites before we design them? This is a question I have asked myself several times as a front end developer, and know that in my experience, our approach at DD of combining development with design up front is key. A common scenario is for my Project Manager to ask me to review a client’s existing website and look to improve load times (the client wants it to load faster). With much research suggesting that an average fully loaded webpage on desktop takes around 10 secs or more and on mobile even longer, this is a reasonable request. Google recommends having your website load under 3 seconds.

So away I go, come up with some easy wins with lazying load images and videos, compress images where I can and do all the other little things that might shave a bit of time off to speed up load times, all the time battling the Google Developer Tools which constantly gives me different load times for the same page every time I retest… I do my best, suggesting more time spent on consuming avenues such as code cleaning or reducing dynamic content in order to reduce API calls. We manage it - of course we do - but could it have been unavoidable had development been prioritised before visual design?

A solution like this already exists for mobile

Before I start on explaining my solution to long load times, I need to make clear this technique will not work for all websites, but let’s explore anyway. This also isn’t new thanks to Google’s introduction of Accelerated Mobile Pages (AMP). Following very strict rules about images, javascript plus a plethora of other restricitons, Google allows you to build a mobile page that loads almost immediately on mobile.

I have experimented with AMP on our own website and quickly discovered that AMP pages are very painful due to their strict rules, so are only beneficial for blogs or articles. My advice with AMP is to approach with caution.

So why development before design for websites?

Ok so no visual designs first, that’s what I’m saying! But UX is something we do need. It would be a tough ask to give a developer no visuals whatsoever and ask them to build a website. But by having UX first, the developer eliminates worrying about images, which we have already mentioned are costly for page load times, as well as things such as custom fonts and videos, which may cause page bloat.

That doesn’t mean you can’t have images, it just means approaching things in a different order. Once the developer has built the page, tested its load time and is happy, they can then dictate how many images can be added, thus having ability to add images and then test load times and reducing the risk of quickly having a bloated page.

It is not only delaying the addition of visual design which helps developers build leaner web pages - there are also possible savings when it comes to the UX. A lot of you may have heard of the acronym KISS: keep it simple stupid. We don’t have to reinvent the wheel everytime we build a navigation bar or menu for example. Users want simplicity; will they think of your website or you as a company any differently if you don’t have amazing dynamic content all over your page? Probably not. Most likely they have gone to your website to use a service or get information, and if so, then what does it matter having polished customs fonts, high resolution images or a flashy dynamic spinning fadeIn fadeOut close button. They want speed. Speed is King.

The benefit of development over design

The result is a cut down, lightweight no frills website giving you a fast loading website which helps with:

  1. Customer satisfaction (they expect a fast load times).
  2. Less bounce rate (when users navigate away after viewing only one page)
  3. And notably it helps with search engine optimization (SEO). Google’s algorithm uses speed as one of its main factors in determining a website’s positioning.

So in summary: development before design leaves you with a fast, functional and high ranking Google website. Perfect.