What is an optimal page width?

Discussion in 'General Muse' started by Joe Segal, Apr 26, 2016.

Tags:
  1. Joe Segal

    Joe Segal Member

    22
    0
    Is there an optimal starting default page width?
    Thanks!
     
  2. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    Joe, good question. I'm not sure if I would be so bold as to say there is one optimal width, I personally like to use 1200.
    This seems to be the size of a lot of templates I see, and is what a couple of our new responsive sites were sized at.
    Although, it is a bit different today with responsive thrown into the mix. I see 1200, and 960 being used a lot (just remember to reverse the chevrons next to the scrubber bar, to point to the right. This tells muse to allow stretching to a larger sized monitor where required.
    Hopefully, some users here have a preference and the reason why they can share.
    Dj
     
  3. calipimousse

    calipimousse Well-Known Member

    55
    10
    Hi Joe,

    The screen size is more than a headache and with all the different devices out there it is hard to have a default size. I have been doing research for the pass couple of weeks and have gotten to a point where i have a table of screen sizes and depending on who is my target i have adjusted my starting design size. However that been said I like to start my pages at 1680px by 1280px.

    Why this format? Well most desktop monitors are full HD which means that they are 1920px (there is the 4K also but still not many people have those yet!) this is why i start my design at 1680px. after that laptop and tablet are different.

    The list of screen sizes that I have found that cover most desktop, laptop and phones:

    Desktop:
    2560px (high end and not everyone has those)
    1920px (Full HD TV, Desktop monitors HD)
    1680px
    1440px

    Laptop:
    1366px
    1280px
    1152px

    Tablet and phone:
    1024px
    768px,
    640px,
    480px,
    414px (special to iphone 6+) (updated following post mistake)
    375px (iphone 6)
    320px (iphone 4,5,6,SE)

    I hope that this helps and that you will find the info useful.

    cali
     
    Last edited: May 15, 2016
    Joe Segal likes this.
  4. Joe Segal

    Joe Segal Member

    22
    0
    Thank you!

    Can you post a screenshot of the "chevrons" I should reverse. Not sure what the scrubber bar is. Thanks!
     
  5. Joe Segal

    Joe Segal Member

    22
    0
    Thank you Cali!
     
  6. Joe Segal

    Joe Segal Member

    22
    0
    Ok so I have a current site design thats set as Fixed Width at 960px.
    Should I set it to Fluid Width and say 1200 or 1680?
     
  7. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    Joe, one of our very helpful users (Jeremei) left a message for you here. Unfortunately due to some of our proprietary info in his response I had to delete the post.
    His suggestion was a good one, asking you to watch our Video training on responsive design. These are Members only video training, so if you are a Member of Muse themes you have access to these videos in the Video section of our site.
    They are a very good starting point with Responsive Muse. And of course, all our video training is available on how to use templates and widgets. We also have an extensive Knowledge Based Article area for more info also. See my Signature.
    Thanks
    Dj
     
    Joe Segal likes this.
  8. asifnm

    asifnm Well-Known Member

    117
    26
    Personally I feel the old 960px is way too small for most laptops and desktops these days, this was set when most monitors had somthing like 1024px widths, and the 1200 which is always mentioned came about when it the bootstrap 1200 grid became really popular, but muse does not use a grid system, it is not that type of responsive website creator. I would suggest breakpoints at:

    1600px - covers all hd screens, a lot of laptops are moving to a 1920px resolution and 1600px width looks very good on those
    1280px - for non hd laptops (vast majority of consumer 15" laptops and 17/19" desktop monitors
    960px - this is great for landscape on tablets
    768px - perfect for portrait on tablets
    480px - covers the newer phones such as iphone 5 and 6 and samsung galaxy 6+
    320px - covers slightly older phones such as most androids and iphone 4+

    With these you will cover 95% of screen sizes, there are extremes at both ends (4k/5k monitors, small android phones at 260px size) but they make up less than 5% of all screen sizes; you cannot cover all bases. Also be careful with setting chevrons to point out if your design does not require it (I only use the chevrons pointing out when creating a card type layout), your nice 10 word text block could stretch to 50 words on a large hd monitor and will look very bad.
     
    docdavidbanner likes this.
  9. Chipp Walters

    Chipp Walters Well-Known Member

    80
    11
    Note: Should say iPhone 6+ is 414px *not* 441px
     
    calipimousse likes this.

Share This Page