"safe dimensions" when designing for 1024+ res?

Howdy guys,

I understand the accepted standard now, which caters to help 800 x NINE HUNDRED screens, is 740 times 460

But from a variety of polls etc on my site Truly determined that the majority my audience reaches 1024 +

So I figure, why not design for your and make real estate.

But I didn’t been able to get the " 740 x 460" formula for any 1024 res design.

Is there a similar rule of thumb size for creating for 1024 resolution

Thanks earlier!

Best regards,


To are the reason for the width with any resolution, subtract about 20 pixels for any scrollbar’s width. Calculating the height is a little more difficult, because that depends upon the browser that visitor is applying, and how many toolbars they’ve. Whether they are choosing large icons and also small icons, contain the " Links" bar showing or when they have downloaded 1 / 3 party toolbar such as the Google toolbar will all make a difference. I’d allow several hundred pixels intended for these toolbars. Nonetheless, it’s not the completed of the world if you are page scrolls vertically, which is expected.

POST second spluff’s tip..

However one factor that you might want to take into consideration is from my experiance individuals with ‘1024+ setting’ usually have a several applications/windows open at the same time, and might not always have their browsers prepared to take full screen. So I would still go while using 800×600 standard. Almost all professional sites are built around it, and everyone is used to it. But if you continue to feel like you want/need the extra space, who was I to fight..

I see what folks are recommending for that visual layout. Through following this formula, will the web page still print appropriately or will the particular content get lost in the page when provided for the printer

I am currently having that problem using a site…

Many thanks,

it get cut off.. think about it like that:

Anything on screen is dependant on a 72dpi decision. In other words it will take 72pixles to generate an inch. So if the width is 720 pixles huge that equals 15 inches(720/72=10). That will be too wide with regard to regular paper. Nevertheless , you can fix in which with css. You can set a rule that should ‘style’ your page designed for print.

Nonetheless, to utilize this you need to not have hard-coded elements inside your html such while < table width=" 720" >.

I am not as familiar with CSS as I would like to be as well as I took an instant look at a person’s tutorial but couldn’t find the element in CSS that you’ll be referring to. Would you point me inside the right direction

Sorry that but yesterday I got short on time so I merely threw out this answer real speedy.

First off I have to advise that if you’re not currently utilizing css to format your pages, print styles will not help you if you don’t modify your html a lttle bit.

Using CSS print styles is quite easy. It is simply like using the idea for webpages, only your target is often a sheet of paper besides a computer display screen. The main differences is you will be now dealing together with paged media which means you must account to the, and you desires to deal with printer manual margins since most printers usually do not print to full bleed(all methods to the edge). So your print area shall be roughly 7. 5in x 10in. So discomfort theoretically anything greater then 540 pixles runs the risk of getting block.

The most clear requirement is to set up your printer styles so there’s nothing wider then a person’s sheet of papers. You might include noticed that ‘printer friendly’ sites usually are pretty narrow, that is since the authors have created both their print styles and display screen styles as close to one another visually as possiable. You need not do that, but it might help once you learn your users is going to be doing alot of printing from the site.

We have included a zip along with four files. case in point. htm, both. htm, design. css, print. css. The css files were linked to the actual html files. Keep all files in the same filder along with view the html files with your browser and and then print them. Note the differences between the 2 main pages.

Both in the html files tend to be almost identicle with just one small difference, notice the < link> tags in the head of both with the html files. These link the 2 main css files for the html files. Nonetheless, screen. html links only towards screen style, in addition to both. htm is associated with both the screen plus a print style.

I hope that makes some sense and it is possible to follow the examples. It is challenging to explain screen-print styles without first aquiring a general understanding of css. There are many resources you have available to get people started. W3Schools is a great place to start.

This entry was posted in Web Design and tagged , , , , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *