Resolution Website

Hey guys!!!

Long time no type Been working flat out with everything in the past few months, or is it even year since i last posted here.

I work full time now either sat at pc or out on the road filming for resolution television and recently i been working on the new website for the company. I designed a complete revamp as some of you might of seen, this ment new letterheads / folders / logo / buisness cards / email tags you name it i had to design it, but recently ive come across a problem. The design i have done for the website we all agree is the best for us, ive spent endless amounts of hours redesigning and argueing with the boss but were finally happy with this particular one.

The whole concept behind this site is keep it simple but be creative. I was inspired by google - the way google changes their looks due to season or event. Our site is similar in Spring/Autum/Winter/Summer the background will change with photos created by the team, just to add that little bit of flavour and creativity - afterall we are a media company .
http://www.resolutiontelevision.com/newsite/index2.html
(if you checkout our old website you can see why were redoing it, its crap haha http://www.resolutiontelevision.com)

The problem is that the website isnt very resolution friendly, since i have little knowledge in the programming side this is all a massive learning curve for me. Main problem is that on any resolution below 1280 you cannot see the grass without having to scroll down - we do not want this, we want it so you can see everything on the page. Solutions ive been working on are making the overall image smaller downscaling it to fit smaller resolutions but that gives us a smaller area to work in on terms of content. Another solution i have thought of a few seconds ago would be to make the grass smaller and locking the background to the bottom of the image so the smaller it gets the sky will get cropped off - we want to keep the clouds so by creating a seperate layer using a DIV i could set the clouds as GIF/PNG locked to the top of the frame.

I dont know if that makes any sense to you guys, does anyone have any ideas on how i could make this design more resolution friendly? Also some little information were trying to avoid Flash and Javascript.

Thanks guys
-Aden

Your solution with the clouds being in a dive should work to some extent. What I would personally do, is make the grass its on separate image, and have that image repeat and always be on the bottom of the page. So when the browser window is re-sized the grass moves up and down with the bottom of the window.

My question is what is going to happen in terms of content? Is it content div going to stretch vertically when there is more content? Is there going to be a scroll bar to scroll through the content? That is an issue as well.

Another thing. I think the navigation should be below the logo. When I first looked at the web page I couldn't find the navigation. Since the logo and the content are so heavy, and the white space in between doesn't help the fact that my eye completely missed the navigation.

Also the heading is too small for being an H1 I would suggest increasing the font size slightly, and perhaps making it bold. Also is the main text bolded? It probably shouldn't be since it will be kind of hard to read. I would also suggest to put some real dummy content for the text. So maybe some text that your company already has on their old website.

There are other small coding issues, but you are still working on the design. Good luck, web is not an easy medium to learn.

http://www.resolutiontelevision.com/newsite/index2.html

Ok ive worked on ALOT of things. I experimented with many different ways of getting the background to show but the best way was to fix it in position anchored to the bottom. You still have to scroll but since the site it going to have very little content i made the grass area smaller and now it can be viewed on most resolutions and still look nice.

Notice the extra soil Just somthing i added extra so if somone had a larger screen they would have that little extra content to give some flavour. The content is getting there im experimenting as time goes on, i only have the content we see on front page currently to work with so theres not much there, im thinking of adding a quote and behind it is a cloud with the face of the person who quoted it. (The quote currently there is a joke, my boss is Robin Hind so i was teasing him earlier saying this will be the quote).

What you think? I took up your advice of moving the navigation (No links work yet, as this is the only page).

Cheers
-Aden

Hi Aden,
I wanted to comment yesterday, but I didn't have the time. Too busy at work! ( sorry )

I'm really liking the look of the page! Looks great.

Here are some comments.

Consider having the clouds drifting slowly. ( a looping animation would work out well. Just be sure to have it long )
Consider doing the same thing with the flowers, but have them moving slightly in the wind. maybe have a bee land on them now and again.
The skeleton looks like it would be that of an elf. In relation to everything else, it's small.
The camera looks odd also.

Like I say, I really like the look, colors, etc, I just feel that you should push it a little more and give some thought as to why certain elements are in the scene.
I'd keep it clean and uncluttered. It's working well!



Looks good Aden!
Peter

Forgot to mention.

The company logo in the box is a bit of an eye sore. Looks pretty bad.
Can you place the logo on a Blimp or something?


peter

In a box? Its floating in the sky

So it is. What was I thinking.


P

Something you may want to explore.
How about having a very faint chime on the mouse over of each rock. Each chime would be different. A long tone but always fading out.



P

new design is 10 times better. It is really coming a long.

I don't even see the chest and Skeleton on my monitor, and it is 1680X1050 in resolution.

I agree with Peter with the slow animations. I think it will really add some more depth to the entire site.

Only one other thing. The navigation needs some work. Maybe make the font a bit bigger, bolder, a different colour, or put something behind it so it stands out more.

Looking much better, tis getting very sexy.

Pete's got some awesome ideas there, you should definately take notice.

I mentioned the clouds to the boss and the bee's landing on the flowers, he said no - need to worry about content in terms of the other pages now.

21 pages to do Trying to make each one unique.

so i take it you're not making a database driven dynamic website

I with Cameron with this one. I would suggest using a database driven site. It will take more time to set up now, but in the long run will save a lot more time. But perhaps this isn't an option. But it should be fine.

For the 21 pages I would suggest keeping them all similar to some extent. You don't want the user to feel like they have navigated to a different site. It is better to be cohesive with websites then creative for different pages. One of the most common changes between pages, would be the change of colours of the header/navigation or another part of the page. The layout and everything else stays the same, but only one small thing changes. So I would urge you to create all the pages so that they are very similar.

Bascially what ive done is removed the stones and kept it clean and simple for the content pages, i may add images for seperate pages. Wont be working on this till monday though, got a bit of filming to do. Were about to head out and film some combine harvestors lol.

Ok been working on the site a bit today main focusing on content images.

Style im looking for is images that pop out at you, kinda playing around with the High definition idea. Well anyway wanted to show you some progression on an image i did today. Basically i provide my own stock images so everything is watermarked so no one can steal it, internet these days people steal stuff left right and center.

First shot is the chosen image, took the photo on rooftop at work lol Was nice sunny day so the lighting would fit with the nice sunny background on the website. Heres the image i took. Composition isnt all to great was mainly trying to get the correct parts in focus and the content within the shot that i needed.


I then put the shot in photoshop, keep in mind this image is somthing crazy like 3000x4000 odd resolution so everything has been scaled down. Ive done ALOT to this image, cutting parts out, adding parts in, colour correction, perspective correction on words, shadowing an saturation, basically trying to make sure it works well on a transparent background.


Finally i had some stock laying about from the duperoom site i made so i used this to get that page peel effect, i wanted to achieve this effect because i wanted to show the idea that the whole website is just 2d but the camera gear and our work is always top notch and really stands out from the rest. The image has been shrunk down and i added the blue background just to show it working, the whole thing can be layed over any background as long as you change the paper colour.


Its been uploaded to the site, but i wouldnt advise looking at it because i need to alter the layout a bit, ive got some 3d work i need to do tommorow, the whole bee idea i think would work so im modeling a 3d Hive for some bees to fly out of.

It's a nice photo to be sure, and a great concept of it jumping out of the page, but that page peel effect really doesnt work for me, the peel seems very unrealistic. maybe you should try creating it irl and compositing together?

Also can see the sides of the image when its on the site :O

Double Also, if you see your site in IE6< and some other browsers png images no work, generally they are a no-no but apparently these days nearly all web building applications (except trusty notepad) do them as default, tis real smart . For layering like this they can be way better than gifs but at a huge cost for people on older browsers.

wonderful images where do you sell those?

We havent started selling yet, were building a stock libary first to get us going - it costs per month to make a full account on most stock sites so we been gathering full HD footage of shots relating to seasons, and general shots of the new HD gear as we found there arnt many around on stock websites. I been doing most the photography side - just somthing in our free time. I spent this weekend crawling through fields getting HD footage of corn swaying in the nice hot weather and also some nice pans of the fields being harvested.

When we have a nice collection were going to upload it all and open some accounts. As far as i know Istockphoto/Getty/Fotalia/Alamy will be main ones were focusing on, who knows they all might have linked accounts.

Well just wanted to let you guys know i am still working on this, in fact ive done shitloads of work on it recently but its all code based, not really visual.

Been focusing on cross browser compatibility, working in firefox, IE7/IE6/IE5.5, Safari, Opera. I have self taught myself so everything has been a learning curve and slowly im getting there, so far ive figured out how to;

Fix Positioning problems and text issues across browsers - FIXED
Fix video streaming problems (working in IE but not others - FIXED)(Control issues and video looping - FIXED)
Activex and Java script warnings appearing at the top - REMOVED/FIXED
PNG Compatibilty cross browser - FIXED
PNG Positioning problems cross broswer - FIXED
Template issues and image sizes - CURRENT PROJECT

Only had a week or so on it though as i have been working away. Made a ton of raw pure HD stock shots that ill have up for sale soon in HD1080 and HD720 at $75 per shot - collections in the summer time area and some focusing on windfarms as theres alot of environmental stuff going on. Hopefully soon ill have some money comming in once i have a hefty collection up for sale.

Ok fixed the template issue, we redid the first page to be a bit more friendly (ditched the rocks).

http://www.resolutiontelevision.com/newsite

So far Home page, Company Ethic and Company Experience is complete. Content needs to be revised obviously The numbers on first page that cycle through on a slideshow will be photos of shoots weve done and also the words that are missing that were previously around the rocks.

Whole thing is PNG friendly on all browsers now

video quality kinda low

Lol there is no video, thats just reference so my boss will shut up .

Basically its going to have a few shots in there, its not video its just javascript cylcing through images. All new work and such will scan through, ill adjust the speed when i have the content.

im digging it man, can you explain what process you used to have the png alpha work in ie6-?

Sure will, but ill do it in the morning, bloody knackered atm

Added new page today

-Services first page added.

Still to come
In Services Sub pages
-Video
-Photography (with gallery)
-Website Design (with gallery)
-Duplication(with cost calulators)

Contact
-PDF maps to studios
-Contact form
-More information (Legal stuff)

awesome man, thanks for the tip... adding that to the "cool fixes" room.

Damn you copyright! Why did i copyright those camera images on first page haha - accidently deleted them on my main system and i need them back now lol.

Anyway sites been updated and i put alot of work into it

Checkout

Http://www.resolutiontelevision.com

First page loads REALLY slow i think the host is SHIT, in in process of fixing it, just dont have a clue atm.