OK before you read this, I have to tell you that I am not the world's best designer :) (understatement) and I haven't finished this site anyway. I am checking the positioning at this stage not the colors or the appearance (though tips or suggestions are welcome with this as a foundation).
I have sorted the positioning pretty much and would appreciate it if any of you could confirm that the positioning is OK in all the main browsers - I've checked FF and IE6 win where it is as I want it.
And as well, I am curious if any of you guys could send me a screen shot of what it looks like in a PDA or even better a mobile and, can you confirm that it is navigable or, even close to being so in both those portable devices?
Oops here's a link which I'll have to take down before the edit button disappears.
Link moved to a newer post below.
08-25-2005, 03:18 AM
seems to work the same in Opera 8 as it does in mozilla for me.
your banner image I think should be done differently though. Right now the div has a fixed with so if it collapses less than 1024 res the page scrolls.
maybe give the div id="banner_img" a 100% width and give the backgorund image top left, so that the page "rolls" over the image.
Thanks I'll check that out
Any takers for the PDA check?
08-25-2005, 02:05 PM
Since you did ask for some initial suggestions (I don't have a PDA) I do have one: I would consider fixing the width (or max width) of your buttons. Say width : 200px; but keep the length elastic : 2em. The reason is when I enlarge the text with IE (good job), the largest setting pushes the buttons over so far the content drops to the footer.
08-25-2005, 02:17 PM
White margins on banner images are bad. I would check PDA compat but I can't get my new cell phone's browser working yet, bloody taiwanese phones. It's a nice phone though. Oh yeah, if you roll over menus in IE the drop-down displays rather... ughily. heh. Lose the powered by Chris button too or make a new button and re-design/size it to fit the site more. I also would ditch the W3C buttons especially since this is a professional site, no? Most people won't know what it is nor will they care.
BTW: it is looking a lot better than before. The banner image is the main thing for me, that will make it look a lot better.
Green Beast, thanks for that.
Could I trouble you to send me a screen shot coz my IE6 doesn't do that. It all stays in the same place, though the text of the buttons does expand slightly out of site, behind the button below it. maybe that's what you meant? which IE do you use?
Tristan, thanks. I hadn't tested at the next higher resolution :) I'll make the photo wider.
keep it coming folks
08-25-2005, 06:48 PM
Large images, so I'm posting links for you.
Here's a link to a screen of IE (v.6.2) with text size set to Largest:
Here's a link to a screen of FF (v.1.0.6) with text size increased by two sizes:
The Firefox behavior is acceptable, but as you can see by my screens, the IE look might need the tweak I mentioned.
In the process I did note something else: Background color differs as it's undefined. Unless you want to be whatever the default browser background is, I'd specify what the user should see.
Hope this helps.
08-25-2005, 07:16 PM
There's whitespace to the right of the page in Safari.
Thanks guys. I had overlooked the background color (doh!). It's meant to be and, now is, white.
Error 404, I'll loook for a d/l of safari though, if I recall, isn't it for Mac's only? I don't have one so I may not get to see what you mean and how to fix it.
Do you mean whitespace to the right of the thumbnails or just to the right of the banner photo? Because, the banner is goping to be wider in an hour or so and the thumbs div is floated right, to be against the window's edge. maybe I need to look at padding or margin values and set them specifically, to zero?
08-26-2005, 02:56 PM
Do you mean whitespace to the right of the thumbnails or just to the right of the banner photo?
Whitespace to the right of both.
I'll check the margins and set them to 0, if I can get away with it in FF and IE6 Then I'll ask again for you (or someone else), to check it for me in Safari.