This is one in a series of Presentations given by Bud Kraus, Web Design Instructor and Consultant. Contact Bud at bud@joyofcode.com or 973 25 1452 if you'd like him to present any of these talks to your business or organization.
Summary
Do you have a Plan Of Attack when you begin the process of updating a web site? Do you just dive in and hope for the best? If something doesn't work you'll just back track and figure out how to get out of the mess you made.
This sounds like a blueprint. A blueprint for DISASTER!!
You're site has been up for years but hasn't really changed. But your business or organization sure has and you know that one of the things holding it back is that outdated, outmoded and disconnected web site of yours.
Here's my Seven Step Recovery Program for small to mid sized web sites, although much of these Steps can be used for large sites as well.
The entire process can be organized into three Phases.
- Phase One: Pre-Production
- Phase Two: Production
- Phase Three: Release
The Golden Rule For A Web Site Transformation: The more time you spend in Steps 1 - 4 the more time and money you will save in getting your site re-launched.
Step 1 - Taking Stock: Current Site Inventory
Identify the assets already on hand. File types, server technology, other properties of the current site. Get organized.
Milestones
- What kinds of assets (file types) do you have? Make a list.
- What kind of server is being used for your site? Find out.
- What kinds of skills do you have (or might need) for the new site?
- What kinds of production and design tools do you have? Are they suitable for others who may work on site after it is launched?
Step 2 - Site Mapping: Flow Chart
Make a site map - just like an organization chart - to give you a top down view of the information space of your current site. Identify the levels and the content of each page. (Content refers to information - most often it is text based. A level is the number of clicks away from the Home Page. A Level 2 Page is two clicks away).
With the old site charted now make a site map of the new site using index cards. Each index card is one page. Once that is done then go back to your spreadsheet and do for the new site what you did for the old site.
The process to follow is
- Old Site Spreadsheet
- Index cards For New Site
- New Site Spreadsheet
- Site Map
This will give you a very good picture of your current site and lets you experiment with what you'd like to make before a single web page is made.
That's Exactly What You Want!!
Milestones
- Use index cards to arrange new site hierarchy. Each card represents one page. Each card needs to have a brief description of the content.
- Group cards in a logical hierarchy. Information needs to flow from the general to the specific.
- Experiment. Move cards around to see how the content pieces will fit together. Do not think of style, cross linking or other irrelevant matters at this point. Focus on top down navigation.
- Transfer note card hierarchy into a spreadsheet (or other flow chart software).
- Identify each page by filename, title and short content description.
- indicate the file names that are different from old site or where file names will no longer be used.
Index Cards
Step 3 - Wire Framing: Prototype
Make a Live Test Prototype (bare bones) site built to test the site outline. This will give you a feel as to how the navigation will work and if the content has been correctly chunked.
A wire frame will give the sense of how one will move about the information space. Later on, in Step 5 - Build, the wire frame will be used as the place into which your new site will be built.
Wire Frames are but one way to examine the Information Architecture of your new site.
See this Information Architecture Document
Milestones
- Using the information in the spreadsheet create "blank" pages that will become the new site. Use the file names and directory structure as developed in your spreadsheet.
- Use a Server Side Include for the navigation.
- The wire frame does not have to be the entire site (at this step).
- Create Information Architecture Documentation (if desired).
If the site is small wire frame the entire site. For larger sites, wire frame as much as possible (and focus on difficult navigation issues).
Consider using a Flow Chart for sections of your site that are difficult to understand and that require user inputs
Step 4 - Templating: Build An Interior Page
Design and build a typical interior page. Layout, navigation issues are settled in this step.
Template is optimized for production. Do NOT proceed to STep 5 - Build until ALL design issues have been addressed and resolved. Why? The template will be copied to produce the other pages and you'll only be making matters much worse if you do not first optimize your template.
Two Different Approaches To Begin Template Production
- Graphical Composite (Layered Master) to Web Page Template
- Web Page Composite
Regardless of approach the end result will be a template that will serve as the model to build all other pages.
Milestones
- Build one interior page (usually a Level 1 Page) most representative of the site. Use real or greek copy.
- Decide and develop navigation interface (exposed or hidden)
- Decide design standards and accessibility issues. Table or CSS based layout.
- Decide and develop all styling requirements.
- Resolved browser support issues.
- Separate structure from style. Do the XHTML first, then do CSS.
- Create CSS after html is final and valid.
- Decide and implement design objectives (standards, accessibility).
- TEST TEST TEST
Sample Page Template - Photoshop Template > Web Page
Sample Page Template - Web Page
Step 5 - Building: Produce Front And Back End
The site is built into the wire frame using the template as the base design. Content from the old site is copied over and edited for the new site.
New elements are created filling out the wire frame.
Milestones
- Set up production server space that is password protected. Preferably this will be the same server that will be used for the new site.
- Recycle content from old site to new editing code and copy where necessary.
- Search Engine Optimize your copy for organic search results
- create Server Side Includes for repetitive content
- Create CGI scripts
- Design and produce Exceptions Pages.
- Design and produce balance of graphical elements and other media assets (if applicable.
- Place meta data in all files
- Validate as you work through this production step.
- Get others to alpha and beta test your site. Make sure to articulate what you want tested. Make revisions based on findings.
Step 6 - Testing/Soft Launch
Final tweaking before or at time of launch. This can take place just before or immediately after an unannounced re-launch.
Launch means after the password protection has been removed.
Milestones
- Establish Site Migration methodology.
- Web Site Metrics is kept or replace with new system
- Soft launch can be tied into to early bird promotions
- Link validation
- Final code clean up
- Spelling and grammar checks
- Remove replaced or no longer needed files and create redirects
- Final test of all scripts
Step 7 - Final Launch
Get ready to launch even if your site is not perfect. It never will be.
Milestones
- Post Launch Fixes (When is a site ready to be re-launched?)
CONGRATULATIONS!!
Once that's done it'll be time to plan the next site makeover. Good web sites are never finished. They should always be - like your business or organization - in a state of evolution.
Proceed To Step 1 - Taking Stock.