What resolution to make my website for?

Discussion in 'other software & services' started by berryracer, Apr 8, 2012.

Thread Status:
Not open for further replies.
  1. berryracer

    berryracer Suspended Member

    Joined:
    Jan 24, 2008
    Posts:
    1,640
    Location:
    Dubai, UAE
    I'm having an urgent question on behalf of my friend Dx3me ;

    In 2008 I created my website (budopower.com)... and at the time a resolution of 1024x768 seemed to be the best choice, on behalf of several forums.
    So back than I made my website around that resolution, staying on the safe side by keeping it 1000 pixels in width.
    I used 1024x768 as well on my personal laptop.
    In 2010 I switched to 1600x900 (for personal use), but didn't touch my website resolution and left it at the previous mentioned 1000 pixels in width.
    The site looks pretty descent, viewing at 1600x900.

    - Now (4 years later) I recently switched to 1920x1080 on my personal laptop... and now I start to notice I have quite a bit of black (empty) space on both left-/right sides.
    The site just looks a bit narrow when viewing at higher resolutions.
    Also, the letter font seems to be a bit harder to read, or is that just me?
    So I'm starting to think about re-doing my whole website, although I;m not quite sure what resolution would be the best choice to do that in?

    * I don't even know IF it's a wise thing to do, re-doing the site in an other resolution?
    I mean, what resolution is the most common these days?
    (I want to be safe, not being forced to redo it AGAIN in 2015)
    Of course I could just go for a bigger letter font and leave the width as it is - at 1000 pixels -, but still it does look a bit narrow for people (like me) who use somewhat higher resolutions...


    --> So what do you recommend me?
    (bigger letter font, change my resolution... if so, what size)

    Thanks
     
    Last edited: Apr 9, 2012
  2. treehouse786

    treehouse786 Registered Member

    Joined:
    Jun 6, 2010
    Posts:
    1,388
    Location:
    Lancashire
    the best website designs are responsive (like wilders and antimalware toolkit in my sig), that means that the website adjusts the page depending on the resolution of the viewer's screen. if that is not an option then i would leave the websites resolution as it is.

    as you can see on this page. increasing your resolution would mean 14% of the viewers will have to use horizontal scrolling to see your website not to mention the smart phone browsers. your call, but my recommendation is to use a responsive website design or not increase the resolution.
     
  3. TonyW

    TonyW Registered Member

    Joined:
    Oct 12, 2005
    Posts:
    2,633
    Location:
    UK
    I'm not sure Wilders is that responsive. For example, using a low resolution [600x800] the subscribed panels in User CP scrolls to the right. In order to have it more flush and in line with the rest of the page I find the easiest way is to use the browser zoom out control. It then looks like it would do under a higher resolution.

    By the way, how do you make a web page automatically adjust to a user's resolution?
     
  4. HKEY1952

    HKEY1952 Registered Member

    Joined:
    Jul 22, 2009
    Posts:
    648
    Location:
    HKEY/SECURITY/ (value not set)
    Build the Website and optimize it for 1024x768 using an Limited Liquid Design.

    I navigated your Website using 1024x768 screen resolution. You have plenty of unused real estate left to expand the
    column on the left to equeal the total width of both existing columns and leave the right column width as is.
    Left align all tables on all Webpages, this will allow an small amount of free space on the right off all Webpages.
    Now that you have more real estate in the left column, use an larger Font Size to allow for easier reading at the
    higher resolutions or use EM-defined columns. With EM-defined columns, the Font Size measurement relates the users
    Web Browser Font Size.

    By using the Limited Liquid Design and Left Aligning all tables, regardless of the screen resolution, the Webpages
    left margin will always be almost butted against the Web Browsers left edge and expanding to the right accordingly
    to accommodate the screen resolution. Being that it is an Limited Liquid Design, you will want to limit the minimum
    and maximum size the layout will contract and expand to. You want the layout to contract to accommodate 800x600
    screen resolutions, but not contract no less than 640 pixels, and you will want the layout to expand to accommodate
    screen resolutions greater than 1024x768, but not expand greater than 1600 pixels.

    Being that this is an Limited Liquid Design, you must also take into consideration the Line Length of the text.
    As the layout expands and contracts to accommodate screen resolution, you do not want the sentences to be compressed
    down into narrow columns, nor do you want the sentences to expand into long sentences spanning the full length of
    the screen monitor. Here again, EM-defined columns can be useful.

    Below are some linkes to helpful information, be sure to click on all of the links in all of the articles to reap
    all the information available.

    You have an nice and interesting Website berryracer, and good luck to you and your Website.


    Liquid layouts the easy way:
    http://www.maxdesign.com.au/articles/liquid/

    Screen Resolution and Limited Liquid Design:
    http://www.boogiejack.com/html-help/html-help-screen-resolution.html

    Ideal line length for content:
    http://www.maxdesign.com.au/articles/em/


    HKEY1952
     
  5. berryracer

    berryracer Suspended Member

    Joined:
    Jan 24, 2008
    Posts:
    1,640
    Location:
    Dubai, UAE
    Thanks a lot for the suggestions guys!

    Y'all rock!
     
  6. Mrkvonic

    Mrkvonic Linux Systems Expert

    Joined:
    May 9, 2005
    Posts:
    8,694
    If anything, the striped left and right margins make your site feel congested.
    Overall, as long the site is readable, readers will ignore the sides.

    Your font is relatively low contrasted. You can increase the font size without changing the container.

    Cheers,
    Mrk
     
  7. NGRhodes

    NGRhodes Registered Member

    Joined:
    Jun 23, 2003
    Posts:
    2,331
    Location:
    West Yorkshire, UK
    Stats counter has useful tool for finding out info about resolutions:

    http://gs.statcounter.com/#resolution-ww-monthly-201103-201203

    You can narrow down by region.

    I've been a web developer for the past 10 years and in my experience you are best designing your site to be an optimum at the most popular resolution, but still be usable at other common resolutions, no matter if you go for fixed width or a design that expands to fill the browser width, commonly know as fluid or elastic.

    http://coding.smashingmagazine.com/...s-elastic-layout-whats-the-right-one-for-you/

    Cheers, Nick
     
  8. HKEY1952

    HKEY1952 Registered Member

    Joined:
    Jul 22, 2009
    Posts:
    648
    Location:
    HKEY/SECURITY/ (value not set)
    To give you an basic idea about what I was trying to express in Post #4 of this Thread, follow the link below.
    That is what your Website should resemble at 1024x768 resolution. Just "Imagine" the content in the containers as
    your content. Notice the text Font Size, and the Guttrers on the left and right borders of the layout.

    Now, at an higher resolution, the left Gutter would remain at the same width, while the width of the right Gutter
    would expand to the right and be restricted to the Limited Liquid Designs maxium width of 1600 pixels. Resolutions
    greater than 1024x768 would simply see more free space on the right side of the Web Pages. The horizontal gray/black
    striped image used as the Web Pages background will fill the free space on the left, right, top, and bottom sides of
    the container, and the layout will not appear narrow or congested.


    Example:
    http://forums.xbox.com/xbox_forums/.../06/21/nats_2d00_and_2d00_xbox_2d00_live.aspx


    HKEY1952
     
  9. Dx3me

    Dx3me Registered Member

    Joined:
    Apr 8, 2012
    Posts:
    2
    Location:
    The Netherlands
    Hi guys,

    Well, first of all I would like to thank you all for your feedback... as "berryracer" posted this topic on behalf of mine.
    (wasn't a member of this forum at the time)

    @HKEY1952;
    I will definitely look into this, sounds good I guess.
    Slightly "problem" I'm having... I made the website through an online sitebuilder, that limits my option to make it in a responsive resolution.
    (being stuck to a fixed resolution)

    - 1280 looks to be the resolution I would be aiming for (coming from the current 1000), but before I make the official switch I have to be absolutely sure that it's a safe setting that most people can watch without having to scroll sideways in their browser.
    What do you think?
     
    Last edited: Apr 9, 2012
  10. HKEY1952

    HKEY1952 Registered Member

    Joined:
    Jul 22, 2009
    Posts:
    648
    Location:
    HKEY/SECURITY/ (value not set)
    Welcome to Wilders Security Forums Dx3me

    As an final note, the Example Link in Post #8 of this Thread is an Fixed Width Design, and that is OK.

    The most popular screen resolution is 1024x768. By design rule of thumb, the Web Site should be designed and
    optimized for the most popular screen resolution, allowing compatibility for higher and lower resolutions.
    The Fixed With Design in the Example Link will do just that. You will not have to worry about maximum width.

    I believe the Example Link in Post #8 makes an good Template to follow, text size and all.


    Good Luck to You and your Web Site Dx3me


    World maps of popular browser statistics by country.
    Updated regularly (Current as of March 28, 2012) by BrowserRank.com:

    http://www.browserrank.com/

    Usage Share Statistics for Internet Technologies.
    Screen Resolutions (Current as of March 2012) by Net Applications:

    http://marketshare.hitslink.com/report.aspx?qprid=17

    What is screen resolution? by Tinyverse Creative.
    Blog Posted on February 29, 2012 by admin:

    http://tinyverse.co.uk/blog/2012/02/29/what-is-screen-resolution/


    EDIT: completeness


    HKEY1952
     
    Last edited: Apr 9, 2012
Loading...
Thread Status:
Not open for further replies.