- Designing webpages for different screen resolutions and monitor sizes
- Posted by Sean on March 5th, 2004
Hi
I am after information and opinions on designing webpages for
different screen resolutions.
I am doing a web design course and have also purchased a new Toshiba
P20 notebook which has a screen resolution of 1440 X 900 which is
great for Photoshop and other programs with more screen area.
When browsing different sites the pages are dispalyed differently.
Google is no problem it simply displays across the full screen.
Other sites stop the width of the page as if the screen was being
displayed on a standard monitor and the RHS space is blank.
Other sites that use backgrounds display the page then display the
background that is normally down the LHS again on the RHS, an example
of this is the htmlgoodies honepage.
My questions are does anyone have any of these new widescreen monitors
and opinions on designing web pages so they are displayed normally
like google for various screen resolution and monitor sizes? as
widescreens will become more popular eventually as prices come down.
Sean
- Posted by William Tasso on March 5th, 2004
Sean wrote:
http://www.htmlhelp.com/faq/html/des...ml#screen-size
different does not imply 'better' or 'worse'
--
William Tasso
- Posted by JustMe on March 5th, 2004
There are many better qualified answers on there way to you, but my two
pence...
The shape of the screen is irrelevant (4:3, 16:9, oblong, whatever), the
horizontal resolution is what counts.
Some sites are built to a fixed width - eg to fit computers with resolutions
set to 800px (for the sake of argument) horizontal or greater, others are
built to automatically fit the full width no matter what.
I guess it will depend on the text:graphics ratio of the site to a degree.
Simple text-only content will auto-wrap to any screen resolution, but if you
wish the site to look consistant at different resolutions using a mix of the
two, you may prefer placing the content into a 760px table for the majority
of browsers who use 800x600 or above.
I'm sure many will disagree with this, but I tend to place my content into a
table in this way - it looks better and I find the content (text too) easier
to read if it isn't in too wide a page, whilst too many columns can be
confusing and detract from the content.
- Posted by Louis Somers on March 6th, 2004
Sean <fake@fake.com.au> wrote in news:aa1i40d4nu7dup4trfa2gkdjob4qr14a5a@
4ax.com:
Resolutions of 1600*1200 (UXGA) are becoming quite common here. Nice for
DTP work and programming (lots of code in one screen).
Websites "should" be built to fit on any screen, from wristwatch to IMAX
resolutions (or E-paper / E-newspaper). However, I usually use the minimum
resolution of 640x480 for my pages to render nicely. Smaller than that
might cause scrollbars to appear (because of images) but should still be
"browsable". I personally don't like fixed widths. Text should "flow" in a
browser, that's what HTML is all about, the great advantage of it.
Otherwise another format should be used like PDF.
--
Want content management without learning CGI, Scripts or Databases?
News Updater: http://www.xmlssoftware.com/NUpdater
- Posted by Charles Sweeney on March 6th, 2004
"Louis Somers" <removethis.info@nospam.xmlssoftware.com> wrote in message
news:Xns94A41151E7F850546179nospamstudent@194.109. 133.29...
Where's here?
--
Charles Sweeney
www.CharlesSweeney.com
- Posted by William Tasso on March 6th, 2004
Charles Sweeney wrote:
just below 'up' ;o)
--
William Tasso
- Posted by Eric Jarvis on March 6th, 2004
Sean fake@fake.com.au wrote:
by Jove you've got it
not just larger screens...the other trend is for more use of smaller
mobile devices and some people are now even using text to speech to tackle
sites on PDAs etc whilst on the train or whatever
the first thing to bear in mind is that the simple answer for the site
visitor is to alter the browser window to a convenient size...not that
many people with a lot of screen estate will be working with the window
maximised (actually I rarely maximise it at 800x600)
the second thing is to learn to understand the web page conceptually as
readil;y as visually...this may take a while if you are from a graphics
background, but it makes all the difference...instead of seeing the site
you are constructing first as an overall visual impression you need to
first build up a conceptual understanding from the ground up...not only
does this give you the freedom to design flexibly, it also allows you to
consider search engines and good accessibility practise as part of the
basics of the design (both are a real PITA if you deal with them as "add
ons" and easy if they are part of the concept from the start)
look at the design in terms of "page elements"...bits that can work semi-
independently from each other...for instance a navigation menu is a page
element...a logo can be a page element...work out how they need to relate
to each other conceptually first...frex the logo should be seen pretty
much first, it doesn't need to be visually related to anything but the
company/organisation name, if it's linked it should be linked to a page
with information about the company/organisation, it should have high
initial impact and recognisability but shouldn't constantly draw attention
afterwards...or a summary of contents needs to be seen early so that
visitors can quickly know the likely contents of the page, it only needs
to be read once, it should be easy and natural to find the main navigation
after reading it for those who are looking for another page, it needs to
be keyword rich to make it clear to search engines what the page is
about etc
only when you KNOW how the page elements need to work do you start even
thinking about marking up the page...just take the content and mark it up
as decent html...don't try to think ahead to presentation too much. just
make sure it works conceptually...put the bits you need search engines to
see at the top...place "skip" links so that screen readers can jump the
bits they may not want to go through
now you know what you've got to work with you can look at visual lay
out...I do this by using loads of post-it notes all over the
floor...shifting them around in various patterns until I get some idea of
how the elements might move around for larger or smaller displays
now you can start on the stylesheet...elements tend to "stack" best if you
make copious use of float and clear...get the shapes right before you
start looking at sizes in detail...the two basic ways of making the layout
"liquid" are "stacking", where elements "fold" below each other when
there's not enough space...and "squeezing" where an element or some
"whitespace" is compressed when there isn't enough space...look also at
your fixed point(s)...normally a design works from a fixed to[ left
corner...but you can make the design "flex" around a central point...or
anywhere else
HTH
--
eric
www.ericjarvis.co.uk
"live fast, die only if strictly necessary"


