8 Tips for Making Your Content Fully Mobile Friendly

Author
Shane Melaugh   222

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.​

More...

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.

Note: Does All This Seem a Bit Complicated?

In the video, I go into some detail about nuances of creating mobile friendly content. Isn't that a bit much, if all you want to do is create a quick page or blog post?

Indeed it would be. That's why all of our templates already follows all these rules and are fully mobile friendly. If you load one of our templates, you don't need to know any of this. But if you want to make major changes to a template or build something from scratch, these tips will help you make it awesome.

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.

Why isn't this automated?

The technology for automatic image scaling exists, but it always has some downsides. That's why we don't have such a feature in our products yet. Image scaling is something we will work on improving, as soon as a good solution emerges.

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.​

Less Work, Same Result

If you're building a landing page from scratch, using our blank template, then the 20/10px side padding rule is already applied by default.

Also, you shouldn't add the side padding to text elements. Instead, add it to elements that contain the text (such as content boxes and background sections).​

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. 

responsive 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.​

What About "Mobile First"?

You may have heard of the "mobile first" approach to web design. It has many advantages, but as you can see from this tip, we advocate the "desktop first" approach.

Why?

Because to follow mobile first, you would literally have to spend most of your time creating content and pages in the tiny phone view and later make some adjustments for larger screens. This workflow is not conductive to rapid implementation and is really difficult to do well unless you have a deep understanding of CSS.​

We believe there's a way to skip past the step of mobile first and get a better result. But more on that will be revealed later...​

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!​

Shane

by Shane Melaugh  August 25, 2017

222

Enjoyed this article ?

You might also like:

Leave a Comment

  • Hi Shane, thanks a lot for that explanation. …the content box is the solution, to the missing % by the margins and paddings. very good to know!

    • Yes, that’s it. I prefer this to relative margins, since on small devices, even a small relative margin like 20% can end up eating space unnecessarily.

  • Hi Shane,

    thank you very much for your constantly good recommendations.

    ..and i’ am glad to be a customer, all your Website-Products are great and easy to use for me as a beginner, and in addition, your service from your team is really really well too.

    Best regards,

    Maik

  • Excellent value-add, as usual. Do you recommend setting-up certain pages as mobile-only (with like 70% less content) and if so, is there a way to designate which menu/pages are seen by mobile devices, vs. a full-sized screen?

    • Hello Russ,

      I don’t recommend setting up separate pages for mobile, no. The lines between mobile and non-mobile are blurring, so I think a separation like that isn’t a long-term solution. We’re working on an update in Thrive Content Builder that will help you with more mobile friendly options, though.

  • Thanks Shane this was extremely helpful. I have been very impressed as a new member . . . wow! I have already recommended you guys to a few friends.

  • Shane, that is a nice tutorial for mobile responding which I ever heard about. Actually, there were many mobile responsive themes and plugin for WordPress but it look like content building plugin was a better. Thanks for share..

  • Great tips – does adding a content container also work for landing pages? I have added content containers but they don’t seem to have the margin slider.. am I doing something wrong?

  • Great tips! Thanks! Another suggestion on verifying mobile views is to use Google Chrome Browser. Right click on the page you want to verify, select “Inspect” and then in the upper left corner, you can select mobile device screen sizes. Maybe this is overkill compared to just shrinking/expanding the browser screen, but I found it very helpful especially if you want to see what the portrait and landscape views look like.

  • Thanks Shane! One question about images… your selected cat image was 500px. What if someone is on retina? Will it look blurry? Or should we always be uploading the proper size for regular display only?

    • On a high DPI screen, the image won’t look as crisp as it could. However, since a typical high DPI version of an image is four times larger, that means it’s also four times slower to load. Since speed is so important, it’s not worth slowing down the site for everyone, just so pictures look a bit nicer on high DPI devices.

      Having said that, technologies for detecting screen resolutions and sizes and then serving up the right image (instead of serving the larger image to everyone) are maturing and I think we’re close to seeing a good solution we can implement in our tools as well.

      • Hi Shane, nice to know that you are close to seeing a good solution on technologies for detecting screen resolutions. I am a graphic designer and keen for showing my images in retina resolution. So now I’m uploading my images 2x the size (instead of 4 times the size). But I slowing things down for everyone now. So please make this a feature in the nearby future. That would be great! Keep on rocking!

      • I’m eager to have this feature as well! It’s actually something we’ve been discussing since the very first Thrive Theme.

  • Shane, would be great if your videos were accompanied by a text summary of key points. Some people (myself included) prefer to scan test than watch a video

  • Great tips Shane. Thank you!

    As developer myself, I use chrome’s built in mobile preview which is helpful. To use it, press F12 on keyboard or right click on browser screen and click inspect element. There is a mobile icon on top left of the popup window. Click it to activate mobile preview.

  • Nice Shane! This is useful. I would love to see a part 2 of this where you go through how to fix things thru css that don’t look right on mobile. Sometimes weird things happen and it would be good to know how to correct it in css based in various mobile sizes.

    • Hi Tom,

      We’re working on something that will make such CSS changes unnecessary. I can’t reveal more, at this point, but it’s something we’ve had our eyes on for a while. 🙂

  • Thank you for the video. Some great tips for making a website more responsive for mobile devices.

    In my opinion, sometimes it is better to have a separate dedicated mobile website instead of 1 responsive website. With 2 separate websites you can now customize your content specifically for the type of device your visitor is using. Shane, do you agree with this from a marketing perspective?

    • I have a two part answer to this.

      1) From the user perspective, building a page for large screens and one for small screens is not ideal. It’s not a good workflow, to have to build everything twice.

      2) From a visitor perspective, the emergence of AMP and FB Instant Articles indicates that it can be good to have a separate mobile-only version.

      We are looking into this, to see how we can give you the advantage of point #2 without the disadvantage of point #1.

  • Mobile friendly themes & plugin helps us to increase our conversation also It’s a part of google ranking algorithm.I’m a fan of thrive themes.keep it up 🙂 waiting for next good news

  • Thanks Shane. I got some work to do now. Q. If using an auto-responder code in a content container, which takes priority? The width of the code for the form, or the content container?

    • That depends on the code. If it’s decently written, it should go no wider than a container placed around it.

  • I’ve always wondered why some things get totally squished on phone screens – now I know about using content containers instead of margins. It’s a little tip but goes a LONG way. Thanks Shane 🙂

  • Hi Shane,

    First day playing with the Leads plugin. Love it. You can do so much with it.

    Problem. I created a Light box. It display on desktop just fine. On mobile it displays fine in horizontal orientation but in vertical orientation the top text box display half off of the page to the right 🙁

    Not sure how to fix this…

  • how do you resize the content creator to adjust width of text boxes- the control slider you have on your content box I dont have….?

  • Hi Shane,
    Appreciate your tips!
    Question about the best way to add icon images so they take up much less space on a phone. I’ve tried putting them in a column format. Still excessive white space on a phone.

  • What about if you are using an amazon associate image by using custom HTML, as this is not classed as a standard image?

    • As far as I know, those images aren’t oversized and they’re quite strongly compressed, so you should be fine. 🙂

  • Its so strange, I followed the guide… I have 1/2 1/2 column layout, in the first 1/2 column I have another separation 60/40% with column layout again, I use Lead Generation form in the 60% part and a small image (pointer to the form) on the 40% part.

    http://www.fitmateptonline.com/kitchen-rescue-pak/

    And this is what happens when I get it to mobile view…

    https://postimg.org/image/fr5bzxwdz/

    Please dont tell me to post ticket because Its 7th day Im stuck with this…

    This is the email I used to buy the plugin

    • From the picture it seems like you applied a negative margin on the form instead of the page section… Also I would switch the column order for the arrow and the opt-in form so that the arrow is on top.

      About the support forum, you can not open tickets with an account that does not have products attached. I’m sure you’ll understand we can not offer support for people who did not buy the plugin!

  • This was just the info I needed. Unfortunately, I found it AFTER I had built my pages using margins and paddings. My sales page in particular looks really weird in anything but 100% magnification.

    So I’m wondering, other than rebuilding the page from scratch, what is the quickest way to add the content container to the page and put the elements in? I tried adding it and then dragging my existing elements there but I lost contact with the content container after a while and also some of the settings started to change on me as I was dragging things around and working with them. So that’s a bunch more work. Any suggestions would be appreciated. Just need the quickest way to replace the work I did before I knew about the content container. Thanks!

  • Nice Tips. I have a question about the last tip. What if you wanted the cat to be on the right side, but on smaller devices you want it to show above the content instead. I have used another editor in the past and basically I had two separate 2-column blocks.

    On larger screens it would be as you show in the video, but as the screen got smaller it would hide that column block and the second would appear. I would reverse the order (meaning the cat picture on the left instead of right) so the cat showed above the content as the screen narrowed.

  • Great post as usual!

    I have one question in that regard. If I am using a background image, lay a opt in form on top of it and the image size gets adjusted based on the device the form might end up on top of part of the image that would not be considered a good background. Any suggestions for this?

    • Hello Stephan,

      The best way to do this is to set the image as a background for a content box and choose “stretch” for the image display. That way, it will always cover the entire content box area.

      You can then place the lead generation form inside the content box.

    • Hello Emmanuel,

      The video has been updated to show how responsive editing can be done in the new Thrive Architect plugin. This also works for landing pages.