View Single Post
Old 02-09-2010, 11:16 AM  
raymor
Confirmed User
 
Join Date: Oct 2002
Posts: 3,745
The majority are slowly moving to much smaller resolutions, on mobile devices,
but that's not something you are supposed to be thinking about. What's the
difference between a PDF and a web page? The difference is, or is supposed
to be, that while a PDF says exactly what the output will look like when viewed
or printed at one specific size, web pages have the web browser to decide exactly
what looks "right" for a given display, with a given size window, with the users
preferences for font sizes, etc.

That's the whole job of a web browser, to take the words and pictures in the HTML
and the presentational hints in the CSS and it figure out what looks right on that
system, for that user, whether the window is maximized or smaller, etc. If you're
designing for a specific resolution, and assuming that the window is always maximized,
and assuming that the viewer is a young person with perfect eye sight who likes
a 10 point font you are missing the whole point of what a web browser is and does.

A properly designed page will look good on my phone, my Playstation, or my giant monitor.
W3C schools has a lot of free information to learn correct design for the web as
opposed to designing printed material where you choose the paper size.

Here are a couple of quick hints. If you want something to be centered in the page,
use text-align: center, don't shift it left by adding enough spaces that it looks right
on your screen when maximized. (For those of you stuck in 1995, text-align: center
is pretty much the same as what was briefly known as the "center" tag). Any time a
size has to be specified, it should be specified in em for height, mostly, and percentage
for width, most of the time. Specifying size in pixels is almost always wrong because
200 pixels on my monitor is a lot different from 200 pixels on my phone, which is a
lot different from 200 pixels on my Playstation. "20% width" is always 20% on every device.

The biggest hint, though, is that 98% of the sizes people put in their web pages simply
shouldn't be there at all. You'd do better to not put ANYTHING where many people
fill the HTML or CSS with various presentational details. So, first design the page with
no CSS or presentational HTML to start. Just use semantic tags like <h2> for headings
and <ul> for lists. Don't view it in a browser at this stage, just look at the source and see
if everything is on the page, and if you can tell what's a "big" heading from the <h1> tags
and such. When you done putting all of the content on the page, THEN look at it in a
browser. You'll see that the browser has automatically figured out most of the "what
it should look like", because it automatically makes a list look like a list, a header look like
a header, etc. Now you just need to tweak it a little bit here and there by adding CSS
to give the browser some hints on how you'd like it to look, specifying such things as colors,
some margins perhaps for spacing between items, etc. Because you will then have used
the minimum CSS necessary, the browser can still do it's job and figure out how to make
it look nice on another display, just as it figured out how to make it look nice on your display.
__________________
For historical display only. This information is not current:
support&#64;bettercgi.com ICQ 7208627
Strongbox - The next generation in site security
Throttlebox - The next generation in bandwidth control
Clonebox - Backup and disaster recovery on steroids

Last edited by raymor; 02-09-2010 at 11:29 AM..
raymor is offline   Share thread on Digg Share thread on Twitter Share thread on Reddit Share thread on Facebook Reply With Quote