New Website for The Art of Building in Loughborough, Leicestershire

After providing The Art of Building with a bespoke business management software solution, we were asked if we could also build their new website; working alongside Richard Jackson who was already working on their rebranding.

The Art of Building New Website

The site is very responsive, scaling to fit virtually all screen sizes from smartphones up to 27 inch, high resolution screens. Most pages of the website feature a large, single gallery that fills the majority of the screen, so the typical responsive column layout wasn’t appropriate as there isn’t enough content for it to automatically rearrange. Instead the page scales with the screen size, using the large images as a datum for calculating widths and heights. The result is a website where the beautiful photos fill your view, regardless of the screen you’re viewing it on.

The new website for The Art of Building is all about showcasing their work, so the website is designed around exploring the projects. The home page features an auto-scrolling gallery of selected photos from projects, as well as the three most recent projects.

Clicking a recent project takes you to a page where you can view a full gallery of photos and details for that project. The details appear over the gallery, but can easily be hidden so the photos can be fully appreciated. Below the gallery is a navigation bar allowing you to conveniently browse through similar projects or share the project across all the major social media sites.

The project list can be browsed in full, split into residential and commercial or even viewed by category, such as ‘Extension’. Users can also jump straight to any of these from the drop down menu in the main navigation.

The projects and their photos are all uploaded and managed from a custom built content management system that is bespoke for The Art of Building and their new website. The content management system allows them to upload a single photo that is used automatically generate images at various sizes for different uses across the site. It also allows The Art of Building to reorder photos and give them titles for accessibility and search engine optimisation.

Bespoke content management system

In addition to managing projects, The Art of Building are also able to update the website via an embedded WordPress blog, which also feeds summaries of the most recent blogs onto the home page. The WordPress blog is labelled as the ‘News’ section of the site and has been styled in line with the rest of the site.

The new website is built to a high quality, reflecting the service it sells, using high resolution photos, images and icons to cater for larger screen sizes and high density screens, such as the Apple Retina screens and the Google Pixel. The website is a good reflection of The Art of Building and everyone involved is very pleased with the result.

New Website Design – Harmless

Harmless Homepage Screenshot

We have launched a new website for Harmless. Harmless are a user led organisation based in Nottingham that provides a range of services about self-harm including support, information, training and consultancy to people who self-harm, their friends and families and professionals. Harmless approached us looking for a complete revamp of their previous website that was five years old and no longer met all their requirements. The new website has been designed with three key areas: blog, shop and the core website. As well as designing the new website, Mamu Computing also designed a new logo for Harmless.

The principal part of the website starts with the home page, which prominently showcases the diversity within self-harm through a transition of large photos. The page also pulls together live data feeds from various sources including Twitter, Facebook and their Google Calendar, as well as the Harmless blog and online shop. Due to Twitter’s 140 character limit it was fairly straightforward to design how tweets would be displayed. However, the length of Facebook posts can vary greatly, so in order to maintain a consistent look Facebook posts were displayed in small, scrollable panels with custom designed scroll bars. The primary navigation for the website is situated along the top and divides the site into its major sections, each of which has its own sub-menu.

Custom Google Calendar

The events page (under ‘Who We Are’) displays a custom calendar that uses a Google Calendar data feed, allowing Harmless to easily update the upcoming events using their existing Google Calendar. The custom calendar shows all upcoming events in a ‘month view’ layout, with the ability to browse through future months. Clicking an event reveals additional details in a pop-up bubble, which includes time, description and location, as well as a link to Google Maps and the option to add the event to your own Google Calendar.

The new website provides various forms of media for download, including brochures, forms, videos and audio files as well as being able to watch, read and listen online. The website’s contact page includes a contact form (which was particularly important to Harmless as it allows people to get in touch without a record being saved in their sent items) as well as email, telephone, postal address and social network details, allowing users to get in touch by whatever means best suits them.

Harmless Blog Screenshot

The new website’s blog allows Harmless to keep their users up-to-date with all the latest news from Harmless and self-harm related news. The blog also provides a forum for discussion, allowing people to become a member and comment on news articles. The blog is designed with the same style and layout as rest of the website so that it very much feels part of it. The header and footer match the main part of the site to provide a consistent navigation.

Harmless Online Shop Screenshot

The layout of the shop part of the website differs slightly from the rest of the website, most notably in the header, footer and navigation bar. However, the style is consistent with the rest of the site, maintaining the same colour scheme, graphics and use of panels with rounded corners. The reason for the difference is that the shop serves a different purpose: it aims to promote and sell the products and services that Harmless offer. For that reason the home page of the shop features a highly animated promotional space and an area for promoted products. The shop provides a great deal of functionality for its users, including account management, downloads and a newsletter, as well as plenty of management tools for the Harmless staff, allowing them to manage products, stock levels and customer orders.

The new website better reflects the Harmless organisation, allows them to keep their users up-to-date and streamlines the process of selling their products and services, which all helps them work efficiently and reach the people that need them.