I finished my pomodoro clock and tried making some svg animations. Probably should’ve added more detail to the balloon. Any feedback and/or critiques are welcome. Thanks. CLICK ME
Just a few thoughts for you (about bugs)
- it’s not responsive on mobile (width turned out to be maybe 50px too wide for iPhone screen).
- I think the balloon should have been hit by the arrow but on my iPhone (safari) the balloon is lower than where the arrow ends up
Interesting idea!
1 Like
Thank you, I completely forgot to make sure it was responsive. I think I’ve fixed the issue thanks to you.
Yes it’s responsive now.
But here now you have a little design problem. Maybe not little. Think about the user of this. It’s a web app. People expect to scroll web pages, but not web apps. So, fitting everything in a small space on mobile is difficult, but possible.
Right now it’s responsive, but things are so big that on iPhone the total height of the page is almost twice the height of the iPhone screen. So I need to scroll down even to see the balloon. I believe what you’d want is for everything to be visible on one page. It takes a little creativity to figure out what’s best. For example, how to display the -/+ buttons etc…
I don’t know if you use Safari on desktop, but you can enable developer mode and there is a responsive design mode that allows you to view a page on different screen sizes. I don’t know if other browsers have that feature but it’s very useful.
I believe that designing for mobile first is incredibly important.
Keep up the good work!
1 Like