# Designing mobile only -- what width for pages?

**URL:** <https://forum.bubble.io/t/designing-mobile-only-what-width-for-pages/86161>\
**Category:** Need help\
**Created:** [April 12, 2020, 9:55am UTC](https://forum.bubble.io/t/designing-mobile-only-what-width-for-pages/86161 "2020-04-12T09:55:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![richclunan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/richclunan/32/57633_2.png) [@richclunan](https://forum.bubble.io/u/richclunan)\
**Post date:** [April 12, 2020, 9:55am UTC](https://forum.bubble.io/t/designing-mobile-only-what-width-for-pages/86161/1 "2020-04-12T09:55:07Z")

</div>

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?

Thanks.

---

<div class="post-metadata">

**Author:** ![boston85719](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/boston85719/32/77286_2.png) [@boston85719](https://forum.bubble.io/u/boston85719)\
**Post date:** [April 12, 2020, 5:35pm UTC](https://forum.bubble.io/t/designing-mobile-only-what-width-for-pages/86161/3 "2020-04-12T17:35:11Z")

</div>

> **[Mobile Screen Resolution Stats Worldwide | StatCounter Global Stats](https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide)**
>
> This graph shows the stats of mobile screen resolutions worldwide based on over 10 billion monthly page views.

[http://screensiz.es/phone](http://screensiz.es/phone)

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.

---

<div class="post-metadata">

**Author:** ![sat\_miha](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sat_miha/32/58187_2.png) [@sat\_miha](https://forum.bubble.io/u/sat_miha)\
**Post date:** [April 12, 2020, 11:12pm UTC](https://forum.bubble.io/t/designing-mobile-only-what-width-for-pages/86161/4 "2020-04-12T23:12:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![solinz](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/solinz/32/62584_2.png) [@solinz](https://forum.bubble.io/u/solinz)\
**Post date:** [April 13, 2020, 12:58am UTC](https://forum.bubble.io/t/designing-mobile-only-what-width-for-pages/86161/5 "2020-04-13T00:58:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![richardaxeoz](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/richardaxeoz/32/56006_2.png) [@richardaxeoz](https://forum.bubble.io/u/richardaxeoz)\
**Post date:** [April 13, 2020, 1:18am UTC](https://forum.bubble.io/t/designing-mobile-only-what-width-for-pages/86161/6 "2020-04-13T01:18:59Z")

</div>

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.

  
Just my 2 cents.  
All the best!  
Chees!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\
**Post date:** [June 21, 2020, 9:55am UTC](https://forum.bubble.io/t/designing-mobile-only-what-width-for-pages/86161/7 "2020-06-21T09:55:07Z")

</div>

Closed on June 21, 2020, 9:55am UTC

This topic was automatically closed after 70 days. New replies are no longer allowed.
