dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: Wide Screen or Not Wide Screen

  1. #1
    Join Date
    Jul 2017
    Posts
    3

    Wide Screen or Not Wide Screen

    I hired a web developer to build me a web site. I wanted it widescreen because most screens in the country are now wide, not square-ish of yester-years. Uber.com and Airbnb.com are two examples of sites that use the full width of the screen. The developer reminds me of his years of experience and says that he advises against doing so because once I hit a smaller screen my page would be all messed up. "Best practices say to not use the full width. It is a terrible idea to use the full wide screen width." Is he right, or is he lazy? Care to weigh in?

    Thanks a bunch!

  2. #2
    Join Date
    Mar 2012
    Posts
    3,827
    Hi and welcome to the site.

    Your developer is mostly right, and you are wrong in a critical respect: Only 10% to 15% of screens used to access the internet today are full HD (1920 x 1080) or larger. Most screens used to access the web are mobile devices, which have a wide range of aspect ratios including portrait mode! So all web sites today need to be responsive, to accommodate a wide range of display devices.

    It is easier to make a web page responsive if you limit the maximum width it will use to around 960px to 1360px. However, that is not, or should not be, the deciding factor in how much of the available screen width your site uses. The key factor is the way that the width is used. E.g. If you have a single column design, the content will generally be more readable if the width is constrained to 960px or so. Whilst, if you have a multi column design or a largely graphical content, the total width used can be proportionately larger.

    So the most important question you should be asking your developer is not whether the full width of an HD screen will be utilized (where available), but rather, whether the layout is responsive? And if not, WHY NOT!
    Last edited by jedaisoul; 07-12-2017 at 03:01 AM.

  3. #3
    Join Date
    Jul 2017
    Posts
    3

    Very clear response

    Thank you for you insights. This is extremely helpful. In my personal experience walking around and seeing computers in corporations and people's homes, and laptops on display in major stores, computer screens today (not mobile) are wider in aspect ratio. So my thinking was that if the website is designed to use the full width, then whatever does not fit vertically will just need to be scrolled up and down. It's a simplistic view, but I understand mobile devices really challenge this simple thinking.

    Quote Originally Posted by jedaisoul View Post
    Hi and welcome to the site.

    Your developer is mostly right, and you are wrong in a critical respect: Only 10% to 15% of screens used to access the internet today are full HD (1920 x 1080) or larger. Most screens used to access the web are mobile devices, which have a wide range of aspect ratios including portrait mode! So all web sites today need to be responsive, to accommodate a wide range of display devices.

    It is easier to make a web page responsive if you limit the maximum width it will use to around 960px to 1360px. However, that is not, or should not be, the deciding factor in how much of the available screen width your site uses. The key factor is the way that the width is used. E.g. If you have a single column design, the content will generally be more readable if the width is constrained to 960px or so. Whilst, if you have a multi column design or a largely graphical content, the total width used can be proportionately larger.

    So the most important question you should be asking your developer is not whether the full width of an HD screen will be utilized (where available), but rather, whether the layout is responsive? And if not, WHY NOT!

  4. #4
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    21,978
    The "in thing" now is to use a design that automatically adjusts the layout to different screen sizes. Content tends to be put into "containers" that can be placed side-by-side, effectively making a multi-column display when the screen real estate allows it, and then stacked below each other into fewer and fewer columns as space decreases. Many people these days use Bootstrap's combination of JavaScript and CSS to help manage this. Therefore, you don't design for one preferred screen size, but for all screen sizes.
    "Well done....Consciousness to sarcasm in five seconds!" ~ Terry Pratchett, Night Watch

    How to Ask Questions the Smart Way (not affiliated with this site, but well worth reading)

    My Blog
    cwrBlog: simple, no-database PHP blogging framework

  5. #5
    Join Date
    Jul 2017
    Posts
    3

    Very interesting

    This is very interesting. Explains why the big corporations have such awesome sites, because they can afford to do different iterations. Perhaps I can do just a few screen sizes that are most popular instead of ALL? Is it even worth it as an approach?

  6. #6
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    21,978
    Firstly, I am mainly a server-side specialist, so there are client-side people who can explain this better than I can. However, by using Bootstrap's grid system -- http://getbootstrap.com/css/#grid -- even I was able to make my little blog scale nicely on different screens/devices with very little additional code.* It just took a bit of reading and some trial-and-error to figure out which bootstrap classes to add to applicable html tags. This is not the only solution out there, but it's popular, and even I was able to make it work, so it's worth a look, I think.
    ______________
    * I'm not happy with how the banner image scales on my phone, but I can live with it for now.
    "Well done....Consciousness to sarcasm in five seconds!" ~ Terry Pratchett, Night Watch

    How to Ask Questions the Smart Way (not affiliated with this site, but well worth reading)

    My Blog
    cwrBlog: simple, no-database PHP blogging framework

  7. #7
    Join Date
    Mar 2012
    Posts
    3,827
    Fluid-based designs are not the only way to build fully resposive layouts. There is an alternative, that I call
    "stepped" or "snap responsive" design. The key to this approach is to design a few fixed width layouts, sat 600px, 920px, 1160px etc. and have the display snap from one to the next as the available screen/window width allows. A fully fluid design is then used just for the smallest screens, say, 320px to 599px wide.

    This enables you to have specific layouts at key widths, and also avoids the continuous shuffling round of text as the avaiable width is varied. It also more subtle, and stands out from the crowd.

    The display is controlled by a series of @media statements. If desired, you can also include a default fixed width design for older non-responsive browsers. E.g.:

    Code:
    /* default fixed layout for non-responsive browsers */
    html {
    height: 100%;
    width: 100%;
    }
    body {
    height: 100%;
    width: 920px;
    margin: 0 auto;
    etc.
    }
    /* stepped layouts - 640px window */
    @media screen and (min-width: 640px) {
    body {
    width: 600px;
    etc.
    }}
    /* 960px window */
    @media screen and (min-width: 960px) {
    body {
    width: 920px;
    etc.
    }}
    /* 1360px screen */
    @media screen and (min-width: 1360px) {
    body {
    width: 1320px;
    etc.
    }}
    /* full HD screen */
    @media screen and (min-width: 1920px) {
    body {
    width: 1880px;
    etc.
    }}
    /* fluid 320px to 599px  */
    @media screen and (max-width: 599px) {
    body {
    width: 100%;
    min-width: 320px;
    etc.
    }}
    Note: The width of the body is set to 40px less than the min-width in the @media statement. This is to accommodate the border of the browser window (when not in full-screen mode).
    Last edited by jedaisoul; 07-20-2017 at 11:36 AM.

Thread Information

Users Browsing this Thread

There are currently 3 users browsing this thread. (0 members and 3 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles