These days, any self-respecting WordPress theme or plugin will be mobile responsive by default, meaning that it will resize and rearrange to fit medium and small screens.
But if you want to make your content not just mobile responsive but truly mobile friendly, there's more to it than just installing a responsive theme and calling it a day.
If you've ever wondered: "how should I create my content/landing pages/opt-in forms for mobile devices?" today's video is the answer you've been waiting for!
This post has been updated to reflect the changes made in the Thrive Architect plugin.
Thrive Themes & Mobile Friendliness
All of our themes and all of our plugins are responsive and mobile friendly by default. Meaning, they aren't only mobile responsive, they are also up to Google's "mobile friendly standards.
So, anything you create with Thrive Architect and related products will adjust to fit different screen sizes.
Here's a summary of the tips from the video:
Tip #1: Use Images at Their Optimal Size
Starts at 00:30
Nothing slows a website down more than oversized images being loaded all over the place. The ideal size for an image file is the maximum size it will ever be shown at. So, if you resize an image to be 400px wide on desktop screens, then the image file itself should ideally be resized to be no wider than 400px.
Fortunately, images can be resized directly in your WordPress media library:
The quality of image scaling in WordPress isn't amazing, but it's better than uploading gigantic image files.
Tip #2: Show/Hide Elements for Inline Changes
Starts at 3:17
In Thrive Architect, you can toggle the visibility of elements for different screen sizes. It's a straight-forward change that can be applied to any element and even entire parts of your page (e.g. everything contained inside a background section).
For most responsive content, it's not necessary to use the show/hide feature (see next tip). Show/hide is most useful for "inline" changes. For example:
- Showing different text content on different screen sizes.
- Changing the order of elements (by drag and drop) on different screen sizes.
These changes can be done by duplicating an element, making the changes to the duplicate and then showing/hiding the two copies on appropriate screen sizes. For everything else, there's a better way:
Tip #3: Apply Responsive Style Changes
Starts at 4:29
This tip is the most important one you need to know about for mobile friendly editing. It's also the most specific to Thrive Architect because, as far as I know, there are no other editors for WordPress that offer responsive editing at this level of detail.
The rule is as follows: anything you change in the sidebar options of Thrive Architect is mobile responsive. That means you can change those sidebar settings for specific screen sizes.
Styles Apply Down, Not Up
Any styles you apply on the largest screen size will be applied to the smaller screen sizes as well. Any style you apply to the medium screen size apply to medium and small screens. Any style you apply to the smallest screen size only apply to the smallest screens.
In other words: style changes you make cascade down to smaller screens, but not up to larger screens.
What Styles Can Be Edited Responsively?
In short: everything you see in the sidebar. That means you can make:
- Font sizes, font color, line height
- Margins, padding and positions
- Background images, background colors, overlays
- Borders, corners, shadows
...(and much more) adjust for specific screen sizes.
Tip #4: Use Alignments & Max Widths
Starts at 8:50
Text can be left, right or center aligned. This is something we're familiar with and it seems obvious to use the alignment options rather than trying to center align some text by adding side margins or padding.
The same principle applies to other elements as well.
For example, content inside columns can be aligned to the top, vertical center or bottom:
Also, instead of adding large side margins or padding, always consider the "max width" option first:
Using the max width settings, you can change the width and alignment of any element. You can also apply these settings to everything inside a content box.
Max width is much more mobile friendly than side margins or padding, because it won't lead to scrunched up content on smaller screens.
Tip #5: Use Column Layouts Instead of Wrapping Text Around Images
Starts at 12:52
In Thrive Architect, you can add images to your text content and make the text wrap around the image. However, in most cases this is not a great solution.
Text wrapping around images looks good on large screens, but it will lead to text being squeezed into a very narrow space next to the image, on smaller screens:
Text wrapping can be used for small images and icons. For an image like the one of the cat, an option is also to resize it on smaller screens, since the cat is recognizable even at a small size. However, if you have images that contain information that needs to be understood, text wrapping and image resizing aren't a good option.
For large images, diagrams and illustrations, it's much better to use column layouts than text wrapping.
Tip #6: Use the 20/10px Rule for Side Padding
Starts at 14:32
Side padding is important, but should generally be used in small amounts. Without side padding, your content will run along the very edges of small screens and that doesn't look very nice.
As a rule of thumb, make sure that text content has 20px padding on each side for large to medium screens and reduce it to 10px padding on each side for small screens.
Tip #7: Work from the Outside In
Starts at 16:25
The above note is an example of this principle. Instead of applying the 20/10px padding to each text element, start from the outside and apply the padding once, to the container element.
Follow the principle of "outside in" to achieve the layouts you want in fewer steps and with leaner code as an end result. You can see an example in this landing page from scratch video. The work you see me do at the beginning, preparing my headings and background sections is exactly such "outside in" work. As a result, I can build the entire page faster, in fewer steps.
Tip #8: Work from Desktop to Phone (With 1 Exception)
Starts at 18:00
A good workflow is to build your content on the largest screen size until everything is done. Then, switch to the tablet view.
In this view, you usually don't have many changes to make, since everything is responsive by default.
After making some minor adjustments in tablet view, switch to phone view. Here, you'll usually have some more tweaking and adjusting to do. Once that's done, your page is finished and looks great on every screen size.
There's one exception to this "desktop to phone" workflow: before you duplicate an element to reuse it on your page, check it on all screen sizes and make adjustments where necessary. That way, the duplicate of your element will also be mobile friendly and you don't have to do the same work twice.
Occam's Razor of Mobile Friendly Content
Occam's razor is a principle often referred to in medicine which states that the hypothesis making the fewest assumptions is most likely to be true.
In web design, there's a related principle to remind us to keep things simple: the solution requiring fewer steps to achieve the desired layout is probably the best one.
There are always many different ways to arrive at the layout you want to build. To achieve clean code, make your content mobile friendly and also make it easier for future editing, try to arrive at your desired layout in the fewest steps possible.
If you are looking for mobile landing page ideas, check out our post about 13 Mobile Landing Page Best Practices. In this post you can learn about the 'do's an don't's of creating mobile landing page designs.
How Else Can I Help You?
Do you have any questions about making your content as mobile friendly as possible? Any tips of your own to add? Are there other things you'd like me to cover in tutorials or courses?
Let me know by leaving a comment!