The Process Of Building a Web Site: Part II
Planning the site
Now that you have your team assembled, it’s time to talk to the designer about planning and putting together your web site. If they’re a competent designer, they will provide you with a specific questionnaire asking you about all specific aspects of your business to make the best possible decisions regarding your web site. Here is what usually goes into the planning stage of the project once the questions have been asked, answered, and deliberated. These forms will typically contain questions geared toward obtaining your color tastes, the demographics that your company markets to, and the specific information about how your users will use your site. Please remember that the following information is general in nature, and that not all steps will apply to all web sites. Some variations will be needed depending on the industry. It will be up to you to tailor the development process to your industry.
1. The designer will develop a structure of the site that will match what you had typically requested. They will provide a mockup of this structure. When I’m talking about the site structure, I’m talking about a flow chart, not a navigation menu. Here’s an example of what the flow chart should look like:
2. Once the flow chart has been established, then the designer will work on a few mockups. This is the step where you will want to discuss color information, your design preferences, and your competitors’ web sites. It’s best to come up with at least 5 different competitor web sites that you like and present them to your designer. This way, they will have a good idea of how to proceed with the project. Communication is SO essential to the success of any web design process. You must provide the most complete information that you can about your current company situation.
3. As the mockups are completed, you will be able to see the specific visual representation that the designer has chosen for your web site. If you don’t like them, then you need to let your designer know. Advise that you would rather have a different version of the web site, or if there IS a specific web site that you like that’s better than the competitors, send it to your designer and see how they can provide a similar design. Nothing’s worse than having a site you don’t like, so you will absolutely need to make sure you are nothing less than enthusiastic about what the designer came up with.
This is the time where you will also want to discuss modifications to the web site’s content. Typically, your designer will provide text that’s in latin or some other language, but in the design world, every designer tends to use what’s called Lorem Ipsum text. You will need to discuss with your designer, if they provide these services, the content that you want on the site as well as how you want them to write it.
4. At this stage, once you have approved the mockups, your designer will proceed to coding them. This involves slicing up the mockup in a program like Photoshop and writing the specific code to make sure that all the elements of the site work together appropriately. Please be sure that your designer knows all about standards and can actually implement them by hand. If they cannot, your web site will be riddled with errors in the code and that can cause your web site not to be viewable in every resolution and browser on the market.
5. At the time the coding is completed, your designer will upload the site to a test directory so that you can take a look at it before it’s launched. This is where the quality testing stage should be implemented. Make sure you remind your designer to test the code, test all other resolutions, test all other platforms. If they’re not able to do this even though they said they would earlier, now would be a good time to dump them and move on to another designer before you lose more money on the project.
6. After the quality testing stage, you should have already purchased a domain name through consultations with your designer/marketer. If you have a separate marketing specialist, make sure they are both compatible and able to work together. Different designers and marketers have different philosophies, and if one cannot compromise you risk your project’s demise. It’s now time to launch the site and proceed with the marketing of your site.
Now that you’re familiar with the planning process in detail, I’m going to go through specific technical details about how the designers and developers you work with build the site. While this is not a be-all end-all reference, and every designer and developer does things differently, there are general steps that are followed by your designer when they’re buliding the site.
1. Once the mockup image is complete, the designer will work on slicing this up and putting it together with code. While it’s not 100% easy and foolproof, it’s a process that you want to be familiar with.
2. In the design phase, the designer will perform the following steps:
a. Build the grid that will be used as the table template.
b. Import the photoshop image with the grid into image ready, a program which provides completely perfect guide processing for the image.
c. Once the image is sliced manually, designers will do one of two things: they will manually code it, or they will put it together in dreamweaver and manually edit the code to be standards compliant if need be. However, one major caveat of putting the site together in dreamweaver is that if a specialized method is to be used (such as separating design from content), then the designer will have to know how to manually edit the code.
d. After the site has been coded, it is essential that the code is checked for errors at every step. The designer will use specialized code checker software for this step, to make absolutely sure that your site is standards compliant. If they are a great designer, they will manually go through the code to make sure that it’s perfectly compliant with W3C standards.
e. If there is specific interactivity that’s required as part of the web site, the designer will usually integrate that using Flash as well. These programs were designed to work together, so it’s important that you check that the designer uses these programs.
While that isn’t a complete technical overview of the process, it will give you a good idea of what to look for to make sure your designer is doing their job.
A word on compliance with W3C standards.
The World Wide Web Consortium (abbreviated as W3C) is a group that develops standards and documentation for the languages that are in use in web design today. They are there to help make sure that HTML, CSS, and other code is up to a high quality standard. I really have to reiterate this again because standards are so important. While it’s an opinion that’s not shared by everyone, it is and always will be important to me as a designer. I’ve always taken the care to make sure that my clients’ web sites all have complete, 100% accurate code. And, I expect every single designer to do the same. Ask your designer if they are aware of standards and what they are. If they mention anything other than the World Wide Web Consortium (W3C) and multi-platform compatibility, run far away from them.
Standardized coding is one of their primary practices. The designer that you choose should go through the code on your site to make sure that it’s 100% perfect all the way through. Be sure to request this and make sure to get it in writing as part of your contract. I can’t tell you how many sites that are out there with 500+ errors in the code. It’s so mind-boggling that people have such low standards of quality that they would actually pay money for such terrible projects. Now, when I was a beginning web designer I admit that I didn’t always have 100% correct code, but that was only because there were specific requests made that didn’t adhere completely to online standards. They were a client choice. However, as a more mature and developed web designer, I feel lucky that I had the clients that I did and was able to provide a high quality web site anyway. But, it just amazes me now how many people pay for such terrible quality web sites that don’t pay attention to the smallest of details.
This kind of renegade coding will not help your potential clients when they visit your sites, and it will not help you. While the coding will not be visible to those that are not technically inclined, there will be noticeable difference in quality on the site. The site will load poorly, it will not be viewable on all browsers accurately, and it’s just low-quality workmanship overall. Think about it: would you hire a sub-standard contractor to work on your home and provide the worst work imaginable? I know I wouldn’t. So please please PLEASE do your research when you look for a web designer.
Now, here comes some of the fun stuff. I’m going to teach you about how to use HTML, why it’s used, and how web designers actually use HTML to build the site.