What is the best res to set in Fireworks or PS when designing websites?

Posted on 2007-07-27
Last Modified: 2013-12-13
What is the best res , when designing websites in Fireworks or PS, to set my res to?
I use Fireworks with designing web pages, and even though a made alot of sites, this has always stumped me. I have my monitor's resolution set to 1280 x 1024. So when designing still to look clear in 800 x 600 and for web surfers who have their monitor resolution set to 800x 600,1024 x 768, or even 1280 x 1024.
Now when i first start out in fireworks when designing a site, i set 800 x 600 for my canvas, and my res is 72<-- this is what i want to understand.  Please help me make the best looking sites!!!
Question by:Sam Cohen
    LVL 11

    Assisted Solution

    I still design all my sites with 800x600 as my target resolution. Why? Well, most users today don't use 640x480 anymore, and 800x600 looks just great on larger resolutions (if the designer knows what they are doing.)
    And, yes, 72ppi is the max resolution you can display on a web page.

    As seen here, 640x480 is really no longer an issue:

    It states:
    The current trend is that more and more computers are using a screen size of 1024x768 pixels or more:

    Does that help? Or were you looking for more information?
    LVL 8

    Author Comment

    by:Sam Cohen
    ok. well i usually design is 1280 x1024 monitor res
    now if i start a website at 800x 600 canvas...the site looks the same on 1280x1024 as i design it in 800x600.
    and after i design it and if i change my monitor to 800x600 the websites looks a bit larger.
    so i are you tell me to change my monitore res to 800 x600 than start designing on 800x 600 canvas?
    LVL 70

    Accepted Solution

    Actually, it's a bit more complicated then that.  When designing for the web, you need to think about the VIEWPORT size and not the full resolution.  800 x 600 is not the size of the browser window.

    Check out these links for a discussion of who browses at what resolution and the last link I give has a recommendation based on viewports:
    LVL 29

    Assisted Solution

    Hi all4artz

    1280px x 1024px, 1024px x 768px or 800px x 600px isn't related to resolution, it's actually talking about pixels width x height on a screen, so when you design your page,  within the HTML you or CSS you specify the width of your web page, so for e.g. the most common place to set this is either on the most outer div, if using css, the outer table or most commonly the banner.  It doesn't matter what screen resolution you create your website in.

    Most new designs are moving towards 1024px x 768px since most people have 17" screens or larger these days, previously 15" screens 95-2000 were very common so the resolultion was 800px x 600px.  It depends on you and your clients.  As a rule of thumb here is a list of sizes you should create your pages in.

    640px x 480px = 600px x 300px
    800px x 600px = 760px x 420px
    1024px x 768px = 955px x 600px
    NOTE: don't worry to much about height, the width is the most important aspect, so why make the pages slightly smaller?  Because all browsers have scrollbars, this takes up approx 40px screen space i.e. 800px - 40px = 760px

    Hope that helps.

    LVL 8

    Author Comment

    by:Sam Cohen
    Yes it helps...So you guys are saying to design in those numbers....regardless of my native monitor res(1280x1024) . But how can i account for the images i use?
    If i make a big image that look good to me, in my res, being that it is filling the whole height (e.g. 80px x 420px ) then when i change my monitor res to 800x600 it get bigger, seems to lose pixels, and it doesn't sit on the whole page.
    LVL 70

    Expert Comment

    by:Jason C. Levine
    Once an image is set, it's set.  You may have the Zoom feature in FW screwing up how it looks, but on the web, 80x420 is 80x420
    LVL 8

    Author Comment

    by:Sam Cohen
    oh--ok you are right!!!

    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    Join & Write a Comment

    HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
    This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
    In this tutorial viewers will learn a few layer organization tricks and tips to improve their workflow in Photoshop. Open a multi-layer document in Photoshop: View all your layers by going Window > Layers:  To make sure your layers can be identified…
    In this Micro Tutorial viewers will learn the basic shortcuts and functions in InDesign.

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now