New site design

My plan is to have each window as a set of divs. The first div is the container div, which will be controlled by the JavaScript to make the window move. The second div will contain the header image and the title of the window. The third div will contain the window content and the fourth will contain the footer image.

I know it's a lot, but there's only ever going to be a maximum of 3 windows on the page at a time.

For the transparency and dragging, I was going to used http://tool-man.org/examples/dragging.html (the handle one). There's a tiny bug with that in IE, but should be easy enough to sort out.

In regards to different resolutions, I was going to use PHP to detect the resolution and then basically alter what you see on the page accordingly. Users using 800x600 or less will see what you can see in the image. Users over that resolution will get the sides of the hill (so it looks like the website is on the top of a hill), and then the rest of the page will be the gradient sky and the orange bar going across the bottom (in regards to new_interface_2.jpg anyway). If that makes sense at all! If it does, that should solve quite a few of the problems bought to attention in this thread.

The main reason i'm redoing the site interface is because the old one has basically become complicated to use and is difficult to find facilities etc. I want the new design to be simple and clean, which is what i've aimed for in this design.

Because the layout is quite heavy on the images, I thought AJAX would be an ideal solution as the user wouldn't have to keep reloading the page. A lot of the features of the application are 'enter details into form, click update and it adds this data onto a table on the page', which I believe as an ideal AJAX scenario.

Thanks to all for your comments so far!
 
toastyman said:
In regards to different resolutions, I was going to use PHP to detect the resolution and then basically alter what you see on the page accordingly. Users using 800x600 or less will see what you can see in the image. Users over that resolution will get the sides of the hill (so it looks like the website is on the top of a hill), and then the rest of the page will be the gradient sky and the orange bar going across the bottom (in regards to new_interface_2.jpg anyway). If that makes sense at all! If it does, that should solve quite a few of the problems bought to attention in this thread.
Click to expand...

I've updated the image (www.routehiker.org.uk/images/new_interface_2.jpg) so you can see what I mean.

Oh right I presumed details on the user's resolution would be passed in the browser details which PHP can read. Darn!
So now yes, my choice would be JavaScript, which is fine except for when the user first visits the site...there will be no details regarding the screen width so PHP wouldn't know which site layout to produce. Eeek!

That Yahoo UI Library looks excellent. Thanks :)
 
Augmented said:
There are actually two useful function in the YUI DOM library that will return those straight way for you:
Code: 
YAHOO.util.Dom.getViewportHeight();
YAHOO.util.Dom.getViewportWidth();
Should be self-explanatory :D.

You can call those functions on load to get the initial layout choice. And then you can use an onresize event listener so that those values are updated whenever the user resizes the window (YUI also makes that easy :D. YAHOO.util.Event.addListener(window, 'resize', function-name);).

Use the values you get back to modify your CSS so that it scales and re-arranges appropriately for the user's resolution. PHP code need not be involved.

I see how that layout will work on higher resolutions - yep, seems like a fair idea.
Click to expand...

Excellent idea! I'll probably put that to use :) I'm guessing if it can alter the CSS it can also write new html elements to the page etc...could be interesting if it works!

Right next step - colours! I'm currently trying different ones (the sky is currently green). Has anyone got any ideas?
 
You must log in or register to reply here.
Back
Top Bottom