WebPage width problem

Discussion in 'HTML & Website Design' started by VEXEN, Jun 6, 2013.

  1. #1
    Hi There.

    What width should have a good website?

    I read a lot and most are listed sizes: 1024px, 960px, 1280px, 800px ....

    But when I look through other layouts. I can see other sizes, for example: http://dribbble.com/shots/627936-The-new-3magine/attachments/52552 - 1 200px × 1 385px
    http://dribbble.com/shots/854072-Work-Yeah-I-do-that-sometimes/attachments/90523 2 880px × 1 800px

    How to design a layout to look good everywhere?

    Please help me :)

    Thank you in advance for your answers.
     
    Solved! View solution.
    VEXEN, Jun 6, 2013 IP
  2. abbe77

    abbe77 Member

    Messages:
    54
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #2
    Have normal size of 960px but make it responsive by css style to adjust for any device (mobiles), resolution or browser.
     
    abbe77, Jun 6, 2013 IP
  3. #3
    Hi,

    I will suggest that you fix on a width of 800px for PCs and laptops.

    Also, as said in the previous post you can use conditional CSS to change the page size for each devices. It will give your user a better experience.

    Thanks.
     
    Arun@m6, Jun 6, 2013 IP
  4. VEXEN

    VEXEN Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Why when I browse the page on dribbble, behance etc. layouts are such strange dimensions?
     
    VEXEN, Jun 6, 2013 IP
  5. angela26

    angela26 Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    11
    #5
    Nowadays people make different css-sheets for mobile phones or tablets, but you could consider to take a look on HTML5. Design your website with the structure used in HTML5 and it should be working on all devices. Use <header> <sections> <footer> tags, you could also consider to work with percentages, but this is rather difficult because your other options have to be very dynamic to create a nice result.

    Normally people just take a width of 900px and they call it a wrapper and they center it with a "margin:0 auto" so it's always in the middle, if you have another resolution, you wrapper will look bigger but it will be always in the middle.
     
    angela26, Jun 6, 2013 IP
  6. Daniel Carso

    Daniel Carso Member

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    31
    #6
    Go standard with 1024x on width, most users no longer use a lower resolution. Not even those with little laptops, they all have a minimum of 1024x on their screens. That meets minimum requirements as far as your resolution goes. Now talking about tablets and mobiles just make separate CSS stylesheets for those. You can research online for the most common resolutions on mobile and tablets. Just a bit of research online will point you in the right direction, is all well documented.
     
    Daniel Carso, Jun 6, 2013 IP
  7. VEXEN

    VEXEN Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #7
    Thank you for your response.
    The answer to my problem is Responsive Web Design.
     
    VEXEN, Jun 7, 2013 IP
  8. Daniel Carso

    Daniel Carso Member

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    31
    #8
    Glad you puzzled that out :)
     
    Daniel Carso, Jun 7, 2013 IP
  9. jamjar919

    jamjar919 Well-Known Member

    Messages:
    332
    Likes Received:
    7
    Best Answers:
    5
    Trophy Points:
    180
    #9
    I would use a fluid design scheme using %. Using fixed width isn't feasible any more - You can't ignore people with lower resolution screens as they are still widely used (Think netbooks and small laptops).
     
    jamjar919, Jun 7, 2013 IP
  10. crazyblogger

    crazyblogger Active Member

    Messages:
    430
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    63
    #10
    You should look into responsive design and media query. You can also use Bootstrap for responsive design but you can always customize your own CSS to be responsive. If you are starting new project, than I suggest that you make your site responsive instead of fix width. If you do opt in for fix width 960px is the ideal width. This might help you http://960.gs/ and http://twitter.github.io/bootstrap/
     
    crazyblogger, Jun 7, 2013 IP