OBM Advertising Responsive Website

  • UX Design
  • UI Design
  • Development

The OBM Advertising website was part of a re-branding of the company and the company's first responsive site. I led Creative Direction, UX/UI design, and was responsible for all front-end development.

The original homepage design, featured a rotating background of strong, bold images from past campaigns. The Works page index had fixed height rows which meant that images on small screens didn't scale down to unreadable. CSS class driven automated art direction was to align left, right or center. The Works item page was a big and bold, responsive, magazine-style visual feast. It allowed for plenty of content and was modularised so could be easily driven via a CMS. Lower down the works item page. And lower down again. This is the tags and nav section from a blog item. The homepage today. The Works section was simplified - and used the Blog format for entries, the blog section was removed, and the Team section was also gutted.

A major design goal was for a visually heavy site with fast page performance. The solution was to limit full-screen fluid background images to the homepage only, and use smaller images in fluid grids elsewhere.

The Work page does this well and shows the strong visual designs created by the agency, with the Team page combining staff images and hiding staff descriptions in the grid itself.

The most interesting aspect of the site’s development is that the responsive breakpoints are all content-based, as opposed to device-based. This means the site is always ready for new devices screen sizes and probably has a much longer lifespan than a responsive site with device-based breakpoints.

Prior to finishing with OBM, IĀ converted the site from statically generated HTML (using Mixture.io) to ExpressionEngine.