a responsive website for
reflecting the company, its values, ethos, capabilities and competence
Broxton is a leading provider of sheet metalwork and precision machined components.
We were commissioned to design a new website that reflected not only the company, its values and ethos, but also to highlight its capabilities and competence.
We chose a masculine black and grey colour scheme to complement the strong red logo. Hyperlinks and quotes were also picked out in red to lift the page.
Good use of whitespace gives the site a feeling of space and emphasises the size of the company. To ilustrate competency and capability in a non-overt way we dropped in small company facts and quotes on each page. Read in a few seconds, these leave the visitor with the perfect impression of Broxton as a thoroughly dynamic, modern and capable company.
An important part of the redesign, with the increasing usage of tablets and smartphones, was to ensure the site provided a good user experience across multiple devices.
We used a fluid layout with carefully placed media queries to allow the design to respond to differing screen widths. Viewed on an iPad in landscape, the placement of content is the same as on a desktop.
On an iPad held in portait orientation, the screen width is reduced. Rather than reducing the size of the font so that we can squeeze in all the content, we used media queries to re-structure the content. The illustrative images which previously flowed down the right hand side of the page now re-flow across the top.
On smaller screens, the viewport is restricted, so we re-arrange the display again and remove some elements – in this case, the size of the main image is reduced and we remove the side images as they're not core content that mobile users with restricted bandwidth need.
In implementing a responsive design, we can ensure that for every possible view - desktop, tablet or smartphone in both landscape or portrait orientation - the website content is displayed for an optimal viewing experience. Visitors don’t need to resize the site to read the copy - there's now none of the normal pinch and zoom, regardless of the device.
And this is all done with one website – there’s no need to maintain 2 websites, with one for desktops and a cut-down version for mobile devices.