Process for Creating a Website

So, you need to create a website.  Here are the common steps for creating most smaller websites.  Some variation occurs when the site is going to use a Content Management System (like drupal or DotNetNuke).  Occasionally you will be proposing to create the website.  If you are an independent contractor you should have your Web design Contract and Scope of Work TOTALLY firmed up and SIGNED BY BOTH PARTIES BEFORE YOU BEGIN!!!  Avoid arguments and potential lawsuits down the line by clarifying expectations while everything is fresh, happy and new.

1. Kick off Meeting:
   • Discuss your goals for the site.  Its a good idea to write down some concrete and achievable goals ahead of time.
   • Look and Feel: You can have your client look at sites that they like ahead of time.  You should also do your research- check out your client’s competitors and use their good ideas and avoid the bad ones.  Discuss the feel of the site and what colors will be used.  Its good to stick to a palette of 2-3 colors.
   • Website Content Planning and Site Map Plan/Example:  What text, images and functionality (newsletter sign up, flash animation, twitter feed, bookmarking) need to go on the homepage?  What will the navigation consist of? This is a good time to draft the site map and reiterate how many pages and template designs will be created.  Usually the home page is one design, then the content pages have a similar design, but with more of a standard column layout.
   • Discuss the next steps: Create 2 or 3 designs and deliver them to the client within 2 weeks of the kickoff meeting.
   • At the end of this meeting reiterate the decisions that were made- colors, # of pages, content, functionality… Get this part in writing!
2. Designs! Fun fun fun.  You may want to start with a pen and paper to just map out your wireframe.  Because there are a lot of changes made at the beginning of this stage its good to create your layout in a graphics program like Fireworks, Illustrator or Photoshop- whatever you are most comfortable with.  I recommend designing at 1024 x 768 or higher, its the most common screen resolution. Depending on the time you have and your client you may just do the homepage or create the homepage and a second tier page.  Its best practice to deliver your designs as a PDF so that the client can print them out and mark them up to provide feedback.
3. Revisions:  Its a good idea to put into writing that the client only gets 1 or 2 rounds of revisions.  Most revisions are for personal preference, but if the client requests something that you think is bad design, speak up.  You may want to provide examples or documentation to strengthen your advice.  If needed, remind them that this is what they hired you for.  When revisions have been completed, get the client to sign off on the design- IN WRITING- before you convert the design into HTML.  Remind the client that changes are easier to make to the design before it is converted.
4. Interactive Draft: Once the homepage has been approved, convert it (and perhaps the tier 2 page) to an HTML page using Dreamweaver.  DO NOT use the built in “save as webpage” function in your graphics editor!  It will create bulky, inconsistent, inaccessible ugly code that will be a challenge to modify in the long run.  You want to start with a blank slate and use as few images as possible.
   • It may be helpful to print out the design and draw on it how you will layout that page in HTML.  Create squares of content and meaningful names, suss out how many columns you will need.
   • Be sure to layout your page meaningfully- where your code describes the content, use CSS names like wrapper, leftBar, mainContent, rightBar, header, footer.  And instead of creating special rules for heading text, paragraphs, blockquotes, and tables style it with CSS.  If you do this correctly the page will look pretty darn good with all the design missing adn it will transfer easily to print, mobile devices and to other webmasters.
5. Revisions to interactive draft: Give your client a chance to comment on the interactive design, there may be functionality they now need or want or translations onto the web-screen that they/you did not anticipate.
6. Build out the Web site. If you are migrating content from an existing site, be nice and spell check it.  You also may need to discuss text revisions with your client.  Remember text online is read in short bursts.  Users scan for the info they need and rarely read anything from top to bottom.  IF they are going to read an article you should provide it in a printable format for them, preferably PDF so that you can put your clients name and contact info on the print.
7. Create the print version of your CSS. Easy.  Make a copy of your one-ans-only external CSS file.  convert all the colors to black or white, maybe a gray in there.  Remove navigation (use display:none;) fix your content column to 7 inches or so and test it on 2 or three machines/browsers.
   
8. Run accessibility and compliance tests. You can do this through Dreamweaver under the sites> reports panel or online at various sites.
9. Testing: Invite your most web savvy and more importantly your least web savvy friend to try it out.  Ask them to complete a few tasks, such as:
   • What is the clients address and phone number
   • What is the cost of a particular service your client offers?
   • Could you understand what the client is selling?
10. Launch.
11. Promote.  You can still submit your site to search engines.  You can also promote your new site through social networking sites like twitter, facebook and linkedIn.  You can also swap links with sites that are related to but not in direct competition with your client or sites that compile lists of service based sites- like local newspapers.  You can offer to create a promotional package for your client including a business system and leave behind.  Don’t forget to take screen shots fro your portfolio!

Tagged as: clients, CSS, design, HTML, sites, tutorial