Forum Moderators: open
How do you get something to look good on your pc and generally others too.
On my page i have put best viewed in 800x600 but apart from that i dont know what to do.
The main thing is to work on it a piece at a time. Always start by making sure your code is valid before you get too frustrated - the best place is [validator.w3.org...]
Then, after you know your code is valid, zero in on one thing at a time that looks different on different machines. Do some work and research, then bring up the specific issues that you can't find answers for here. If you do it this way, you'll be helping anyone else who has a similar problem.
Remember there's a lot of variables to check: platform, color depth, browser version, screen resolution and so on. After a while, it will begin to fall in place.
It sounds as if you were aligning elements dependent upon resolution or browser size... maybe both.
You need to start with a good foundation that supports various resolutions and window sizes. Test your results early and amke adjustments in your layout before you get far into a design that will display flaws.
If you are attempting to line up elements with your background and you are not using position:absolute to retain position, you might experience issues similar to what you describe.
I can't speak too much to background images as they've proven themselves to be more than perplexing to the issue of multi-browser viewability. Soooo, I stay with colors. Much simpler and smoother. Nothing looks worse than certain bg images applied because the author 'likes' the image and the browser doesn't.
What I've done was to install most all of the major browsers on my machine, so I can view my work in each browser. Nothing will give you a better idea of how things will work (little tweaks you wish to try) than to actually see them in several different browsers.
I will say that Netscape does render fonts different than most and for that reason I'd suggest staying away from H1 and use FONT FACE="" SIZE="" COLOR="" for the best overall results.
Hope this helps.
Pendanticist.
At a minimum, I try to make them look good at 800x600 and 640x480.
This can be a little tricky but with a little patience you can make your designs "flow" pretty good.
I use quite a few tables (and nested tables) to achive the desired layout. It's amazing what a few "nowrap" attribues can do for a <td> tag.
At a minimum, I try to make them look good at 800x600 and 640x480.
I like to test with 1024x768 as well, which is very common these days.
It's much better, IMO, to start out learning CSS and USE the h1 tags (they tell the search engine what the main topics are on the page). Just use css to make them behave.
The <font> tag is deprecated. Eventually (not tomorrow, but eventually) it will vanish. It's better to begin preparing now for that future.
About screen resolutions: it seems that making pages for 640x480 is out of date. The minimum resolution that seems to make sence to test at is 800x600. Next one is 1024x768 and seems to be the most popular now. Also, 1280x1024 is getting more and more spread around the comp. world so it should be also taken into account.
The only way to avoid any problems with various resolutions is to create a fixed-size layout (designed for minimum 800x600). There are pros and cons for this method (like in everything) but it definitely works.
On your comment re: fixed size layout. Please bear with a neophyte, here...
I have designed my sites in Dreamweaver, to work in an 800x600 resolution environment, but when viewed in the 1024x768 resolution, they obviously don't fill the screen. Is that what I have to live with, or is there a percentage based layout that adjusts with the screen resolution? (My lack of html knowledge showing here!)
Thanks! :)
However, I can show you some tricks that can be helpful.
1. Use wide backgroung image that will create a feeling of full-window design, even if your fixed-size layout is smaller than actual screen resolution.
2. Use mixed table layout, like this:
_____________________________
¦ fixed ¦ fixed ¦ 'floating width' % ¦
¦_____¦_____¦________________¦
The 3rd colomn should have width set in % and fill the rest of the screen width if it's wider than two first fixed-size colomns.
Both methods are widely used for sites with good and creative design.
On background images, css will let you fix them left, or right, repeat, no repeat, etc. And remember to keep the file size down on them so they load quick (I shoot for 5k or less)
I will say that Netscape does render fonts different than most and for that reason I'd suggest staying away from H1 and use FONT FACE="" SIZE="" COLOR="" for the best overall results.
These are basic HTML tags that will work in all browsers. Moreover they will allow disabled people to navigate faster/easier through your documents, e.g., by jumping between headings.
You should try to create a flexible desing, i.e., use % instead of fixed width. After validating (see above) you could try to use Bobby [cast.org] to check for accessibility. This will also point out possible problems on different systems. Most items will only be suggestions; but read the explanations and don't waive them too fast.
Try your design in different browsers, e.g, MSIE, Mozilla, Opera, and with different resolutions, e.g., 640x480, 800x600, 1024x768, 1900x1600, and color depth.
[edited by: luma at 9:31 am (utc) on July 1, 2002]
the first thing I do with a site is decide the overall structure and navigation pattern...before doing ANY design I then mark up the content so that the html makes conceptual sense whether it is dealt with visually, aurally or whatever...that then becomes sacrosanct...if that mark up doesn't get altered there isn't much that can make the site unusable
then I build up the presentation one "layer" at a time...starting with basics like the colours...creating styles for discrete elements such as menus...once I have that largely settled I then start the layout
by and large it's only at the very end of the process that cross browser and resolution issues begin to bite...and by then most of the work is done, even if the styling might get a little "iffy" on a palm pilot running Konqueror at 400x300, the site continues to be usable at worst
I also use the @import hack to deliver a partial style sheet to browsers such as Netscape 4 that have a limited implementation of css...the site can end up looking very different with those browsers...usually a lot bolder, blockier and less subtle
this is also crucial...it is IMPOSSIBLE to make a site look the same in all browsers...so make sure you are aiming to make it look good not look identical
other useful techniques
make the page up from "elements" before you think about layout...complete the work on the navigation bar, a title bar, comment boxes, footer etc...then play around with the different ways they can fit together as the space available changes...that tells you where it makes sense to let them move to, and where they have to be constrained...after that judicious use of float and clear in the css will largely control the way it adapts to different situations
Perhaps next time I post to broad-based, non-specific questions, I'll be super-specific with my responses or maybe ask the poster for more input.
>How do you get something to look good on your pc >and generally others too.
