login about faq

To prove you're not a spammer, email newuser.lgqa@gmail.com with the subject "Account Request" to request an account.


This is an adaptation to the question of Why doesn't YouTube take advantage of the whole screen.

I've noticed this a lot now-a-days that most sites don't take advantage of the whole screen. Take the example of the screenshot below of Pandora. You see that most of my 1600 x 900 screen isn't being used except for the middle. I mean sometimes on Pandora you see ads, but I haven't seen any ads at all for the past week or so. (I had Pandora One but I canceled that). So my question is why isn't it optimized for a larger screen? I know my 1280 x 800 is fine with every layout but for people with larger screens are at a disadvantage.

alt text

asked Dec 14 '12 at 22:32

DJ%20Scooby%20Doo's gravatar image

DJ Scooby Doo
9.7k245284383


Simply because only a fraction of users have access displays that are that high of a resolution.

1336x768 is currently the most popular screen resolution. As you can see 1920x1080 doesn't even come in until #4 and is tied with #5 1440x900.

As more people get access to larger displays we will definitely see websites take advantage of the space. Keep in mind though that some websites just don't even need to display extra content. Wider is not always better cough Toshiba cough.

Do note though that this data is from January of 2012. So it'll be interesting to see how things have changed this January, if they have changed at all. alt text

answered Dec 15 '12 at 00:42

Zbob750's gravatar image

Zbob750
2.7k61440

edited Dec 15 '12 at 00:43

I think it could be so people who are still using the small monitors don't have to scroll so much. I guess they could make a option to stretch it. But my only guess is universal support.

answered Dec 14 '12 at 23:21

Randy's gravatar image

Randy
891758595

Basically, Websites are trying to be generally as visually accessible as possible to all users. And most of them either don't have the time, or just the mind-setting to make a different layout or method of display to take advantage of every possible screen resolution, just like the guys above me have already said.

Although some of them do use certain scripts and methods of display that do work in a way that utilizes most screen resolutions without having to change much. Best example that I have right now would be Engadget. Whatever computer I'm running it on, It just adjusts itself to the screen resolution perfectly.......

answered Dec 15 '12 at 11:00

KamalMoanis's gravatar image

KamalMoanis
126121519

1

Also the new MSN layout for Windows 8. It takes up the complete space.

(Dec 15 '12 at 12:18) DJ Scooby Doo DJ%20Scooby%20Doo's gravatar image

I know for some people like myself are still using smaller screens like the 15-19 screens. If they are either the old CRT types or the LCD/LED screen types. Not everyone will have the options like yourself to have a larger screen size. And I would agree with SuperMOaNiS that they don't always try for every resolution possible to see for how well it will display.

answered Dec 15 '12 at 14:19

Compucore's gravatar image

Compucore
2.5k121925

it is usually a mixture of templates and in some cases, lazy design and design constraints.

For many sites, you can use a extension such as stylish, then view the source code for the site, then find the size info in the CSS, then write a new CSS width or other size info, with the !important flag at the end and the site will adapt to almost any screen size.

For example here is a stylish script I wrote for the G4TV forums because the site was originally design for sub 1024x768 displays (960px wide)

https://www.youtube.com/watch?v=B4y93j98t5c&feature=player_detailpage#t=85s

it took the site from 960px to automatically adapting to any screen size from 800x600 up to (the max I tested which was 5120x1600 ( but it could easily go further, and due to the features of CSS, if there are sizes where the layout completely breaks down , you can define a minimum width, and a max width and a number of other aspects.

edit: forgot to add, the best part of having CSS that auto sizes and formats the page is if you want multiple windows on the same screen and you reduce the size of your browser window, it is great when the site just automatically adjusts it's self to fit the window so you don't need to do any horizontal scrolling.

Edit: Here is lockergnome.net with just 2 lines of code changed my screen is 1920x1080 (might not work on other screen sizes as I did not test yet, I just quickly skimmed through the source and wrote 2 lines of CSS

alt text

answered Dec 15 '12 at 16:56

Razor512's gravatar image

Razor512
16.5k3683259

edited Dec 15 '12 at 17:42

These are sadly not fixable errors.

As we can code our js files to load more content depending on the screen estate, we can not make every display have filled content at a size that looks correct. We are living in a always changing universe and nothing is the same for more than a couple of weeks or months, a new size comes out and soon a few people will view your site as a terrible design. It isn't practical to be updating your code to fit the new sizes that get released.

Granted there ARE ways to illuminate the errors, but everything has a limit.

It is sometimes hard to know who to aim your designs at - should you aim your code at the geeks like Chris Pirillo? Massive tv sized monitors all lined up? or netbook users? All I can advice is to take advantage of our modern day browsers, ctrl+ or ctrl- etc etc

It is simply not possible to push in extra content to fill the large displays. Designers nowadays have to keep in mind that there is so much different sizes available, they have to enter in a fair bit of content and center to a direction. lots of techniques for the designs, such as patterns, just like thiss site has :

http://labs.austinfrizzell.com/VisualMedia/

A site created as a competition entry to a recruitment challenge.

Voom out alot and see how it hides the issue just a little! However sites like that is the only ways to hide the problem. Here is a snapshot of an example, how this site hides the problem.

http://gyazo.com/d2b701b26190cef496ac1f8a6171499f.png?1355611757

Voom out of that image alot and see how it hides the issue. This is done with best pratice code, alot of sites nowadays have been coded using presets, sometimes create issues like this.

answered Dec 16 '12 at 07:04

benwatkinsart's gravatar image

benwatkinsart
341152425

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or __italic__
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported


Tags:

×906
×316
×176
×161
×144
×54
×46
×41
×25
×16
×12
×7

Asked: Dec 14 '12 at 22:32

Seen: 827 times

Last updated: Dec 16 '12 at 07:04