When responsive design first hit the scene, we were well versed in the practice of producing content for a desktop site, and separate content through a mobile specific site.
This was the standard approach for many reasons
- We already had separate sites for mobile and desktop, two codebases and two sets of content
- Mobile usage was in its infancy. It was considered a “brief use” device that we would only want to find out information like a phone number or an address.
- We believed that because it was a smaller device and people were on the move, they wouldn’t want the full site and content provided via the desktop
Now, after almost a decade since the release of the first iPhone, we are aware that switching between mobile, tablet and desktop devices (plus any other devices you want to throw into the mix) is an everyday event and users often want the information they need whenever they need, where ever they need it, and whatever device they happen to be using at the time.
Different devices, different content
As we moved across to responsive sites, there was still this desire to have smaller amounts of content on smaller devices. This is where some people looked to adaptive content and server side tools that would look at the device type, and based on the device it would serve either the longer version of the content for desktop or the shorter version of the content for mobile devices.
Fundamentally, this is flawed.
It is flawed for a few reasons
- Device Detection is thwarted with issues
- Caching – now that we’re serving all devices from a single URL we want to cache that URL and we can not if we’re serving different content.
- Users on mobile devices want enough information to make their decision without having to go back to a desktop. If it’s important, show it.
- If you can cover the required information in a short form for mobile, then do the same on the desktop. People don’t want to read more guff just because they’re on a desktop; people want to know what they need and move on.
When it comes to delivering content, you should be sending the same information to everyone regardless of their screen or device.
Breaking the rules
No. You can not break the content rule, but you can break this rule when it comes to art direction.
There are certain elements that people might add to a larger screen viewport that they might not want on a mobile device. For example, you may want to…
- Change the image size, or crop depending on the screen size (through responsive images)
- Add a pull quote to the side of the text on larger screens to make something more visually interesting (although arguably that could work on mobile as well)
- Serving different file types – different browsers support different image, video, audio, font types and some are smaller than others. Essentially it’s the same content though, just a more defined version
The key to breaking the rules is that you can do all of these based on the tools the the browser provide us.
