There's no way around it, not anymore: with Google's index now mobile-first, adopting a mobile-first approach when building a new Drupal site (or redesigning a legacy one) is… a must! It no longer depends on a specific project's needs or on the used technology. The need to develop a mobile-first content strategy has gone from particular to universal.
And facing the challenge of:
- (re)creating
- optimizing
- structuring
… content on your Drupal website means conforming to those specific patterns that mobile users have developed for reading content on their smartphones.
In short: developing a fully responsive Drupal site comes down to centering your mobile content strategy around the idea that:
It's for the smallest screen sizes that you should plan your content for, first things first … then scale it up from there.
Now, let's see precisely what it takes to develop a mobile-first content strategy. What focus points and must-have components to include:
1. Take the Smallest Screen Size as the Starting Point
In other words: think mobile-first!
And by “mobile” I do mean “smartphones” — the smaller the screen size, the better.
This way, you'll be adjusting your content so that it makes the most of the smallest interface. Starting “small” is the best way to stick to the “keep it simple” approach:
Thinking through every content-related decision in the light of the viewport size challenge will constrain you to keep the truly essential content elements only.
Hence, this “spartan” way of eliminating the unnecessary will reflect on your site's desktop design, as well:
It will turn out cleaner and lighter.
2. Use Visual Content Wisely: Weigh Your Choices of Images
The golden rule when it comes to the imagery that you'll use on your responsive website is:
If an image doesn't enhance and complement your content, then you're better off without it!
And I know what you must be thinking:
“But people remember what they see far more easily than what they read.”
True, you need to keep in mind that visuals do come at a cost, though:
Those stunning, visually-arresting images on your website risk to divert your users' attention from the message itself.
And still, probably the most heavy-weighing reason why you should use images wisely when you develop a mobile-first content strategy is: weigh.
Visuals risk to take up valuable screen space and thus:
- outshine your calls to action themselves
- impact your site's overall performance (leading to frustration)
Now that doesn't mean that you should strip your content off ALL the visuals! Absolutely not!
Just to be cautious and weigh your every choice, think through your every decision involving the usage of an image.
Once you've selected the truly essential ones, keep in mind:
- not to no resize them (or optimize them in any other way) before uploading them to your CMS: let Drupal do the heavy-lifting here
- to leverage the Responsive Image module's (Drupal 8) capabilities for resizing them to fit the given screen sizes
3. Content Before Design
This is the right sequence to follow when you're designing (or re-designing) your Drupal site with mobile users in mind:
First, you create and strategically organize your content and upload it to your Drupal 8 CMS. It's only then that you focus on styling and developing a responsive and visually-striking web design.
If it's legacy content that you're dealing with, trying to convert it to mobile, the very first step to take when you develop a mobile-first content strategy is:
Removing all the design elements from your written content.
4. Create a Hierarchy of Your Calls to Action
Making the most of a small interface means also setting your priorities in terms of calls to action:
Pair each one with a corresponding objective, evaluate them all wisely, then select THE call to action that's most critical for you and place it — and it alone — above the fold.
5. Organize and Optimize Your Content for Mobile Devices
I'll briefly list all the key requirements that mobile-friendly content should meet — aspects to pay attention to when writing content for mobile devices — for I'm sure they're nothing new to you:
- the phrases should be kept short and concise, thus eliminating the burden of “never-ending-scrolling”
- the content should be sharp, targeted and skimmable, so users can easily “digest” it and modular, so that users can swiftly browse through it
- “modular” meaning made either of multiple clear paragraphs — each one standing for one thought — or chunks of 3 paragraphs at most
6. Optimize Media, too, When You Develop a Mobile-First Content Strategy
And there are a couple of essential steps that you mustn't overlook when it comes to mobile-optimizing your media:
- always go for thumbnails instead of video players that your users would have to load and thus strain on your site's valuable resources
- don't ever use autoplay on your audio and video content
- optimize your sound, image and video files both for large and small devices
7. Trim Down Your Navigation Menu
In other words: when you develop a mobile-first content strategy, consider simplifying your navigation to its truly essential links.
No user would gladly scan through a “beefy” navigation menu taking his device's entire screen:
- flatten your navigation: stay away from the technique of piling up submenus, layers and navigation points
- feel free to place the links that you'll remove on other places on your website (or even to turn them into calls to action)
8. Convert Your Legacy Content to Mobile-Friendly Content
If it's a legacy Drupal website that you need to restructure and to adapt to your mobile users' specific patterns for browsing through and consuming content on their smartphones, then it's time you:
- dug into your static HTML
- … and cleaned it up
And by “cleaning it up” I do mean:
- removing inline media
- removing the fixed-width tables
- eliminating floats with content
- breaking it down into skimmable chunks of content
… that can be easily structured into content fields.
The END! These are the 8 main aspects to focus on when you develop a mobile-first content strategy.
Now time to test the “saying” that:
“Creativity strives under constraints.”
… and to make the most of those small interfaces.
