Early Childhood Mall Re-Design

My second site re-design was created to fulfill the requirements of a final project for a Web Scripting course. The bulk of the final project requirements involved creating a Javascript-driven ecommerce site, but I chose to include a layout re-design of one of the sites that I originally created as part of the project. Due to the intensive manual labor involved with recoding the existing site to this re-design, the existing site has been converted over to a hybrid of the former version and the re-designed version. You can view the old version of the site in its entirety here, the re-design in its entirety here, and the live hybrid version here.

The following is a summary of my goals for the re-design, and then some screenshots comparing like pages between versions. You can view the Powerpoint Presentation of this re-design, as it would be presented to a client, by clicking here.

    Goal 1: Improve Aesthetic Impact

  • maintain look of site (color scheme) but streamline layout (less clutter)

  • streamline navigation on index pages with lots of links to subpages


    • Goal 1 Solutions:

  • changed inner table background to solid color instead of a background image, to improve text readability

  • reduced size of inner table border to make container appear more spacious

  • revised layout has clearly defined header, left column, right column, and footer

  • widen home page

  • Javascript-driven rollover image of children on home page creates a giggle

  • Javascript-driven pop-up menus used to replace lengthy lists of links on busy index pages


    • Goal 2: Modernize Code

  • remove deprecated code, but not at cost of losing visitors with old computers

  • stop using tables and HTML coding for layout

  • stop using HTML coding for formatting


    • Goal 2 Solutions:

  • pages written in XHTML transitional

  • layout controlled by divs and CSS

  • formatting controlled by CSS






    Goal 3: Improve Visitor’s View of Product Images

  • offer access to a larger version of each product image


    • Goal 3 Solution:

  • Javascript-driven pop-up windows used to replace display a larger version of each product image


    • Goal 4: Improve Some Managerial Headaches

  • make shipping statement look more attractive

  • make ‘view cart’ button easier to find

  • move links to managerial pages from under logo to left column

  • increase likelihood all fields of contact forms are filled out properly

  • personalize the user’s visit

  • consider use of an internal cookie-driven shopping cart versus the external PayPal shopping cart that is currently used


    • Goal 4 Solutions:

  • shipping statement prominently bordered and placed in header section of every page

  • cart graphic linked in header , and text link to cart placed in both side and footer navigation bars

  • managerial links moved to left column, and repeated in footer

  • Javascript-driven form validation forces user to complete all fields of contact forms

  • Javascript-driven customer log-in option allows for personalized welcome statement and populates visitor’s username into username box on every page

  • Javascript-driven shopping cart based on cookies was created for this project, however a cookie driven shopping cart cannot be used for a product inventory of this size