8 Tips for Making Your Content Fully Mobile Friendly

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

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

Author: Shane Melaugh

Shane Melaugh is a co-founder and the CEO of Thrive Themes. When he isn't plotting new ways to create awesome WordPress themes & plugins, he likes to geek out about camera equipment and medieval swords. He also writes about startups and marketing here.

  • Joe H says:

    Great tips. Thanks a lot

    • Shane Melaugh says:

      Thank you, Joe! Happy to know you enjoyed this update!

  • Rita S says:

    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!

    • Shane Melaugh says:

      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.

  • Bruce Bird says:

    Useful guidance as always.

    • Shane Melaugh says:

      Thank you, Bruce.

  • Maureen T says:

    Very helpful! Thanks.

    • Shane Melaugh says:

      Glad you found it helpful, Maureen!

  • Maik says:

    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

    • Shane Melaugh says:

      Thank you very much, Maik!

  • Russ says:

    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?

    • Shane Melaugh says:

      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.

  • Voula C says:

    Great tutorial. Explained a lot! Thank you

    • Shane Melaugh says:

      Thank you, Voula!

  • Trevor Mc says:

    Nothing beats “field experience.” ;-)

    Thanks for the useful tips…

    • Shane Melaugh says:

      Thank you for your comment, Trevor!

  • Renee says:

    Thanks Shane! Love your periodic video updates, super helpful and quick. Thanks heaps. :)

    • Shane Melaugh says:

      Thank you, Renee! I’m very happy to know that you benefit from the updates. :)

  • Dan N says:

    Great tips as always – thanks Shane!

    • Shane Melaugh says:

      Thank you for your comment, Dan!

  • Jay D says:

    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 Melaugh says:

      Thank you for helping us get the word out, Jay. :)

  • Kimsea Sok says:

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

    • Shane Melaugh says:

      Thank you, Kimsea!

  • christine m says:

    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?

    • Shane Melaugh says:

      Yes, it should work there too. If something doesn’t work, please let us know in the support forum.

  • Alexander says:

    Love you! When I watch your vids there is always value. Thnx

    • Shane Melaugh says:

      Thank you, Alexander!

  • Vince D says:

    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.

    • Shane Melaugh says:

      Wow, that’s really cool. I didn’t know this was one of the features, so thanks for the tip!

  • Miles M says:

    Short and very helpful! Thanks for taking time to put this together…very much appreciated.

    • Shane Melaugh says:

      Thank you, Miles! Glad you liked it!

  • Alain says:

    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?

    • Shane Melaugh says:

      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.

      • richard pijs says:

        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!

      • Shane Melaugh says:

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

  • Moe says:

    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

    • Shane Melaugh says:

      Thanks for the feedback, Maurice!

  • Khoir L says:

    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.

    • Shane Melaugh says:

      That’s an awesome tip. Thank you!

  • Horst says:

    Thanks for this video. I’ve learned something new today, the usage of the content container.

    • Shane Melaugh says:

      Thank you for your comment, Horst!

  • Tom says:

    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.

    • Shane Melaugh says:

      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. :)

  • John says:

    Indeed helpful tips for making content mobile friendly.

    • Shane Melaugh says:

      Thank you, John!

  • Ludolf E says:

    Hello Shane, essential information, thank you!

    • Shane Melaugh says:

      Glad you liked it, Ludolf!

  • Eric says:

    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?

    • Shane Melaugh says:

      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.

  • Brayan says:

    This plugin is just beautiful :)

    • Shane Melaugh says:

      Thank you, Brayan! :)

  • Noman says:

    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

    • Shane Melaugh says:

      Thank you, Noman!

  • Harvey says:

    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?

    • Shane Melaugh says:

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

  • Tim T says:

    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 :)

    • Shane Melaugh says:

      Glad you found this useful, Tim!

  • Paul B says:

    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…

  • Fantastic article , appreciate it

  • lyn says:

    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….?

  • John W says:

    Very helpful. Nice to know before jumping into the new project.

  • Ananya says:

    Mobile friendly Content is useful and this gives your Website rank in search results on mobile.Thank your for sharing this.

  • Keri says:

    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.

    • Shane Melaugh says:

      Hi Keri,

      You can now change the space around icons (and other elements) depending on screen size.

  • rowell says:

    really helpful Thanks!!

    • Shane Melaugh says:

      Glad you liked it!

  • Sean W says:

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

    • Shane Melaugh says:

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

  • Todor Atanasov says:

    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

    • Hanne says:

      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!

  • Anne Asher says:

    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!

  • David says:

    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.

  • Stephan says:

    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?

    • Shane Melaugh says:

      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.

  • Emmanuel says:

    I am having this problem with my landing page on thrive theme but I still cant fix it. any plugin that can help?

    • Shane Melaugh says:

      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.

  • Maureen G says:

    Thank you, Shane. It all makes sense, which is so nice!

    • Shane Melaugh says:

      Thank you, Maureen!

  • Josh says:

    Is there a way to automatically redirect mobile traffic to a page designed for mobile?

    • Shane Melaugh says:

      No, we don’t have such a feature.

  • Marcus T C says:

    Another great video that helped me solve the issue with the pesky 1-2 words off to the side of an image. Thank you! I really need to take some time to go through the academy. So many great features.

  • Sally says:

    Hi Shane,
    Thanks so much for this, it’s really helpful.
    I’ve got the Squared theme and the header, footer and menu display in different colours on the mobile version than they do on my desktop site. Any idea why that might happen?
    Sally

  • lizaimi.lihin says:

    Does thrive themes has mobile preview that allow us to check the result of our work immidiately.

    • Shane Melaugh says:

      Not yet, but it’s coming in the 2.0 version.

    • Shane Melaugh says:

      The video has now been updated to show this feature.

  • Is there a way to hide/show elements based on device type within the settings for Thrive? Or is there a recommended way to do this?

    • Shane Melaugh says:

      Hi Chrissy,

      The video has been updated to show how this is done in Thrive Architect. :)

  • Alexander Hammerschmied says:

    Thx Shane.
    I switched a few days ago to thrivethemes and it seems to be awesome, but:
    How can i make headings responsive? I’m using the squared theme and my heading on desktop is 47px. that works fine but if i switch to a smaller device it’s still 47px. Usually i just scale it down via css but is there a “smart” way without creating a custom class just for scaling the size of a header? i mean, that’s one major responsivity function for readability…
    Thanks a lot,
    Alex

    • Erik H says:

      If you look in your member area you’ll find a lot of Thrive Architect tutorials. One of which is a 28 minute project tutorial. Near the end Shane goes through working with the headers such that it looks the same on desktop but scales correctly on mobile.

    • Shane Melaugh says:

      Hi Alexander,

      In the themes, we don’t have the responsive editing shown here yet. We will be adding this to the new theme we’re building, of course. In the meantime, custom CSS is the way to go, though.

  • Mike B says:

    Outstanding new features and well thought out design. Thanks for your continuing improvements! You guys set the standard for the industry as far as I’m concerned…

    • Shane Melaugh says:

      Thank you very much, Mike!

  • David Moran says:

    You have just stopped me ripping out what hair I have left. Keep these tutorials coming.

    • Shane Melaugh says:

      Glad to hear it, David! Please let me know if there’s anything else frustrating you, that we could help out with a tutorial.

  • Kendrick says:

    Really good info here Shane, thank you. Clearly explained, totally applicable to daily work… just great.

    • Shane Melaugh says:

      Thank you, Kendrick!

  • Deborah says:

    Stunning… All of you are the BEST!!!

    • Shane Melaugh says:

      Thank you for your kind comment, Deborah! :)

  • Grant says:

    Shane, thanks SO much for (1) having the text summary below the video, and (2) having the time in the video where each tip begins. Those 2 things make your already-very-valuable video tutorial even more valuable.

    Cheers,
    Grant

    • Shane Melaugh says:

      Thank you for your feedback, Grant! Glad you like the format of this post. :)

  • Matthias J says:

    great stuff again, thank you!

    • Shane Melaugh says:

      Thanks, Matthias!

  • Quentin P says:

    Awesome content Shane. Thrive Architect is the business. Your videos are always direct and to the point – that’s why I watch them all the way through and recommend Thrive to every one I meet. No BS is the way to be.

    • Shane Melaugh says:

      Thank you, Quentin! Very happy to know that you find my tutorials worth paying attention to.

  • Thanks for another excellent tutorial, Shane. This is one of many reasons you guys are the best.

    • Shane Melaugh says:

      Thank you very much, Esta!

  • Anton C says:

    As usual…useful, precise and clear. Thank you!

    • Shane Melaugh says:

      Thank you, Anton!

  • Scott says:

    This was very enlightening to me. Thank you!

    • Shane Melaugh says:

      Great! Thanks for your comment, Scott!

  • This could not have arrived at a better time. We are about to redo our academy homepage to be more mobile friendly and load faster. Thank you, Shane. Always great training.

    • Shane Melaugh says:

      Glad to know this was useful for you!

  • John Snippe says:

    Excellent… and timely. I was about to walk away from WP/TT because my blog looks horrendous on mobile. Saved me with this vid, Shane!!

    • Shane Melaugh says:

      That’s great to hear. Thank you, John!

  • John says:

    Adjusting margins and padding have always been one of the issues I face when creating my sites. I just never really understood when and how to use them. Your video has “FINALLY” clarified this for me. Thank you Shane. Anytime I am faced with a challenge or need help with something, I can always count on Thrive Themes, and of course Active Growth. Thank you for always making time for us, it is greatly appreciated.

    • Shane Melaugh says:

      Thank you, John! I’m very happy to know that this clarified things for you! :)

  • Dale M says:

    I loved your mention of “Future Self” Great tips. Thanks

    • Shane Melaugh says:

      Thank you, Dale! Gotta be kind to future you. :D

  • Linda Gross says:

    Excellent suggestions. Thank you for the training. I’ve been using WP for about 6 years and I’m learning so much from your video training. Plus the work that went into developing Thrive Architecture is much appreciated.

    • Shane Melaugh says:

      Thank you for your comment, Linda! That means a lot to me!

  • Joey R says:

    Brilliant – this was one of the best!!

    • Shane Melaugh says:

      Thank you, Joey!

  • Frank says:

    Thanks, Shane. Valuable Content.

    Funny thing is your own website lacks some responsiveness. On the iPad the top menu goes into full browser height leaving 90% of the page white. Also the rows on your homepage stretch to wide so I‘d call it buggy. Thought you might be intersted. Posted that to your twitter already with a screenshot but looks like you‘re only automatically posting content there.

    • Shane Melaugh says:

      That’s odd… I’ve never seen this happen on the site, but we’ll look into it. Thanks for pointing it out!

      Of course, we don’t have the luxury of Thrive Architect style responsive editing for the header. Yet. But this kind of editing and responsiveness for themes is a project we’re working on as well, of course. :)

  • Jason B says:

    why do the mobile emulators portray a different layout than the Architect tablet and mobile view? Specifically the Architect mobile view (360px width) looks different than Google Chrome Developer Tools device toolbar and other emulators i can find by searching google.

    • Shane Melaugh says:

      Hi Jason,

      That depends on whether scaling is applied and how it’s applied. Simulating a phone screen on your computer screen is tricky, because there are several variables involved: the physical size of your screen, the physical size of the phone screen, the pixel density of your screen, the pixel density of the phone screen, the scaling on your screen and the scaling on the phone screen.

      As a simple example, you might have a 17″ monitor with a 1080p resolution. And then you have a 6″ phone with a 1080p resolution. In this case, the pixel density on the phone screen is roughly 3x that of the monitor. The phone screen will probably scale content to 200%, compared to the monitor. That means everything represented by one pixel on your monitor is represented by 4 pixels on the phone screen.

      That’s a pretty straight forward example of scaling and, if we know all the variables, we can simulate the phone on the monitor fairly easily.

      Of course in reality, there are infinite combinations of all the above mentioned variables, which makes all this rather complicated. In Thrive Architect, we don’t apply scaling for the tablet and phone edit views. You have to think of the edit views as guidelines. There’s no tablet in the world on which the content will look exactly like it does in the “tablet” preview mode in Thrive Architect. And there’s no phone in the world on which the content will look exactly like it does in the “phone” preview mode.

      It’s not possible to optimize for every screen of every device, but using responsive design and optimizing for the 3 big break points – roughly monitor sized, roughly tablet or landscape phone sized and roughly portrait phone sized, we can ensure that the content will look good on every size and scaling in between.

  • Ken Taylor says:

    Hi Shane,
    Wow, super insightful and helpful. Just one set back-the cat was a “show stopper” for me. Thank you for the great tips.. m(_ _)m

    • Shane Melaugh says:

      You’re very welcome!

      You don’t like the picture of the charming cat I used? :D

      • Ken Taylor says:

        Ha! Sorry, meant to say, “Stole the show”, in fact, that cat has a long future with doing ‘memes’. Please, if you allow me, “Responsive?! I’m responsive! Just feed me and I’ll respond with a nice nap.” Again, thanks for the teaching a “mindset” when working with Thrive Architect.

  • Hans says:

    Shane! Thank you SO much for this AWESOME post!

    It’s this type of in-depth content that will make us all so appreciative of all that Thrive Architect can do and SO thankful that we’re Thrive members!

    Keep it coming buddy–in no time you’ll have a band of ninjas creating conversion-optimized websites with such deftness and stealth that their prowess online is unmatched!

    • Shane Melaugh says:

      Thank you very much, Hans! Very encouraging feedback. :)

      I like the sound of this conversion ninja army very much. :D

  • Kim Celinder says:

    What a bunch of awesome tips, very useful.

    On another note, I love the fact that you (Shane) are still one of the front figures after your company became successful.

    • Shane Melaugh says:

      Thank you, Kim! I really like creating content and tutorials. In fact, it’s one of my favorite things to do, apart from product design. So, I’m very happy that I have an excellent team in place to manage many aspects of the business, so that I can still do this.

  • This is solid gold. Thank you Shane! :D

    • Shane Melaugh says:

      Thank you, Miguel!

  • Dan says:

    Really great video – well done! It’s clear why it’s called ARCHITECT! :)

    You mentioned setting the sizes of the headlines H1, H2 etc. – does this have to be done on each page or can this be set globally somewhere?

    • Shane Melaugh says:

      It can’t be set globally in the plugin (yet). However, there’s a font option called “Inherit theme fonts”. This will simply load the font settings from your theme. And if you change your theme fonts, they will also change everywhere you’ve chosen the “inherit” option.

  • Very useful guidelines. Thanks a lot.

    • Shane Melaugh says:

      You’re welcome!

  • Thanks Shane for the video tutorial. I really like your Architect plugin.
    Keep it up.

    • Shane Melaugh says:

      Thank you! I’m glad you like it.

  • Katrin says:

    Brilliant work, thank you so much!

    Can I use the Architect on homepage and website header too?

    • Shane Melaugh says:

      Hello Katrin,

      Yes, you can use Thrive Architect to create your homepage, if you set your homepage to a custom page (explained in this tutorial). You can create a header for this page in Thrive Architect, but you can’t edit your theme header separately, using Thrive Architect.

  • Anthony says:

    Been a member since day one, it has been a long-time and I’m pleased you didn’t release this as a different product and then asked a higher price tag to purchase the Thrive Architect upgrade plugin.
    Your ethical principles, confirms I made the right choice and will continue to be a loyal customer in the future.

    • Shane Melaugh says:

      Thank you for your comment, Anthony! Thank you for being a long time supporter!

  • Ryan S says:

    One of your best video tutorials/articles yet Shane. Awesome to see the power of one or two of these tips demonstrated. Really gets the point across. Thanks!

    • Shane Melaugh says:

      Thank you, Ryan!

  • Fred says:

    Amazingly informative, Shane. Thanks as usual.

    • Shane Melaugh says:

      You’re very welcome, Fred. :)

  • Nelson Therrien says:

    Great tips! Most of it I already knew, but I see a lot of amateur work (especially with WordPress) so hopefully it will help…
    One question though : for padding, for example (and even text) aren’t we supposed to use em instead of px, specially for accessibility?

    • Shane Melaugh says:

      I don’t think it would be an advantage to use em for padding. If a user is scaling text up in size, then em padding would also scale up in size. As a result, larger text would be crammed into less horizontal space. Doesn’t seem like a good outcome. But maybe I’m missing something? Accessibility is an area I don’t know much about yet.

  • Niels says:

    Your site displays only a large grey area and the menu above the fold on the iPad Pro (newest IOS, all pass up to date)….

    • Shane Melaugh says:

      Thank you for the heads-up Niels! We’ll check it out and get it fixed. :)

  • Michelle R says:

    Fantastic tips Shane thank you. I’m getting to grips with architect now and loving the mobile view option – knowing the down but not up rule is a gamechanger!

    • Shane Melaugh says:

      Thank you, Michelle. Great to know that this tutorial was helpful for you. :)

  • Bart R. W says:

    Wonderful video, “Learn along with Shane” and the written info to reinforce it. Love it!

  • Dean Phillips says:

    Any plans to pick the amount of columns on tablet/mobile in the future?

  • Monika B says:

    That sounds very interesting. Short question concerning tipp no.1: I am using the Focus Theme and my understanding was that it had a built-in image opimization and compression. Is it nevertheless necessary to manually resize larger images?

  • Ivan C says:

    I might be blind but can you tell me where the read more button in Thrive Architect went? I can’t seem to find it.

  • eddie s says:

    This was great, happy to say some tips I am already using while others answered some long standing questions I had. QUESTION: I am in the middle of designing a long form content sales page. How will this be affected by the update to Thrive Architect when it launches? Does a tutorial already exist for how the interface will be different etc? Thx

  • Aquif Shaikh says:

    Hi Shane. Excellent tips. Thanks a lot for the video.

    By the way, I am missing the “Content Box With Header” option of the content builder.

    Customer support told me that we can still achieve the effect using a content box with dark background within another content box. But I am not sure how it will behave on smaller screens especially if we add padding and margins differently.

    Would it be possible to bring back the “Content with heading” template or share a tutorial to achieve the same with Architect?

    • Shane Melaugh says:

      Thank you for your comment, Aquif.

      You can definitely re-create a content box with a title, in Thrive Architect. I might make a tutorial to show how. Of course, I realize that this isn’t as convenient as having it available as a pre-designed element. But don’t worry, we will be bringing back templates such as pre-designed content boxes soon, in the form of a new feature. :)

      • Aquif Shaikh says:

        Thanks for your reply, Shane. Content box templates would be a great addition to the architect.

        By the way, one more suggestion, I wonder if it’s the right place to share it. But anyway, as of now, it is a pain to change the background style or Border and corners setting as they are at the bottom.

        Most of the options above it like the Text options are expanded by default, which makes you scroll a lot to reach the other option.

        It would be great if all the other options except the last used option are contracted by default. It will make working on a particular design element easier.

        And one more suggestion, this time for your blog. It doesn’t notify me of any follow-up comments. Adding a checkbox for subscribing to replies would be appreciated.

      • Shane Melaugh says:

        Thank you for your suggestions, Aquif.

        The text options or other options above borders and corners will stay closed if you close them once and switch to other elements. We don’t automatically collapse all other option panels because that would add a lot of clicking to the workflow and scrolling is generally faster than clicking. However, we are working on further improvements to the options panel behavior.

  • Petre B says:

    Simply spectacular, Shane. Even if I’ve got used to have great expectations from you and your team, I do not cease to marvel about your work. Thank you.

    • Shane Melaugh says:

      Thank you for your kind words, Petre!

  • Patricia van den Akker says:

    Hi there. When I make changes in the side bar (font size specifically) in the mobile view, it changes it for the other two breakpoints as well. What am I doing wrong?

    • Shane Melaugh says:

      Hello Patricia,

      Are you selecting the text and then making the changes? Inline changes apply to all sizes, only “block level” changes are mobile responsive. So, in general, you can select an element in the breadcrumbs or with text, click into the text but don’t select any words. Changes you make then will be responsive. I hope this helps.

      • Patricia van den Akker says:

        Thanks Shane

        When I try that, something very weird happens: the font size slider controls the line height instead! Unfortunately, the line height slider doesn’t then change the font size…

        I’ll keep trying…

  • Pierre says:

    Thanks Shane

    I would love to know what this blog post (for example) looks like in the Thrive Architect back-end. i.e. is the text broken up and inserted into different wordpess content boxes nested into columns?

    Do you have a video tutorial on this?

    Regards
    Pierre

  • Tom McLellan says:

    Great tips! From a roadmap perspective, is Thrive committed to eventually offering AMP capabilities or is it too soon to tell at this point? Thanks

    • Shane Melaugh says:

      Yes, that’s very much part of the plan. :)

  • Jim M says:

    Where do I specify WHICH COLUMN shows first (on top) for mobile displays, and which shows underneath, etc.

    In my first use of dual columns in Thrive Architect it seemed random on the top of the page, and later, it failed to stack them at all, showing them instead side x side and one off the phone screen (which could not be scrolled). Since this was a home made testimonial based on the TA testimonial, and the testimonial does not show – only the name and title — the point is totally lost.

    How can this be resolved?

    • Shane Melaugh says:

      I can’t follow everything from your explanation, but here’s what I can tell you:

      1) When the columns are selected (entire columns, not an individual column), there’s an option in the sidebar called “reverse column order”. If you are looking at stacked columns, you can check this option to switch the order around.

      2) On medium screens, the columns will stack intelligently, based on how much space is available. For example, 4 columns will go to 2×2 before going to a single stack. You can change the minimum width you want to allow a column to be, before it stacks, also in the sidebar settings of the columns.

      3) If something is disappearing on a small screen, it is probably set to hide on that screen size. Click on an element and go to the “Responsive” option in the sidebar. There, you can choose to show/hide things on different screen sizes and there’s also a checkbox you can click to reveal all currently hidden elements.

  • Reinhard B says:

    Hey Shane,

    love those tips! Keep up the great work!

    Best,
    Rei

  • Stefan D says:

    Shane. I love Thrive and how you run your business. I really want emphasize that before the rest or this comment. I think you’ve done some really great things.

    That said, you guys have to come up with a solution for mobile.

    The numbers of people using mobile to do normal we browsing are going up month after month. Right now the way my sites look on mobile using thrive is really bad. I’ve tried several landing pages and also started from scratch following the recommendations.

    Sometimes they look “ok,” but we are not looking for ok, right?

    Thrive is Awesome and the mobile sites should look awesome as well.

    This is going to be an issue moving forward and I really don’t want to jump to your main competitor (the name that shall not be spoken” because I love all of the features that you provide, but if I can’t make my sites like super sweet in mobile. It’s not possible to move forward.

    Hopefully, you guys are aware and are working solutions.

    Thanks for all you do.

    • Shane Melaugh says:

      Can you be more specific about your requirements?

      All of the new templates are optimized for mobile and with the features demonstrated here, you can tweak and optimize the layout on different screen sizes, down to the smallest detail. What exactly are you trying to do and not able to do with Thrive Architect?

      • Stefan D says:

        Hey there and thanks for the reply.

        I always want to emphasize that I love your products and company. This is just feedback to hopefully assist in improving things even further.

        The main thing is the Text. When making changes in the editor for mobile view, the edits are not translating into the actual phone view properly.

        The main thing I would say is the Headlines. Font size changes are still very glitchy at least on my end.

        When trying to change the font size in H1, it seems to be adjusting the line height without actually adjusting the font size.

        This is only happening after the fact. What I mean is when I start a fresh clean page. It seems to work properly. However, after background and other elements have been added, the font size editor seems to have an issue. So when my page is done and I’m trying to edit for the mobile view I’m running into issues. The same font sizing issues are also happening outside of H1 Headline type. Normal fonts are glitching when being edited as well. Always after the fact.

        So, for sure you have ALL of the features and more necessary to make the mobile view look good. It’s just that they (for me) don’t seem to be functioning properly at the moment.

  • LJ M says:

    Shane, regarding “Styles Apply Down, Not Up​” – I’ve been trying to resize headline text while on tablet mode. I hit save, but the changes are applied to desktop as well. Am I doing something wrong here? Same goes for images. I’m speaking strictly about Thrive Leads.

  • John Z says:

    Shane you’re getting pretty good at this – congrats! you are THE professional befitting Architect status!

    • Shane Melaugh says:

      Thank you, John! I hope the tutorials are also making you get better at it. :)

  • Thanks for all this great information :)

  • Keith says:

    When you edit / scale images inside Thrive, does it retain the EXIF metadata from the image?

  • Liam C says:

    When I change something like the text or grid sizes on on either desktop, tablet or mobile view it changes them on the others as well. In the video you show that you can make changes separately. Any idea why this is happening?
    Thanks

  • Kirsty Carter says:

    Thanks Shane. Very useful as ever.

  • Kirsty Carter says:

    Hi again Shane
    I’m having trouble with my site so that what shows in the various responsive screen sizes when I’m working on it on my desktop is not what appears on my site when I view on devices. I’ve put some tickets in but doesn’t seem to be resolving the problem. If you’ve ideas about how to resolve this it would be great.
    Kirsty

  • Cartess Ross says:

    Where do i find more of these related tutorials? This was very helpful!

    • Shane Melaugh says:

      Hello Cartess,

      You can find all tutorials related to Thrive Architect on this page.

      And for various other tutorials and use cases, check out the blog. We post new tutorials all the time. :)

  • Kathleen S says:

    Why does my background image look different on my mobile than desktop or tablet? It is much lighter than on the other two, and I can’t change the background in the response view for the mobile.

    • Hanne says:

      Hi Kathleen,

      Did you put an overlay on the image? It might be that you changed the background in mobile and then later put an overlay on it. Now this overlay will not be reflected on mobile (because of the changes you made beforehand).
      If you did not change the image an any way, please open a ticket on the support forum, they will be able to check things out for you.

  • David C says:

    Just saw this post and video. I know I’m late to the party, but I just had to leave a comment and say that this is one of my favorite posts yet! Great tips for mobile design with great and clear examples! A+++

    • Shane Melaugh says:

      Thank you, David!

  • Karen McCamy says:

    I’m late to the party, too! ;-) I was building a Coming Soon page, thanks to that great post, but should have watched this excellent tutorial first! Duhhh!

    I really screwed up the mobile version! One of the most beneficial tips — for this immediate problem of mine — is remembering to set LP settings first! I remember seeing that in one of the other tutorials, but…alas…I forgot about it in my rush to get the Coming Soon page *finished faster!* Now, I will likely need to start over, but I should have invested the time to find this tutorial!

    I mention this for any other newbies out there, trying to learn landing pages & Architect at the same time! Don’t rush…invest in the time to learn!

    Love all you do, Shane! These tutorials are simply the best out there! ????

    • Hanne says:

      Hi Karen,

      If you started your coming soon page from one of the templates, all the mobile settings are taken care off (best way to quickly implement anything ;-) )

      • Karen McCamy says:

        Hi Hanne,
        Thanks for weighing in! :-)

        I DID use one of the templates you provided, but I added an explanation… Got a little wordy (just a 3-bullet list), I’m afraid! But, I felt it was necessary, since I’m re-branding an existing website and I wanted to make sure current readers knew a little about what to expect with the new focus of the site…

        I don’t have a mailing list and NOW I’m trying to capitalize on what organic traffic I’m getting to get readers to at least subscribe “to be notified” when I have the new content ready to go… At least that was my plan! ;-)

        It looks fine on everything but the smallest screen size…

        I just watched the Architect Tutorial about UNDO, RE-DO & the Revision Manager… I didn’t even know those commands were there! So, I’m hoping that restores all of the (bad) changes I made… (not following the “from outside in” lesson, for example)…

  • Solid! Thanks for that guide.

    • Shane Melaugh says:

      You’re very welcome, Carl.

  • Scott says:

    That was one of the most useful video/articles i’ve ever seen. I can’y believe how much that helps with page design and mobile optimization.

    And you explain it so well it makes it easy.

    Thank you very much! Brilliant work!

    • Shane Melaugh says:

      Thank you very much, Scott! I’m happy to know you found this useful. :)

  • Rob says:

    Very good read

  • >

    Join Thrive University (it's FREE!)