7 Important Tips for Designing and Maintaining a Large Site

7 Crucial Tips for Designing and Maintaining a Large Site

Collis Ta'eed on May 2nd 2008 with 110 Comments and 0 Reactions

Projects vary in scope and size, and the challenges they entail vary likewise. As a lone web designer, the biggest job I am responsible for is FlashDen. Along with thousands of active members all chatting, uploading and buying, the site processes large amounts of money and large amounts of traffic.
Designing, redesigning, maintaining and working with developer team has given me some useful insights and tips for making life easier. And since today we’ve launched my latest redesign of the site, it seems like a good time to write up my top 7 tips!

1. Design and Code for Maintainability

The first and biggest tip I can give, is to design the site so that it’s easy to maintain. Often times when designing a site you might sacrifice things for aesthetics. For example you might use images where text or styles would suffice. Or you might deliberately choose a menu structure that has no room to grow. When the site is large, this becomes a really bad idea.
When I built the very first version of FlashDen almost two years ago, I used images for buttons. They looked really nice, but I wound up with a library of 100 different button images, not to mention rollovers. Then in the next couple of months every time a developer needed a new button they had to ask me to create an image. Needless to say I learnt that lesson pretty quick and we switched to a single button class that maybe doesn’t look as good, but is much better for peace of mind.
Another aspect of maintainability is thinking about how the site is going to grow and change. For example, as new pages get added on, where do they go? Early on I wanted to have a horizontal navigation, but this is really limited After some experimenting, we wound up using a vertical nav, allowing for submenu items, and then on top of that, added a tab structure into pages to allow for related pages to be grouped together. I’m not saying it’s the best navigation in the world, but it certainly means we’re not redesigning every time a new section is added to the site!
So in designing for a large site, look for ways to make life simpler later, because you’ll be glad you did!

2. Figure out your User Groups and Tasks

One of the biggest differences between a large site and a small one, is the number of different user types who might be using the site. For example on FlashDen, there are buyers, authors, visitors, admins, and members. Each group has a different set of aims and tasks they have to carry out. Sometimes these tasks overlap, but sometime they are quite different.
The best example of a place where user tasks are at odds with each other is on a homepage. Nowhere else on a site does every user group converge, and nowhere else is it so vital to make sure everyone gets what they want. And of course you have to be careful that in serving one user group you aren’t ignoring another.
In this latest redesign of FlashDen, the biggest area that I worked on was the homepage. The first thing I did was list out to myself all the things that each user group needs to do:

1. Buyers – People who are on FlashDen to purchase files
   Start browsing items, start searching, access their personal homepage, deposit money, learn how the site works (for newer buyers)
2. Authors – People who are selling goods on FlashDen
   Chat with other members, get featured on the homepage to push their items, find out about site news, quickly get to their portfolio & earnings
3. New Visitors – Potential Buyers/Authors/Members, who have just arrived
   Learn what the site is/does very quickly, get started, find out types of files and prices
4. Members – People who aren’t really buyers or authors, but just participate in the community
   Chat with other members, see site news, browse files
5. Admins / Reviewers – Our staff who manage file approvals, moderate forums, and generally participate
   Get quickly to file approvals, see the latest forum threads, hear site news

When you know what different user groups want to do, then you can design a page that solves all their needs. Needless to say this is a task that gets exponentially harder the more groups and tasks there are. On other pages in the site, you will often get a subset of user groups to worry about, but on the homepage they all converge. Not coincidentally, the homepage is the most important bit of design work you have to do on a site.
Before you can solve the different needs though, you need to prioritize the user groups, and in order to do that, you’ll need to understand what the site is trying to achieve.

3. Understand the Site Goals

Although every user group naturally feels they are the most important, it is up to you to prioritize them according to what the site itself is trying to achieve. For example on FlashDen after sitting down with the team we drew a few conclusions as follows:

• The top priority for the site is to serve buyers. When buyers are served well they keep buying bringing income and simultaneously serving the authors.
• It’s vital to get new visitors to quickly learn about the site and hopefully become members. FlashDen is still in a relatively new market, and new competitors are still appearing, so that makes it more important to capture visitors and convert them to buyers or authors or members.
• Authors are important because at its heart FlashDen is really about her authors, but out of all the user groups they are the most committed to the site.
• Members are not as important as Authors and Buyers, but do contribute to the community surrounding the site.
• Admins / Reviewers are the least important as they are a paid group.

So following from this, it’s possible to conclude that the homepage needs to server users in this order: Visitors > Buyers > Authors > Members > Admins.
Understanding what your site is trying to achieve is the final thread that sews your user tasks together and tells you what you should be trying to put on the page. Ideally on every key page you should identify the user groups, tasks and priorities. For a vital page like the homepage I do this formally on paper, and for lesser pages I will often just do it in my head while designing.

4. Design, Refine, Refine, Refine …

It’s only after you’ve figured out user groups, tasks, site goals, priorities and so on, that it’s time to design! It is really vital that you do this first, because on a practical level, it dramatically lowers the odds that you are going to have go back and redo your design. Whenever I have just started designing a big site, without really analysing first, I have inevitably had to rework lots of screens or even whole interfaces.
Lots of designers like to use wireframes at this point – that is to simply lay out a bunch of lines and boxes indicating roughly where things should go. Personally I prefer to work in Photoshop from the start because I’m quick enough and it lets me really see what’s going to happen. I also think that there is more to information design than where something appears on a page. Simply altering colours and background colours can make a page element further down the page suddenly seem more important.
Once you do have a rough idea of how the information needs to work together, you should come up with a working design that is generally OK, and then refine, refine, refine. I often will wind up with 5 or 6 versions of the same look, where I’ve tried varying different things like type sizes, images, layout alterations, backgrounds, and so on, to see how it affects the information you’re presenting.
No matter how good you think the first layout is, I can guarantee that after spending more time and coming up with more versions you’ll have discovered that your original wasn’t quite as good as you first thought. Sometimes you wind up throwing out the whole design and starting again, but if you do have a good base, then refining should get you to a great finish.

5. Get Others’ Opinions, but Make the Final Calls

In any large job you are going to have a lot of other opinions involved. In most cases these will be the opinions of your client. Prior to starting FlashDen, I used to work with all sorts of companies building websites. Among them I did have the misfortune to design for several large insurance companies and a few governmental organisations. I say misfortune because when you get to that size of client you are dealing with a lot of stakeholders, and in many situations it isn’t clear where the real power to make decisions lies. This can result in endless meetings, endless changes and a high degree of difficulty for carrying through your vision.
Whatever the client, it’s really important to get their opinions. Aside from anything else in most cases they know a lot more about the business than you do. Hopefully they also know more about the users than you do, and with this knowledge will be able to give constructive advice.
It’s also important to get the opinion of the development team you are working with. At FlashDen we’re fortunate to have two devs who have a lot of skill in user interface design and usability. And their input, along with the rest of the team, made a lot of difference to the end product.
But in the end, it’s up to you as the expert designer to come up with the final call. If you have a tough client this can be tricky, because a client often believes they should make the final calls. If that is the case, you need to (a) find ways to explain, educate and show the client that your choices are for their benefit; and (b) sometimes bite the bullet and accept the client’s directives as a further constraint in your project, and find ways to make it work.

6. Organise for the Future

When you are coding up a design for a big site, it’s really important to again think about the future. How you manage your files and folders will impact you greatly later. For example recently we have decided to build a sister site to FlashDen that focuses on audio only called AudioJungle. To make things simpler the site is going to run the same HTML, with just stylesheets to make it look like a different site. A development like that throws up all sorts of new challenges to my file and folder structures, my stylesheets and my HTML. Here are some things to keep in mind:

1. Organise yourself into a good folder structure
   Scripts, stylesheets, interface images, content images, and so on, all need to be kept separately. With a small site you might be able to just dump things together, but the bigger you get the more important it is to be able to find what you need.
2. Use a coherent and intelligent naming system for your files
   There’s nothing worse than looking at a pile of images with names like "gd_l3.jpg". How you do it is largely a personal matter, but I find naming using common prefixes and descriptive file names helps a lot. So for example I might start every image going in the header with the word ‘header_’, every background with ‘bg_’ and then a menu background from the header would be called ‘header_bg_menu.jpg’. Prefixes have the advantage that when your files are sorted by name, they all appear together.
3. Use Subversion
   This was forced on me by our developers, but thank goodness it was! Subversion tracks files and file changes and stops you from overwriting other designers/deveopers working on the same project. Also importantly it helps you roll back to old versions of things. It takes some getting used to, but even minus all the reasons developers use it, it’s worthwhile for HTML/CSS designers. Don’t know about Subversion? Check out Subversion for Designers
4. Be thoughtful about how you write your HTML and CSS
   It’s really easy to make a mess with your HTML and CSS files, and it’s really hard to clean them back up. After four redesigns, I’m still using many of the same CSS files and it is a mission cleaning up classes that aren’t used any more or finding obscure definitions wrapped in lots of layers. Use lots of comments, possibly even multiple stylesheets, and make sure you name your styles well!
   
   
5. Get Browser Compatibility working EARLY
   This is an area I went really wrong with FlashDen and we’ve been paying for it ever since. My initial layout worked in IE7 and I ignored IE6 until after we’d finished building the whole site. Ever since we’ve been adding IE conditionals, and hacks and workarounds. It’s much easier to make something compatible when there are only a few elements on the page than when you’ve built a massive site, so don’t follow my foolishness!

7. Make it Easy to Develop With Your Stylesheet

The bigger the site, the less likely a designer will get to see or modify every single page. If you’re a single designer on a big site – like me – then you also might not want to be called in for every thing. So it pays to make a stylesheet that can almost by default makes things look nice. For example:

1. Make sure you style default elements like <input>, <strong>, and so on.
   That way the page will automatically present well. If you rely on people doing things like <strong class="my_bold"> then inevitably you’ll wind up with variance on pages.
2. Create reusable elements that developers can use.
   For example on FlashDen we have a table class called "general_table", that makes a good fall-back style for data. When I have a chance to style a page I can do more specific types of tables and data highlighting, but at the very least a developer putting together a page has a good all-round table style to use.
3. Make sure your page layout has a structure that looks nice even when it’s just got text in it.
   Inevitably there will be pages which you haven’t had a chance to add images to, and which may look a little boring. By using things like heading styles, sidebars, and so on, you can make sure that they still look pleasant and have some visual style. For example on FlashDen we wrap most text blocks in: <fieldset>
   <legend>Heading</legend>
   Content
   </fieldset>
   And this by default wraps the text up with a nice little border around it and a heading. It’s easy for a developer to work with and does a good job of separating text up and making it look more readable. We also have a sidebar component which is just another package for extra text content, but that again makes the page look more visual.

Naturally it’s optimal if every page does go through a designer, but it’s also much less stressful knowing that even if they don’t, it’ll still look professional and uniform.

What’s your opinion?

So those are my tips, if you have some of your own from working on bigger sites, leave a comment!
source : http://net.tutsplus.com/articles/general/7-crucial-tips-for-designing-and-maintaining-a-large-site/