In Thrive Architect, you can preview your content in 3 pre-defined device sizes (desktop, tablet, and mobile phone). You can also make responsive style and content changes to optimize your pages and opt-in forms for different screen sizes.
Click here to learn more about responsive editing in Thrive Architect, if you aren’t familiar with this feature yet.
Before getting started, you can watch this video, with some in-depth details about mobile responsive editing, as well as some common mistakes and how they can be avoided:
In this article, you’ll discover the technicalities behind mobile editing, learn why we have 3 screen sizes (instead of 2 or 5 or any other number) and see how those previews relate to what your content will actually look like, on different devices.
The 3 Screen Sizes
In Thrive Architect, you can switch between three screen sizes and make changes to each one:
The general rule is that changes cascade down to smaller screens. A change you make on the tablet view will also apply to the mobile view, but won’t apply to the desktop view.
Ultimately, you can customize whatever you want to show, hide or style on each of the 3 screen sizes.
Viewport Width
Assuming you have made changes for each of the 3 sizes, what determines which version is displayed?
The determining factor is actually not the device type someone uses to view your content. Instead, it’s about the width of the viewport.
The viewport is whatever the content of the web page is being displayed in. A smaller screen will naturally have a smaller viewport. But, it also means that content shown in a smaller browser window will adapt to the width of that browser window, no matter how wide the full screen is.
This is the best solution because:
- Determining exactly what device type a visitor is using is less reliable.
- Ultimately, the device type doesn’t matter. What matters is how much space there is to display your content, which the small browser window example illustrates.
Here’s how it breaks down, exactly:
- Any viewport wider than 1025px will display the desktop version of your page.
- Any viewport narrower than 1025px but wider than 768px will show the tablet version.
- Any viewport narrower than 768px will show the mobile phone version.
The preview sizes you see in Thrive Architect are set to the narrow end of the tablet width and a narrow 360px for the phone. This is because whatever is optimized for a narrow view is more likely to work on a wider view than vice versa.
Device Sizes & Scaling
Now, if you create your page and optimize it for all three sizes in Thrive Architect, you might notice something: the phone preview on your screen doesn’t look exactly the same as the page looks on your actual phone.
Why is that?
The first culprit is quite obvious – every phone is a different size:
Although, the phone models shown here are outdated, what they illustrate still holds true: there are almost as many different screen sizes for phones as there are models of phones.
In other words: there is no one “phone” screen size that can be optimized for.
The problem of different screen sizes continues seamlessly:
Mentally add in the dozens of tablets made by other manufacturers, laptop devices ranging from tiny ultraportables to large workhorses and then, also add desktop screens going from small to super widescreen, curved displays (and then there’s that one guy who’s browsing the web on his massive, wall-covering TV screen).
There’s no one phone size, there’s no one tablet size, there’s no one desktop size.
And it gets more complicated still: different devices have different pixel densities. For example, a laptop may have a 13″ display and a 1080p (1920x1080px) resolution and a phone may have a 5″ screen and the same 1080p resolution.
The phone is cramming far more pixels into every square inch of the screen than the laptop.
Because of this difference, another factor in responsiveness is scaling. If the 1080p phone screen used 1:1 scaling, everything on the screen would appear tiny. So, it may use a 2:1 scaling ratio, meaning that every pixel on the laptop screen would be represented by 4 pixels on the phone screen.
This is a neat example, but of course, there are many other combinations of device size, resolution, and scaling.
The screen that you are viewing Thrive Architect on is also not exempt from this. Your view of Thrive Architect and your website is not the same as mine, because we are looking at different screens.
This brings us to an important point about mobile editing:
You Are Not Creating 3 Versions of Your Page
There are 3 preview sizes and 3 points at which you can edit, tweak and optimize your content. But you aren’t creating 3 separate versions of your page, for 3 different device types.
Even if you make no responsive edits at all, the content you create in Thrive Architect is mobile responsive by default. It will, for the most part, fit and look good on all screen sizes.
The idea of the 3 sizes is that you can further optimize the design at 2 points on the fluid continuum of different screen sizes. And as a result, if your content looks great on all 3 preview sizes in Thrive Architect, it will look great on 99% of screen size, resolution, and scaling combinations in the real world.
Why Not More?
As we’ve seen above, it’s impossible to optimize content for every screen size. But why did we choose 3 sizes and not 5 or 7 or 10?
There are 2 reasons for this:
- Every additional screen size adds more steps to your workflow. We believe in rapid implementation and spending time polishing fine details on 5 additional screen sizes costs time without bringing any significant return.
- Every additional screen size you make edits for adds more code to the page. We believe in keeping the code output lean and pages fast.
I hope this somewhat technical article gave you some insight into exactly what responsive editing in Thrive Architect does and doesn’t do.
If you would like to give some feedback or make suggestions, please reach out and let us know.