Walk For Animals is San Diego’s largest dog walk with a 2-mile course around NTC Park at Liberty Station. You and your canine companion(s) will have a great time celebrating the love for animals while raising valuable funds needed to ensure that every homeless animal can find a loving home.
Create an original, responsive HTML/CSS web site for the San Diego Humane Society’s Walk for Animals event. In conjunction with the web site, create a marketing campaign that includes advertising materials and event giveaways.
Front End Development
With so many different platforms available these days, it is no longer a case of 1-size-fits-all. Being responsive means the web site has been designed/implemented to provide a good user experience on all different platforms: mobile, tablet and desktop.
San Diego Humane Society’s web site was built using the Bootstrap framework to ensure it renders appropriately on all platforms. Bootstap was favoured over Foundation because it has four built-in breakpoints: Mobile, iPad, iPad Pro and Mobile.
Within the <head> section of the .html file, links are added for Bootstrap (and other CSS styling):
<link rel=”stylesheet” href=”css/bootstrap.css”>
<link rel=”stylesheet” href=”css/font-awesome.css”>
<link rel=”stylesheet” href=”css/fontStyles.css”>
<link rel=”stylesheet” href=”css/walkForAnimalsStyles.css”>
Due to the different display sizes/windows, it may be necessary to change the order in which components are displayed. On the Walk for Animals web site, when viewed on a tablet or desktop, the footer displays two columns of data versus one column of data on a mobile device.
To change the order of the displayed components, such that the San Diego Humane Society’s logo is displayed under the social media icons (on a mobile device), the push/pull commands were used.
<!– Social Media –>
<div class=”col-xs-12 col-md-6 col-md-push-6″>
<p class=”text-center nestedSectionPadding”>
<span class=”socialMediaIcon”><i class=”fa fa-facebook fa-2x”></i></span>
<span class=”socialMediaIcon”><i class=”fa fa-twitter fa-2x”></i></span>
<span class=”socialMediaIcon”><i class=”fa fa-linkedin fa-2x”></i></span>
<span class=”socialMediaIcon”><i class=”fa fa-instagram fa-2x”></i></span>
<span class=”socialMediaIcon”><i class=”fa fa-flickr fa-2x”></i></span>
<!– Humane Society logo and location information –>
<div class=”col-xs-12 col-sm-6 col-sm-pull-6″>
<!– Creating some additional space when the components are stacked on top of each other.–>
<div class=”hidden-sm hidden-md hidden-lg”>
<div class=”nestedSectionPaddingSm”> </div>
<img class=”sdhsLogo” src=”images/logoSDHSBlack.png” title=”San Diego Humane Society logo” alt=”San Diego Humane Society Logo”>
<p class=”nestedSectionPaddingSm”>Copyright <span class=”glyphicon glyphicon-copyright-mark”></span> 2017 San Diego Humane Society<br>All Rights Reserved</p>
Bootstrap provides the baseline styles defined within the bootstrap.css file (imported in the <head> section of the .html file). Some of Bootstrap’s generic styles were overwritten so that the web site includes the client’s own branding (colours and styling).
Incorporating Client Branding
The San Diego Humane Society’s goal is to get members of the general public signed up to participant in their annual Walk For Animals event. With this in mind, the “Register” call-to-action button needs to be larger than life and impossible to miss.
As a design strategy is was determined the “Register” button would be displayed as the only button on the row and not be displayed as part of a suite of buttons on the same row. This elevates the button’s importance above other buttons.
Using the standard Bootstrap styling did not create the desired button emphasis needed; additional styling was required. See below.
Register button code…
<p class=”text-center”><a href=”register.html”><button type=”button” class=”btn btnStyleLg actionBtn” role=”button”>Register</button></a>
.btnStyleLg /* Used for the “Registration” button on the Home page. */
border: solid 1px rgb(11, 167, 180);
background-color: rgb(11, 167, 180);
border: solid 1px rgb(11, 167, 180);
color: rgb(11, 167, 180);
jQuery allows the developer to control and manipulate components within the page page. Within the Walk For Animals project, jQuery is used to manulate choice/selection buttons and hide/show containers defined within the .html file.
Choice/selection buttons function similar to radio buttons… the user may select a single button from a group of buttons, such as donation amount. When selected, these buttons are orange, when not selected, they are white with an orange border. These buttons are located on the Participants and Donate pages.
The following example shows how jQuery can be used to add/remove styling classes from buttons.
The home page contains a section for user stories. Six dogs are featured and each dog’s story summary can be viewed by clicking on the dog’s image (directly under the selected image). The .html file contains all the dog stories but (through the use of jQuery), only the story pertaining to the selected dog is displayed to the user. Below is the code for when Ramsay is selected (see image above).
The project was initiated with the creation of a set of wireframes for each of the main platforms (desktop, tablet and mobile). This ensured a high-quality, optimal design for each platform and reduced the need to redesign key components during the mockup and/or coding phase(s).
Once the wireframes were complete and signed off, the wireframe placeholders were replaced with images and text. As images and text were identified, the designs were tweaked to accommodate larger image sizes and text descriptions.
The web site and marketing campaign must incorporate the client’s logo and style, and adhere to the same art direction. The website will be responsive, designed to work on desktop, tablet and mobile. It should be a companion to the marketing campaign.
The primary colour palette is made up of the three colours used within the Walk For Animals logo.
#(0, 167, 182)
(254, 191, 80)
(232, 112, 41)
The tone of copy throughout the web site will use an informal/family style; a tone that one might find in a conversation between two friends. The style is intended to exude “happy” and “fun”. We want people to be a part of this fun event. To speak to the tone of copy and style of conversation, the following web-safe fonts have been selected for use:
- Headings: Quicksand
- Body Copy Text: Montserrat
The deliverables for the marketing campaign consisted of the following items:
- Tote Bag
All participants in the Walk for Animals event get the special “Participant” pin. Over the years, these pins have become collectors items among the regular participants. Some participants wear all their pins to each event.
A “Pack Leader” pin goes to the individual who raises the most sponsorship money. The leader board is published on the web site and kept up to date as donations are received.
A “Volunteer” pin is given to each volunteer, as a thank you.
The goal was to design the three pins to look like a set. On the pins, I used “Family Guy” font for the date and label text and “Cooper Black” for the smaller, detail text. Each dog was initially created in Illustrator, then (in Photoshop), converted to a 3-D object and rendered.
Originally the dog was designed so that he was facing inwards and only the back of the dog was displayed. However, during the poster design it was decided that seeing the dog’s face and his facial expressions was much more compelling and inviting. The pins were updated with the new dog design and the font of the dog placed on the poster.
The use of multiple dogs in the poster and the tote bags was designed to represent families (and the family event).
$300,000 funds raised
Participating in the walk helps San Diego Humane Society provide food, shelter and a second chance for more than 30,000 homeless animals.