Mansfield - Marketing Company

Being really tired on a sunday afternoon and mis-typing MSN into my browser caused me to happen upon this little website: http://www.mans.com/mansfield_f1.htm which is a 'technology marketing' agency. Normally when this happens I just re-navigate my way carefully back to MSN but this time the wrong website caught my eye. This may have been the monkey they put on the first page or it might have been the tab that says 'web development forum'. So off I went on a wonder. It was wat they had written in the 'Read Between the Code' section that caught my eye and thought I had to share.

To help you steer through the minefield of potentially costly miscommunications that characterize 'Web Integrator Speak' here's a quick glossary of terms and statements:
What your friendly web integrator really means when he/she says:

"Your site really needs a Flash Intro"

Translation: 'I'm dying to play with some cool multimedia software and would like you to pay for me to learn the software'

"We'll put a firm timeline in place"

Translation: In two weeks we'll generate a lengthy list of impressive milestones etched for posterity in M/S Project. We'll then ignore every element of the timeline and spend most of our time finding excuses why you the client are responsible for the overhang

"You know your target audiences"

Translation: 'We have no intention of learning who those people are. And if they don't live in a big city, wear hip clothes and go to impressive sounding networking events they're beneath our consideration anyway'

"Bandwidth is not an issue anymore"

Translation: 'If any of your site visitors have the audacity to use anything less than a T3 they are beyond our contempt'

"Can we meet to go over the project"

Translation: 'We need to hit you up for money. Geez, how were we to know that the six level rollover wouldn't work with Netscape 4.05?'

Google Crome - Gift

I came accross this fun little addition from from Google Chrome where you can wrap it up and send it to someone as a christmas present. I thought it was really nice as piece of software, it all moved smoothly and was really interactive, you could choose what paper to wrap it up in, a photo or video to go with it and send a personal message with it too. The little wrapping animation with it too was very nice to see.

Internet Explorer 8

Changed my mind about the new Internet Explorer 8 after about 10 minutes of downloading it, I think I was too busy enjoying all the news links that it had I didn't actually realise that it was so sssllllllllloooooooooowwwwwwwwwww. Bit of an anti climax really - nevermind.

Validation = done!!

I love that green box :D

Validation

I'm attempting to validate my website now, at the minute i'm on 13 errors and three warnings, not sure yet what to do but i'm sure i'll get it improved soon enough

Javascript Accesability Background

I have included a background colour change function in my website, this feature increases the interactivity of the website and makes it a bit more personal to the user. I also found that the black on white was a little harsh on the eyes at times, so choosing a different colour should eliminate this for the user.

My Waterstones Website

Game - Find the Worm

One of the Javascript exercises we did was to create a simple game. James and I have worked together on this. James is designing a website for a library so I thought it would be a great idea to make a game with a book film as we could then both use it in our websites.

We came up with the idea of Find the Worm, this is a game where a grid of closed books are displayed, when the user clicks on them to try to find the book worm that is eating the books. The books open up when clicked on.





I am really happy with the game as it is but I would love to develop it more by creating an alert that comes up when the worm is found, at the minute the user just carries on even when they have found the worm. It would also be great to have a counter too so that the user will find out how many turns it took for them to find the worm. That way they will keep playing to try to beat their prvious score.

Javascript

The brief says we must include three interactive javascript routines. We have been learning javascript for a few weeks now and I can use some of these in my website. These include the code to change the background colour, code to click through images (image Gallery) code to make text larger and code to include the user's name within some text.

I think one of the most important ones is the one that makes text larger if the user needs it to, this is one of the most commonly used accessibility functions. I have seen this on many websites and usually is at the top in the form of three A's (A A A). I will include this in my website as one of the Javascript routines.

Home Button Development

Here are three different designs for the Home Button, I am quite fond of the one on the left but for now I am going to use the text one in the middle. I may come back and change this at a later date.

Navigation bar

I thought about the roll over for the navigation buttons and have decided to not to include it at this stage as I am still unsure how to do it. Perhaps it is something I can go back to and include at a later stage.

Navigation Development

I have created different images to use for the different stages of the navigation roll over changes:

Website So Far

This week I have been able to develop my website a lot. I now have a working navigation bar and 5 pages in my website. I will try to give it a roll over image though to make it easier for the user to know that they are on the correct link before they click. At the moment there is not much content, just a brief description of what is on each floor of the building. I need to add images onto each page, I would like to add some Javascript that enlarges an image when selected, this would be a good piece of Javascript to use as accessibility for the user. I would also like to include the Javascript code that puts the user's name onto the welcome page of my site and I would like to have include the code that makes the text larger for the user but we'll have to see how the rest goes first.

Spiderwick Cronicles Website

This website is really fun to play around with, all the links respond on roll over with a sound as well as some sort of image change. The navigation bar is clear across the top of the screen and nice imagery taken from the movie is used throughout.

The Gallery in this website is really nice, the images are in a book and you click on one that you want to look at and it will enlarge for you to get a better look.
The Downloads link takes you to this page which i thought was brilliant as a way to promote the film via the website. You can download posters of the movie, get an email version of the actors signatures, get applications for you mobile phone as well as for your PC.

The characters info page is really good, it has lots of information on the actors used in the film but it also has info on the crew members and production notes which has interesting background info.

There is continuity throughout this website, it is really good to look at and easy to use, altogether, a great website.

Professor Layton Website

Here is a look at the website promoting popular Nintendo DS game, Professor Layton and the Curious Village. I really enjoyed going this website as I love the game and it allows you to play some of the puzzles through the website and learn more about the world created in the game. It is quite a interactive website in that the user has a lot of control. Even on the initial loading page, the user's attention is kept (if only for a little bit) by the fact that the loading symbol moves around the screen as you move the cursor.
I thought this was a nice touch.

When the home page to the site loads, it is really easy for the user to navigate, a navigation bar is clearly placed across the top of the page but an alternative navigation bar is used on the page in the form of photographs that become moving image on Roll Over. A caption then comes up telling the user which page this link will take them to.
Another part of the gallery that I enjoyed playing with was the characters page which allowed you to select the characters from the scene ans they would come to the front with a short description of who they are.

Fixed Webpage

As you can see in this image, the content is fixed so when the browser size is reduced, it does not squeeze itself into the new dimentions. This method of coding is easier to code but also is a dis-advantage to users with varying screen sizes.

Fluid Webpage example

Because the coding for this webpage uses % in the size settings, the text in the page is fluid. This is an advantage as it can be adapted to different screen sizes, therefore more people can use your website. The image above shows that when the browser is thinned, the text moves to fit in that browser.

A HTML Webpage

Here is a HTML webpage designed via Notepad:
Now I need to make this using CSS

Design Idea 4

Here is another design for the look of my website, I have decided to think a bit more simple for now. I am really happy with the look of this, the navigation bar is simple buttons, I guess I can develop this further to add more imagery into the design.

Design Idea 3

I have tried to make the other images look like the navigation bar but it doesn't look good like this so I think i will keep it how it was or perhaps I will play around with the settings to make it look more illustrated.

Design Idea 2

I have made the navigation bar a stack of books, I really like this idea but I would have to re-design the other images used on the page for the style to remain consistent.
It would be great if when the user clicks on the book button, the book opened up, or the books could be blank at the side and open up on roll over to say where the link will take you.

Design Idea 1

The stairs on the left will be a kind of navigation bar to the other floors (pages) The text will be a few words about the Nottingham store.

Baileys Website

Found myself on the baileys website recently and was pleasantly surprised with it, really enjoyed the page loading bar which is like a liquid filling a book. When the 'lounge' does load, it is designed like a pop up story book, which looks and interacts really well. The only think I could say is that i would make the navigation bar at the bottom a bit bigger, and add more sections for me to play with!

Colours I do and dont like together

Brown is my favourite colour, that doesn't mean that every website I produce in the future is going to be brown but when asked what my favourite colour combination is I automatically thought of this:

And when playing around with a few different combinations were loads of horrible choices so this was just one of them:

Colour Changes

I chose to change the Ikea Logo, originally the Ikea logo is vibrant, clear and attractive:


Now it is not very nice to look at, I think also that the use of pink might deter some men from associating with the company. Due the colours chosen, lines are not as clean in the logo anymore:


Also. when when colours are changed it can often remove all associations with what it stands for:


What was instantly recognisable as the first aid sign could now be a symbol for anything

Colour Wheel with #

Great colour selction wheel to use found at: http://ficml.org/jemimap/style/color/wheel.html

Color Codes

Here is a quick link to a color chart:
http://www.html.net/tutorials/html/lesson7_216websafecolourchart.asp

Image Loop On Click

This code will loop through my four images on the mouse click.

AV for intro

I have made a short piece of stopmotion that I plan to use in the intro to my Waterstones website.

First Layout Drawings and Wireframe

A wire frame of a website is used when planning the basic layout, it represents where logos, images and text will be put. I have found that wire framing is a very useful development technique.

First Doodles