Responsive design for big resolutions

Question

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?

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.

Answer 2

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.

Answer 3

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.