Agile Web Design

November 24, 2010, by A. U. Crawford

Agile Design Dynamic Content Box

Agile Design Dynamic Content Box

A good agile web design will be flexible. Able to expand and contract as information changes. I often see website sites that are beautiful but are very rigid. Meaning you can’t add too much text to the page or too many images or the page will overflow in a non fluid way.

Sites like these are probably designed in photoshop by a graphic designer used to working with print media. Web Design shares a lot in common with graphic design in that it’s all about layout but the added layers of dynamic content, and depth of usage, creates a challenge for the design.

Websites don’t usually have just one page with just one use. What will other pages look like? Can a page handle continued addition of text?

Agile Design means flexibility, modularity, and forward compatibility. Meaning that as design trends change the site should be able to adopt new ideas without having to totally re-think/build everything. Saving time and money. This is not always possible but an ideal design has simple structure with a veneer of design managed entirely thought CSS.

Use-cases are essential to any Web Design Project. Don’t start building until you have thought about what every page will look like including error messaging, broken pages, forms, and new pages created on the fly.

Yahoo Real Estate Page

One great example of Agile Design, and the only one I’ll go into right now, is how design it’s applied to the header navigation. Most designers design a Nav Bar that nicely contains all the major links to the major sections of the site. But what happens when you need to add a new major section. Will it fit? How hard will it be to modify the design? Lets say we wanted to add two new sections to the above Nav Bar. say ‘Your New Home‘ and ‘Price Your Neighborhood‘. These are long links. Don’t think it would never happen. I happens a lot. Clients don’t think about design, they think about clarity of message.

In Yahoo’s case what they did here is they added a drop down option and grouped sections. This saved space and made things easy to find. They also left the option open to group other sections if needed in the future.

A good website will get a face lift about once a year or so. Nothing dramatic but a freshening up, to follow new trends, update technology, and let the users know you’re trying to improve whenever possible. Unfortunately for most business this means money. They won’t always want to do re-design if the old one works just fine.

In this case you can let it go and let them come you you (or someone else) when they desperately need it, or make updating as painless and quick as possible, by thinking ahead. Thinking ahead is essential Agile Design.