preloading all assets, please wait

Jon Watson Consulting Responsive Website Design/Development Show Menu
Back To Portfolio Show Overlay
home screens content pages mobile views and navigation experimental homepage redesign with full-width header imagery

John Watson Consulting

This was a client-led project aimed at teaching the second year students about responsive web design. The project brief itself was to take an existing layout for a local consultancy that works in the housing industry, and turn it responsive. As this was primarily a development-led project, the final project would be marked on the quality of the code base and how successful the site was converted to responsive, however I also took this as an opportunity to lightly redesign the site for better user experience, and restructure the codebase to improve the responsive control.

As the design itself was not to be altered in any major way, I took the opportunity to change smaller elements such as the in-content navigation (inline anchors, buttons etc) and the primary navigation to create better UI consistency. I also looked at the way content was displayed, and implemented alternate navigation controls such as accordions to help display the content better. I also fixed a glaring bug with the carousel on the front page, which was displaying an interesting margin-collapse bug in up-to-date Webkit browsers, by rewriting the carousel to utilise cleaner jQuery and CSS3 for transitions.

I also rewrote the entire site codebase from scratch, as I felt that it would be the best way to convert the design to responsive. A cleaner codebase would also mean that future expansion would be much easier to implement.

As for the responsive design, I used Bourbon Neat as my primary CSS framework, along with a development boilerplate I have been developing at my internship with learning for code and directory structure. This would allow me to implement a number of coding best practices for future-proofing. The navigation system was originally intended to be an off-canvas sliding menu system, but due to how the markup was structured, I opted to self-develop a sliding top menu instead.

Also, as an experiment, I designed and developed an alternate frontage layout that repurposed the carousel code I rewrote as a full-width and height banner, along with a redesigned top navigation bar and content blocks.

Close Overlay