Best approach for displaying content across a full screen UI design?

Question

While I've become pretty accustomed to designing within responsive grids I wanted to take a stab at creating a full screen interface. One of the more challenging aspects in doing so is dealing with minimal lines of text, input fields, or paragraphs that exceed no more than maybe 400 characters. If the content isn't centered you're most likely dealing with insurmountable white space to the right when dealing with high resolution displays. Are there any examples or strategies out there that help explain dealing with this issue?

Answer 1

I'm hesitant to provide an answer with the limited amount of information, but hopefully this will lead you to evaluate your question and current design decision making.

When it's been determined that a responsive site is the appropriate solution for a particular site (taking into account site purpose, user habits, time, tech, budget, etc.) a "mobile first approach" is the current doctrine. Following this, simply finding something to fill up space on larger screens just to fill them up isn't really the right question to ask. Instead, ask what a user needs at this stage. If he is viewing his profile, what other information is pertinent? If none, then don't be scared of white space - allowing your layout to breathe isn't a bad thing.

If you're asking what can be done at this point -- this is all the info you have to display and align-center to "fill" space looks awkward -- try aligning the labels right and left aligning the information (see Facebook screenshot). Also, borrowing from the Facebook layout, can users edit this information from profile view? If so, maybe you haven't thought through all of your functionality.

Define what the user needs and lay out the flows before trying to fit these into a predefined design.

Hopefully this will lead you to a more refined question and I'll update my answer if you provide more info.

Answer 2

I think that the problems you will encounter by stretching text right out to fill the space are greater than the problems of having lots of white space in the first place. You will want your users to be able to read the content more than you will want them to feel satisfied by perfectly defined white space.

It is pretty well established (try 100s of years of printing experience) that text is most readable when the lines are kept reasonably narrow as the readers eye can easily get lost while reading long lines, particularly when re-aligning with the start of the next line. This is why books (and kindles) are reasonably small and display text in a portrait fashion. Its also why newspapers opt for columns of text. The text should also have a decent space between the lines allowing for them to be followed more easily.

Some more detail, amongst other things, is here:

http://www.smashingmagazine.com/2009/03/18/10-principles-for-readable-web-typography/

What you could do is magnify things somewhat, make your text bigger and give a good margin. Remember that a screen may well be further from the eyes than a hand held device and keep in mind the basic principles of making text readable. With larger text on the menu and bigger, more centred text, the whitespace will seem more balanced. Some great interfaces for the web are actually very similar things delivered to all screen sizes, with the desktop version really chunky - A List Apart is a pretty good example of what I mean:

http://alistapart.com/

The other thing you can do progressively offer more information within the initial viewport (as Glilley covers in his answer), for this I will provide a great example, a site called CSS Tricks loaded into an online tool called 'Responsivator' which mimics various screen sizes and loads the site accordingly. In fact, Responsivator have a set of examples, all production sites who all make an excellent job of this (find the random button), so not only are they a good tool for constructing these things, but also for getting inspiration:

http://johnpolacek.github.io/Responsivator/?site=css-tricks.com%2F