Skip navigation
Currently Being Moderated

Basic question on website width

Jul 31, 2012 3:13 PM

I understand that designing for the web is very complex with different size monitors, phones, tablets, etc. however, I'm just trying to get an idea of where to begin when designing a website that will primarily be viewed on a desktop computer. Is a width of 1000px appropriate? What might be a good size to use?

 

Thanks.

 
Replies
  • Currently Being Moderated
    Jul 31, 2012 3:25 PM   in reply to mediafred

    To me it has always been 100%;

    body {

        width: 100%;

    }

    G/L

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 31, 2012 3:40 PM   in reply to mediafred

    I hate 100% width sites.  That's just me.  I build mine to be comfortable in a maximized browser viewport on a 1024 screen without dropping a horizontal scrollbar. That's about 980px.

     

    The problem with 100% width sites is that pages with not so much content wind up looking very sparse with way too much white space.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 31, 2012 3:50 PM   in reply to mediafred

    These days, Responsive Web Design is all the rage.  I don't recommend it on your First Project because it requires some advanced skills with CSS.  But it insures the best possible experience for all device users.

     

    A good second option is Semi-liquid (% width plus min- and max-widths in pixels).  This allows the layout to be somewhat responsive without looking horrendous on ultra wide and ultra narrow displays.

     

    body {

    width: 98%;

    min-width: 800px;

    max-width: 1620px;

    }

     

    Your can read more about Responsive Design below.

    http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsiv e-web-design/

     

    Device Agnostic Approach

    http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach -to-responsive-web-design/

     

    If you use DW CS6, look at Fluid Grid Layouts

    http://tv.adobe.com/watch/digital-design-cs6/creating-adaptive-designs -using-fluid-grid-layouts-in-dreamweaver-cs6/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 12:54 AM   in reply to mediafred

    mediafred wrote:

     

     

    To everyone else,

     

    2. Does it really come down to preference and of course who you're targeting? Will you find just as many sites that have a fixed width as do a %?

     

    Thanks.

     

    Yes, it does come down to preference. I would say at the moment the majority of sites will be of fixed width BUT I suspect that over the next few years you will see more become fluid to take into account mobile devices. As Nancy says designing one site for multiple devices is a lot to bite off and will heavily influence the design. Not so bad for a small site but one with dozens of pages could be a nightmare. I suspect we might see a shed load of anemic looking sites primarily rolled out to accomodate a variety of devices before the designs gets better as technology moves on, making it easier to design for multiple solutions. We've arrived at yet another cross-roads and big decisions need to be made.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 5:18 AM   in reply to mediafred

    1. Why do you target a 1024 screen? Is this still the most commonly used resolution?

     

    It's not the most commonly used resolution, but it is a reasonable lowest common resolution.  In other words, nowadays, everyone has video subsystems that are able to display at least 1024 x 768 screens.  And 980px gives you a resonable width for your content that will still look OK centered on a 1280 or 1600 width screen.

     

    And for sure you must consider your target demographic when making these decisions.  If you are shooting for the high-end, designer-type audience, then you might consider a greater page width if you have decided to go with a fixed-width layout.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 1, 2012 9:20 AM   in reply to mediafred

    Just because someone has a display capable of rendering 1680px wide (minus browser chrome = 1640px), doesn't necessarily mean they keep their viewport maximized.  User studies have shown that many people keep their browser viewports at less than maximium in order to see other desktop apps. 

     

    Allowing for browser chrome (2% of viewport) and varying viewport widths, you would probably be better using 980 - 1100px wide for a fixed, centered layout.  Anything greater than that may be awkward.

     

    Users of ultra wide displays can always make the page bigger by invoking Zoom-In feature in their browsers.   While Zoom-out has the opposite effect, it also makes the text smaller which poses another usability issue.

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points