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?
  • 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

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.

  • 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 '14 at 23:55

This is actually pretty simple to achieve, you just need to ensure you don't accidentally constrain your design by sizing elements in pixels or other absolute units.

  1. Set your root font size with a relative unit, preferably % or em.
  2. Set your content container width in em (making it content aware)
  3. Declare your media-queries, if you use any, in em.
  4. Size your design elements in a relative unit, like em or %.
  5. Tweak your root font-size using media-queries.

As every element of your design will be sized relative to the root element font-size, increasing that not only increases the font size for larger screens but also scales your design (including it's maximum width) accordingly.

I use these techniques as the basis for nearly everything I build, and you can see it in my (very basic) CSS framework here: https://nternetinspired.github.io/embrace/ Just try tweaking the value of font-size on the html element with browser tools and you'll see the design scale.

For a more extreme example check out my 10K Apart entry: https://nternetinspired.github.io/10K-Circus/ Screen size is irrelevant, the content simply scales proportionately.


You said:

"One method of doing this is design the site with a maximum fixed content size of, let's say, 1024"

  • In this case, you will have in the page a main container, with the content, with a fixed width and you must set a max-width.

    When the max-width is larger than the screen size, the content simply takes up the full width of the screen.

    When the max-width is smaller than the screen size, you have a centered column of content and background / whitespace on the outside. If you have background-color or background-image is less important.

    The advantage of this approach is this empty space can help the user focus on the content.

    The problem could be with too much space, so you need to choose an ideal width of the main column. From my experience, most of the site I saw had the main column with a width between 900px and 1600px. For example, Bootstrap has the default width set to 1170px when the viewport is 1200px or bigger.

  • One other approach, in my opinion, is to set the main column to 70% of the width of the viewport. I used this option as developer and I recommend it like an option. You can change the percent for different breakpoints. Please notice 2560*70% is 1792px, that can be enough wide.

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.