Hello there!
I was wondering what is the best approach making your web app ready for mobile and small devices.
Do you make the web app completely responsive so it works on all devices or do you create a whole new template set only for mobile (mobile version)?
Responsive all the way.
The best approach is to start designing with a 300px width in mind.
Don’t start working on a 1200px or 1440px desktop grid and then try to make it responsive for smaller screens.
Start working with the 300px width canvas. Make your design work there and then scale up so the UI and UX makes sense for bigger screens.
It’s a game changer. It’s very easy to create nice looking apps on a 1200px canvas. But when you try to scale it down you will find yourself with weird/ugly UIs because of the lack of screen estate. Start with the constraints of small screens and let your imagination flow from there.
@JonL suggestion is one way to go about that people have a lot of success with. I work in a different way, as most of the apps I build are desktop-first. I design for a 1200px wide screen and make sure it looks ok down to about 980, and all the way up to megawide displays. I put all the desktop design elements in a group called “Desktop container.”
Then, I create a 2nd mega group called “Mobile container” where I create a mobile friendly design that works on tablets and phones. It’s more work for sure, but it lets me design the best implementation for the screens and user contexts.
There’s not best practice set in stone, but I go with @JonL’s solution too. I find it helps me keep focus on designing for mobile in general (not just responsiveness, but UX and everything). I also agree that Bubble’s default mobile screen width is too wide, I always go for 300px.
A paradigm shift in my learning process of responsive design was to get to know the Wrap to previous line if page is stretched setting in the responsove editor. Understanding that logic completely changed how I went about planning my apps (if you go mobile-first).
How do you manage the navigation bar? Do you set up a mobile and desktop navigation and display them based on width or do you “transform” the navigation (e.g. showing nav links)?
I normally use sidebar for navigation.
Are you building a simple site or a complex app? Top navigation is good for marketing but not for web apps. There are some exceptions of course, but I would start with a sidebar if you plan on responsiveness.
There is no issue in making 1200px responsive on smaller devices. Just some basic tips:
Once you have your basic template you can then clone it to create other pages.
This topic was automatically closed after 70 days. New replies are no longer allowed.
