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 |