Site Search, Update!

I've indexed my site with goggle. Yaaaay!
However Google put a statement underneath saying it takes some time to crawl the site for urls and information, which is a bit of a pain but my fault for not realising sooner.
My results page now looks like this;

Just waiting for Google to crawl the rest of the pages but it should update automatically.
Relieved it's finally sorted!

Site Search Function

So Google are genius at searching, just not genius when it comes to telling you just what you need to do to implement a search function on the site.
I think i figured what to do, So far i have registered the site with my Google account and included this piece of code they ask you to put in just to verify you're with them. I then uploaded my sitemap to the custom search and i'm just waiting to the pages to be crawled to see if it works.
Fingers crossed!

Site Map

Finishing off the last parts for the site, the client asked me for a site map which i had TOTALLY forgotten about doing. I feel this was affecting my search function as well as this still needs to be sorted.

So i now have a site map link that sits in the footer;

This is available on every page in the footer.

Lightbox

I've decided to add lightbox into the pages where the products have alternate colours or there are different views.
It also makes the site more dynamic and fun to use.
Here's what i've done so far;

Breadcrumb Nav - Progress

I did it! Took a while and a lot of faffing but this is the basic concept of the breadcrumb navigation that will appear on all product pages, the colours and positioning will change in time, i'll post again when it's done!

Breadcrumb Navigation

As well as the alterations i have been asked to make (which i am now halfway through)
I have decided to include breadcrumb navigation on my product pages, i feel this will reduce clicks on the user interface and allow a better browsing experience;

Client feedback.

As there is only 4 days left to deadline i sent the almost finished site to my client, he gave me a list of things he would like me to change (the information about some of the links not yet live was something i previously explained in the e-mail.)
So here's what's left to do;

Remove direct 2mum link on homepage

Realign nav

Sort search function

Change colour, white background

Change download links

Remove twitter link

Add view all products link

Add catalogue download link on homepage

I am the biggest Muppet of all time

So after a weekend trying to figure out why the search bar kept disappearing behind the nav, even though i'd changed the z-index a million times.
I finally figured out why it wasn't working.

To test it i was importing the index file onto the ftp host. Changing the CSS, importing it again.
Absolute genius i am never updated the CSS onto the FTP.
Nice one Liv.

However i now have a fully functioning Google search bar that looks like disss:

Like i said, worlds biggest genius over here.

Responsive Site

Due to circumstances affecting time it's taken to create my site i have decided not to make my site responsive.
Conversations with the client have not indicated nor stated he would like a responsive site and i would rather concentrate on making the desktop site look near perfect rather than spending time making the site responsive when there is work that could be done to make the site look better.
However i will post images on how i would make the site look on a mobile device just to show how i would do it.

Search Function

Managed to get my Google custom search function started, all looks great apart from one problem...
The ribbons on my nav are covered by the rectangle having a z-index of 1. I keep trying to play around with it but keep getting this...

It's driving me mad!!!! Does anyone have any solutions?

Sticky Footers

I was having issues with my footers deciding to set up shop halfway up the page, this was a result of a number of things.
As i had to add more rows than some for other pages which affected the height of my wrappers, as they are percentage based, coding the percentage to auto on the wrapper knocked all the of the image sizes out of sync.Therefore as a solution i used sticky footer to place the footer at the bottom of the page. I included a sign up form for a newsletter in this, as well as the copyright and the ink to my portfolio as a designer.
Anyway, although the sticky footer worked i had some issues with the height making the footer so far away from the wrapper on some pages, to a point where you'd spend about 5 seconds scrolling down just to see the footer.
I have come to a solution with this by adding a class onto the longest pages, and on the CSS of the shortest pages adding a minus bottom margin just to pull the footer up without affecting other pages.
It now looks like this;

Overall i'm really happy with the solution to this as the classes are easily addable when i pass the site on to my clients web team should they need to add more products.

Site Search Function

As i'm using an external search function i need to find out the hosting my client is using and upload the site before i can input the search, I have e-mailed my client and awaiting a response before i can find a solution to the search function.

New slider - Client

 New Slider| Using Co-drops Blueprint slider, I've created a more central slider to engage the user on first impact, i realised the old slider wasn't being used to it's full potential  as the 'about Babyway  would be included in the footer along with the site map etc.Therefore I've used a bigger slider than is also responsive. I put an opacity background behind the home section just to offset the content as i found the sections underneath were being overpowered by the background. It all looked a little too bland.

Old Slider|

Client project update

So far all the products are now in the site, just tweaking code and making sure all the links work properly.
As my client has only provided me with one PDF download link all the links for the PDFs on the product pages are the same, however the example that the download links function is enough for me.
It enables the client to add, remove and replace links as he feels appropriate.

Just have to add the search function ad make it responsive for tablet and mobile now, will hopefully be finished by the end of this week so i can tweak it further before deadline.

Just found a code that has saved my life

Sooo i'd allowed enough time to enable the site in Internet Explorer because everyone knows IE is like that kid no one spoke to in school and when you tried to talk to them they were a bit of an arse anyway.

But putting all the products into the site is taking a lot longer than i'd thought, especially with the implementation of the search function as well (which i'll get onto in another post.)

ANYWAY

I found this wicked little bit of JavaScript code called HTML Shiv, you download the file, whack the Javascript in and boom, it works! You can also put the JavaScript in with the link to the Google page with the code on it which saves on file space for the hacktual site as well.

So that's saved me a load of time which means i can concentrate on the mobilisation and making the site look the bomb dig.

SWEET.

Client Update

The past few weeks I've been working with the client to find a suitable colour scheme that compliments the multiple colours of the headers required to match the brochure,
At first i thought a neutral colour would compliment them however the client found this a bit too plain and boring;

After careful consideration and discussion with the client we finally decided on this layout and colour;

I think the colours that match the brochure really brighten the site up, the grey makes the site very clean and clear, and the colours make it easy to recognize where the user is.

Introduction to Client Site

Sooo thought i'd better write about it!
My external client project is the company Babyway Int. They are a a family based business who design, manufacture and sell baby products, they also export to several other companies. You can read more about them here!

From conversations with my client we have established he wants a Clean, Simple to use and Fun theme that co-incides with their brochure headers below;

Below are the prototypes i initially developed through Dreamweaver, and sent to the client to await feedback, these three drafts reflect the elements of simplicity and fun the client wanted running throughout the site but were missing basic elements such as a search bar and social networking links, two sites also lacked a moving element on the page, making the page look extremely static and basic. Therefore when the client chose the centered slider site for me to develop i decided to add elements of the other sites into the page.

Prototype 1

Prototype 2

Prototype 3

I'll post more with updates and a time plan of what i want to do.
I basically want to make a site that complies with the clients requirements as a product display site but adds the elements of simplicity and fun into the site! more to come!

Client Site - Internal Feedback

Really happy with the grade i received for my internal client project.
The feedback i received i was already pretty aware of and there were a few points i hadn't thought of, so i need to take these into consideration for the internal client project (which i STILL need to get writing about)
Anyway here's a couple of things i really need to learn from;

- Make sure the site is compatible in every browser  The mistake i made last time was just creating a java splash page for people using IE, i'm not going to lie, if IE was a person i'd punch it right in the face. But a lot of people still use it. Therefore as a lot of the code I've done for the current site is in HTML 5, i'll be building a separate site for IE 8&9, anything under that will be getting the splash page treatment. Luckily this time I've also got enough time to be able to test ti extensively.

- Following on from my last point, i need to really concentrate on making the website responsive for tablet, not necessarily mobile however i will do my best to make it view-able on all mobile platforms. People tend to shop and browse more from tablets. The method i use for responsive design will be reflected on the research i gain back from my practitioner questionnaires for my research document.

- Make the header more attractive. I made it too plain last time, there were no social networking links or nuffin, need to learn from last mistake. So far I've put in necessary information such as a search bar and social links. But want to make the site look more inviting.

External Client

Will be posting all supporting documents to the client project in the week following, however i have started on my client project early and all developments can be followed at oliviawoods.co.uk

Thats until i get my portfolio up (finally!)

External Client Site

Started my client site tonight, i want the majority of it done by january to allow time for extras i want to add in.
Decided to code in percentages to allow easier responsive design, might be a pain in the beginning but will be worth it in the end!