How come my mobile version isn't really responsive? What about tablets?


#1

###:x: The Problem

“My pages look responsive except for on tablets. What gives?”

“How do I make a tablet sized page in Unbounce?”

“My page doesn’t look right on iPad - help!”

“My android tablet shows the desktop view, how do I make it fluid responsive?”

“Is it possible to create a fluid responsive page?”

“How do I have more than 1 breakpoint for mobile?”


:white_check_mark: How Mobile Responsive Works in Unbounce

When Unbounce built our mobile responsive feature, the main concern we had was making sure the Desktop and the Mobile views were fully functional and completely customizable, with minimal work on the customer side, across as many devices as possible.

To achieve this, we built our Mobile Responsive feature with 2 view ports: Mobile and Desktop.

For a bit of context, the breakpoint for the mobile view is 600px. So any screen that is wider than 600px will display the desktop version. When the screen is wider than 600px the browser will do it’s best to scale the page down to fit the screen.

The best example of this is when viewing the page on a tablet. It is technically the desktop view, but it scales to fit the tablet screen. So while this isn’t 100% fluid responsive, it is still functional and will ensure the vast majority of your traffic is served a version that they can see and use without issue.

:desktop: :iphone: Analyzing Your Visitors’ Devices & Browser Size

While it’s important to ensure that all of your visitors have a great experience, it’s important to understand just how many (or how few) visitors are coming from tablets, such as iPads.

Our good friends at Hubspot wrote this piece that explains how to analyze your device specific traffic by using the widely available (and free) Google Analytics.

To take it a step further, you could also analyze the browser-sizes that are visiting your landing pages to get an accurate analysis of which breakpoints are being viewed most. The first tip in this list from Kissmetrics will help you pull this report, again using Google Analytics.

https://blog.kissmetrics.com/5-easy-ga-reports/

:rocket: Mobile Responsive: The Next Frontier

With all of this being said, we understand how important it is to have a fully-customizable and functional experience, regardless of the device. Our team is committed to making our builder the best in the industry and we’re currently in the process of digging into research and feedback to help us build Mobile Responsive 2.0.

Want to share your thoughts/suggestions with our team? Check out this feedback thread and vote on what’s most important to you in Mobile Responsive 2.0.


:link: Related Resources

For a more detailed instruction on how to use Mobile Responsive, check out this Academy article. Alternatively, you can check out this workshop that walks through all of this (and much more) in a helpful video.


Mobile Responsive FAQ's