Page size/dimension - what is best? -...

User 2136724 Photo


Registered User
8 posts

What is the optimum/ideal size for my web pages (dimensions) to maximize user capability?
User 2136724 Photo


Registered User
8 posts

Not capability - wrong word (too tired!). I am looking for the best all-purpose (so to speak) size for the web pages for viewing on multiple devices.

Thanks so much!!!
Jennifer
User 92156 Photo


Registered User
272 posts

Hi Jennifer I'm not going to suggest actual dimensions I'll leave that to other more experienced web designers here, but I found that making a page real wide is a strain on the eyes when reading lots of text, unless you want to break text up into columns newspaper-style.
If your page is mainly images it's not such a problem.

I use a 1280 x 1024 monitor which seems to be common these days, perhaps it's even on the low-res side as widescreen monitors are very popular now, and I designed my 810-pixel-wide site so it will display in Firefox without sideways scrolling.
You might want to experiment.
User 462238 Photo


Registered User
144 posts

"With so many different resolutions (800x600, 1024x768, etc.), browsers (Internet Explorer, Firefox, etc.), and platforms (Windows, Mac, Mobile ,etc.) in use, it is very difficult to design a page that looks good (or at least looks the same) in all configurations.

To design a page that looks good with most configurations, let’s start by defining our main objective: we must never force a user to scroll horizontally. In other words, our page must always fit within the available screen width. This would suggest that we have to design our page for the lowest common denominator.

So let's look at the stats
January 2010
Resolution % of Total
1280x1024 18.2 %
1280x800 17.3 %
1440x900 10.5 %
1680x1050 10.0 %
1920x1200 4.6 %
1366x768 3.6 %
1920x1080 2.3 %
1152x864 2.1 %
1600x1200 1.4 %
1280x768 1.2 %
Other 4.8 %

Get the latest in stat at w3schools.com
Ready for our next decision
Should we design a fixed-width page, or should we specify the width of our page in percentage terms?

There are pros and cons for both. The main advantage of a fixed-width page is that the layout will always remain as you intended, even when viewed at higher resolutions. The main disadvantage is that users with larger screens, set at higher resolutions, will not be able to fully utilize them, and will instead see large, unused blocks of space around your page.

The advantage of establishing our page width in percentage terms, as 100%, is that the page will adjust itself to the resolution of the screen. This is called a “liquid page design”. The main benefit of this method is that all the available screen real estate will be utilized. The disadvantage is that the layout of your page will change, and users may find it uncomfortable to read the extremely wide sentences that will result when higher resolutions are used.

If you decide optimize your page for 1024x768, and then decide to follow the fixed-width page method, you must take into account that not all the 1024 pixels will be available (some of them will be used by the browser to display the scrollbar and other “browser chrome”). To accommodate most browsers and platforms, specify your page width at a maximum of 960 pixels."
User 364143 Photo


Guest
5,410 posts

somewhere around 1000 pixels wide fixed width is the sweet spot.
CoffeeCup... Yeah, they are the best!
User 131437 Photo


Ambassador
151 posts

J that was really brilliant and well written :)

The only thing that I would add is that:

the closer to the top and the closer to the left the more important it is


Visually impaired users will love you for keeping this in mind. And there is some evidence that is a good SEO practice as well.
Visit <a href="http://leviabbott.com" target="_blank">LeviAbbott.com</a>!
User 562592 Photo


Registered User
2,038 posts

Also consider using eye tracking methodology. The research indicates users look at a webpage using various L-Shape patterns. Typically beginning with just below the top left corner, then straight down, then just to the right. They repeat these patterns over and over until they feel they have viewed enough of the page.

User psychology is vital in creating proper design.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com

User 462238 Photo


Registered User
144 posts

Levi

I did not write it. Note the quotes. It's a snippet I have saved form a referrence I no longer recall. It has been helpful a few times. I can't take credit for authoring it, but if it helps, have at it.

Jack.
User 2136724 Photo


Registered User
8 posts

Thank you all so much! Very helpful and informative.

And Levi, as our non-profit's philanthropy i s geared towards those who are visually impaired, that piece of advice is fantastic. :)

J and Tom - thank you so much, truly.

~Jennifer
User 2136724 Photo


Registered User
8 posts

Reading through again, I notice the fixed width option....is the length flexible? I do have pages that have more text content. I asked this question and was told to try an iframe...I am researching that now. Is that the nest method? Is it easy? Any tips? Thanks!!!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.