dpsautomation
asked on
screen size
I would like to ask the following:
I designed a front page web in 1024x768 screen size. Now I realize that I have to make it in a smaller size in order to let everyone see it:
1- Which is the most popular size in web design?
2- How can I do to make it smaller in a practical way and not re-designing all?
Thanks.
Alex.
I designed a front page web in 1024x768 screen size. Now I realize that I have to make it in a smaller size in order to let everyone see it:
1- Which is the most popular size in web design?
2- How can I do to make it smaller in a practical way and not re-designing all?
Thanks.
Alex.
See below...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Sorry, but I think there was a mistake.
I received an empty message.
Could you answer my question again please?
Thanks.
I received an empty message.
Could you answer my question again please?
Thanks.
ASKER
1- So I have to start my page setting a 100% width, so everyone could see it?
2- And now that I have the most of my page complete, do I have to change the dimensions manually?
thanks.
2- And now that I have the most of my page complete, do I have to change the dimensions manually?
thanks.
If you use tables, you should set them at 100% width, and the cells will automatically adjust (unless you specify a fixed width in pixels).
Actually, tables are not necessary for making your pages look good on all resolutions, but they help, especially if you are trying to maximize the use of space. What will happen is that on lower resolutions, things will be more crowded (but still fit) and on higher resolutions there will be more white space between items.
BUT... Even if you set your table widths to 100%, if you have a graphic that is too wide, it will still cause the page to scroll off the screen sideways.
The number 1 reason why pages don't fit in a browser at 640x480 resolution is because the graphics are too wide. Since the browser can't wrap the image, it cases the annoying sideways scroll effect.
Another problem is setting tables to a width greater than the screen size. If you set a table's width to 1000 pixels, any screen smaller than 1000 pixels will force the user to scroll sideways. That's why a percentage is better because it doesn't assume screen size.
You may want to use both percentages and pixel widths in your tables.
For example:
<table width="100%">
<tr>
<td width="150">
This cell is 150 pixels wide and will always be 150 pixels wide no matter what size the screen is. Using a fixed width in a cell may be useful when you have a graphic with a certain width here and you don't want a huge border around it.
</td>
<td>
This cell will automatically adjust to the width of the table (in this case set at 100% of the available screen) minus the 150 pixels being taken up by the other cell. This cell would be useful for any of your main content, text, etc. that would automatically wrap well. This cell will stretch to the size of the screen OR stretch to the size of the largest object, whichever is bigger. So an oversize graphic will stretch this cell off of the screen.
</td>
</tr>
</table>
But, as I said, tables are not necessary unless you have multiple columns you want to preserve. The browser will automatically wrap without thr table. But if you want information in columns or to appear in specific locations, tables is the way to go.
I can't see what you are trying to achieve, but basically you will have to experiment with the widths and percentages to get it just right.
The goal is to make the page scalable so that no matter what resolution it still looks good. Naturally it will look better at some resolutions than others, but making it scalable keeps from producing bad looking pages at low resolutions.
Actually, tables are not necessary for making your pages look good on all resolutions, but they help, especially if you are trying to maximize the use of space. What will happen is that on lower resolutions, things will be more crowded (but still fit) and on higher resolutions there will be more white space between items.
BUT... Even if you set your table widths to 100%, if you have a graphic that is too wide, it will still cause the page to scroll off the screen sideways.
The number 1 reason why pages don't fit in a browser at 640x480 resolution is because the graphics are too wide. Since the browser can't wrap the image, it cases the annoying sideways scroll effect.
Another problem is setting tables to a width greater than the screen size. If you set a table's width to 1000 pixels, any screen smaller than 1000 pixels will force the user to scroll sideways. That's why a percentage is better because it doesn't assume screen size.
You may want to use both percentages and pixel widths in your tables.
For example:
<table width="100%">
<tr>
<td width="150">
This cell is 150 pixels wide and will always be 150 pixels wide no matter what size the screen is. Using a fixed width in a cell may be useful when you have a graphic with a certain width here and you don't want a huge border around it.
</td>
<td>
This cell will automatically adjust to the width of the table (in this case set at 100% of the available screen) minus the 150 pixels being taken up by the other cell. This cell would be useful for any of your main content, text, etc. that would automatically wrap well. This cell will stretch to the size of the screen OR stretch to the size of the largest object, whichever is bigger. So an oversize graphic will stretch this cell off of the screen.
</td>
</tr>
</table>
But, as I said, tables are not necessary unless you have multiple columns you want to preserve. The browser will automatically wrap without thr table. But if you want information in columns or to appear in specific locations, tables is the way to go.
I can't see what you are trying to achieve, but basically you will have to experiment with the widths and percentages to get it just right.
The goal is to make the page scalable so that no matter what resolution it still looks good. Naturally it will look better at some resolutions than others, but making it scalable keeps from producing bad looking pages at low resolutions.
BTW, if you are not using tables, you don't need to do anything. Just don't use graphics wider than 468 pixels to be safe and don't place a series of graphics next to each other that together total more than 468 pixels. If you do that, your page will work on every resolution.
But by using tables, you have more flexibility in your design and can create much more interesting pages. Just set <table width="100%> when you use a table (in most cases; there are some cases where you don't want to do this) and it will scale to fit the page.
But by using tables, you have more flexibility in your design and can create much more interesting pages. Just set <table width="100%> when you use a table (in most cases; there are some cases where you don't want to do this) and it will scale to fit the page.
ASKER
Thank you so much, It has been a great help for me.
Alex.
(Argentina)
Alex.
(Argentina)