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:
- 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)
- 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
- 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
- Members – People who aren’t really buyers or authors, but just participate in the community
Chat with other members, see site news, browse files
- 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:
- 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.
- 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.
- 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
- 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!
- 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:
- 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.
- 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.
- 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/
smooth road. We should keep some points in mind while carrying on the SEO process: