Homemade! Cross browser and Screen size testing

Overall testing the site across different screen sizes, the site displayed successfully. Only two simple changes were needed one for the wedding and party pages the height had to be set to auto to stop overflow being hidden. The second was positioning the logo and page titles within the header absolutely so they would appear in the same position across all screen sizes. Luckily both of these changes were nice and simple :)

The site also works well on all browsers and only internet explorer of course has shown some issues! The site works completely fine down to IE6, however positioning of the site is slightly different within this browser. In IE5 the flash does not appear however the text navigation still allows the user to navigate through the site. A PNG fix was added so that PNGs would display correctly in IE 5/6.

The only other issue that was discovered through cross browser testing was that the toggle div on the cakes to order page does not work below IE8 however does work in all other browsers. This was not fixed before the deadline but is still being worked on to be resolved.

Homemade! Polaroid Captions

The client wanted to add handwritten captions to the polaroid images within the site. To achieve this they had to be written and then scanned in and edited into the polaroids. It was a painfully long proccess but i managed to get them all done before the deadline!

Homemade! Server Issues

If you have been trying to access the site recently I apologise if you have been unsuccessful as the site has been down due to the hosting switching to a new server! obviously there is nothing I can do about this but i hope it will be sorted asap!!!!

Homemade! Flash menu borads navigation

The client wanted a menu board navigation which was animated so that the boards jumped around and 'danced'. This was achieved using flash, but once implemented within the online version the links wouldn't work.

During a surgery with David it was identified that I had made a simple coding error and was calling the wrong URLs and simply had to number them correctly within flash. Once this change had been implemented the swf file then successfully linked to the pages when not online. However when added to the working site the links still didn't appear to be working!

David then asked me if i had changed the permissions within the flash publish from local files to network files, which stupidly I hadn't. After this extremely simple change of course the menu worked perfectly :)

A simple text navigation was added to the top of each of the pages to increase usability as if the user does not have flash they will still be able to navigate the website successfully.

Homemade! Images!

This means that the client is able to edit the images within the wordpress dashboard simply by upploading new ones and assigning a css class to allow the image to float correctly.

I have floated the images from the main body so they will appear in line where i want them to over the polaroid background.

I had problems with the upload as the server would not allow wordpress to create an uploads file to hold the images and therefore would not let any new images be added. This problem was overcome by manually adding a folder with the correct file permissions through the ftp. Once the uploads folder had been created the imgae upload within wordpress worked perfectly.

Homemade! Validation

I spent hours validating the site using the W3C Validator as I couldnt work out what was bringing up an error! Turns out the meta tag code was typed slightly wrong with an example I had found using 'META'and it actually needed to be 'meta'. There was also an error within the keywords text where the word cafe was displaying as Caf�. Once I had worked out these issues finally the site validated successfully :D

However due to wordpress widgets being applied for contact forms and sidebars there are errors on pages containing these but this is something i cannot change as the code is being written by wordpress.


The pages including the widgets are:




-Homepage
-Cakes to Order
-Sandwich King
-Contact Homemade
-Friends of Homemade


The pages without widgets which validate completely are:





-Cafe Menu
-Wedding Catering
-Party Booking
-Gallery
-Suppliers
-Find Homemade

Homemade! Flash Gallery

The client specified a flash gallery. It had been discussed that the images would pop up in a way similar to that of the bottles on the feel good drinks website.

However a plugin gallery using Polaroid’s was found and it was thought that this would be a better option as it ties in with the site theme more successfully. This idea was aborted as the hosting the client has gone with blocked the application and I could not find a way around this problem. However the idea of using Polaroid’s was kept.

An open source Polaroid stack gallery was found and adapted to display homemade images however after much work on actually getting the gallery to work the client decided she in fact wanted to return back to a more simplistic grid layout.

The final layout therefore consists of a grid of Polaroid’s which when you click on one brings up lightbox with captions for the photos.

WordPress Plugins!

I found a simple contact form plugin that I edited slightly for each of the pages that needed a contact form. These pages were:

- contact page
- party booking
- wedding catering
- sandwich king
- homepage
- cakes to order

The main contact form has the most required fields with, name, email, subject and message. The subject field is needed within this form, as it is a general contact so could be for anything. This form is inserted within the edit box of the page.

The contact forms for the party and wedding pages were cut down to only have the form fields, name, email and message.

And the subject was set to automatically appear as wedding catering or party bookings for ease for the user. These forms are inserted within the edit box of the page.

The rest of the contact forms had to be inserted within sidebars as they needed to be positioned within the page. Sidebars were set up in the functions.php with a simple line of code.


The code was then called within the page.


And then the sidebar appeared in the themes – applications within the wordpress dashboard and then by adding the contact form code within it, it would then appear on the page in the required position.


The homepage contact form simply consists of an email field, as it is to join the mailing list so this was all that was needed. The subject again was set as mailing list, and the email address was changed to send to mailinglist@.


The cake to order contact form only has the form fields, email and message. Name was omitted due to the space available within the page and this was the field that was least important. The subject was set to automatically appear as cakes to order for ease for the user.

The sandwich king contact form has the fields, name, email and what is your favourite sandwich and why? The subject will appear as sandwich king for ease.

WordPress....WordPress.....WordPress!!

Ok I have neglected the blog for a while with 2 hand ins and all this wordpress building but I can now say I am liking wordpress and all it can do!

The first thing I had to do when it came to wordpress was to download the file package. Once I had done this I had to make a few minor alterations to the wp-config file to allow wordpress to link to the websites database. I also followed advice from the smashing wordpress book I had read and generated authentication keys to help keep it more secure from hackers. The dashboard was then set up and the link was made between the two.

The next job was to add the pages to the blog and activate my theme within wordpress. This was a nice and simple task and didn't take long at all :) To create a theme within wordpress I had to name a folder within the theme folder (in this case I chose homemadecafe) and then within that folder you have all the usual files of the website, index and pages, images, swf files, javascript, css etc.

As I had multiple layouts for the pages i had to add a piece of php code at the top of the site pages to allow a specific template link to the css of that page. This was then linked within the wordpress pages too.

I then set up permalinks so that the web-address was more relative to the user (for example homemadecafe.com/cafe-menu) and now when you visited the page address there were empty templates displayed.

Within the php site pages a wordpress loop was added where the editable text was to be displayed. Once this task had been completed any text written within wordpress would now be displayed within the page online.

The pages of the website that the client is able to update are:

-Cakes to Order
-Contact Homemade
-Find Homemade
-Friends of Homemade
-Homepage
-Party Bookings
-Sandwich King
-Wedding Catering

Pages that are listed that the client is unable to update are:

-Café Menu
-Homemade Gallery
-Homemade Suppliers

With the basic wordpress working site now complete I next wanted to look into plugins for the contact forms required within the site.

Homemade Goes Live!!!!

My Homemade client live project has now officially gone live :D Check it out at: http://www.homemadecafe.com/

Homemade! Meeting - Minor Changes

Todays meeting was the third milestone where minor changes to the design were disscussed. These are now the only changes that will take place before the deadline date and any other changes the client may want will take place after project completion in my own time. A form was signed to agree to this and the changes to be made are:

• 2nd kebab image on the wedding catering page to be changed to a buffet image.
• party booking page title to be changed to party bookings and to further highlight FREE hire
• navigation menu to be a constant animation as though they are jumping around and flower/star images taken from the index page menu board are to be added
• supplier page = 5 images
• Add written captions to poloaroids
• Cakes t order page - horizontal layout with rollover effect where blackboard bubble appears with handwritten explaination
• Index page change cafe image to menu board with opening times (add am/pm) and add animated button "are you the sandwich king?" in the left margin
• create new page for sandwich king competition
• add join our mailing list under top menu board on index page
• remove testimonals from party booking page
• add icon links in footer - facebook etc

Although this looks like an extensive list for minor details a few of them are very simple tasks so this is why it has been allowed!

Homemade! Content page development continued!

I have completed 3 more of the content page designs. The contact and useful links page follow the same layout as the find us page to keep the design consistent. A team photo will be added in the following week after the client has provided one for me. There is no contact form present in the design as like the other pages requiring one I will be using a Wordpress plugin at a later date.

The supplier page images will also be changed and maybe a few more suppliers added after the meeting on Monday when I have a definite amount of suppliers and have been provided with the images.

Below are the designs :) just the cakes to order and gallery page to go!

Homemade! Content page development

I managed to get 3 content pages done in HTML so now only have another 6 to go! The designs follow the layouts finalised in the last client meeting and also have followed the final content page decided. I have created a slight tilt on the Polaroids but not as extreme as in the original design due to the client wanting to be able to update the pictures, so they have to be held in CSS so I was unable to have them on a diagonal.

The Booking forms have not been included as I will use a Wordpress plug in to create these at a later date.

A white border line has been included under the menu in the footer as Sarah suggested that the black of the menu on the dark purple meant it didn't really stand out to the user. Which I agreed with an this simple solution seems to have done the trick :)

The Find Us page has an interactive google map and I have continued the content theme into the page with the use of the Polaroid even though there is less content.

Homemade! Latest Design Development

I Have slightly altered the design to incorporate further needs from the client. The client specified she wanted to add a sandwich competition so I had to incorporate this into the index page. Following the original design the page was holding too much information for a welcome page. So after some re-jigging I have now come up with a tab system shown in the images below.

I removed the menu board image and have included an image of the cafe as I felt this was a vital image for the homepage. Having the menu across the bottom also ties in with the other content pages and makes the user aware of its placement from the start.


The temporary page has also been re-designed following the latest look and is ready to be uploaded asap when i can get hold of the hosting password details!





The next job today is to complete the content pages for the rest of the site.

Homemade Meeting – Finalise Hosting & Discuss Page Content – 22/02/10

Items to discuss

1.Show HTML development so far
2.Discuss page content
3.Set deadline date for content text/images/etc
4.Hosting Final Decision and set-up
5.Google account set-up
6.Temporary page design check
7.Set temporary page text content deadline


Meeting

1.The client is happy with the development process and designs at this stage.

2.Page content will be as follows:

Home Page: About us section from temporary page.

Menus: Content will be taken from new menu designs to be emailed in the following week.Sandwich image needed.

Catering & Cakes: Page title to be changed to Wedding Catering.

• Images to be used will be of the kebab and BBQ wedding food.
• Top of page will have a short body of text explaining the service offered.
• Testimonials will follow from weddings previously catered for.
• A simple contact form – Email & Booking request.

Party Bookings: The content text can be taken from the Facebook group outlining this service.

• Images to be used will be of the space set up for hire (table shots)
• Top of page will have a short body of text explaining the service offered.
• A simple contact form – Email & Booking request.

Cakes to Order: Valentine’s cakes to be added to image folder.

• All images within the cakes to order image file are to be included.
• Top of page will have a short body of text explaining the service offered.
• A simple contact form – Email & Booking request.

Supplier Page: ‘Fun’ images to be taken and emailed.

• Photograph of each of the suppliers.
• Favourite sandwich
• Information on who they are and link to their business

Find Us: Google maps to be used.

• Image of map
• Address of the shop
• Directions from the market square.

Useful links: Page title will be changed to Friends of Homemade.

• Team photo
• Website link and short description of how they are associated with homemade.

3.A deadline date of 05/03/10 has been set for when all content (text/images/etc) must have been given to me.

4.The client has decided to host the site with a friend working for, GiraffeDog Technical Services Ltd. The hosting offered includes:

The annual cost for this is £100.00 + VAT and includes the following:

• 1 GB Data Transfer
• 1 x MySQL Database
• FTP Access
• Web Stats via AWStats (we recommend asking your Web Designer to setup and configure Google Analytics)

We will also configure your email to be managed by Google Mail for Domains
giving you the following benefits:

• 24/7 Managed E-Mail Solution
• 50 Email Accounts
• Secure document storage and access via a web browser

Hosting has now been activated and I have to update the name servers from the domain names to match the new hosting server. If I have problems with this I am to contact the hosting company for help. Once updated the changes wont activate for up to 36 hours, so I have been advised to only check it has been successful after waiting 2 days. If I have Vista XP on my laptop the hosting company have said that it will be possible to set up a cross server connection.

5.A Google Account set up was not needed, as the hosting company will do this as part of the hosting deal.

6.The client was happy with the design of the temporary page.

7.A deadline date of 24/02/10 has been set for when the temporary page content text must have been given to me.

Wordpress Learning!

Followed a wordpress link from the now to this site which is a simple explanation of how to edit wordpress templates so im going to give it a go myself soon!

http://www.sitepoint.com/blogs/2009/05/05/build-your-own-wordpress-themes-the-easy-way/

The key points are:

• That you build a child theme which you link to a parent theme!


• wordpress will do the linking for you as long as you specify it


• create a new folder with a simple name and no spaces!


• inside that folder create a css sheet called style.css add the parents
  details and edit and then copy and paste the css you have created


• drop in any images you may require


• upload the file into wp-content/themes


• and select your theme!

easy right??? we shall see!!!

Homemade Hosting Research!

The client has a friend in web development who has offered a quote for a years hosting including:
· 100mb Disk Space
· 1 GB Data Transfer
· 1 x MySQL Database
· FTP Access
· Web Stats via AWStats (we recommend asking your Web Designer to setup and configure Google Analytics)

We will also configure your email to be managed by Google Mail for Domains giving you the following benefits:
· 24/7 Managed E-Mail Solution
· 50 Email Accounts
· Secure document storage and access via a web browser

at £100/per year.

I have decided to look for some alternative hosting for the client to see if there are better deals available. To do so i looked at a website outlining the top 10 hosting deals: http://www.thetop10bestwebhosting.com/ukg

The ones that offered the most for money were:

- unlimited disk space

- add on domains

- php

- unlimited sql databases

- customer support

- statistics and visitor reports

- and more!

all for just £2.95 a month averaging £36/per year.

- 10GB disk space
- add on domains
- php
- 1 sql database
- content management
- and more!

all for just $4.74 a month averaging £36/per year.

- unlimited disk space

- unlimited domains

- unlimited add on domains

- php

- 100 sql database

- and more!

all for just $6.95 a month averaging £52/per year.

Homemade Meeting – Finalise Content Page Design & Complete Sign Off Sheets – 25/01/10

Items to discuss

1. Content page design decisions
2. Proposal and design schedule sign off sheets
3. New image collection
4. Blog for design progress and content
5. Hosting

Meeting

1. The content page design chosen is:

The client chose this design as it had a similar feel to the existing leaflet with layout and the text was clear and easy to read with strong use of images. It was discussed that the images would be held within a Polaroid border with the meal name written below them or a short description. The idea of Polaroid’s were discussed during the last meeting for the local produce page so this will also keep a consistency between the pages.

2. The client completed the project schedule sign off sheets agreeing on a final design and to the proposal and that she is satisfied for the project to progress.

3. The client has given additional food images to be used within both the site and the gallery section. Images of outside events taking place at the café and buffet foods were also provided.

4. It has been decided that during the design process a blog will be kept to allow the client to follow progress. Through the use of the comment system the client will be able to leave text content for each of the page designs as they appear.

5. The client currently has hosting with FastHosts.co.uk, and the login details have been given for a greater understanding of this to be established.

Homemade! Content Page Wireframes

I have been working on some wireframes ready to make into designs to show the client at the meeting on monday so she can finalise them. Therefore I can be ready after the proposal hand-in to start implementing the designs.

Homemade! Risk Assesment

In our tutorial last week we were talking about thinking about possible risks that may occur during the project so we could work out how to overcome them if they did and be nice and prepared! At the moment the main risks I can see are:

1. Problems with achieving what is wanted in wordpress (high risk) - if the site is based around using the cms of wordpress it requires a high undertanding of how it works which i may find hard to achieve, and especially achieve the look i want from the design. However we have been discussing other ways of using a cms and thinking about looking at other open source software which we may be able to link to our site rather than create a css template. This way would be an alternative if there are problems with wordpress and would also allow the design not to be compromised. 2. The client is unhappy with the design once the 4th milestone is reached and they want more than the 5 changes allowed (low risk) - This can easily be overcome by keeping in constant contact throughout the design stages and making sure everything the client has asked for where possible is included.

3. IE8, with the new internet explorer comes new rules and it will mean validation may take longer than expected (medium risk) - as long as the designs are completed earlier enough for this to be taken into consideration and tested this risk should be avoided.