Designing MyLifeListed

Today I’m excited to see MyLifeListed launch!

We’ve been very busy at Base Creative designing & developing the site. We’re glad to be part of such an exciting project. See for yourself:

I’m going to write a more in-depth article on the design process of MyLifeListed but since this is probably my favourite design project to date, here’s a few notes:

Responsive design for all devices

MyLifeListed was designed around a semi-fluid build allowing it to look great on iPads to large 30” monitors. It’s not 100% fluid, I set a min & max width to maintain usability. I also made use of CSS media queries to prioritise content on smaller screens. The aim was to make best use of available space on multiple devices.

Keeping all this in mind when designing was a challenge! You’ll notice the modular layout was very helpful, but the key is knowing how to code. It would be impossible to design such a complicated website without this knowledge.

Hard-boiling it

The idea of “progressive enhancement” is to design for a consistent experience across all browsers and then add a touch of eye-candy for the newer ones. Hardboiled design (evangelised by Andy Clarke) says that you should take the opposite approach - design for the best possible experience, then work backwards no matter how difficult it may prove.

When I started designing MyLifeListed I quickly realised such a modern web app needed to push the limits of modern browsers and web standards. Why play it safe and design something that will work in IE6 through to Chrome 10 identically? If I took that approach I’d be doing a disservice to the longevity of the site.

Instead, I decided to challenge my own building skills and aim for nothing but the best design and user experience. I think the result speaks for itself, it even looks great in IE7!

And more…

I could go on forever about the whole design process – and I will – but that’s enough for now. Make sure you signup to MyLifeListed and let me know what you think!