As media queries are added, and content is styles 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. With background images, for example, what may have looked great on your desktop monitor may look cluttered and hard to read on the smartphone.
 |
 |
| Widescreen Monitor | Smartphone Portrait Mode |
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 of the versions of your site, you can address it in more than one way. Perhaps it'll help to change the background image's position or size so the title would be easier to see. Or maybe you want to use another background image all together—you can if you want!
Since people are usually designing for the smartphone first, there may be less (more concise) content. Usually our space problems are not enough space on the phones, but when content is written from this perspective, there can appear to be way too much space on our 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 our white space—the space on the page that has no decoration or content.
If we evenly distribute the emptiness, it'll instead look well-designed, and with plenty of breathing room. To accomplish this, we can center some content, which will put an even amount of white space on both sides instead of a large amount on one side. We should also make smart use of padding and margins. These properties will also help evenly distribute the white space, and can let the user focus on the important information on the page and get to what they want sooner!
 |
 |
| Widescreen Monitor | Smartphone Portrait Mode |
In the same spirit of letting content "spread out", we can also change font sizes and weights. If there isn't much text on a large display, we can feel free to have accents of large font that sprawls across the page, potentially creating exciting layout and design. While on a smartphone, we could be conservative with our font sizes due to the limited space.
