Responsive Design for Uwe Wittwer
David immediately grasped our taste in design and our technical requirements for a modern, responsive design after only a short brief by mail and phone.
Kevin Mueller, Studio Manager for Uwe Wittwer
Atelier Uwe Wittwer came to me in late 2013 requesting a new responsive design. With an ideal brief and a small but workable budget, I was delighted to help.
We immediately jumped into code and content. While the client focused on information architecture I worked on aspects of typographic and structural design. We then swapped roles, giving opportunity for feedback from both sides. This process repeated as we molded the website design into shape. The result was a flat HTML & CSS website; a cost effective solution that the client could take in-house and integrate with their CMS.
Fixed / Responsive Navigation
The minimalist nature of the design gave us ample space to experiment with. To house the global navigation we opted for a vertical sidebar (rather than the usual horizontal header links). See the home page design below:
The fixed sidebar — which remains in place when the page scrolls — becomes visible on viewports wider than around 820 pixels (51.25em to be precise). This suits many tablet devices as well as larger screens, though the specific breakpoint was chose to fit the content (not a particular device). On mobile / small-screen the navigation takes the form of my tried and tested off-canvas technique.
Responsive navigation can be difficult to handle when device orientation — portrait or landscape — or browser resize — crosses the breakpoint between on / off-canvas. By maintaining a vertical design throughout we minimised the possible confusion this jump can cause.
To add a final touch of class to the design, we adapted a set of custom icons to compliment the navigation links.
Multiple Sections
The “Publications” page is a rich index of external links and downloads. To ease navigating around this content we combined on-page anchor links at the top of the page followed by highly visible section headers to define each area.
The section headers automatically attach and detach to the top of the viewport as the page scrolls. They provide a helpful “return to top” link designed to align seamlessly alongside the global navigation link.
Client Testimonial
Having David Bushell design our new website was a very rewarding experience on several levels: David immediately grasped our taste in design and our technical requirements for a modern, responsive design after only a short brief by mail and phone. The feedback phase was short and effective. David provided us with beautiful and cost effective templates for our CMS that surpassed our high expectations from both the design and the tech perspective. We are looking forward to working with David again on all our future projects.
Kevin Mueller, Studio Manager for Uwe Wittwer
Take a look for yourself. Experience the design and other interactive features we developed. My thanks to Atelier Uwe Wittwer for being the brilliant client.
