New site design

toastyman · 13 Sep 2006 at 11:06

It's been on the back of my mind to redo the interface for this site for a while.
It's all going to be window based, and will all work on AJAX.

First attempt: http://www.routehiker.org.uk/images/new_interface.jpg

Second attempt: http://www.routehiker.org.uk/images/new_interface_2.jpg

Which one do you think is better, and how could it be improved?

Cheers,
Rich

Cuchulain · 13 Sep 2006 at 11:08

You need to lose a load of space on the background, make the content container larger.

iCraig · 13 Sep 2006 at 12:19

Not only that but I can imagine it being a bitch to write up.

Rounded corners, transparent DIV's, large floats etc.

gord · 13 Sep 2006 at 12:30

iCraig said:
Not only that but I can imagine it being a bitch to write up.

Rounded corners, transparent DIV's, large floats etc.

Not if the graphics are backgrounds to the divs.. but it would still require quite a bit of inventive thinking to work with different resolutions.. unless ive misunderstood and those boxes are actually going to be moveable windows on the site...

iCraig · 13 Sep 2006 at 12:42

gord said:
Not if the graphics are backgrounds to the divs.. but it would still require quite a bit of inventive thinking to work with different resolutions.. unless ive misunderstood and those boxes are actually going to be moveable windows on the site...

What about when he has more text in the boxes than he has now? The background will simply tile.

Augmented · 13 Sep 2006 at 12:45

gord said:
those boxes are actually going to be moveable windows on the site...

Would seem so - javascript-based 'panels' like pageflakes.com. I've seen very few sites actually benefit from the use of window-style interface panels.

While it's a very standard UI model for desktop environments, it's just not something we see much of on the Web and I don't believe many users expect it and actually make use of it. Will users really need to move panels about on the site? Will they benefit from being able to close, resize and minimise content areas?

How is the AJAX functionality going to be implemented, and how does it relate to the interface? I can see there's some sort of hiking-route application, so I imagine it may be useful for certain aspects, but I would recommend against AJAXifying just for the sake of it.

From an initial glance at the mockup, the major issue I see is that the layout is completely inflexible (fixed 800x600 box), and thus rather negates the use of panels. If the layout isn't fluid, then the user is unlikely to need to reorganise the layout to suit. I say ditch the fixed-size background image and work on a interface that will suit a fluid layout

.

toastyman · 13 Sep 2006 at 13:14

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!

Augmented · 13 Sep 2006 at 13:34

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.

PHP can't detect resolution, and resolution doesn't necessarily relate to the viewable area. You'll need to be using javascript to detect the actual window-width e.g. a resized browser on 1024x768 might actually be 701x452 viewable area.

What will happen if javascript is disabled?

toastyman said:
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.

Once the main interface graphics have been downloaded and cached on the client-side, they won't need to be retrieved again on subsequent page loads. But, yes, AJAX is ideal for form-heavy interfaces or where the user needs immediate feedback upon data-entry so that sounds a good idea.

You might be interested in the Panel/Container library that's part of Yahoo!'s YUI library: http://developer.yahoo.com/yui/container/panel/.

toastyman · 13 Sep 2006 at 13:50

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.

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 · 13 Sep 2006 at 14:04

toastyman said:
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!

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

.

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

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

toastyman · 13 Sep 2006 at 14:13

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 .

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

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?