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?

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

See below...
Hi Alex,

Well the safest bet is 800x600 although statistics show that 12% to 15% of web surfers are still using 640x480.

I always try to target 640x480 with 800x600 being the minimum standard, because some pages just won't fit on 640x480.  But I try to get most of my pages to fit on 640x480.  But then I also make sure that they scale well to higher resolutions.

There are many techniques that can be used to make your pages adjust well to a variety of screen resolutions... far too many to list here.

But, basically you have two workable strategies you can use:

1.  Design everything for 640x480 by using a static width table (which I think wastes a lot of screen, but seems to be popular.)  

2.  Design you pages to dynamically adjust to the users screen size and still look good.  This is a little harder, but a better way to go.

In order to achieve adjustable pages, simple do not use any graphics that would scroll off a 480x640 screen.  I usually limit the width of any image to 468 pixels wide or so.  And I make sure that I don't place other images next to it unless I like how it wraps to the next line.

Also, use variable width tables.  You can still set particular cells or columns to a specific width in pixels, but the table itself would probably scale better if the width was 100% so it adjusts to all screen sizes.

The most important things is limiting your image widths and setting up the graphics and text so that when it does wrap, it still looks good.

Two easy ways to test your pages is to open your pages in a browser, and make sure its not maximized.  Then drag the edges in until you have an approximation of what 640x480 is.  The second way (to get the real scope) is to momentarily change your screen resolution and look at it that way.  That will also give you an idea of what size you need to size the window at higher resolutions to get the same effect.

Also, you can achieve a neat effect by placing an image in a table, set the table to 100% width, and set the table or cell background to the same color as the image.  You will have the effect of an automatically size adjusting image, even though most of it is really a table that is the same color as the background of the image.

But most importantly, make sure the image isn't too wide.

Hope that helps.


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dpsautomationAuthor Commented:
Sorry, but I think there was a mistake.
I received an empty message.

Could you answer my question again please?

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

dpsautomationAuthor Commented:
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?

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%">
<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.
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.

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.
dpsautomationAuthor Commented:
Thank you so much, It has been a great help for me.

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development Software

From novice to tech pro — start learning today.