2

I have a simple question about the best resolution to consider when developing a website.

Usually I consider the max-width: 1920x1080px, but now TVs are smart and some of them allow you to browse the internet and view websites. According to this wikipedia article there are resolutions that are bigger than 1920x1080px.

What is the best way to tackle this? Would it work to set up:

html,body {
  width:100%;
  max-width:1920px;
}

and add a solid color background so that if the resolution is bigger the website at least will look nice?

I found a couple of similar questions, but they are old and there are many more factors now for the web design layout, so I'd like to receive some new advice regarding this issue.

  • 1
    If you are replacing an old site, you can look at Google Analytics to see how big the screens are that your users actually use. Then add some margin for the next years and it should be fine. – giraff Jun 8 '15 at 19:12
  • CSS pixels are not device pixels, incl. Media Queries which you should use instead of one general max-width. “4K” or “UHDTV” screens are becoming more common every day. A maximum width is helpful for paragraphs and the like to avoid excessive lines of text. – Crissov Jun 9 '15 at 10:03
  • 1
    As a note, Stack Exchange is designed for (a little more than) 1024 px, and the actual content part does not expand beyond that. This seems to work quite well, although some people have been complaining about having too much widespace on each side of the page. – JonasCz - Reinstate Monica Jun 9 '15 at 11:44
3

I have never designed with something like a television in mind, so you bring up a great question. For instance, is there any kind of standardization among TV sets for displaying pixels? Even if it expands beyond 1920x1080 in pixels, does it display websites at that resolution or do handle things at 2x (or even 3x, 4x, etc.)?

I would expect that even with the huge resolution, smart TVs will likely display things like the retina displays on iPads -- using the higher resolution to simply create sharper text and more detailed images.

I would encourage you to come up with some questions of your own to determine what the likely usability will be for your website, and then test to see what the case might actually be.

1

A good solution would be to scale your website depending on the resolution.

I suggest creating a div for your site then adjust the width using percentage depending on the resolution.

Consider using ranges. e.g. if viewport width < 1500, site width = 70%

1440x900

| body |----------|      |
|      |----------|      |
|      |---site---|      |
|      |----------|      |
|      |----------|      |

1920x1080

| body     |----------|          |
|          |----------|          |
|          |---site---|          |
|          |----------|          |
|          |----------|          |

1024x768

|body|----------|    |
|    |----------|    |
|    |---site---|    |
|    |----------|    |
|    |----------|    |
  • I think it is fine to give a fixed width inner container as you do, but yours seems to be quite small (Bootstrap's default is 1200px). But it also depends on the content of course. – giraff Jun 8 '15 at 19:11
  • I just edited my answer because I didn't want OP or anybody to think I suggest hardcoded fixed with. I suggest using %ages and ranges. – vinni_f Jun 8 '15 at 20:13
0

Your question is relevant and what I feel is you should never consider a particular fixed width / resolution while designing because you will never know when and where your site will be accessed.

So what I think is it is better to give 100% width so that it will display at least neatly (not very much perfectly) but it will be acceptable. Also if you want to show a background color for that matter it is also better option.

0

You should think of each device you expect your website to be viewed on individually so you can make sure your site will be viewed properly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.