Client: Gallery

To display a range of photographs taken by photographer of each shop interior I have created a Gallery. These can be navigated to from 'Wild' and 'Wilder' pages.

I have used inline Javascript to toggleDiv. This fades out the background image and displays a grid of images.

Each image's opacity increases slightly when hovered over and links toLightbox.

The Lightbox version I have used fades outthe background again and allows you to view all images by clicking 'next' and 'prev'.

The images displayed are extracted from the database

and so the client can change the selection of images by removing images and inserting new ones.

Client: Activate/Disable Competition

Wild Clothing have decided to run a 'Design a T-shirt' competition aimed at students. This competition will not run all the time and so I have made it possible to activate and disable it.

The callout displayed at the top, over the header is the only link to the competition page and appears on all pages.

To disable the competition the client can navigate to the comp page in the CMS and click the 'disable' button. This will change details in the database and prevent the callout being displayed on all pages.

Client:Content Management System

My new and improved Content Management System is now up and running.

There are a few things I need to do but, I have added the function to insert new entry's as well as removing images and a basic text editor allowing my client to add bold, underline, italic,

• lists
• lists
• lists

and

1. numbered lists
2. numbered lists
3. numbered lists

This was done using TinyMCE.

I have also incorporated Javascript/JQuery to create a swish 'Insert Content' form. The next section appears when required fields have been filled. I'm hoping that this will make it easier to use as it will follow a more logical order. This form also works if Javascript is disabled. Again to make things easier for my client I have used inline javascript to toggleDiv a help prompt. At the moment I only have one which explains why an Image Description is needed.

Google Analytics has been linked and there are also links to the main website for easy access.

I have asked my Client to start entering content so I can help him if he has any issues and adapt the CMS if necessary. Following a phone call today it seems he is having trouble so change may well have to be affected. A user manual may have to be created as the client has limited experience online.

Client: Meeting #4: 10th March

At the fourth meeting with my client,I presented a functioning website following my newest design. This is currently accessible online along with my customised Content Management System.

Photo's of in and around the shop have been taken by a photographer and are now available. Robin is currently selecting a short list from the mass of images and I will collect these shortly. I have also suggested that by Robin inputting the content into the CMS soon, as this will allow me to make any alterations to make it easier for him to use.

To Do List

1. Link Website to CMS
2. Link CMS to Analytics
3. Photoshop product logo's into wild shop front image
   
4. Make interactive shop front (Javascript)
5. Add upload image function to CMS
6. Develop CMS textfield to include formatting (tinymce??)
7. Look into using SifR text replacement for strap line.
8. Create grid of images with lightbox
9. Input background images
10. Contact form
11. Competition form
12. Allow Competition to be Activated and Disabled via CMS
    
13. Photoshop Competition Callout
    
14. Cross Browser Checks
15. Validation
16. Create CMS Help sheet
    

I am aiming to do all of this by the end of next week so I can carry out user testing and cross browser checks before submission on March 24th.

I have also given Robin an invoice for the Domain and Hosting costs, a copy of which will be included in my submission.

Client: TinyMCE Alternatives

TinyMCE is a Rich Text Editor that allows you to format text. e.g. bold, italic, strike through, bullet lists etc. It basically attaches itslelf to text fields.

I am thinking of using TinyMCE in my Content Management system so my client doesn't have to learn html tags inorder do simple formatting. The main functions i want him to be able to have are:

• Bold
• italic
• bullet points
• links
• underline

Some alternatives:

MooEditable
WMD Editor
YUI(Yahoo)
CKEditor
TinyRTE

Client: Page Designs

The background image of each page will fill the screen even when zooming in and out of the page. It will also be changeable by the user through links. e.g. the location of Wild Clothing "3-5 Broad Street" will change the background to Google Maps. Find example here

Similar to the competitions page (navigated to via home page), the sidebar will be scrollable to allow for future additions of text.

The homepage will look very similar to the 'Wild' page but the shop window will have hover states to allow for interactivity. Product information will be viewable from this page.

Client: Designs-Competition page

Robin has decided to run the competition so here are some page designs following my new template.

The side bar on the RHS will be scrollable while the rest of the page will stay fixed shown by the first two images.

I am currently undecided about using background images on this page. My current choice of images makes the page busy in comparison. To make text legible I have included transparent boxes behind, however this make it even busier. The images used in these screen shots are ones I have taken in Wild Clothing. A photographer is due to take more and so if these suit these page layouts then I may include them.

Client: Meeting-photo's

While meeting Robin to discuss more designs, I took a range of images of Wild Clothing's interior. This was for reference of the shops interior when not there as the website should be a reflection of the shop and i don't have picture perfect memory! These images may also be included in the website, as my client wishes to have a gallery of images.

Client Project: Menu bar

I have chosen this kind of 'bar style' navigation for wildandwilder.com and I wanted each bar to grow when the mouse hovers over the link.
CSS only allows the bar to be one size when the mouse is hovered over the link (a:hover) and another size when the mouse is off the link (a:link) so I have opted for a Javascript alternative that animates a div's size. I found an example of growing and shrinking a div and by changing a few values and altering the CSS I have managed to create an animated menu using javascript.

Client: Jquery Form

Having never attempted JQuery before, I thought it wise to take a tutorial and adapt it to my situation rather than wasting time learning how to do something like this from scratch.

Client: Domain Names

I have performed reseacrh into what suitable domain names are available for Wild Clothing.

www.wildclothing.com purchase through domain brokers, auction bids.
www.wildclothing.co.uk free
wilder.com
wildvintage.com Only a title
wild.com backorder
wildandwilder.co.uk available
wildandwilder.com available
www.vintageclothingnottingham.co.uk and.com available

Designs

These designs show development from my previous meeting with my client. I am not particularly taken with any if I am honest but thought I should blog them as they show a clear development of the navigation.

I felt that the previous navigation was perhaps a bit too complex and have decided to simplify matters by having 4 main pages in the navigation. This way the site should be more adaptable at the clients end, as the 'Competition' page can be located off of the homepage and removed as need be. It will also make the information more concise and userfriendly by combining 'Visit Us' with 'About'.

Keeping the content readable and at the same time, dynamic, interesting and incorpoating the existing branding; does cause some issues. In a lot of ways I prefer my first design as it solves both problems.

Client: SEO-useful tools

For Wild Clothing's website, I am going incorporate a level of SEO. For this I have been researching techniques and have come across some useful tool when developing SEO techniques.

Seobook.com have a Firefox Add-on called Rank Checker. This allows you to easily find where any website ranks in Google, Yahoo and Bing Results. All you have to do it sign up.

Google have a Keyword Tool that generates a list of words linked to the word or phrase you submit. It displays these results by how often they are search for and also gives you other stats unlike other keyword generators I have come across.

Client Project: Interative shop window

This gives a whole new meaning to an interative shop window...for Elle MacPherson’s Intimates Store by Mindshare

found here

Client Project: E commerce

Similar to Wilder Clothing, Oxfam have a range of items that are individual. They sell a range of these products online despite the time it must take. They get around this by getting volunteer to list the items online.

Although it would be great to have items selling online at wildandwilder.com, even after further investigation. I don't think this is plausible....