Surveying the Big Screen

by Mike Pick

23 Reader Comments

Back to the Article
  1. Glad to see some love for the big screen. I always wondered why so many people optimize for mobile to the nth degree, and then ignore screens over 960px. So much real estate available to display great content, and less of a concern over bandwidth means you can serve up great imagery and typography.

    Copy & paste the code below to embed this comment.
  2. I work on a web app that can run on a 1080p TV and be controlled by the TV remote, and it introduces entirely different large screen design considerations. In this case, the bigger screen needs a simpler design than even the mobile layout.

    Sometimes, simply expanding the design isn’t enough. You have design for the medium, not just the screen size.

    Copy & paste the code below to embed this comment.
  3. Reading this article makes me glad to have discovered web design when I did, as interestingly enough one of the main catalysts in discovering my love for web design was tinkering with almost every website I would regularly view using the browser add-on Stylish to expand the container, add a few media queries and tweak a few more things so that it would make much more efficient use of space.

    This was during the period when 1080p hadn’t become standardised yet so almost every website utilised the same now outdated patterns of using narrow columns, dense text and small low resolution images. You could probably find a tweet I sent out on my frustrations about this if you go far enough back, glad things have changed for the better. :-)

    Copy & paste the code below to embed this comment.
  4. I’ll read the article as soon as I have the time but for now I wanted to commend Kevin Cornell for unfailingly finding a witty metaphor for each topic of the day.

    Copy & paste the code below to embed this comment.
  5. “A layout’s density should reflect the site’s tone” — I love this. Nice piece Mike, and the demo page is great too.

    In case anyone’s interested, here’s a Branch thread that’s kinda related: Layouts with room to spare. See Mike’s comments near the bottom.

    Also, Karen McGrane fields a related question on Shop Talk Show. Her answer includes, as Mike says in this article, that mobile traffic necessitates small screen attention. But very worth listening to.

    Copy & paste the code below to embed this comment.
  6. It would help if there was a standard way of getting the device’s display resolution, physical screen size AND typical viewing distance (which could be a configuration setting on the device).

    This would allow to do calculations and adapt layout and text size for any display and context. The same responsive layout could then be used on a small screen phone or even a ridiculously large advertisement display (which might usually be viewed from quite far away) so the text size would need to be quite big even though it’s a large screen which could potentially have either a low or high resolution.

    Copy & paste the code below to embed this comment.
  7. It bothers me that more and more CSS stand out from the technology available. Media queries are getting outdated. Phone / tablet manufacturers are expanding resolutions. 2560 × 1440 on 5 inch screen? Not a problem anymore. How does it compare to 1920 × 1080 on 24” monitor or 60” TV display? You could also clone, with just one touch, Your current phone viewport to large TV screen. What should now happen with displayed web page? Present mobile content on such a large screen? We need to start thinking what to do next.

    Copy & paste the code below to embed this comment.
  8. @Kari Söderholm when you say “typical viewing distance”, I believe that you have especially tv in mind ?
    I heard that idea of querying this several time, and altough it is intuitive, I think it is wrong. We have habits with tv, but it may change in the future. We can’t guess usage that way.

    My idea is that we should not change font-size for tv, but build stuff that react well to browser/user font-size setting. This already exist, but until now we were discarding it in responsive design.

    By wisely using “rem” for interface stuff, and “em” for fonts, it is possible to build interfaces that react to both zoom (everthing changes size) and change of font-size (only the font increase, text extends container towards the bottom).

    If the web is built that way, then it only necessary to increase the browser default font size to have a correct experience on a web tv.

    rem / em is the solution.

    Copy & paste the code below to embed this comment.
  9. I agree with Karl and Zachary. All this article talks about is filling more space, but in reality more space may also imply further viewing distance. I use my TV often to browse the web but I always have to zoom in.  As far as reading on a TV is concerned, responsive should mean the font size grows again at a certain threshold. Responsive means I should not need to zoom in to read a website

    Copy & paste the code below to embed this comment.
  10. I spend a lot of time thinking and making sure websites work well on small screens. It was refreshing to be reminded of the other extreme and to have some ideas for using the extra space well presented.  Thanks for the article.

    One question that often comes to mind when I think about this is, how large to individuals actually have their browsers? More and more people have large monitors, but do they maximize their browser window. Anybody aware of statistics on the viewport (not monitor resolution) of website visitors? While the topic and tackling of large viewports is important I would be very interested in data on viewports to get a better idea of common size ranges.

    Copy & paste the code below to embed this comment.
  11. Great article, helpful examples — I almost missed the demo! It looks great. I’ve been conscious of these concerns while designing and publishing on my own website, especially the idea of ‘filling in’ the margins when it makes sense. Medium’s margin comments are one of the best examples of filling in the margins that I’ve seen. Hulu.com is a good example of tiling.

    Copy & paste the code below to embed this comment.
  12. Good article. I think at some point the developers will turn their attention back to big screens.  From my point of view ‘developing for mobile’ has gone mad.

    Copy & paste the code below to embed this comment.
  13. I’m very happy with the attention for big screens. It has always annoyed me that responsive design in practice means mobile design.

    That said, budget-wise and attention-wise, big screens are a challenge. My take on it is that if you don’t have the budget to seriously also design for big screens, at the very least make your site zoomable. Personally I use em-based breakpoints for this. It certainly isn’t perfect, but it beats all the whitespace. An example:

    www.jungledragon.com

    Zoom that in Firefox or Chrome on a big screen. If all goes well and you zoom in far enough, you can even see it switching to tablet view or mobile view. It does have the “fold” issue, but its better than nothing.

    Copy & paste the code below to embed this comment.
  14. Well, it should be time to get back our attention to big screens. After getting blinded on microscopic lighted boxes I think we all need to wash our eyes on big, great, spacious, well conceived contents. Great article, loved it!

    Copy & paste the code below to embed this comment.
  15. Truly said by Nathan Dana

    Glad to hear about big screens as they give us every thing clear to visualize, engage. We don’t have to put stress on our mind to see and read.

    While designing for the big screens it feels like the screen is your canvas and you are totally free to use your creativity to draw on the canvas as you like and make it completely awesome. It feels like everything is yours and you live with it, have fun with it.

    In smartphones we have to see the details and every single piece of chunk very precisely to get the output. It’s not that easy as we see on the big screen.

    I love to design for the big screens instead of mobile.

    It gave me the confidence for designing more and more for the big screens

    Thanks Mick Pick for really good article

    Copy & paste the code below to embed this comment.
  16. Thanks for the comments! The article really stems from the fact that I work in front of a desktop-sized monitor all day, like all the other people in our location, and I wanted to try to fond some way of working that larger palette into our responsive workflows.

    I think web design for the TV is quite a different pursuit from what is being discussed here, since the content, viewing distance, interactivity, and context are so different from the usual desktop, laptop, or mobile experience.

    Copy & paste the code below to embed this comment.
  17. Mike, the examples are great! Don’t you think most people generally use big screens either as TV Internet or at work (when they have a chance to sit at their desk and browse whatever they want)?

    Copy & paste the code below to embed this comment.
  18. As a graphical designer I was very interested in Responsive Web Design and I agree totally with you because for us it is very important to see clearly in detail our work and that the client can see it too.  I hope developers will pay more attention to large secreen devices in the future. Great point of view!

    Copy & paste the code below to embed this comment.
  19. It’s not necessary to fill the extra space for the sake of filling the space.

    Good design is to remove anything unnecessary until you can’t remove anymore, and good visual design lays in the quality of the details.

    White space is great, we love white spaces, it’s better than over crowded view point. As the screen size increases, the movement of our eyes increases horizontally, too.

    Instead of stretching/rearranging the content to fill the space, it’s better to concentrate on making the content fit appropriately to suite the human eyes with higher quality and sharper imagery. Just saying.

    Copy & paste the code below to embed this comment.
  20. I am guilty of not designing for super large screens because of main two reasons: 1. I don’t have a huge screen to test with 2. My target audience do not use large screens.

    Mobile is not a problem. Is there a tool or simulator to test for large screen sizes?

    Copy & paste the code below to embed this comment.
  21. Interesting read. I liked your two-column demo. Very nice. The issue I have with multiple columns is when you have to scroll. When your all the down at the bottom at the first column you have to scroll all the way up to the top of the second column. On paper, this is quite easily done because you have the whole paper in front of you. One solution might be to include internal links from one column’s end to the next column’s beginning.

    Copy & paste the code below to embed this comment.
  22. I have a 30” monitor at home and a 27” at work and always run 2 Firefox windows side by side, each 50% of the 2560 px width, and each with multiple tabs. This allows me to compare text on 2 websites without any clicking of window/tab manipulation.

    Websites wider than 1280 px are so rare, that most of the time you are looking at extra-wide background when surfing full screen. Having 2 browser windows side by side is as productive as having 2 monitors.

    Copy & paste the code below to embed this comment.
  23. great !

    Copy & paste the code below to embed this comment.