Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I would like to design a one-pager site which will be responsive and will be presented well in huge resolutions, such as 2560 width. One method of doing this is design the site with a maximum fixed content size of, let's say, 1024, and put a repeating-pixel background on the sides.

But I don't want that, as in huge resolutions the content will look very small. I would like to have all elements fluidly grow, exactly as they decrease when resolution decreased to phone size.

  1. Anything I should consider?
  2. Any reference for such sites which fluidly-compatible with 2560 resolution?
  3. The main ideas is that users with large screen displays, such as 42" will see the site properly. Any difference in design for huge resolutions Vs. huge screens display?
share|improve this question
1  
What is the particular reason that it needs to be displayed on such a large screen? One of the fundamental consideration of responsive design is the content/information architecture, and another is how to adapt layout and navigation for different sizes/devices. Also think about the size and quality of images or videos that you will need to be able to display and how that might impact on the performance of the website. –  Michael Lai Oct 9 '13 at 22:05
    
Responsive is great, but there are also practical limits. Even a non-responsive site will be a challenge to design at that crazy-wide resolution. –  DA01 Oct 10 '13 at 3:13
    
Anecdotal evidence from one person: I have two 2560-width monitors at home. I never maximize a website on them, their purpose is to let me tile windows instead of switching all the time. I only maximize applications which offer a viewport on a 2d or 3d "landscape", such as photography postprocessing, drawing diagrams, CAD work, games. I would not like a text-and-images document to spread over the whole monitor. –  Rumi P. Oct 10 '13 at 8:29

1 Answer 1

For backgrounds, it's not a bad idea to stretch imagery with the browser, as you can maximize the impact of the imagery, however for text, having it scale out in a fluid manner to 2560 is not a good idea.

An example: http://thegreatdiscontent.com/

Their background image scales to the full width of the browser, which will look great on larger screens.

However, if you scroll down you can see their text remains at a fixed width. Imagine if the text stretched all the way to 2560, the number of characters per line would make the text difficult to read. The eye would have to trace a long line all the way back from the end of the line to the next line, and this makes it easy to lose the line you are currently reading.

From the Baymard Institute:

The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable.

So what’s the downsides of violating this range?

Too long – if a line of text is too long the visitor’s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text.

Source: http://baymard.com/blog/line-length-readability

If you are really set on making your site fluid for all screen sizes, you could consider scaling up your font size as the browser width gets larger so that you can keep the number of characters in a column to an acceptable number.

share|improve this answer
    
Would it perhaps be useful to have the maximum text width be sized in ems of a the main font size, rather than pixels, so as to increase if someone boosts the font size (still being bound by the screen width, though)? –  supercat Sep 23 at 23:55

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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