Websites displaying badly at other resolutions

[kidzer]

I made a website to experiment with HTML and CSS and i looked at it and it was fine, but when i changed my resolution from 1024x768 to 1152x1024 everything was misaligned and it looked reeealy bad, any ideas??

David, 14

[Vladdy]

General question results in a general answer:
design for the web, not your monitor

[bradyj]

gotta link?

[kidzer]

No bradyj, its nae up yet, it was jus experimenting, Vladdy, what exactly do you mean design fot the web not my monitor???

David, 14

[bradyj]

Meaning, when you design, don't target exactly how things should be viewed on monitor sizes. If you design your page properly, then monitor res shouldn't be that much of an issue.

That being said, we'd really need a test link to view the issue, and explain further what we mean.

[kidzer]

Ah rite, well, i'll see if i can get it up os some sort of Free Provider and give you a link, would it work better if my height and width values were expressed as percentages?

[bradyj]

Ah rite, well, i'll see if i can get it up os some sort of Free Provider and give you a link, would it work better if my height and width values were expressed as percentages?

Ah, that depends on the site -- what it's layout is, and what you're currently using:) There are arguements for all cases, but it's best to see what it applies for so we aren't leading you down a wrong path... hook up some anglefire or something and let me see it... or just post the code up, but put it between code brackets ([code]) and it's closed version.

[]|V|[agnus]

FYI Brady:

"gotta" = "got to" != "got a"

Just in case you were short on your daily dose of inconsequential anal retentiveness... :)

[bradyj]

|V|[agnus']FYI Brady:

"gotta" = "got to" != "got a"

Just in case you were short on your daily dose of inconsequential anal retentiveness... :)
Heh, I shoulda' put the slang accent = gotta'

[Psychoman]

hey David, i wanted to share something with you that i learned recently.

I love high resolutions, in fact i myself use 1280 by 768 on both my monitors, as most everybody on this forum could tell you, and as i had to figure out, if i design a site that huge, people that arent as keen to high res. as we are would get a head ache trying to see your site.

So i tried making everything resize in proportion... that resulted in my work looking like an amature, which most anyone could make a case for if they saw my first designs.

So i quickly learned that the best way to design a site is to do exactly what vladdy told you "design for the web, not your monitor"

lower your resolution to 800x600 for about 2 minutes tops, open up ur internet browser, take a printscreen and design a page that fits into that space.

What you want it to do at higher resolutions later is up to you, but believe me, it's alot easier to just realize that the general public uses 800x600 and that your page should just stay the same no matter what (or play arround with it so that it alings into the center of your screen, like yahoo.com, or has a none ending right border like msn.

I know its a long post, but it's something I think you need to know.
Ray

[silenus]

A good way to test in different resolutions is by using firefox's web developer toolbar. It has a resize feature as well as many others.

[]|V|[agnus]

Yes, the web developer toolbar for Mozilla or Firefox is an indispensible tool for any serious developer.

And instead of all that print screening for sizes, if you have access to Dreamweaver, it lets you know of the usable screen real estate for a maximized browser at a given resolution. While this of course depends on the browser somewhat, it's a good general rule. There are of course other ways to get these figures than Dreamweaver.

As a general rule, I design my sites at 760 wide. If you need to achieve a full page with no vertical scrolling, 420 or so is a good aim. Those numbers apply of course to an 800x600 resolution. Some beautiful sites fit on 640x480 even, but the vast majority of users are on either 800x600 or 1024x768.

Then, of course, if the layout is to be scaleable, I am for it to keep form at no lower than 760 again. The lower you can get, the better of course, but it is a responsible and reasonable aim to accommodate 800x600 viewers at minimum.

[Psychoman]

Agree with you completely ]|V|[agnus, one question though, I myself have dreamweaver, although I don't ever rely solely on it, I would like to know how you get it to do that screen "real-estate" thing....

lol sounds kinda newbish, but hey, a real pro is one who recognizes that there's always room for improvement

[]|V|[agnus]

and a real pro shouldn't get too defensive about using dreamweaver, though admittedly, i've done so myself! i think too many purists sneer at it because they see it as responsible for bloat code, tag soup and all that. but in the hands of a responsible party, it can be simply a tool for efficiency, which is what it is to me.

that said, in Dreamweaver, if you are in either the Design view or the split Design/Code view, at the bottom of the panel with the rendering of your page, in the right hand corner, there should be a little box displaying the resolution of the design view window as it is currently set. if you click that, you will see a list of different window sizes, and each one will say what it refers to as a maximized window on a certain resolution

[bradyj]

|V|[agnus']and a real pro shouldn't get too defensive about using dreamweaver, though admittedly, i've done so myself! i think too many purists sneer at it because they see it as responsible for bloat code, tag soup and all that. but in the hands of a responsible party, it can be simply a tool for efficiency, which is what it is to me.

that said, in Dreamweaver, if you are in either the Design view or the split Design/Code view, at the bottom of the panel with the rendering of your page, in the right hand corner, there should be a little box displaying the resolution of the design view window as it is currently set. if you click that, you will see a list of different window sizes, and each one will say what it refers to as a maximized window on a certain resolution

It's a designer thing -- Dreamweaver, that's how I LEARNED HTML (I just got sick of trying to fix everything that seemed to not work right, and went the other route... atleast your not using front page). Designers are application bound with illustrator, quark, photoshop, etc. -- programmers' are not that way. It's just a difference in personality, not every likes learning code.

Back on topic, remember to not trust dreamweaver's rendering of webpages too much and test in browsers as much as you can. Many things will look drastically different... if all else fails, post up here, and we can give you screenshots.

[]|V|[agnus]

I'm not advocating using the design view for accurate rendering at all, nor do I consider myself more of the "designer" mind, though it's where I came from. I am steadily migrating away from it, though... my truest love was always for scripting and logic anyway, which is why getting savvy to standards and rules based design has rejuvenated my attitude toward what I do.

[silenus]

I use Dreamweaver too, in code view only. I just keep hitting that F12 button about a gazillion times! I only really use it for the efficiency it provides, I did start using it in design view though, now I prefer to code by hand, gives greater control, plus I actually like to code :D

[]|V|[agnus]

I really only use Design View anymore to insert images, because then it will add the width and height attributes for you. Then, typically, since DW botches my CSS-P so much, or because all my common head tags are in a seperate server side include and the styles aren't rendered at all, I end up moving the <img /> element to where it actually needs to be in the code in Code View. I just use design view to plop it anywhere and save me a few steps in finding out the image dimensions.

I don't even use F12 for previewing anymore. The shortcut I've gotten used to is Ctrl-Shift-U to upload the current file. Or if you've selected filed in the Files panel, it will upload them. Then I switch windows to Firefox to view, and of course eventually the IEs and such.

Another useful tip I found: create a folder with shortcuts to all your browsers, and then add that folder as a toolbar on your taskbar. Makes things nice and handy:

http://www.sethrasmussen.com/common/images/browsers_toolbar.gif

[Psychoman]

WOW, "atleast your not using front page" very true indeed bradyj... and may I add, is it just me, or can you not help but laugh when you view the source to a site and it says <META content="Microsoft Word" name=GENERATOR> ?

I'm not even going to touch that subject, but as for dreamweaver, a real designer can't rely solely on it, sure it's easier, faster and efficient, but you have to be able to know how to fix errors in the code that sometimes dreamweaver just wont get.

Personally, it takes me alot longer to try to tell it to finnish a div and start a new one when it decides to be stupid, then to just go to the source and do it myself.

[]|V|[agnus]

I'm not even going to touch that subject, but as for dreamweaver, a real designer can't rely solely on it, sure it's easier, faster and efficient, but you have to be able to know how to fix errors in the code that sometimes dreamweaver just wont get.

Is anybody denying that? It seems as if you feel you're bringing something new to the table by citing that.

Personally, it takes me alot longer to try to tell it to finnish a div and start a new one when it decides to be stupid, then to just go to the source and do it myself.

???

What the crap are you talking about, man?

This is exactly what I'm talking about: the minute anybody so much as even mentions Dreamweaver, people like you shut your brains off and load up your corrupted, mental files with all the information and propaganda you've ever heard from zealots and purists about why WYSIWYG is the devil incarnate.

Don't make assumptions, and simply read what people are saying. No need to spew the same tired diatribes against Dreamweaver, especially when nobody is illustrating that they produce the type of problems you seem to think are inherent in the use of the program.

You talk as if Dreamweaver lacks an ability to simply edit code and markup as if it were a simple text editor.

This is not a staunch defending of dreamweaver, it's a staunch defending of reason.

Cripes...

[Psychoman]

Well, see I use dreamweaver, as i'm sure you could have guessed by the fact that I said sometimes I needed to fix things dreamweaver would have given someone else a headache for, To be dead honnest, I could not code a whole site armed with just notepad, I was just reinforcing the fact that you should at least be able to recognize mistakes that Dreamweaver can create.

For example, my <HTML LANG="en"> problem was due to the fact that I did not catch dreamweaver not having quoted the "en", however i just used dreamweaver itself to replace every single line of <HTML LANG=en> to <HTML LANG="en">

I am not condeming the use of WYSIWYG programs, I'm sorry you got that from my condeming of using Word as the HTML editor, not Dreamweaver.

[]|V|[agnus]

Mmkay, well it appears there was some misunderstanding.

At the same time, I just find reiteration of points that don't need it, especially if they weren't brought up, somewhat annoying. Nobody was advocating reliance on Dreamweavers WYSIWYG tools solely, so why reiterate that a good coder will know what Dreamweaver is spitting out? Just seems pointless, or like you might be implying that those who have advocated DWs use need to remember your point, as if they don't already.

The point you make IS a valid point, nonetheless.

Hooray for the internet!

[LynxGrr]

Lots of posts and STILL no link to kidzer's site!

[]|V|[agnus]

Lots of posts and STILL no link to kidzer's site!

haha!

[kidzer]

Sorry guys, www.freewebs.com/ryansharp , no CSS or anything , just made in notepad, looks fine at 1280x1024, whats it like at res less than that?

[Psychoman]

At 1152 x 864 the site still looks like it does at 1280 x 1024, however since you are using 18% on your top frame, the main frame covers your "toplogo.gif" set the 18% to 129 which is the height of your gif file and you should have no problem,

The thing is, you really should consider using CSS, If you don't know it you should look for a tutorial on it because there really is no use for frames to be in there, uch less actual frames.

Your whole site could be set up using CSS Positioning and you wouldn't need to have a seperate page for each componetn (i.e. "topframe.html" "leftframe.html" "maincontent.html")

Hope that helps some, feel free to ask if u need help, that's what we're here for :thumbsup:

[kidzer]

Its ok, im going to remake the site with CSS, i made it before i learned CSS you see! IF i need hale though, i know where to come!

[Psychoman]

Alright then :) I Didn't know you knew CSS :D