I am wondering on how to make my website fit phones, computers and all. Any help? Thanks!
That is a big topic.
I built a lot of my pages at a width of 360, like this:
They fit on the very few phones I’ve had access to and they “work” on computers and tablets of various sizes. They don’t look great, and waste a lot of screen space, but they work, sort of.
An alternative is to create a mobile page, e.g. 360 wide, and a larger page that is responsive to screen size down to some reasonable tablet size.
There are two big issues I’ve encountered, and my experience is quite limited:
-
responsiveness is tedious, and the resulting functionality may not make sense at all as elements get moved around with size changes.
-
some UI features, such as drag and drop, simply don’t work on some devices (or OSes or . . .) One specific example is that you can’t use your finger (touch) to drag and drop on a Microsoft Surface even though touch works on the iPhone.
There is a lot to learn and experience in this area and I wish you luck.
2 Likes
I recommend building 2 versions of each page a mobile version at 370px - that goes down to 320 (old iPhones) and then another pages for desktop & tablet that goes from 1024 - 1220 px.
It can be done in a single page with lots of groups that hide and appear with page width but its a nightmare to manage.
Simon
7 Likes
To add content for normal screens, add display conditions based on screen size to fill the gap.
Thanks! So, what I would have to do is create two different apps or just 2 different pages?
Just 2 different pages - in the desktop page version select your mobile page so it loads that for mobile sized browsers
So for example you create index (desktop) & index_m (mobile)
2 Likes
Awesome thanks!
So, I did try it and still working on it. But when it publishes and all, when you open the website, if its on the index(laptop) and your on phone, how would that work?
On your phone it would load index_m
also helpful to know:
You can override index_m on your mobile browser
by going on your mobile browser and clicking. Use/view desktop site.
I’d suggest creating one page first, and finishing everything you need on that page first. Once you are completely done, and I stress this point, clone this page. Set the clone as your mobile version in the first page’s property editor.
Next, simply rebuild the UI of your cloned page for the new screen size. The downside of this method is that if you make any changes, you will have to do then twice, since you have 2 pages.
The other method is creating a responsive single page. This comes with its own set of headaches, as the responsive editor is very tedious to use and even a small thing can break your UI. I personally prefer the first method. It’s something to manage, but if you have certain features you may not want to be available in the mobile version, it’s easier to manage. I hope that helps.
1 Like
That’s why I don’t recommend it, it’s very difficult to keep two apps, and if your app is complex, you’ll regret it imo. I don’t like duplicating my time 
1 Like
This topic was automatically closed after 70 days. New replies are no longer allowed.