Citroen design classic

Design-led Drupal

It's time to put the front-end developers back in charge

Main image by Carlton Browne, released under the Creative Commons Attribution 2.0 Generic license.

Whether you're selling products, publishing scientific articles, or facilitating social networking, you have to put design first. This also means putting your users first and thinking about why they come to your site, what they do there, what device they are using to view the site and interact with it. At Code Enigma we find the best way to approach the design challenge is to prototype sites outside Drupal first so that we can test out user experience, check the site works on multiple devices and screen sizes, and produce efficience, standards-compliant code. This approach also allows us to test for browsers and accessibility before we then bring together optimised page markup with the power of Drupal to manage content, users, and assets like images or video.

Find out more about how we go about putting design in charge in three example sites built on prototypes.

10 Minutes With

We built this site in the first three months of 2014. The client approached us in December 2013 requesting us to lead their existing development team in rebuilding the existing site in Drupal 6 in Drupal 7 with a complete overhaul of the site architecture and design. As the client had already commissioned wireframes and design, we started by building the entire site as an HTML prototype. This is the most reliable method for ensuring responsiveness across many devices and form factors. Prototyping also allows us to check for accessibility and to provide an early opportunity for stakeholders to test user experience. Our development team are charged with making Drupal output exactly the same markup as the design team have used for the prototype. With that in mind, we encourage customers to get the source code for sites examined by people who know Drupal; once you exclude the head of the pages to focus on the body, it’s hardly possible to tell this is being done in Drupal apart from a few giveaway classes in the body tag. This also means the page-weight is reduced so the page loads faster on mobile devices. Interestingly, that also helps page loads on slow connections; in other words, designing for the latest devices reinforces good practice going back fifteen years. This site has a truly global audience, and it particularly targets the Chinese market; hence the ability to read the site in Chinese script. Although the site uses content delivery networks (CDN) to achieve performance in all countries (as well as access to the Chinese market), it also performs well by using lean markup, which is yet another benefit of a prototype driven model.

10minswith in phone

Mosaic Science

We developed this site for the Wellcome Trust between October 2013 and March 2014. The core of the design work was actually done by the Clearleft design agency. Their front-end specialists produced design patterns in HTML and one of the key considerations for the Wellcome Trust was that we could give a guarantee that we could make Drupal output HTML markup that absolutely replicated their design patterns. We achieved this by using an extension of the semantic panels model that we call ‘Planer’ (https://www.drupal.org/sandbox/mcjim/1899120). This project developed by one of our team strips out Drupal markup and enables us to put in the markup as produced by a front-end design team. Mosaic Science launched in March 2014 and by June the editorial team have tracked over 1 million page-reads both on the site and on external sites carrying the content under a creative commons licence. We are now assisting Wellcome Trust to transition all their sites to Drupal, and in every case there is a requirement that the site must be mobile-first responsive outputting markup created by their front-end design team.

mosaic example layout

James Hargreaves Bathrooms

In this case we were completely in charge of both the re-design and build. James Hargreaves specialises in providing luxury bathroom suites and fittings so the key requirement was to carry lots of high-quality product images whilst remaining mobile-first responsive.

The actual product photo pages are the hub of this site, with metadata attached to each linking to other content in the site. Users are taken on a journey from any entry point through the site via the images to the final destination that is the showroom details.

It was hugely important to show large high quality photos. On mobile and other small displays the images are delivered optimised for the viewport size, so mobile users won’t be downloading needlessly large files.