Web development exposed: visuals to markup

Posted: February 5th, 2009 in People

Ever wondered how flat visuals become a fully marked-up, finished web page? Wonder a little less with a time-lapse demo of one of our recently produced nanosites:

You will need Javascript enabled and Flash player version 9 or above to view this video.

Music is Quiver, by the Defiant Kinetics.

A bit of scene setting

The National Science and Engineering Week represents 10 days of talks, lectures, walkabouts and presentations aimed at families and school-age children across the country. Iris built the first Science Week South Yorkshire site in 2008, producing a petite, uncomplicated site to give a better idea of the breadth of events taking place in the region. Run jointly by Sheffield Hallam University and The University of Sheffield, the site contained all of the events for the general public and in schools.

The project

The 2009 update started in November the preceding year, when the content management system and database were updated to support visitors adding their talks through an online form. Once these had been entered (and vetted by an eagle eyed editor), printed literature was produced using the data stored on the site. The literature was sent out to schools so that they could register their interest for different talks, yet again managed through the CMS.

The design stage

Using the literature design as a starting point, our crack team of designers mocked up a set of flat visuals and, after a brief amends process, the sign-off was given to start on the mark up.

With us so far? Here’s where it starts to get a little technical

Play the video above to see a time-lapse animation of the process, plus a brief click through of the finished, database-backed site.

Starting with the homepage, the markup is hammered out without any styling; this ensures both document and semantic structure are in place before starting on aesthetics. The markup is rarely changed once it has been finalized; minor additions of classes and element IDs are the most common changes; however sometimes structural changes are necessary to accommodate certain visual elements. These can be as innocuous (but distasteful) as an extra containing <div>, right through to significant reordering of elements. Changes are never made lightly and semantics and accessibility are, as a cast-iron rule, never compromised.

The styling begins mostly in a top-to-bottom fashion, focusing on the elements which will give the most feedback. Fine detailing is applied towards the end of the process, where elements are more accurately spaced – using the flat visuals as a reference point, colours are audited and other browsers checked for inconsistencies. Cross-browser compatibility is a significant part of the markup and styling process, and can eat up time if you’re not careful. Certain tell-tale inconsistencies are easy to spot and fix. Occasionally, complete display model changes are necessary, usually moving from a static to absolutely position model for the offending browser. Recently Iris stopped full support for Internet Explorer version 5 – statistics on all of our hosted sites show IE5 usage below 1% (sometimes close to 0.1%). We still check to ensure the site is usable in IE5, fine detailing however is weighed up according to cost/benefit.

Once the homepage is complete, the About page is addressed, followed by the Events page. With a nearly complete style sheet, both are slotted together swiftly, and the final marked up pages are fully tested (on auditory and text based browsers), validated and checked by other members of the digital team. With QA passed, the marked up pages are converted into templates and integrated into the bespoke system used for the Science Week site. Depending on the underlying system and complexity of the site this can be an involved process. Most commonly Smarty is my templating engine of choice, however with our recent ASP.NET development work, Spark has shown great promise.

Now have a gander the finished article: