| Screen size usage 2006 - 2009 |
|
|
800 x 600 "
1024 x 768 "
1152 x 864 "
1280 x 1024 "
1440 x 900 "
Other sizes |
21.6 %
55.8 %
2.9 %
16.5 %
-
3.2 % |
|
10.8 %
49.8 %
2.9 %
28.2 %
-
8.2 % |
7.6 %
43.7 %
2.8 %
34.2 %
4.9 %
6.8 % |
|
5.7 %
38.6 %
2.6 %
36.9 %
6.1 %
10.1 % |
|
|
The biggest change in the Maritime Sector is an increase in usage of the bigger screen size (1280 x 1024). Other sectors can have different usage pattern. The number of additional (small) sizes has increased tremendously with the increased use of handheld devices.
It is time to optimize your pages for 1024 x 768 pixels or possibly 1100 pix. width ( pixel = picture element ), which means the webpage looks at it's best in that size. Pages on which you have some data tables, however, you should still check for readability in 800 x 600 pix. Still in 2009 reason to optimize for 1024 x 768 but you need to check the result also in 1280 x 1024. These two sizes cover 77 % of all my visitors during the first 6 months of 2009.
The bigger screen size ( 1280 x 1024 ) will make your columns wider and therefore shorter. You could as an alternative think of making your middle column = 50%. Or you can make your
middle column fixed, i.e. 550 pixels ("550"), while the side columns would then be "25%" each. What you specify in % is
always in percent of available space.
On the other hand, during 2007 some people have started using a screen size of 1.600 pixels width. I think, however, many of those are running two windows at the same time, i.e. 2 x 800 pixels. If you are thinking of making a flexible width design you could optimize for width 1.000 or 1100 pix, but keeping the pages "enjoyable" from 800 to 1.200 (or may be 1.300) pixels. Some more ideas in this
article from Oct. 2006.
There are some different ideas on how to make a "semi-liquid" or elastic design. Basically they depend on a page with total width="770 px + 50%" or some other values. These require browser specific code, so they don't work on free or very low cost servers. See
semi-liquid layout and
elastic layout
When you optimize your page for 800 x 600 and your visitor uses a bigger screen size nothing bad happens. Your page will simply be stretched sideways (if width = "xx %") = "auto-stretch". In some cases it can look even better! If, on the contrary, you optimize for
1024 x 768 or bigger screen size, you should define
width in pixels instead. When using % and your visitor uses a
smaller screen your pages will be pushed inwards sideways and it easily creates havoc with your tables. Therefore my tables (= those with some kind of data content) have been made on a laptop, screen width = 800 pix.
If you don't know for sure what size screen you have on the computer you are using, choose the
empty screen (desk top) and give a "right-hand-click", go to "Properties" --> "Settings" - this gives the screen size as well as "Colour settings" (Windows).
After you have finished your sketch ( including text and tables ) write your text
including necessary code on a separate paper. Don't forget the end tags with the slash (/). This way you eliminate many possibilities for small errors, which can take hours to find. IF you still get an error, print out your code and check the
printout, it's easier than reading the screen!
You can also download a free
code checking program ("Lint program"). Remember, you are not the stupid one, it's the computer that's a stupid MACHINE.
How to Check Layout Design
If you work on a 800 pixel wide monitor and optimize your webpages for that size, it's always possible you will get some empty space between your layout tables on a larger screen. It can happen, for instance if you use several pictures in your side column. To avoid this you need to check your design on your monitor as if it would be a bigger screen (1024 pixels).
On my computer I can
simulate a bigger screen, see
above how to get your
monitor settings. When I change the monitor resolution from 800 pixels to 1024 the "full screen" window turns into a small one in the top left corner. Then put your mouse arrow in the lower right corner of the window, you get a double arrow. Hold your click and drag this arrow until the window covers the whole screen.
This is now a rough simulation of how your webpage would look on a bigger screen (1024 pixels wide).
Once you have simulated the bigger screen on your own smaller one, you know how small the text looked. Use one of your "testing browsers" and
reduce font size so it looks same as in your earlier simulation. I had to reduce mine from 12 to 9 pixels.
Now you can use this browser for testing all your webpages, old and new. If you have a 1200 pixels wide monitor, you go in the same way to the "settings" and change temporarily to 800 pixels width. Then in one of your "testing browsers" you
increase font size and then you can test your pages
as if you had a small monitor.
As can be seen in the table above the
very big screen sizes are still increasing. However, when you get up to about 1200 pix or wider screen text lines start getting too long for comfortable reading. I believe people with very big screens are surfing with a
smaller browser window. This means of course that the maximum "screen size" you need to consider is about 1200 pixels wide. Get a
browser window size sniffing code - it doesn't work on free servers.
If you have the bigger screen and include some tables with some content or data you have to test at least that page also for smaller screen size. The reason is, when viewed on a small screen the table will be pushed
inwards (when width in %), which have the same effect as increasing font size. If you don't leave enough free space inside the table it can turn unreadable on a small screen (800 pixels wide).
"Advanced" Layout Tables
A layout table usually have the Menu in the leftmost column, which the search engine spiders (robots) read
first. If the Menu is complicated (for instance JavaScript) or otherwise very long the
text will come very far down in the code.
Additionally eventual JavaScript in the beginning of the code is meaningless for the spiders but is "understood" to be very important
for you because it comes first. Then your real text, which is the
important part would be taken by the spiders as being not so important! Because it's found at the end of the code page.
You can use different "nested tables" to arrange so that your
Menu comes last in the code, after the all important text. Still the Menu appears on the left hand side of the display. See Don Pedro's
"Advanced"
Layout Tables.
Layout of Printer Friendly Pages
When making a
printer-friendly webpage delete first
all pictures and
graphics as well as your
background. This saves not only your visitor's printer but also his/her ink. It doesn't matter you delete your logo. Just include what your logo says inside the <title></title> tags. That title is printed out on the very top of every printed page.
A layout table is not necessary for printer-friendly pages, because you have
only one text column.
®
(Japanese), 
( Arabic ), 
( Chinese ), 
( Korean ), 