Luxley Communications
Brief
The brief was simple in its nature; to build, test and launch a brand new site for Luxley Communications, that works over all screen resolutions and orientations, giving the user the best possible experience based on their device. The system had to showcase not only the brand and company ethos in a clever succinct way, but also highlight the swathe of award winning clients Luxley Communications have worked with.
Simple hover effects were needed for desktop, whilst knowing that the majority of clients would be viewing from mobile, a suite of heavy mobile testing was needed to ensure the brand wasn't compromised from a lack of portability over devices.
Challenges
Being a relatively small site that was predominently text driven, the core challenge on the site was to ensure background and foreground images worked seamlessly over all form factors and ensure brand guidelines were kept to. With header images changing orientation and layout based on user device resolutions, this needed to be checked at various breakpoints we had set.
With traffic predominately coming from mobile, I needed to ensure that mobile portability was locked down as of the time of launch, and this added its own challenge as new testing suites were being released for this very nature.
Build notes
The build was relatively straight forward, with first Wordpress installed and tweaked, before individual page templates were built and utilised. I programmed up the custom post types as needed and added all the data before moving onto the individual page designs.
Knowing that common elements and spacing were used through the site, I took a holistic view of the site and marked out the common page elements and design elements, creating a set of DOM element and class rules that could be applied as needed, to ensure complete design consistency,
I wanted to ensure that the backend was easy and intuitive for the client after handover of the website, so the backend was worked on to ensure surplus information was hidden, and the system easy to administer and intuitive to use based on the page that they were editing.
Technology used
The site was built on Wordpress, with some core page templates built to deal with the various page designs that had been done. The interactions and effects were all done through a combination of SASS CSS, and ES6 JS, that I ran through the Gulp pre processor to not only minify and combine the files, but also to ensure data consistency that was dealt with by .jscs and .jshint files.
For easy client administration of data we used Advanced Custom Fields Pro to add the ability to include individual elements of text at certain page positions. I used a Custom post Type to deal with the multitude of clients, allowing Luxley to later on easily administer these clients and upload individual images for each one.
jQuery was heavily utilised throughout to ease with some of the heavy JS lifting, and Google Maps was used for the mapping functionality on the site.
Luxley Communications
A great looking site, that although relatively straight forward in its approach and simplicity,?show cases the beauty in simplicity. The brand was carried throughout the build and through the use of modern css, the site works seamlessly over all form factors and orientations. A good fun, great looking build that I really enjoyed putting together.