[REQ-TEMPLATE] Animal Rescue Website $300

[Electronic Solutions]

Animal rescue organisation needs a website creating, no set colours etc but need the following included…

• Country dropdown menu (top right) to load country specific versions of the site (we will create these in the future – not part of this contest).

• Logo / header (top of page) to include a space for a 428 x 60 advertising banner.

• Scrolling gallery (horizontal) with pause on mouseover, each picture clickable to its own page.


Pages required…

• Home page – as many spaces for banner ads as possible (maybe as an ‘our sponsors’ column?) in standard sizes 120 x 60, 120 x 90, 120 x 240 – and a largish area for ‘latest news / events’ etc.

• Animal gallery – this will hold a few basic details and a thumbnail of each animal, each of which will link to that animals details page (see below)

• Animal details template page (that we can duplicate and edit for each animal) – will need space for details of the animal, upto 6 pictures (thumbnails with option to enlarge) and a space for a youtube video of the animal.

• Contact us

All the creativity is down to you – the above points are thing we need, the finished product is open to your unique designs!

We are not looking for fully finished designs to enter this competition – just an initial design concept – as per forum rules please post your unique designs here on the forum.

Contest ends 10 days from posting.

Payment by paypal.

 

[Soofi]

removed

 

[Erdy]

"Scrolling gallery (horizontal) with pause on mouseover"

From this line it looks like you want a working website. Just to make it clear, when it is only design you get only a photoshop psd file. But in this case you want a working website with html pages, pictures and working gallery. Is this correct? I'm just asking to make sure.

If it is for a functioning website would you prefer that the designers post their entries here (as requested according forum rules) and add a link to their demo site?

1. How many pictures (roughly) needs to be on the scrolling gallery ? 10, 20, 100?
2. When you click on the picture does it have to open to a web page (where you can add text) or is it enough if the picture enlarges.
3. The dropdown country selection is not part of the site yet and you don't want it added. But then why did you mention it?
4. What name should we use for the website? Is it "Animal Rescue" ?
5. Are you sure you want lots of ad spaces on the home page? If you are planning to use ad providers, the number of ads per page might be limited.


Cheers
Erdinç

 

[Electronic Solutions]

Do you just need design & layout or the html code as well after?

Thanks, J

Hi, it needs to be coded too please (a working website).

---------- Post added at 11:54 PM ---------- Previous post was at 11:47 PM ----------

From this line it looks like you want a working website. Just to make it clear, when it is only design you get only a photoshop psd file. But in this case you want a working website with html pages, pictures and working gallery. Is this correct? I'm just asking to make sure.

If it is for a functioning website would you prefer that the designers post their entries here (as requested according forum rules) and add a link to their demo site?

Yes a fully functioning site please.

As per forum rules entries need to be posted here.

1. How many pictures (roughly) needs to be on the scrolling gallery ? 10, 20, 100?
2. When you click on the picture does it have to open to a web page (where you can add text) or is it enough if the picture enlarges.
3. The dropdown country selection is not part of the site yet and you don't want it added. But then why did you mention it?
4. What name should we use for the website? Is it "Animal Rescue" ?

The scrolling gallery will have a picture for each animal there is - this will vary daily but probably 30 - 50

When you click on a picture on the scrolling gallery it needs to open the page related to that animal.

I do need the country selector added but it won't actually link to anything until the site has been translated.

Animal Rescue Europe is the name of the organisation, www.AnimalRescueEurope.com

 

[Erdy]

Electronic Solutions,
You might want to add some additional requirements to the opening message because otherwise the functionality of the website can not be guaranteed. Here is a suggestion. These are current industry standards for web design, which I also follow:

1. The site needs to be CSS based. No tables to be used for layout.
2. The site needs to pass XHTML Transitional 1.0 validation on this site:
The W3C Markup Validation Service
3. It needs to be valid CSS according this validator:
The W3C CSS Validation Service
4. It needs to be cross browser compliant. Meaning it needs to work in IE6, IE7, IE8, Firefox and Chrome.

 

[Electronic Solutions]

Any entries coming?

 

[Erdy]

I'm working on this. I will post something in a few hours.

Hi,
Here some logo versions. If you can tell me which one is better I can show that one on the page.

 

[Erdy]

You can see the page live here.

This is what I have done so far:

The homepage is finished. There is fully functional menu (sub pages are missing yet), scrolling gallery (again sub pages are missing), language selection buttons on top, banner places on different areas and a news publishing system with user login and admin back end.

Next, I'm planning to work on the other pages.

I will post updates in this message.
Erdinc

 

[Soofi]

removed

 

[Electronic Solutions]

I'm working on this. I will post something in a few hours.

Hi,
Here some logo versions. If you can tell me which one is better I can show that one on the page.

Hi, sorry for not getting back to you sooner..

I like this logo but could you replace all the little paws with one big one (same position)?

---------- Post added at 12:56 PM ---------- Previous post was at 12:52 PM ----------

You can see the page live here.

This is what I have done so far:

The homepage is finished. There is fully functional menu (sub pages are missing yet), scrolling gallery (again sub pages are missing), language selection buttons on top, banner places on different areas and a news publishing system with user login and admin back end.

Next, I'm planning to work on the other pages.

I will post updates in this message.
Erdinc

Excellent, Excellent work - can't wait to see more....

Thanks for your efforts.

---------- Post added at 12:57 PM ---------- Previous post was at 12:56 PM ----------

Working on it, and iwll post something in next few days, Thanks

Thanks for your interest - looking forward to your entry.

 

[Erdy]

Hi,

The little paw were to simulate the European Union flag but I will change it as you requested. You are the boss. Bye the way, check the live version to see how I altered the design from what it looks like in that screenshot. I'm starting to work on it in an hour. Bye.

Edit:
Here is the new logo: SEE LIVE HERE

 

[Soofi]

removed

 

[Electronic Solutions]

DONT.net - thanks for your entry but I have to be brutal and say they don't really excite me!

We mainly concentrate on dogs, cats and a few donkeys (don't get too many deer, toucans and monkeys!)

There seems a lot of wasted space on the scrolling gallery which could be better used with bigger pictures, the news sections are very small and seem to offer no possibility to include pictures / video etc.

there are also no spaces to advertise our sponsors!

Sorry to be brutal but it just doesn't excite me

 

[Erdy]

Hi,
I added a youtube video to the news. See live.

You just paste the embed code that you copy from youtube. On the website posting news works similar to posting forum messages.

I have been thinking how to design the gallery and animal profile pages. I don't think you want a database driven advanced cms solution. So I have been looking at other dynamic but non database solutions. Of course just static pages will work as well. I'm leaning towards static solutions to make the site easier to administer.
I'm assuming that you don't have experience with dreamweaver templates and I assume you don't have PHP experience.

DW templates let you manage multiple pages that have the same sections. For instance if you have 50 animal profile pages, each one of them will have the same header, menu and footer sections. You don't want to edit 50 pages one by one.
To solve this without database driven CMS and without Dreamweaver templates I will apply server side includes. This is a static solution. Basically you put the menu on one page and then include that page on all profile pages. When you need to change the menu you only change one page and only upload one page. This is better than DW templates.

By the way, I'm using editable text on the menu and no images. The menu is created with CSS only. If you have firefox go to the live page and turn off styling from "view/page style/no style" and you will see the menu as plain text. This makes it easier to add and edit menu items.

Edit:
These pages are added:
1. about,
2. contact (this one is functional now)

 

[Soofi]

removed

 

[Electronic Solutions]

Hi,
I added a youtube video to the news. See live.[/URL

I have been thinking how to design the gallery and animal profile pages.

Hi, for the gallery I was just thinking a simple grid idea that I can just change the pictures on as and when, thus....



And the animal profile pages can also be quite simple....

If you could create one page that would have say 6 picture placeholders (with maybe an 'enlarge on mouse over' facility) and a placeholder for a youtube video of that animal and then a free text area that we could edit - then we could just duplicate this page for each animal and change the photos / videos and text (we have a volunteer that can do basics so we can manage that!) and then we can put this animal on the gallery page and edit the hyperlink from it to the specific profile page.

 

[Soofi]

removed

 

[Electronic Solutions]

Hi,

Here is something that I was able to weave out for you as per requirements specified. Please let me know your feedback and changes, if any required.

Live link

will start with inner pages, once suggested.

Thanks, J

Hi J,

MUCH MUCH better!!! Thanks.

There are one or two minor things I'd ask you to change but they are so minor we won't worry about them at this stage...

I'd very much like to see your take on the 'animal gallery' and 'individual animal profile' pages please..

Thanks again.

 

[Soofi]

removed

 

[Electronic Solutions]

Anybody else fancy submitting an entry?
Only two so far.

 

[Erdy]

The gallery page is ready:

SEE IT LIVE HERE

There is a size limit for gallery thumbnails.
max width 160px
max height 160px

You just put the thumbnails inside a folder with the name 01.jpg, 02.jpg etc. and it will position itself.

There is only one line space for the text. Let me know if this works for you. I tried to make it as easy as possible for an average computer user.

Also you can create accounts for other people to post news. I have added a "post news" link to the footer.

---------- Post added at 07:56 PM ---------- Previous post was at 07:09 PM ----------

Electronic Solutions,
The thumbnails on the gallery page and the ones on the home page are for the same animal aren't they? I don't want the user to prepare two sets for the same animals.

 

[Electronic Solutions]

There is only one line space for the text. Let me know if this works for you. I tried to make it as easy as possible for an average computer user.

Also you can create accounts for other people to post news. I have added a "post news" link to the footer.

---------- Post added at 07:56 PM ---------- Previous post was at 07:09 PM ----------

Electronic Solutions,
The thumbnails on the gallery page and the ones on the home page are for the same animal aren't they? I don't want the user to prepare two sets for the same animals.

I will apply a new different system that grabs thumbnails from gallery page and resizes them all to the same height before serving to the home page.

Hi, yes one line of text is fine on the gallery page it will probably just be the animals name...

You are correct about the pictures, infact the same pic will appear on the scrolling banner on the home page, on the gallery page and as one of the pics on that animals personal 'profile' page.

 

[Erdy]

the same pic will appear on the scrolling banner on the home page, on the gallery page and as one of the pics on that animals personal 'profile' page.

This is how I guessed it would be. I have already added auto resize feature to the scrolling gallery on home page. No matter what height the actual thumbnails have they are auto resized to 160px height before served to the home page.

 

[Erdy]

I will continue working on the animal profile page later on. In the meantime I just want to show you some screenshots of the site structure because these behind the scenes are the real beauty of the website. I could have created a fancy wordpress website with mysql database but that would require a long learning stage before you can control the website. Instead I designed things especially to make it easy to manage for a less experienced user.

In this picture you see two folders with the name 01 and 02.
http://i36.tinypic.com/9awbi0.gif
These are the folders for Daisy and Goldie. I designed the structure so that everything inside the profile folder has the same name. In other words, you just duplicate the folder itself and change only the folder name. Then you drop in the new images.

Everything is automated. The home page slide show will not only grab the first thumbnail from each folder but it will also auto resize it. It will automatically link to the correct profile. So thats the front page sorted the moment you drop in the pictures.

The gallery page will also grab the first thumbnail and auto position it on the page and link the thumbnail automatically to the correct profile page too. As you add new profiles you just add one more line to the gallery page as seen on this screenshot:
http://i34.tinypic.com/2cia329.gif

When you drop in the images there is a size requirement for the first profile image (00.jpg). One side of it needs to be 160px and the other side either less or 160px too. For the other images there is no requirement for dimensions because this is completely automated. The small thumbnails that you see on profile page are auto generated. The bigger pictures on profile page are auto resized to fit the player.

The captions are controlled simply with notepad as you can see here:
http://i33.tinypic.com/11b7woo.gif

There is also the news posting system and contact form which both are already fully functional. Even though there is lots of functionality, this website doesn't use a database, meaning when you get the website folder and upload it, it will just work.

This is the administrator back end of news posting system: This allows posting news over your web browser from any internet connected computer. You can have editors all over the world.
http://i38.tinypic.com/dy0z0y.gif

 

[Soofi]

removed