ONS Digital

In the dark ages when I started working with the then new, fangled, never going to last, ‘world wide web’ to create a web page you fired up Notepad, wrote a few lines of HTML 3.0, saved it as index.htm and using FTP you copied that file to some mythical server (probably under somebodies desk somewhere.) Then lo and behold you had a web page.

It probably looked something like this.

Now 20ish years later things have, not surprisingly, changed. The surprising thing, to me at least, is that it certainly hasn’t got any easier!

In the last year or so I have had a crash course in modern front-end web development and I am going to try and articulate some of what I have learned in next couple of hundred words – I’m sure somebody will be quick to point out what I get wrong 🙂

As I’ve written about before everything we do starts with our users. We undertake significant amount of usability research and we mainly interpret those findings in two ways – user stories and wire-frames.

Wire-frames drive our web design process. Jonathan produces pretty high-definition wire-frames and they become the guide for everything after that. The work Chris from CX Partners and Nick, our Head of Design, did during the Alpha provided us with the design style and Jon and Alex turned that in to our wonderful Pattern Library which is now underpinning everything we do.

Thanks to that Pattern Library we move straight from the wireframes to building static HTML pages. Where components referenced in the wires don’t already exist in the Library the team work on creating new SASS to fill in the gaps. Modern web development is prone to interesting product names so all this activity is being undertaken with the help of Grunt in the background.

These HTML pages are all available via Github Pages so Jonathan & I (and others) can just keep an eye on things and QA as we go. This leads to a certain amount of cursing interspersed with Git terminology like ‘push’, ‘pull’, ‘fetch’ and ‘commit’.

Now in the olden days this would have probably been it. HTML [check] Web server [check] Public URL [check]. Done and dusted? [nope]

Next the team builds Handlebars, another great name, templates. This builds in the dynamic logic required to allow the pages to be updated and maintained (in our case by our publishing system Florence). This means the relatively small amount of HTML page types we built earlier can populate the entire site – finding their place in the (JSON) taxonomy and dragging in the appropriate data/content.

This combination of the HTML, Handlebars and (JSON) data happens on the server-side of things for us (it can also happen in the browser – i.e. client-side – but for reasons I’m sure we’ll explain in a later post we wanted to avoid that) before we package it all up to publish to the public web.

Then some magic happens.*

At this point what we have is still pretty straightforward web pages that will play nice with pretty much any Browser (we are committed to supporting IE8 and certainly have a few users on IE7 still) so this is our starting point. This is where ‘progressive enhancement‘ comes in to play. Basically this allows us to add functionality to the site depending on what Browser is being used. In the past people talked a lot about ‘graceful degradation‘ – basically the act of websites starting clever but not breaking in older Browsers whereas ‘progressive enhancement’ starts with simple but usable and works up from there. Done well you get to the same place either way but our ambition has always been to provide a site that offered our broad range of users a consistent experience as much as possible. We have some nice ideas that this ‘progressive enhancement’ will allow us to implement but they are value added and all the core functionality our users are looking for will be available for all supported browsers (and devices thanks to our responsive design.)

So that is a whistle-stop tour of what it takes to build a web page these days. I’m massively oversimplifying everything and I’m sure I’ve missed so key elements or misrepresented some aspects but that is why blogs have comments 🙂

* Maybe not but as Arthur C. Clarke once said;

Any sufficiently advanced technology is indistinguishable from magic.