Once the client has “signed off” on the design for the website, you can now get started on building the website in HTML/CSS.
Notice that testing the site is necessary throughout the entire process of the technical production.
- Study the design comps (created in Photoshop), and take a few minutes to strategize your plan for the layout of the website. Is it going to be best to build it as 1 column, 2 column, or 3 column layout? Check the Photoshop file so you’re familiar with all the dimensions of the page, the navigation, placement of the logo etc. You may want to make a print-out of the file and jot down notes regarding the layout, dimensions, hexadecimal color values etc., and use the print-out like a blueprint. Follow it to create a website that looks just like the design comp.
- Start the technical production by slicing the images and optimizing (compressing) the images for the web. This is an important step so don’t forget to optimize your images, this will make the images “web ready” and will decrease the loading time of your web pages.
- Set up a proper file organization. Create a folder named “final_web” and another named “source_files.” Create a folder named “images” and place your optimized images in this folder. Your “images” folder lives in your “final_web” folder. Don’t make the mistake of overlooking the proper setup of your file structure… trust me—organizing your files later, rather than right now, will lead to a load of headaches and lots of extra time.
- Start off by building the home page (index.html) in HTML/CSS using Dreamweaver or the HTML editor of your choice. Be sure to create your external CSS file during this step. Remember that the home page MUST be named “index.html” in order for the server to recognize this page as the “home page.” And remember to add a title your pages between the <title> tags and to specify “border=0” for your images. This will eliminate a blue border from appearing around your images.
- Build your navigational menu. Be organized, name your pages wisely, and build the navigation menu with the links to the other pages of the site. It’s smart to know the names of your pages before you even start building the website.
- Test your webpage before you continue with the rest of the pages. Upload the work you’ve done so far to the server and view your webpage in multiple browsers: Internet Explorer, Firefox, and Chrome. Also, check your page on both platforms: Mac and PC. This is called beta testing. You’re checking for compatibility— that the webpage looks the same across platform and browsers. For help with this, check out the Adobe Browser Lab.
- If your webpage looks fine in both platforms and multiple browsers, you can move on to the next step. If your webpage is not compatible, you need to troubleshoot your problem. Getting good at fixing your work comes with experience but the first place to look for answers is on Google. So search there first. More likely than not, someone else has had the same problem and has posted an answer.
- Build the rest of the pages. I recommend saving a duplicate of the index.html file you just created as the starter for the rest of the pages. Why re-create similar pages over and over, when the rest of the page are likely very similar? You can use the index.html and do a “save as” to create the remaining pages. Also, use the same navigation menu you created in the index.html file for the additional pages. (Once you’ve created your index.html page, you shouldn’t need to re-create pages from scratch.)
- Be smart and continue to test your pages as you build them. You don’t want to finish the entire site and find mistakes and problems at the end of the technical production.
- When you’re finished with all the pages, do a final round of testing, preferably on the client’s server. Setting up a development site on your client’s server is easy. Just create a directory called “dev” and upload your files there for testing. When everything is ready to go, you can upload the final files to the root (main) directory of the client’s server to launch the site and “make it live.”