Good Habits for Formatting Responsive Content
Finally making the leap to responsive design can be a turning point for your business. It allows your visitors to access it from any device, on any screen size. Keep in mind, however, a responsive website requires administrators to take extra care when updating or entering content. In order for a responsive website to be truly effective, be sure you are taking into account how your content will appear on smaller screen sizes.
Keep your website looking perfect on all screens by always following these good practices as you add content to your website.
URLs and Text Linking
Referencing the exact page URL of a webpage within your content can cause issues when it comes to the way it displays on smaller screens. Long URLs within your website content are often handled as one, continuous string and do not always adjust into multiple lines when the margins of the page change to accommodate smaller screen sizes. This can result in the URL extending over the predefined margins of the page.
To prevent this, we advise to always use anchor text. Using the hyperlink tool, available in just about all content management systems, you can select the text you wish to link and enter in the long URL of the page you want it to link to.
For example, say within an article we are writing for our newsletter, we want to make a reference to another page of our website. Instead of using the exact URL below:
http://www.globalreach.com/about/newsletters/grip-newsletter/global-reach-engage--december-2015/5-realistic-seo-resolutions-for-2016/
We can use the article title as anchor text which we then append the long URL to using the hyperlink tool:
"5 Realistic SEO Resolutions for 2016"
In addition to appearing properly on smaller screen sizes, using the hyperlink tool to link anchor text actually provides a better user experience. It is easier to read and provides context for the content a user can expect to arrive at upon clicking on the link.
Videos and Images
On average, the width of a mobile screen is around 375 pixels. Aligning your content accordingly could be a challenging task, especially if your content contains a mix of text and rich media (images and video). To ensure your content formats nicely on any screen size, try separating text from image or video content by placing them each on different lines. One line will contain rich media content, while the other line will be for text.
Next, you'll need to adjust the media content for optimal viewing on all screen sizes. To do this you have two options:
- Adjust the width on the image/video to the minimal screen width (i.e. 375px). This way, wherever you view it, it will always have a fixed width and appear as it should.
- Another option is to set its width to be a percentage of the page’s width. For instance, a width of 100% will have the media covering the page's full width, while a width of 50% will have the media covering half of the page's width.
View your Updates on Mobile Devices
Finally, always view your content after publishing your updates to the website. Check them on as many screen sizes as you can, and don't forget to check both the horizontal and vertical views. Your content should appear nicely and within the page margins. If you have published your changes, but still cannot see them on your live website, try refreshing your webpage or clearing your mobile browser cache.
