How to make your web app mobile

This is a crowd contributed document with guidelines on how a mobile web app should be in our opinion.

Enable Microsoft, Google and iCloud login

When using your web app, users need some room to save theyr files to.
By enabling them to save on theyr Microsoft and/or iCloud, and/or Google drive, you're saving space on your server and, at the same time, allowing them to save data in some place they will be comfortable with.
Also make sure a single account could be associated with more than one single Google, Microsoft and iCloud account.

Rely on username, not email address

As device get more popular, people make multiple accounts (in example, I have 2 Google accounts, 1 Microsoft account and 1 iCloud account).
If you rely on email addresses to manage login information, you're preserving users to link theyr accounts to a single user on your web app.
Instead, create a username and let the users add theyr cloud accounts to it to store data.

Make your web app responsive

Ideally, nowadays, web apps interfaces are split in 2 or 3 main sections: a left toolbar, the main content, and a right toolbar.
Some apps also have a top menu and, eventually, a footer or status bar.
If you just put a small button overlay on the left and right sides of the app, the user should see the main app content on the screen, launching the toolbars, menus and status only when necessary, by tapping such buttons.
This way, you'll only have to bother with the main content and your only "problem" will be distinguishing between a tap and a swipe, taking according actions.
When a user finally taps on a button, he or she will make the bar popping out, then tapping on what he or she needs, then the bar "returns" hidden.
If you do so, your web app will work with smartphones and tablets, other than just PCs.
Also, don't use preventdefault if content is overflowing (try not to make it overflowing anyway).
But create a mobile CSS and interface, don't just pretend "it will work anyway".

Don't create dedicated apps

Just don't.
Personally, I'm not excited with web apps which enforces me in downloading a dedicated Android or iOS app to see them on my device.
I guess the same goes for everyone, it's just not elegant.

Use "preventdefault"

Some web apps are already responsive, but they have some overflowing elements which allow the browser to scroll the page orizontally.
Don't! Use preventdefault JavaScript function and make the app fit horizontally on any device, maybe by scaling the font and resizing the elements on the page.
Also, don't use fixed sized elements, HTML documents could be dynamic if used correctly.

Don't rely on plugins

Mobile browsers don't use Flash, Java, Silverlight or any other custom plugins to work.
Keep this in mind when developing your web app.
JavaScript has loads of APIs to deal with Audio, Video and 2/3D graphics.
Just use them and get rid of everything else.

Get collaborative

Most contents are not created by a single, but rather by a team.
Allow your app to be used by a team working on a single document, even better if at the same time.
In this purpose, you could allow team creation as a side login (most usermanes connected with the same resources, which are shared).

Avoid pop-ups and dialog windows in general

Some web apps are designed to use Pop-Ups and/or confirmation windows which, on some devices, just don't display right.
Try avoiding such behaviour by either making them responsive or deleting them at all.