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 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.

Browser Compatibility Issues

So I've been testing my site on browsers, and it works fine in every browser apart from IE.

So i had a conversation with David and decided instead of going back through the code and changing all the tags it was best to display a browser change page using Javascript.

Therefore when the browser is IE, this is the page displayed;

It still includes information about ATRG and a contact link, but advises the site is best viewed in other browsers. 

When the browser is recognised to be other than IE, the normal page is displayed.

Mobilisation

I've decided to just mobilise the site for a tablet, as designing for mobile seems pretty redundant as it's a corporate site. So here's what i plan to keep and take away.

Home page;

I want to keep everything, the JQuery slider is already responsive and looks really good cross-platform

About;

I'll take away the images from the site and just leave the essential information, however it depends how it looks!

Our Past;

Again keep everything, the timeline is already responsive so should be easy enough to do.

Contact;

I'm going to take out the contact form and just leave the details and the social links, no one likes filling out forms on tablets.

I'm going to change the logo so the navigation doesn't sit beside it, i think this is best as it allows more button space for the user.

Feedback

So as we can't contact the clients directly it's impossible to talk to them about the site or get feedback off 'em SOOOO, i decided to get usability feedback off users of the site. I asked 3 people what they thought of it and here it is;

OH and i had a few problems thinking the site may be too simple, so i asked the question when asking the users.

1.
'Did you find it easy to use?'
"Really easy to use, everything's really plainly set out"

'Do you think it's too simple'
"No, i like the simplicity of it, but it's not simple to the extent of being boring."

2.
'Did you find it easy to use?'
Yeah, everything's clear, you know where to go

'Do you think it's too simple?'
"Not at all, all the information's on there without you having to look"

3.
'Did you find it easy to use?'
9.3 on a usability scale, no websites 10 out of 10 though.

'Do you think it's too simple?'
"No, because in today's world, clean and concise websites are key to successful websites"

So there ya go!

on a side note 3 said the timeline was sick, i'm happy with that!

Code-Specific Pages

Thought i'd just take a quick note of specific codes on each page and why they're important;

JQuery Slider -Home page;
This has been included to showcase images from the research group, the rollover text will be facts/information about the group.

JavaScript Timeline- Our Past;
This was a really important one to include, it has a rolling timeline in which users can pick and choose projects to view along the timeline. It includes images and information which is easy for the viewer to understand.

PHP Contact Form - Contact Us;
Again a really important one to include, it enables the user with a quick form of contact, is clearly set out and runs with the rest of the pages layouts.

The site itself is almost done, with just a few changes to make. Later today i want to build a responsive CSS sheet, however i will only make it responsive to tablets as the nature of the business does not really call for a mobile responsive site.

Progress

Made a lot of headway with the site today, on a coding side i'm almost finished, just want to add some more detail and make it a bit more outgoing, i know what i mean...

Anyway, thought i'd match the contact links i made with a brochure download on the homepage which i think worked out alright!

Any feedback would be 'preciated

Coded Frames

 About

Contact

Both frames are done, just realised i need to put page headers in, but shouldn't be too hard just to put the margins down as they're all in wrappers which is good. Just need to fill the content in and sort out a contact form. 

Contact Pages

Between 2 and 3 again, think 1 doesn't leave enough room for the e-mail addresses to be displayed without scrolling, don't think that's too ideal. Thinking of 3. 

About Page wire frames.

Torn between the second and third. Third matches and ties in with the rest of the sites layout, however i think second is an interesting way to format the about pages. Still tying in, if i make the contact page similar it'd work. I'll have a play in Dreamweaver and see.

Colour.

Sooooo as you can see from past screen grabs (and i'll whack one on here too)
I've kept the colour pretty simple, as it's a corporate site i thought going overboard would be silly.
Wanted to keep it clean and simple, so added a gradient background for some detailing and have used the blue and a strong outset on the site. like dis;

The blue on the navigation shows up on hover, which i think is a nice little splash to add when viewing the site.

Made a rollover nav, took the colour theory i used from my presentation and applied it to this. I think the blue on grey makes it took a lot more corporate which i like.

I also added a gradient background, think it adds to the 'slick' look i spoke about in my presentation.

progress

Progress on the 'What we've done' timeline, think it looks pretty good, want to edit the navigation to make it look a little more interactive.

Client Homepage Wireframes

Quick wire-frames for client homepage, thinking of option 2 mixed with the quick links from option 1, think it should look pretty nice.

Timeline Completion

About to complete filling in the information for time timeline, luckily after a bit of asking we've received a year to year documentation of what they've done. With the JS timeline it means i can include a description of what the article/topic is about, i have also set up a flickr account so the images are taken from a web space.

This is an outline of the Google spreadsheet i have to use, it enables me to link to online spaces that contain the information.

Justifying the Timeline

I had a bit of a speculation over whether to use an external JQuery Plugin to create my timeline, however after doing some reading for using the JS Verite here are the pro's;

-The JS Verite runs off a Google drive Excel Spreadsheet, this can be added to after the document is submitted, therefore ATRG can individually add projects they may be working on in the future, making for easy editing throughout the web process.
-The timeline itself is beautifully made, it enables users to scroll through each project and read about the project once they select it, it also means they can pick and choose individual projects to read about or scroll through using the arrow on the side.

Here are a few other programs and code techniques i looked at before deciding on the JS Verite timeline.

http://simile.mit.edu/timeline/docs/create-timelines.html 

I chose not to go with this coding technique due to the style of it, although it could have been altered through the CSS i didn't like the fact ATRG would not be able to add to it.

http://tympanus.net/codrops/2012/11/19/responsive-css-timeline-with-3d-effect/

I did really like this style, however i was looking for a more usable timeline that narrated the story. Therefore vertical scrolling wasn't an ideal method to use.

http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/

This was another style i really liked, however along with ti being a vertical scroller it also re-directed to another page when the user clicked on for more information, which i didn't think was too ideal, i'd like it to stay a same page experience.

JS TIMELINE

Just filled all the spreadsheet data in for the JS Timeline, obviously fikller image and etxt needs to be added but it works! and looks pretty sweet too!

Logo Design for Client Project

Internal Client Project - Timeline

Trying to find some codes for the timeline i want to create, the perfect  on is the first one i stumbled across which can be found here.

Will update as i find more!

The timeline site i have decided to use is this one here;

http://timeline.verite.co/#about

It gives me the option to modify it further to how i want it and give me some say in how the timeline is coded, also for if i wanted to code it seperately i have found the codrops tutorial here;

http://tutorialzine.com/2012/04/timeline-portfolio/