Testing Mobile Site

To test the mobile site, I used a program called Device Central. This is how the Home Page looked...

The other pages looked as expected too!

Mobile Designs

I'll just post a few designs instead of every page. they basically look the same anyway!

Testing on Ipad

I've just tested my site to see how it looks on an Ipad. I used this website http://ipadpeek.com/, since I don't actually own an Ipad.

This is how my Home Page looks:

So far, so good! I looked at the other pages, and they've all turned out as expected.

Onto Responsive!

I know I've left it a bit near to the deadline, but I am now making my site responsive

Already knowing how to make a site respond is an advantage and hopefully won't take me too long.

These are my tablet designs:

Learning a bit o' PHP!

The past few days I just could not get my contact form to submit to my email. I thought about it and realised that I've never been able to get it to work. But since this project is for a real life client, it's important it actually functions as planned.
 
I researched into ways of getting the form to submit, and decided to use PHP. NOTE: I haven't used PHP before!
 
It was a bit complicated at first to understand, but it got easier. I followed an example on this site http://www.html-form-guide.com/email-form/php-form-to-email.html and altered the code to suite my html code.
 
After I got it working, it suddenly stopped, and I had no idea why. I spoke to an Advisor on one.com (where the site will be hosted) who said you cannot submit a form to a Hotmail account. Well you can, but it will only let you submit about 15 emails a day. To solve this problem, it must be an email account within the site's domain. So for this client, the email I will be using is info@adoniahairandbeauty.com
 
What I learnt today: PHP isn't as scary as it looks, and I wished I used it throughout the whole site for the layout. It would have been so much easier! 

Problems

I've been testing the site in different browsers as I went along. I came across two main problems which I struggled to solve...

1. Search Bar

The search bar looked fine in Firefox, but not in IE8 and Chrome. I tried adding a height to the Input property, but this didn't work either...

I posted my problem on an online CSS forum to seek further advice. One person suggested adding padding directly to the input and removing it from the placeholders, which then worked!


2. Comment Box

I posted this problem in the same forum to seek advice. Turns out Firefox ignores some CSS properties in -moz-placeholder, like padding, margin, width, height. Therefore I added the padding to .input. Problem solved!

Coding

I've finally finished coding the Home Page. I won't put a screenshot of it up, as it looks pretty much the same as my design! Now that I have the basic layout, it shouldn't take too long to code the remaining pages...hopefully!

After I've finished building the basic site, I will post designs of the mobile site and implement that.

Opening Hours Page

Dropdown boxes

I've decided to add dropdown boxes to the navigation. This will allow the user to easily navigate round the site. Information relating to the salon can be found under The Salon link, such as About The Salon, Opening Times, Services & Location.

I will notify Tina about this adjustment on our next meeting. I'm sure she'll be ok with it. It's not like I'm adding a new page or anything.

The Same applies for the Prices link...



Prices Page Changes

Decided to make the changes now. All I've changed is the colour of the font on the prices links. This makes it stand out more and not look as washed out like before.

Prices Page

Tina has provided me with a list of treatments and prices. The list is HUGE, so instead of plonking them on a page, I have decided to add links which will open up a PDF of the selected prices. I think this page needs a little more work to it. Not fully satisfied, but at least I have something to work with.

I think looking at it now, the links need to be bolder. I'll make these adjustments tomorrow. Too tired!

Location Page

Now we're getting somewhere! Here is the Location Page. Most of the pages now will have pretty much the same layout, adding to the consistency. I will try to make them different though!

Contact Page

Today I created the Contact Page. I took into consideration the changes Tina would like me to make to the footer, and padded it out a bit. I added the Salon's contact details, which makes it easier for the user to find. I also added a Quick Links section to allow the user to easily navigate round the site.

The Next page I will design is the Location Page. It's going to be pretty simple, as it will only have Google Maps on it, along with contact details.

Visit to the Client

Since I had a free weekend (and needed a haircut) I visited Tina with a print out of each version she requested. She decided she liked the look of the original design, but also stated she would like her contact details and a quick links section in the footer.

Another area we discussed is CMS. I suggested that the best method of updating your site is to use Wordpress. However, Tina said she'd rather me keep it up to date as she's not computer literate. I said I'd do it if I get free haircuts HA! It was a deal.

So, I know I'm way behind, but today I WILL design the rest of the site!

Tina's Response to designs

Below is the reply email I received from Tina. It's a bit small, but it says:

"They're great Becky, well done Hun. Have they got Spanish writing on? I prefer the second design. Your hard work looks fantastic!

Would you be able to put the other logo I liked on the design and resend, so I can see which one looks best?"

So, before continuing with the designs, I'll replace the logo with the other design she liked and email both copies for her to compare. 

Emailed the designs

Since my client is based in Grimsby, and I'm in Lincoln, we have decided it would be best to communicate via email.

I have emailed my designs to Tina, asking for any feedback or amendments. Shouldn't be too long for a reply, since she's online quite a lot!

Email sent to client:

"Hi Tina

Please find attached two designs for the Home Page of your website. Any feedback will be much appreciated!

Becky Bramwell"

External Client Update

Major update needed here! Been ill for a good 3 weeks now, so haven't got as much work done as planned. Luckily enough my client is easy going and isn't too bothered about meeting deadlines. 

Anyway, I have created the following two designs...

Design 1:

Design 2:

Feedback from the client!

I recently sent my logo designs to my client, asking for feedback regarding which design she prefers. I also stated that if none of the logos meet her requirements, I would be willing to go back to the drawing board!

Luckily enough she really liked this one:

But also stated that it depends on the overall design, as she likes this one too:

This weekend, I am hopefully going to produce another design of the Home Page. I have currently produced two, but I'm not really that keen on them!

Logo design ideas

I spent this morning coming up with logo ideas, and produced the following:

Prior to producing these logos, I carried out research in to existing salon logos. The majority of them were text based logos, so I decided to follow this theme. 

Personally, I prefer the first and bottom logos, but it's not up to me! I have forwarded these onto Tina, the salon owner, and am now awaiting feedback. 

Receiving content

Today, I messaged my client regarding content for the website. Since the salon does not currently have a website, there is limited content available. I have requested images of each member of staff, along with a brief description about them and their role within Adonia. I will have access to those shortly.

Regarding images ... since you frequently see professional looking pictures and posters in hair salons/on their websites, I have contacted a few friends, who have taken part in photoshoots, to see whether it would be possible to include some of their images on the site. Luckily enough, they agreed!

So at the minute, I am currently working on my Home Page wireframe and design. I have decided to produce several designs for the Home Page first, to see which one the client prefers. To me it is pointless designing every page if the client does not like the design. It is a waste of time, so yeah! :)