responsively-org / responsively-app

A modified web browser that helps in responsive web development. A web developer's must have dev-tool.
https://responsively.app
GNU Affero General Public License v3.0
22.67k stars 1.18k forks source link

Mobile thumbzone overlay #1169

Open astuanax opened 11 months ago

astuanax commented 11 months ago

🚀 Feature Request

📝 Description

It would be great to have a way to view the thumb zone area when you are developing for mobile. Something like in this arcticel: https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/

✨ Describe the solution you'd like

A drop down with the option to add overlays for different mobile phones, tablets, where you have left hand, right hand and both hands. In portrait, and landscape.

✍️ Describe alternatives you've considered

No alternatives exist. But here is a poc, I added the right hand views to see how it would work.

We wouldneed to have more overlay images for different tyepos of phones. Right now I only have iPhones.

https://github.com/responsively-org/responsively-app/assets/1730624/72421334-7d80-457f-9890-2c59510c242a

StarDust130 commented 2 weeks ago

Can I take this? 🔥

astuanax commented 3 days ago

yes, take it

SaunakNandi commented 2 days ago

@astuanax is it something like you need overlay for Samsung, google pixel also?

astuanax commented 2 days ago

I have some code already.