Once upon a time, everybody accessed the internet using desktop computers, all of which had screens that were more or less the same size. But that hasn’t been the case for years; nowadays, people use all manner of devices to access websites, from desktop screens, to smartphones, to tablets, and now even wristwatches. As the number and variety of different screen sizes increases, website owners will want to make sure their site is accessible and usable for everyone, no matter what device they are using.
The best way to ensure a site’s accessibility for all users is to implement responsive design, a technology that automatically resizes and reformats a website to fit the screen it is being viewed on. But while this is a great solution, it presents its own challenges; namely, formatting a site’s content to make sure it is presented properly at all screen sizes. But what is the best strategy for formatting content?
Embrace Flexibility
When creating content for a responsive website, there are a few important points to keep in mind to ensure that the content is as flexible as the layout. In order for content to respond and adapt properly, it must be created and presented in a deliberate way. One of the most important aspects of “mobile friendly” content is to embrace the fact that it is inherently fluid rather than trying to force it to display a specific way regardless of how it is being viewed.
Focus on Quality
Logically, it makes sense that content on a smartphone shouldn’t appear exactly the same as it does on a desktop, but it can be hard to craft content and not want to make it “pixel perfect” in all situations. The simple reality of responsive websites is that the most important aspect of the content is its quality; that is, it needs to be informative, relevant, and meet the audience’s needs. Quality content will transcend any limitations imposed by layout or device, while flashy and hollow content will be exposed for what it is. Focusing on the visual aspect of textual content, especially by editing the text to “make it fit,” will only cause heartache and could even negatively impact SEO.
That said, it is possible to have quality content that also looks good on all devices by keeping a few rules in mind:
- Avoid “making things look perfect” and focus on meeting your audience’s needs with the substance of the text. Don’t change the length of content or manually insert line breaks to fit in a particular space.
- Avoid using tables unless you’re displaying truly tabular data, and never use tables simply to lay out content. If you do have tabular data, implement an appropriate responsive solution, such as the one discussed by Chris Coyier here.
- Inline styles should be avoided whenever possible, but especially on responsive websites. Proper CSS using media queries should be used to style and lay out content per breakpoint.
In some sense, creating fluid content is simpler than creating content to fit a specific layout or design. Focusing on creating quality content and following a few simple rules is all that is needed to create fluid content, which will become even more important as new devices and browser standards evolve. As standards such as CSS columns come into widespread use on devices from wearables to televisions, content will need to be flexible in order to display properly, and that means it must be freed from the confines of a single layout today.
Do you have any questions about how to implement responsive design on your website? Do you want to know more about how to ensure that your site is accessible on every screen size? Please contact us to speak to a Solutions Engineer, or feel free to leave any questions you might have in the comments below.
