Method Arts - A Consortium


MIOX Rebranding

By Method Arts // Sep 14, 2006 // 15 Comments // Permalink Method Arts's Mug Shot

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.

image

Logo update

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.

image

Old homepage


image

New homepage www.miox.com

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:

image

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

  • Very nice, I'm impressed with your first job and look forward to the collective work of your future! Three cheers for method arts!

    Josh Blount - used their words like weapons on Sep 21, 2006

  • That method for displaying dates is devoiusly simple from whatever I would have imagined it to be.

    Congratultaions on a very well thought of logo and an fun site. It definately won't get people to sleep while browsing through the redesign.

    Razvan Caliman - started this rumor on Sep 24, 2006

  • Hi!

    Really nice site you got here, keep up the good work:D

    Cya

    Chao - felt the overwhelming need to share this with everyone on Sep 25, 2006

  • Looking good! What made you decide to keep the logo and slogan on the right side? Was it just to keep a big chunk of white space over the navgiation?

    Adam - couldn’t keep them to themselves on on Sep 27, 2006

  • Judging by the URLs it appears you went with ExpressionEngine. Is this correct?

    If so, was it your first time or are you a long-time user? I just started with EE back in May and after a few stumbles, something really clicked and now I'm a rabid fan. I always look forward to my next EE venture.

    Geof Harries - added to the collective on Oct 2, 2006

  • The teardrop logo shape is a bit overdone, no?

    - had this incredible stroke of brilliance on Oct 6, 2006

  • Geof, yep Brian's first time with the tool, and he took to it like a duck takes to - well something it takes to really naturally. I've been using it since January for my site. GREAT tool! We're really excited about using it more.

    Justicar... Mmm, nope, I'm actually particularly proud of this logo, as I am of this website. But thanks for the insightful feedback.

    Mark Bixby - added to the collective on Oct 6, 2006

  • Just stumbled on the site while doing the research, and got a bit stuck. (Darn Blogs)

    I can't tell you how much I love the new version of their logo... great work

    - used their words like weapons on Jan 11, 2007

  • Interesting juxtaposition: "Find out how MIOX helps keep your community safe" next to a picture of a little girl holding a pint glass?

    Matt Powell - came up with this gem on Jan 18, 2007

  • Hi,

    Great looking website by the way, nice colours.

    Im going to have disagree with a comment you made about the date being semantically correct.

    A definition list is a list of terms and corresponding definitions. And the date imho just doesnt fit that description. What do you think?

    ... but anyway, great stuff, keep up the good work :D

    Martin - had this incredible stroke of brilliance on Jan 28, 2007

  • @Martin - The way they marked up their dates isn't really all that "neglected," its floating around the web for use in menus and all sorts of things. Most people are using Definition lists to semantically show relationships. It's stretching the semantics a bit of the definition list, but really, its not too far off. Now after playing devils advocate with you, I actually agree with you. While we're on the standards track here, I think it's important to think about how a screen reader would spout out the dates, reading otu like, "Definition: etc etc, Definition Term: etc etc." It's just got to be confusing and annoying to hear that from a screen reader. You can show relationships with headings and paragraphs, but I dont think that would really work there either. I don't have the proper solution for something like this, but I do agree with you in that this is probably the wrong markup for the case. Overall though, I'm a huge fan of this whole re-design!

    Kenneth, Hanson - came up with this gem on Feb 20, 2007

  • Kenneth, Martin...

    I agree, a Month/Day pair are definitely not a Term/Definition relationship. Still though. the W3C is a bit more leniant than you might think with this issue. While they don't come out and say it - that you can use it for relationships, they do say "Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words."

    So, while a speaker/statement relationship is definitely not term/definition, as a speaker certainly isn't defined by the words they speak, I like to think that it's maybe a more general/specific relationship. That's something that the date pair fits into nicely. smile

    - used their words like weapons on May 9, 2007

  • Instead of More try and use Click here, or Read more instead. The clickrate differrnce is shocking. we just did extensive AB tests on about 20 sites. I will publish the results on my site blog in Oct, and we are changing our site to these more informative links. Simple "more" gets about 8x less clicks!

    dean - used their words like weapons on Sep 23, 2007

  • m,

    , - couldn’t keep them to themselves on on Jul 16, 2008

  • Great work there..!

    Suzuki Bike Parts - couldn’t keep them to themselves on on Jul 21, 2008

Rules of Engagement

  • 1. Please leave a comment, not a novel.
  • 2. Don't be a jerk.
  • 3. We might disagree with you. That's okay. It happens sometimes. No need to make this comment area your personal battleground for your point of view. We'll do our best to let you have your say, but 50 comments arguing your opinion is a bit much, eh? We would consider it an abuse of Rule Number 2.
  • 4. Be relevant. You can contact us if you want to say something not pertaining to this entry.

Add a Comment

Name
URL
Email
Comment
Remember my personal information
Notify me of follow-up comments?
Site We Like
Design Observer