• Layered Underwired* 3D development diagram - layer 1 Layered Underwired* 3D development diagram - layer 2 Layered Underwired* 3D development diagram - layer 3 Layered Underwired* 3D development diagram - layer 4 Layered Underwired* 3D development diagram - layer 5 Layered Underwired* 3D development diagram - layer 6 Layered Underwired* 3D development diagram - layer 7 Layered Underwired* 3D development diagram - layer 8
  • Screenshot from the Underwired* development project
  • Portfolio development screenshot
  • Underwired* project image
  • Project screenshot

Underwired*

underwired.com

HTML5, CSS3, jQuery, & PHP

Underwired is London's longest-standing digital CRM agency. Lead by some of the industry's most heavyweight individuals, their latest website was developed and released at the very start of 2012.

Designs and a detailed schematics were provided by the client, making the build itself fairly straightforward. The site features a large hero slider to show off latest clients and big projects, whilst the main content structure is split down into individual slides within a jQuery and CSS3 vertical accordion. With desktop structure set at a fixed-width, the content becomes fluid-width at narrower screen sizes. The layout is carefully optimised for smaller screens with items like phone numbers made more prominent and some of the heavier assets (such as slider images) removed to optimise the page-load times on slower networks.

The site was developed without reliance on third-party front-end frameworks (there is no Twitter Bootstrap in this one). However, given the heavy reliance on JavaScript for the open/collapse layout, the site has also been developed to accommodate non-JS users. This is achieved by passing variables into the URL to set the page layout (eg: which panels within the accordion are open or closed). Although not quite as pretty as the animated/JS-version, this allows for better cross-browser reach, including IE6.

The Underwired site was launched at a point in time where the EU Cookie Law required informed consent for all cookies (this has since changed) and so the development also includes a custom cookie opt-in/out mechanism using JavaScript and PHP. Finally, the site includes two PHP based contact forms (using stylised form inputs) which utilise AJAX where the browser supports it, or otherwise degrades gracefully.

When first discussing the project, the client made clear that they were aiming for a pixel-perfect, 'silky smooth' implementation with fallbacks for non-JS users and those still using browsers as far back as IE6. The resulting project matched these expectations and - with their staff now controlling the site's content - continues to meet their requirements.

Top