I know basic HTML, but I’m looking at learning CSS and Java script so I can make myself a nice portfolio site. I was just wondering though, what screen resolution should I design the site to be viewed with? I work at 1280 x 960, but I’m thinking 1024 x 768 would be compatible with more people. Then again, most people looking at an artist’s portfolio page would likely be running at a higher resolution. You see my dilemma.
Easy to answer: Make it independent of a specific size. Not that easy to do.
1024x768 with what dpi? With what font sizes? With what font types? For a graphic portfolio? So the majority of visitors will have larger screen resolutions and screens, so the majority of your visitors will have a lot of empty space around their screen.
Make the basic page size independent, offer the images for viewing in different sizes.
If we were talking about printers then i could understand your reasoning about DPI. However, since monitors use PPI, as such is a fixed ratio of 72PPI… you’ll find 1024x768 is exactly that… 1024pixels by…
Lord’o’fan-boy. Just make the design a liquid one (independent of screen resolution by making elements proportional to the user screen /window size via the use of percentages instead of explicitly stating pixel sizes.).
However, you’d be glad to know 775px is the maximum one can use without a horizontal scroll bar appearing for 800* compatibility… providing they havn’t increased their window themes . Nobody cares about vertical scrolls so make the page as long as you like. Though, this was somewhat 5 years ago so 770 would be safer.
Well, it should be ppi. But it is not fixed at 72ppi. That is a value that one specific OS always returns if queried for ppi, regardless of how it is in reality… If PPI would be fixed at 72, then all displays with 1024x768 would have the same physical size.
I had a 14" CRT running with 1024x768 and a 21" with the same number of pixels (an X display). The difference in PPI is huge. A font or a graphic a few pixels high that would be virtually invisible on the small screen would take considerable space on the large screen. Btw, a typical mistake webdesigners tend to do: Checking if the site works with small resolutions by switching to a low resolution on a large screen. ARGH. Thats why you get 5 pixel high graphic text - it works for them… :no:
There are quite a lot of different displays at the market, beginning from 12" laptop displays (well, ASUS ships it’s 7" subnote EEE PC this month) up to the 30" Apple Cinema display. Oh, and you can use your 120cm plasma display for computer output too. And don’t forget projectors… or pocket PCs. Quite a lot of diversity in the PPI market.
Design the content and structure to be fluid. Make it look nice on 1024x786, but usable on 800x600 (may not look as neat with less clear space in it, but it should be perfectly functional and usable).
HTML Dog is a great place to learn I have found that it is much easier to make a size-independent site than it seems. Look for the article about Elastic Design. And by the way, it will be worth it to make your page XHTML instead of HTML. Not much difference, but you’ll be more prepared for the future. Check my current website WIP for an example of what I’m doing.
Edit: Oh, and keep your HTML free of styling! Styling should go in a SEPARATE CSS file, linked back using a <link> tag in the heading.
Thanks for that site Tynach, it looks good. As far as page design, I was thinking of making something similar to this page.
Wow, that site has some terribly made CSS. It’s all in-line, and that is something you should never do.
The part in the center requires you to buy an application to make it for you, and won’t work on anything that doesn’t support flash. Flash, although widely used, is not a web standard, so there are plenty of times someone might look at your site and not be able to use it because of its use of flash. Just a warning.
By the way, do you happen to know if those images were rendered with Blender internal?
Edit: That site is also invalid code. The DOCTYPE is in the wrong place, so is not read, but it says XHTML 1.0 Transitional. Using that, however, still generates 14 errors. Results.
Also, design-wise, that site is very basic. Other than the flash in the middle, it is very low quality.