The design and development decisions we took when refreshing our site

Our old web site was built back in 2014, when we were in the early stages of getting to grips with Laravel. It is now some six years later and both our own knowledge and the general world of technology has evolved. With the start of the new year we undertook a website refresh to bring everything up to date.

To give an insight into the process we have outlined how we tackled the refresh both in terms of design and development. Here is a summary of the decisions we took along the way.

Design

  • Cleaner, more modern design and layout
  • Larger and cleaner typography
  • Make use of the whole screen
  • Removed social media, testimonials and all other non-essential items from the homepage. Resulting in less clutter for visitors, focusing on simply explaining what we do and examples of our work.
  • Removed a lot of animation (fading images) for a calmer feel.
  • Changed our primary colour from copper to orange for a brighter look and feel
  • Amended grid layout to remove text overlay on black, thus improving visibility.
  • Removed carousel within portfolio items. We felt that a list of images is much quicker to scan through for a user and also easier to view from an accessibility point of view.
  • Larger portfolio images
  • Refreshed copywriting throughout
  • Ensured consistent naming of services
  • Removed +44 from phone number (we don’t work internationally so not sure why this was on there – we don’t wish to portray an image of something that we are not)
  • Removed client list
  • Split services into graphic design and web development
  • Improved accessibility
  • No toggle menu button? Probably not needed as we only have four navigation items.

Development

  • Retained Laravel updating to version 5.8
  • Models were retained but we rewrote controller and views
  • Dumped all frameworks (previously we used Foundation/jQuery)
  • Content stored within Laravel views as opposed to being reliant on database queries
  • Created a command to create thumbnail images for portfolio items
  • Rewrote front-end styles to use predominantly Flex/CSS Grid (no frameworks). Total size 14kb
  • Tiny amount of JavaScript for the animated banners < 1kb
  • Halved number of requests on homepage from 44 to 22
  • Reduced page size of the homepage from 5mb to < 1mb
  • All of the above has helped create a quicker website and the homepage now achieves a page speed score of ‘A’

It will be interesting to see how this new website performs. In the future we may look at creating something with a static site generator, but we are pretty chuffed with this latest revision of our web site.

Thumbnail by Hal Gatewood on