There’s an old saying when it comes to creating content for a responsive website: content is like water. In other words, it’s important to present it in a way that is flexible enough to “fill up” and appropriately fit whatever “container” the user chooses, from a smartphone to a laptop.
Back in the day, developers would sometimes build two entirely different websites, one for desktop viewing and another for mobile. Content would be repeated on both sites, but creating and managing that content was often a chore.
Now that we are able to create websites that simply conform to the user’s device, we only need to add content once. However, that convenience comes at a cost. Designers, writers and photographers all need to make compromises in the interest of responsive content, and sometimes it can be hard.
Here’s an example: Anyone who grew up working in the world of print media can tell you about the idea of “orphans.” I’m not talking about musical theater here, I’m talking about a single word hanging out by itself at the end of a paragraph. It creates weird spacing issues and it is considered one of the cardinal sins of typesetting.
Unfortunately, orphans are sometimes a necessary evil in the world of responsive web design. That’s because an orphan on your screen may very well not exist on your friend’s. The text flows to fill the space (remember the water analogy from the start of this blog?). If you try to force a bunch of line returns into copy on your device in an attempt fix orphans, you almost always create different orphans (and other problems) on other devices.
Think of it this way: pour water into a glass and mark the top of the water with a marker. Then choose another glass that is a different size or shape. Now pour the water from glass one into glass two and mark the top of the water again. The two marks will be at different heights, and that is how you should look at responsive content. The exact same content looks different depending on the container / device used to hold it.
So what can you do to make your content look as appealing as possible. I have two basic guidelines for you. First, target the most popular sizes / devices and test your content on them. If content looks appropriate on the screens that the lion’s share of your target audience uses, then you should accept that you did your best and call it good. Which brings me to my second guideline: don’t get too focused on creating content that is a perfect fit for every device. Creating modern web content takes a little bit of a laissez-faire attitude. Do your best, then let it go and do its job.
The internet will change the rules next week anyway.
Want to learn more about creating responsive content that works? Our team here at Code Roadies / Anchor Marketing can help. Give us a call.