After developing my web app, I’m now combing through to make it more mobile friendly. Its my first ever web page, so I made the rookie mistake of not making it mobile friendly from the very beginning, which I kind of regret.
Anyway, my site depends a lot on popups, so I’m about to embark on a pretty cumbersome journey of transitioning all popups into being mobile friendly. Is there any advice on how to best do this? Even if it’s a tried and true pixel count to stay within, it will save me a lot of time.
Hi: Minimum width for mobile embeds on embed.ly is pegged at 280. This would accommodate any mobile device you should care about. If your target is iPhone 6 era and up, 375 is your minimum.
For pop ups I tend to just style them as 375 wide fixed width.
There are a million ways to skin that cat and it depends of course on the intent of the popup. (Obvs, my preferences don’t work for an image zoom type popup. But for notifications/confirm dialogs, just keep them small.)
I also keep them at around 500px - 600px and place the content at the center of the popup. It works as long as you only have one element (button / input etc) at each “row” if that makes sense.
If you are using Google Chrome or any other web browser for that matter, you can click ctrl (cmd) + shift + i to bring up the web developer tools. Once thats up you can click the toogle rendering icon to play about with the rendering sizes of your app. Its not exact or perfect by any means, but works nicely to give ideas about the responsive behaviour of elements…
