Responsive Design

This is my mood board for my website redesign of the Cape May County Zoo. I would love to be able to use my style of illustration on this project, as well as using some really great photos of the animals at the zoo I found on the web. I want the website to appear fun, it’s at a beach so it needs to be appealing to people who maybe don’t want to spend every day on the beach in the sun, or have younger children and want another activity to do. My family and I frequent Cape May on vacation and we make it a point to go to the zoo every time we’re there so it’s a place close to my heart and it’s really a great zoo with a large variety of animals and activities that’s pretty underrated for the simple fact that it’s in a beach town in New Jersey.

Here are my wireframes for the Cape May Zoo website re-design. I used Simple Grid (http://simplegrid.info) for the layout, I’m not sure if I did it correctly though. The concept of the slots was easier for me to understand, but when it comes to it getting smaller I don’t know if I followed the format the way I was supposed to.

Home Page:

Desktop:

 Tablet:

 Mobile:

Subpage (Snow Leopard Project):

Desktop:

 Tablet:

 Mobile:

The main navigation switches from the left side to the top when the size is reduced from desktop to tablet, and then when it is reduced further to mobile, the icons that are along with the text in the nav will also disappear. The only other information that I made disappear is the Facebook and Zoo Friends information on the desktop version because this isn’t something that would really be necessary on tablet or mobile versions. In our practice website, I used a framework that had a responsive image scroller which I thought would look nice, but it may be a headache to develop. So instead I’ll just use one large photo with a type treatment of some kind. The current website has way too many pictures, although the animals are what draw people to the zoo, you don’t want them to see everything you have to offer before they even get there.

Here are my style tiles for my responsive design website on the Cape May County Zoo. I made them very different on purpose, I don’t know which direction I want to take the website in yet so it’ll be nice to hear feedback from the class. I like certain aspects from both of them though so a combination of the two might by nice. I want to keep the website clean and family friendly without making it too childish.

Updated Style Tile:

The feedback I received in class was that this style tile was much stronger then the other, the feel went more with what I’m trying to accomplish and was different enough from other website I’ve designed that it will be successful on its own. I implemented the textures from the other one with some changes in tone, and changed the botton a bit.

Here is my attempt at turning my wireframes into a working responsive design site. Coding manually is going much easier for me then trying to use a framework. I stared at Simple Grid for a few hours and it was just too confusing.

Home Page: Desktop

Home Page: Tablet

Home Page: Mobile

The sub page is giving me a bit more difficulty. I can’t seem to get an image to resize properly, even with copying the code directly from my homepage, which works correctly. Also, if I make the mobile size as small as it goes, the “more info” div seems to go behind the others which isn’t right and I’ve tried numerous things to fix it. Also, I’m not sure if the glitches that happen while resizing it are supposed to happen or not.

Sub Page: Desktop

Sub Page: Tablet

Sub Page: Mobile

Very happy with the progress of my responsive design website thus far. There are a few things on the subpage that aren’t working properly but I’m hoping with a bit of guidance I can get them on track. I actually found it refreshing to be designing right in Dreamweaver instead of making a mock-up in Photoshop, which was surprising for me.

Home Page: Desktop

Home Page: Tablet

Home Page: Mobile

Subpage: Desktop

Subpage: Tablet

Subpage: Mobile

The live website is available to view here. (resize window to see responsive properties at work!)
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s