logo

Mead.Design

Animal Shelter

Introduction

The Animal Shelter website is not a fully built out web application, but it has a lot of great features for more advanced web design students to learn how to design, build and make function properly. In the process of building this website, students learn a great deal of best practices from both a user experience design and coding perspectives.

The site is responsive and the first job is to take the design mockups, as created in photoshop, seen in this section, and convert them to HTML and CSS, making the design fully responsive along the way.

Beyond just being a simple HTML webpage, this site uses a database to store records for animals up for adoption, and the content of that data is pulled from the database and displayed on the front page.

You can view the completed project here:
http://mead.design/animalshelter

as02

About the Database

The database for this project is very simple. Just one table to keep track of the list of animals available in the shelter. If there were to develop into a more robust web application, additional tables would be needed for all kinds of information that would be necessary to track in a real business. But for the purposes of this project, it is important to keep it simple so that students can focus on how to get information into the database, then back out and displayed on their page.

You can see the fields that hold information about each animal in the image in this section.

as03

The Adopt Page

The adopt page is the other page in the navigation that is linked up and much of the site’s functionality is built into that page. There is a lot of great examples in terms of both functionality and design. The slider at the top of the page will show pictures of animals that have been marked as feature animals in the database.

The column on the left is pulling records from the database about animals that are up for adoption, and a nice lightbox effect has been added to the photos, so when you click them, they actually open up larger, enticing potential viewers to adopt those animals.

as04

Adding to the Database

At the bottom of the page is a form that allows users to add records to the database. On a real Animal Shelter website, this form would probably be behind a login area, but for the purposes of this project, it made sense to include it here.

When someone uploads a photo and adds the other required information to the database, the image is copied and cropped at multiple sizes and stored on the computer. If the user chooses to make this a featured image, it will automatically be included in the slider at the top of the page. This kind of dynamic functionality is representative of the amazing things that can be done with PHP and MySQL.

as05

Additional Functionality

The pagination and search features also function properly and provide students with examples of what can be done even with simple one table database.

The “critter feed” on the right side of the page is real Twitter feed using the Twitter API to get data from a specific Twitter account and then I use PHP to extract the data and put it into a format that allows for custom styling.

as06

Featured Projects

  1. ZAP Creative

    Responsive Design, HTML, CSS, JS, PHP and WordPress

  2. Animal Shelter

    Responsive Design, HTML, CSS, JS, PHP and MySQL

  3. Experimental JavaScript

    Responsive Design, HTML, CSS, and JavaScript

  4. KITTENS FOR SALE!

    HTML, CSS & JavaScript focusing on jQuery plugins

  5. Syllabus Generator

    PHP & MySQL Web Application

  6. CodeSnap Web Application

    PHP & MySQL web application

More Projects

  1. 4.23 Microsite

    Experimental JavaScript Microsite

  2. Audio Space

    HTML, CSS & jQuery

  3. Bttrfly Productions

    HTML, CSS, JS, & WordPress

  4. Desktop Repainter

    HTML, CSS & JS

  5. Bluephant Dental

    HTML, CSS, & JS

  6. Zen Music Festival

    HTML & CSS

About William Mead…

William Mead Photo

This site shows some of my front-end design and development work and shows how I use these projects to teach students about those same topics.

Find me on these networks

Professional Qualities

  • Enthusiastic about teaching, learning, managing projects and building products for the web.
  • Deeply creative and always playful. Frequently engrossed in solving complex puzzles.
  • Thoroughly engaged in the design and web development industries.
  • A visual learner with an analytical mind.
  • Introspective and always striving for improvement.

Skills

I am particularly good at bending CSS to do my bidding, and I really enjoy creating custom interactivity with JavaScript. I am always excited about new problems that need to be tackled.

Contact Me…

I look forward to hearing from you. Please contact me using the form or directly by email or phone.

bill@mead.design
530-219-8998

Your Name (required)

Your Email (required)

Subject

Your Message

Anti Spambot Question