Hi, I want to cut down the amount of work in the first iteration of my app, so I’m making it for mobile only – so there’s less responsiveness to fiddle with.
(So on desktop I presume it will display with large spaces left and right)
How to set this up? What width should I make my pages?
Apparently only about 1.59% of all mobile devices used in March of 2020 were of width 320px…everything else is 360px or above. Bubble in the responsive editor has mobile at 375px.
You could do the lowest of 320px. I personally use 360px as 320px limits my ability for designing elements to include all things I’d like to. Remember you will need to think about margins as well, so if going for a page of 320px you might really be working with about 300px of space given a 10px right and left margin; but of course you could opt for no margins.
It depends on the density of texts and groups on your site, in most cases the difference will not be noticeable (plus still plays a big role as a browser makes an upskale). I prefer to do the minimum width and adjust the responsiveness settings.
If it responsive The page collapse from right to left.
You divide your page to 2 or 3 groups of 320 lets say consider 10 margin both side or so within group. So when it is collapse it remain as is.
Or do 320 all the way… it is still good just like Instagram open in a browser
Hi @richclunan, I am new here also but I figured out that is eventually less work to make an app responsive than doing a version for mobile and another to the web.
Not only that.
The app feels the same way across platforms so who knows your app in a mobile does not need to figure out where are the links in a desktop version and vice-versa.
And, even if you make a page that looks good in a mobile upright, it is still going to look weird in a mobile landscape version and vice-versa.
Responsive is the way to go in my opinion.
Have a look in this video explaining how to do it and you will see that its simple.