James Kirby

Building the Responsive Layout

As set in our initial goals, we wanted the Victoria Jeffs site to have complete content parity and be accessible to all users on all devices and screen resolutions. We designed a custom 1280px fluid grid system using the SASS preprocessor to allow for a modular column system that would streamline the construction of the site.

We took a device-agnostic approach to how the layout reacted at different resolutions but also employed tailored breakpoints specifically for the most common devices to allow for the best possible experience. On smaller resolutions our intention was to introduce users to the search functionality as soon as possible and so utilised an off-canvas navigation to create breathing space for the navigation to function while introducing a cohesive content hierarchy to the rest of the site.

Connecting the Content Management System

The requirement from Victoria Jeffs was that they needed the ability to manage dynamic content through a secure interface.

The task was to provide the ability for the management of; properties, news, articles, testimonials and staff profiles. Along side these specific requirements, the Admin Panel that was developed comes pre-built with user, role and permission management functionality which added further flexibility to the end user(s).

The result of encorporating the Admin Panel into this build enabled Victoria Jeffs to do the following:

• Manage admin users, roles and permissions
• Manage testimonials and news articles
• Manage staff profiles and roles
• Manage properties, property locations & types
• Control specific parts of their content managed pages; e.g. slideshows

Final Optimization

After the site had been signed off, the front-end developer I worked with throughout the project, Simon Shahriveri, and I spent a couple of evenings running through the site and optimising images, minifying JavaScript and StyleSheets, and reducing the amount of requests in a bid to speed up the inital loading of the site.

Simon implemented Imager, which has been developed by The BBC, which simply means that any images which are not visible within the inital viewport are not initially loaded, thus reducing the amount of requests on page load. Once the user scrolls down the page the images are asynchronously loaded into the page.

Conclusion

The project spanned over 6 months and the services involved within the build are, but not limited to:

• Design
• Front-end development
• Back-end development
• Hosting configuration

If the above has interested you, feel free to request more information about this project and I'll happily get back to you.