Yahoo! and Mashable Design

We came up with what later became known as Mashable Design getting on for a year ago now. It came out of our thinking about various issues, the big ones being maintainability and scalability in the design process.

At the time we seemed to be lone voices, and it was hard to find any other joined up thinking about the issues of scaling, component reuse, or the cost of maintainability in websites above the trivial size.

Just recently though a strong voice has come out of Yahoo! saying the same things. Although Nicole seems to have got there from a different starting point from us (strictly CSS maintainability) the conclusions are almost identical. And also it all points to a more engineering style, structured approach to front end web design that will help cut costs and improve productivity long run, and gives a direction and structure for front end tools that has been lacking in less structured approaches to this problem. Your CMS is of course one of your key tools.

Nicole's starting points are CSS code size growing as the site grows, because reuse and extension is not designed in from the start, code is fragile, and the amount of CSS is increasing linearly with the number of pages in a site. Her key points are (these are my summary)

• use modular components
• be consistent
• use grids
• minimize use of css selectors
• use multiple classes per element to extend behaviour
• separate container and content
• new pages should not need new css

and key points to avoid

• avoid location dependent styles
• avoid styling by id
• avoid specifying the tag a class applies to
• avoid drop shadows and rounded corners over image backgrounds

It is all pointing to the same conclusion we came to - page based design and thinking does not scale, you need content based thinking, and design from the bottom up (the lego model). Nicole has some good examples in the slideshow too of how to look at an existing site and see where it is going wrong.

It is great to see these ideas becoming a tiny bit more mainstream. Nicole has put a YUI based toolkit on github, but for now I see it about process and mindset and rethinking how you are doing your frontend.

Engineering and designing to lower long term costs is a great theme to carry forward and expand on this year.

Author: Justin Cormack
Published: 03 Mar 2009 2:56pm