Microbial Foods

About the client

Microbial Foods is headed by two scientists working in the field of fermented foods. Bronwen Percival is the cheese buyer for Neal’s Yard Dairy in London and Benjamin Wolfe is a microbiologist at Tufts University, Massachusetts.

Microbial Foods was established to assist microbial food producers in creating unique foods using safe and responsible methods.

The project brief

Bronwen, from Microbial Foods, approached me through recommendation by Spa Terminus, a previous client. The new website would be designed around the concept of “news”, so articles are ordered by date and categorised by either a food type and/or an article type.

All aspect of the brief were standard apart from one key difference, the team at Microbial wanted users to be able to browse article by food type, article type, or any combination of the two. Whilst may sound quite normal, it can be quite challenging as WordPress is not designed to work like this “out of the box”.

The design was to be clean, functional, professional and available on a range of devices.

How I met the brief

I really like the idea of creating a different look and feel for every website I create, which is surely half the reason to have a bespoke build, so I opted for a very “boxed” design for Microbial. The idea was to display the primary information in the main area, followed by other boxes that showed relevant information but of less importance. The sidebar was created in a similar fashion. Whilst I don’t do this often, the sidebar is featured on every page of the website. In time a second navigation will be added to the sidebar and I thought it best to keep this away from the primary navigation in the header. The sidebar is also “widgetised” so the site admin can easily drag and drop blocks of content in the sidebar (such as a featured news piece, the latest comments, etc).

Once I’d coded the chassis for the website I started on the development for the cross-category searching. In practice this wasn’t too difficult using a dynamic URL such as www.domain.com/?food=milk&article-type=research, but this is fairly ugly and not good enough for solid SEO. I spent some time working with WordPress’s URL rewrite API to develop a new series of URLs which would enable this new code to run in a search engine friendly way. That hard-to-read URL then became www.domain.com/food/milk/article/research/, much better!

Notable features

  • Bespoke URL structure and taxonomy/term sorting.
  • Responsive design with slide out sidebar.
  • A new logo design.
  • A footer which randomly chooses its background image. This also loads different image sizes when used on smaller screen sizes (around 7” tablet and below).
  • High pixel density display/Retina ready. Displays nice and sharp for those users with a nice, sharp screen resolution.

Words from the client

THANK YOU AGAIN for all of your really clear and outstanding assistance.