Design resposnive and scale down or mobile first and scale up?

Questions
1

Hi, so I’m nearly finished creating a beta version of my web app.

While the app looks good on desktop with 1200 px, when I try to use the responsive mode everything begins to break down when I try to scale down.

And so I would need to redesign the web app.

I would like to ask what is your approach to design a web app that could both satisfy desktop and mobile users.

Should I start from 360 px and scale it up or should I start from 1200 px again and constantly make changes and so that it would eventually fit mobile and desktop?

Thanks.

2

I would say, it depends on the app.

If you’re building an enterprise type of dashboard app, mainly used in an office/desktop setting. I would design for desktop > tablet. And not even bother with mobile phones. Then you can always develop a dedicated mobile app, and be cheeky enough to charge more for it (e.g. higher tier plans get access to mobile app).

If you’re building a more everyday type of app, e.g. a sneaker listing app or what have you. I would go Mobile > Tablet > Desktop. Especially if your target audience are younger, a lot of youngsters today access internet on their pocket machines, some doesn’t even have desktop/laptops. * gasp *

3

My app would be mostly for distance education and targets 6-20, so I guess mobile first then to desktop.

I want to ask if you design it from 360px how do you scale it up since when I use responsive mode from 360 px to like 1200px the groups and elements would not move and it would just widen the width. I would also not be able to move around the groups since my size is limited to only 360 px.

Thanks.

4

The responsive engine is a beast on its own. I spent hours watching videos and doing trial and error before I was able to make sense of it. It’s hard to wrap up in a forum post how it works and all the quirks. The best suggestion I can give is, watch videos and do trial and error, unfortunately.

For the specific case you mention, have a look at wrap to previous line.

5

Thanks for the tip, it worked and it wraps to the previous line, but I would need to see some videos to explain how the responsive functionality works.