7 key techniques for design and maintenance of large web sites

The last piece of code in the text of the translator in the translation of the editor has a problem, you can move to the original or I blog *********

The scope and scale of the project vary, and the challenges they bring are different. As an independent web designer, my biggest responsibility is to be responsible for Flashden. With tens of thousands of active users chatting, uploading and shopping, the site deals with large sums of money and huge traffic.

Design, refactoring, maintenance and development team work gave me some insights and skills to make things easier. And, just yesterday, we started the biggest refactoring of the site, and it looked like a great opportunity to record 7 of my most useful tips.

1. Maintainable Design and Code

One of the first tips I've given is that the design site is guaranteed to be easy to maintain. Many times, when you design a site, you may sacrifice something for aesthetics. For example, you might use a picture and text or style to handle it. Or you might deliberately use a menu structure that has no spatial scaling. This is a very bad design when the site gets bigger.

When I built the first version of Flashden two years ago, I used the picture button. They look pretty, but at the same time I'm dragged down by more than 100 different button pictures, not to mention changing the picture. Then in the next few months, when a developer needs a new button, they ask me for a new picture. Needless to say, I learned this lesson quickly, we switch to a separate button class, although it doesn't look very good, but this situation is more reassuring.

The other side of Maintainability is considering how the site will grow and change. For example, when a new page is added, where does it go? I always wanted a horizontal navigation bar, but after some attempts, we restricted the use of the vertical navigation bar to add a sub column, so we added a tag structure to the page to ensure that the relevant pages were grouped together. I'm not sure it's the best navigation bar in the world, but it certainly allows us to not redesign a new node to join the site.

So when you're designing a big site, try to make it simple, and you'll be happy about it!

2. Identify your user base and task

The biggest difference between a large web site and a small site is the number of different user types that use the site. For example, on Flashden, there are buyers, writers, visitors, administrators and members. Each user group has their own different goals and tasks. Sometimes their tasks overlap, but they are a lot different.

The best example of a local user task in opposing views is on a Web page. There is no one place on the site that does not connect to each user group, and in other places it is so important to make sure that everyone will have what they want. Of course, you have to be careful in serving a user group you don't ignore another one.

In this latest Flashden redesign, the biggest part of my job is the homepage. The first thing I do is give myself a list of what each user group needs to do:

Buyer – A person who buys documents on Flashden


Browse projects, search, visit their personal homepage, deposit, learn to use the website (new buyer) author – a person selling goods on Flashden


chats with other members, displays the features of their projects on the homepage, understands the news of the site, quickly gets their investment mix and benefits new visitors – potential buyers/authors/members, people who just arrived at the site


quickly learn what the site is, start tutorials, view different categories of documents and price members – not real buyers or authors, but active in the Community


and other Members chat, view the site news, browse file managers/reviewers-our staff, manage documents approval, host the forum, participate in most activities


quickly approve files, view the latest forum topics, add site news

When you know what different groups of users want to do, you can design a Web page that solves all their needs. Needless to say, this is a difficult task that increases with the number of user groups and tasks. On the other pages of the site, you will often fret about some of the user groups, while on the home page, they are all focused. No doubt, the homepage is one of the most important tasks when you design a website.

Before you solve different needs, you need to consider the user base first. To do this, you need to understand what the site is intended to achieve.

3. Learn about site goals

Although each user group will naturally assume that they are the most important, you should judge the site's goals according to their priorities. For example, on the Flashden, we give the alternates the following conclusions:

The site's first priority is to serve buyers. Service for buyers can bring in continuous income, but also for the author group Services. It is also vital that visitors get to know the website and become a member more quickly. Flashden is still in a relatively emerging market, with new competitors emerging, how to become a registered member of the buyer or author is very important. Creators are a core part of Flashden, and they are also very important, and unlike other user groups, they are strong advocates of the site. Although registered members are not as important as creators or buyers, they are also contributing to the community around them. As an employee, the Administrator/reviewer is relatively least important.

Therefore, from what has been said above, we can draw the conclusion that the website service user needs priority order: Visitor > Buyer > Author > member "> Admin.

Knowing what your site is trying to achieve is the end user thread sewing task together and tell you what you should try to put on the page.

Understanding your site's purpose can bring your tasks together and tell you what to put on the page. In each critical page you need to be able to differentiate between user groups, tasks, and priorities. For important pages such as the home page I carefully design on paper, and some small page is in the brain to think about it.

4. Design, refining, refining, refining ...

After you find your user group, tasks, site goals, priority levels, etc., it's time to design! This is a critical step because in practice this step can significantly reduce the amount of rework design effort necessary. Every time I start designing and not really analyzing the first big Web site, I've inevitably had to do a lot of rework, or even the entire screen interface.

Many designers like to use wireframe at this point, which can simply outline where the content should be displayed with lines and boxes. Personally, I prefer to start with Photoshop because I'm not fast enough to see the details change in detail. I also think that detailed detail information design is more intuitive than the display on paper. Simply changing the color and background color can make the entire page element appear more important immediately.

Once you have a rough idea of what information needs to work together, you should come up with a working design that is generally OK and then refined, refined, and refined. I often draft 5 to 6 of the same look, and then try different types, sizes, images, layout changes, backgrounds, and so on, to see how you feel about it.

No matter how well you think the first layout is, I can assure you that after several versions of the upgrade, you will find that your original version is not as good as you originally thought. Sometimes you even abandon the whole design and start again. And if you have a good foundation, then refine the refinement to give you a nice result.

5. Listen to other people's opinions and make their own final ideas

In any large job, you will be influenced by many other opinions. Before I started Flashden work, I worked with various web design companies. I also had the misfortune to design some large insurance companies and some government organizations. I said unfortunately, because when you go to the client and the people who are involved in many interests, and at the same time do not know the real decision-making power in the case of making wrong decisions. This can lead to endless meetings, endless changes, and a great deal of confusion about your vision.

Whatever the user is, what really matters is getting their opinion. In most cases, they know a lot more about business than you do. Hopefully they know more about users than you do, and this knowledge will be able to provide you with constructive advice.

It's also important to get the advice of a development team that works with you. We are fortunate in Flashden because two developers are experienced in user interface and usability design. With their input, and other team members, many different ideas are presented to the final product.

But in the end, it's time for your design expert to make a final decision. If you have a difficult customer it can be tricky because these customers tend to think they should make a final decision. If so, you need to find a way to explain to them, instill and demonstrate that your choice will bring the best benefits. Sometimes the bite of the bullet takes the customer's advice and acts as a long-term constructive function in the project.

6. Organize

for the future

When you encode a design for a large web site, it is really important to think over the changes in the future. How you manage your files and folders will greatly affect the work that follows. For example, we recently decided to build a Flashden sister website, the AudioJungle, which focuses on music. To simplify, this site is going to use the same HTML and just change the style to make it look like a different site. Here are some things to remember:

organize a good folder structure


scripts, style sheets, picture of the interface, picture content, etc., all need to be stored separately. If a small site, you may be able to mix these things together, but in large sites, find what you need to become more important. Use a regular, good naming convention for your files


Nothing is worse than looking for a picture by the name "Gd_l3.jpg". How you do that is basically a personal thing, but I think the prefix with the universal naming descriptive file name will help a lot. For example: I might prefix each picture of the head with ' Header_ ', each background plus ' bg_ ', and the background in the Head menu might be called ' header_bg_menu.jpg '. Prefixes have an advantage when your files are sorted by name and they all appear together. Using Subversion


This was driven by our developers, but luckily we used it! Subversion can track changes to files and archives, while preventing overwriting files from other designers/developers on the same project. This takes some time to adapt, but even without the developer using it, it is worthwhile to use it in CSS design. You don't know about subversion? Use it quickly. In your writing HTML and CSS deep thinking


can easily write junk HTML and CSS code, and it's hard to erase them to get the original version. After 4 redesign, I still use many of the same CSS files and have to plan to clean out the CSS classes that are no longer in use or have confusing layout definitions. Through a lot of comments, maybe even multiple stylesheets, and make sure you have a good naming style! Start early browser differential compatibility work


I flashden this aspect of the work to listen to mistakes, so far we have paid a great price. My initial layout was on IE7 until we finished the entire site and found that IE6 was neglected. After that we've joined the IE-browser conditional, and CSS hack and other solutions. When you build a huge site, only a few elements on the page can be easier to deal with browser compatibility, so do not repeat it! 7. Make sure you can simply extend your style sheet

The larger the site, the more likely it is that designers will see or modify each individual page. If you're the only designer on a large website – like me – you probably don't want to redefine it on every page. So, with a lot of effort on the stylesheet, you can make the page look good with the default properties.

Make sure that you define the default style for such elements.


Such a page can automatically render well. If you want to expect someone else to do something like that, the inevitable will be different from the other pages

create elements that developers can reuse


For example, on Flashden we have a CSS table class called "general_table", which ensures a nice style to populate with data. When I have the opportunity to design a Web style, I can use personalized tables and data highlighting types, but very few developers have the page to make a versatile style to use.

make sure that your page layout has a nice structure, even if he has only text inside.


will always have some pages that haven't been able to add images to it, which may seem a bit depressing. By using styles like headings, toolbars, and so on, you can make sure they are also beautiful and have a certain visual style. For Flashden In most cases, our text blocks are summarized as follows:

Heading

Content

By default, text is surrounded by a beautiful border and caption. This makes it easy to work with developers, with a good separation of text and performance to make it look more readable. We also have a sidebar component that simply packs the text content, but it makes the page look more intuitive.

After the design of the designers, each page is basically optimized, but they may not be so strong, it still looks very professional and unified.

your point of view

So these are my tips, if you're doing your job at a bigger site, post your comments!

Source: 7 Crucial Tips for designing and Maintaining a SCM Site | Nettuts

Translator: ALSWL