When media queries are added, and content is styled and arranged differently on each device, it is important to keep the content as comfortable to view as possible. As more of your content becomes responsive, it may become difficult to predict how some elements will end up looking. Background images, for example, may look great on your desktop monitor but also may appear cluttered and hard to see on a smartphone.
Widescreen Monitor
Example
Smartphone Screen
Example
Remember that media queries allow you to change just about any styling component of your web page. If you run into a problem like the one above where readability is suffering on one version of your site, you can address the issue in more than one way. Perhaps it will help to change the background image's position or size so that the title is easier to see. Or maybe you want to use another background image altogether—you can if you want!
Because people are usually designing for the smartphone first, there may be less (more concise) content. Usually, space problems consist of not enough space on phones. However, when content is written with phones in mind, there can appear to be way too much space on widescreen monitors. We end up with a small batch of content that looks unimpressive on an expansive monitor display. But really, this is an opportunity to make better use of white space—the space on the page that has no decoration or content.
If you evenly distribute the emptiness, the page will look well-designed, instead of empty, and have plenty of breathing room. To accomplish this, you can center some content, which puts an even amount of white space on both sides instead of a large amount on one side. You should also make smart use of padding and margins. These properties help evenly distribute the white space and let the user find what they want sooner and focus on the important information!
Note: Be very careful when you center align text content. From a usability standpoint, text that has multiple lines should be left aligned for better readability. Whatever alignment you choose, be consistent. Mixing text content that is aligned differently throughout your page can look sloppy and reduce functionality.
In the spirit of letting content "spread out," you can also change font sizes and weights. If there isn't much text on a large display, feel free to have accents of large font sprawl across the page, potentially creating exciting layout and design. On a smartphone, in contrast, you should be conservative with font sizes due to the limited space.
