Method Arts - A Consortium

MIOX Rebranding

By Method Arts // Sep 14, 2006 // Projects // 15 Comments // Permalink

Our first project as a consortium has launched, and we couldn’t have asked for a better client. What started as a website redesign quickly became a corporate rebranding for Miox, a mixed-oxidant water purification company. Without putting everyone to sleep, Miox’s onsite solution eliminates the transportation, handling and storage of hazardous water disinfection chemicals. This means no more dangerous chlorine gas being transported and stored on municipal property near day cares, schools, subdivisions and businesses. This made them a company we wanted to work for.

Simple & Safe
Miox’s solution is technologically simple, and environmentally safe. So our design choices too would be based on the conepts of ‘safe’ and ‘simple’. Starting with the logo, we wanted to remove gradients, highlights, dropshadows and unnecessary taglines. In their space, Miox has already established themselves as a leader, and we didn’t want to lose the equity they’d created with their consistent font use.

As with many companies, Miox’s website had slowly evolved over a period of years. And also like many companies they recognized the value in starting with a clean slate.

When transferring the design to CSS/XHTML Brian got to try a few things he hadn’t done before. One such challenge was implementing some CSS styled dates.

For the dates on MIOX’s blog and news excerpts on the front page, we wanted to have it feel very calendar-esque with big date numbers and a month abbreviation, almost like those day-to-day calendars you see in the cartoons. With some rather simple CSS, this is easily accomplished. The alternative to using clever CSS is pretty grim: you would have to create each day and month heading as images and write a script to assemble the graphic on the fly. This sounds tedious and wouldn’t be very accessible.

Instead, Brian thought through how best semantically to show a date. He employed the rather neglected definition list do do the trick:

<dl class="post-date">
  <dt>May</dt>
  <dd>06</dd>
</dl>

After some simple styling, and laying a background image behind the text, it became this:

For a full explanation of what’s involved so you can try this yourself, check out Using CSS to Style Dates.

Site We Like

Recommended Reading

Small is the New Big.

By Mark

"Since reading Seth's latest book, I now find myself only capable of thinking in three sentence riffs. You will love this one!"

Buy this Book