The homepage will be the first page to load. It will have a Javascript slideshow that will display photos of members wearing the merchandise and working for the organization. Each image will have a height of 215px and be centered on the page. This page is designed to be a visual introduction to the website and make the user want to learn more about the organization and purchase merchandise.
The shop page will allow the user to easily purchase shirts from the organization, fulfilling the main goal of the site. It will have a Javascript form that will use Ajax to send the order information to the organization. The web page will have 2 images on the page: one of the front of the shirt and one of the back of the shirt. The images have an upper padding of 40px between them and the heading of the page. Each image will have a height of 185px and will be aligned to the left of the page. There will be captions explaining more about the make and fit of the shirts using "Lato Hairline" 11pt. in black (from Google Fonts). There will be a space of 15 px between the two images. The Javascript form will use the font "Lato Black" 13 pt. in black (from Google Fonts).
The about page will include basic information about Wellesley Students for Hillary and the greater Hillary for America organization along with information about the merchandise. The about page will fulfill the goal of informing the user about the organization that they are supporting by purchasing shirts.
The get involved page will include information on how community members can get involved with Wellesley Students for Hillary or the greater Hillary for America organization, including information on upcoming events hosted by the organization. The page will prominently display a Javascript countdown to Election Day to remind the user of the main goal of the organization. This page will also include the option of having members of the organization write about their experiences campaigning in order to encourage others to do the same. This page will fulfill the goals of easily involving community members with the campaign beyond purchasing merchandise and of linking different members of the Wellesley community.
Due to the connection between Wellesley and Hillary, Wellesley Students for Hillary has been featured throughout the campaign season in various news outlets. This page will feature links to the different interviews done by the organization along with descriptions of the interviews. There will be an image on the page featuring the most recent press done by the organization. This image will be aligned to the left and will have a height of 205px. This page will fulfill the goal of emphasizing the importance of the organization and the campaign and creating interest in purchasing merchandise.
This page will include information on how community members can contact the Wellesley Students for Hillary organization in case they need more information or there is an issue with their merchandising order. This page will help fulfill the goal of allowing users to easily purchase merchandise and to work with the organization.
The Share drop down menu is not a separate web page, but is very important to the function of the site. One of the main needs of the client is the ability to easily share the site on forms of social media in order to increase the visibility of the organization and its merchandise. The drop down menu will be on the nav bar and will be available on every webpage. When the user rolls over the share button, a drop down menu will appear that will include share buttons for Facebook, Twitter, and Pinterest. There will also be an email button. The code for these buttons will come from the developer sections of these sites. The e-mail button will open the native mail application on the user's device and will be coded as part of the Javascript.
Filename | Description | Person in Charge | Deadline |
home.html | The homepage | Hannah | April 12 |
about.html | Information about the org and its mission | Hannah | April 12 |
shop.html | View and purchase org merchandise | Hannah | April 12 |
involved.html | Information on how different community members can get involved | Catherine | April 12 |
press.html | Links to different press and articles written about the org | Catherine | April 12 |
contact.html | Information on how to contact the organization | Catherine | April 12 |
header.png | Logo for the site's header designed on Photoshop | Hannah | April 12 |
countdown.js | A Javascript feature to countdown to Election Day | Catherine | April 19 |
slideshow.js | A Javascript feature to display images of the merchandise | Hannah | April 19 |
dropdown.js | A Javascript feature for a roll-over menu to share the site | Catherine | April 19 |
orderform.js | A Javascript feature that allows a user to order merchandise | Hannah | April 19 |
styling.css | The stylesheet for the website | Both | April 22 |