Testing Your IFRAMEs on Mobile Devices

On many sites, mobile users represent 90% of the site visits.

Embedded content often struggles there, since they may not be as responsive as your site, or respond in the same way.

Test, test, test. And test again.

It matters far more than you think. If your embedded content isn't working on mobile, it's not working. And if your site's not working on mobile, it's not working at all. Period.

Common problems;

• Things just look... bad. Form inputs and labels misalign or overlap. The UI is a mess.
• Important content is cropped off the right side, and the user can't see it.
• Scrolling doesn't work, so the user can't access what's off screen.
• Landscape mode... freaks out.
• The form submit button is off-screen, and the user can't access it.
• The form submit button is off-screen, and it's not obvious what the user is supposed to do.
• Required fields are off-screen, and the User can't find them to allow the form submit
• The success or error message is off-screen, so the user doesn't know if something went wrong, what to do. They assume their booking worked fine, when it did not.

Also, I recommend that you test a recent iPhone, and a recent Android phone, both. Go for devices that are 2-3 years old, so that you're getting a mainstream view, with a mainstream screen-size.

You'll notice the tiny differences in screen resolution, and the differences in browser ( Safari v. Chrome ) can have a huge impact on whether your site is usable on that device or not.