We've been working with making our web apps mobile friendly and have come across a few rule-of-thumb type rules that can be applied to an application user interface at design time to help that process:
- All hover interactions need to be on elements with only that action. The design cannot have a button with both click and hover events as mobile devices wont trigger the hover event. On mobile devices the hover event needs to be a click thus conflicting with the other click event.
- All external, modal iframes need to be new browser windows/tabs. iframes wont scroll on certain mobile devise, which you could get around by sizing the container unless it's a modal or you don't have control over the code on the iframe.
- All PDFs need to be a new browser window/tab. Some devices do not support document download and if the document is in a confined container the user will not be able to scroll.