About This Project

Site Authors

  • Concept: Imani Butler
  • Imagery: Chelsea Potts
  • Layout: Amy Krakar
  • Code: Mark Brautigam

The Objective

Create a web site for a business, service, or non-profit organization. Girl Power is a fictitious company that provides girls with science activities and mentoring by industry leaders.

The Challenges

The site has several target audiences: girls age 10–18, their parents, their teachers, and industry leaders who might like to serve as mentors. The site must effectively reach each of these target audiences without alienating the others.

The site also solicits donations from interested individuals and corporations who wish to lend support.

Our Solution

This web site uses red and orange, which speak of power and excitement without being “girly.” The pages use a common template created in PHP to ensure consistency.

The large blocks on the home page are clickable targets. The fonts were chosen because they work well together and each looks good on various browsers in its particular location on the page.

The site uses media queries and jQuery to implement a truly responsive design, and was tested on many desktop and mobile browsers.

The donation form uses the master theme to make a professional and trustworthy form that people can use to make donations. It also explains why such donations are necessary.

Special Features

When the code is run from a server that is accessible to the outside world, two special validate links appear in the footer. This makes it easy to check that the HTML and CSS still validate after new development.

When the code is run by double clicking on a file, the AddThis widget cannot appear in the footer. The page attempts to detect this, and replaces the widget with a static image that does not have links.

Code Organization

The source files are in a directory called php. They are PHP files but they have the file extension HTML. You can export the code into the html directory by issuing the export.csh command, which compiles all the PHP code into HTML files and copies all the supporting files like images, scripts, and styles.

  unix > ./export.csh

Note that both PHP and HTML files have the file extension html. The only way to tell the difference is that the files in the php directory must be run with a web server like Apache or MAMP, while the files in the html directory can be opened directly by double clicking on them.

The master PHP file is template.php and it has separate functions to draw the headers (including the banner), the navigation tabs, the breadcrumbs, the footer, and the footer validation links.

Scripts

  • common.js contains all the custom code written by us to power the site.
  • css3-mediaqueries.js adds media queries capability to IE6-8.
  • jquery.rwdImageMaps.js resizes the imagemap links when the image is resized.
  • selectivizr-min.js enables CSS3 on Internet Explorer.

Styles

  • common.css contains the bulk of the styles for this site.
  • ie.css contains styles for IE6-8, but aren't suitable for other browsers or don't validate.
  • ie7.css contains styles for IE6-7, but aren't suitable for other browsers or don't validate.
  • PIE.htc enables the border-radius style (and other CSS3 styles) on IE.

Note: some of the scripts and styles seems to have overlapping functionality. We've activated the portions of each module that work for this site, and left conflicting portions inactive.

Responsive Design

The site's responsive design is achieved by a combination of CSS media queries and JavaScript/jQuery. It has special versions targeted to 960, 768, 600, 480, and 400 pixels. It has been tested on iPhone, iPad, and Android.