Ok I am not really that new anymore but I still would like this answered as if I am.
I am trying to figure out how to size my app. If I want to create an app for laptops and most desktop computer screens what size should I make the pages? I am not really understanding the difference between Centered, Full Width, etc.
I am not really worried about mobile access with this app but just want to make sure it looks good on the vast majority of everyday computer screens. Right now I just set the page at some arbitrary figure that looked good during the design process. 1628x937
4 Likes
This is a hard question to answer and will be dependent on the type of visitors to your site. For example, if it’s a more technical crowd they’re more likely to have larger screens.
You’ll most likely want to go with what is the smallest of most common screen sizes that you think will visit your site in order to avoid horizontal scroll.
Here’s a few places to get an idea of common screen sizes.
http://www.rapidtables.com/web/dev/screen-resolution-statistics.htm
http://www.w3schools.com/browsers/browsers_display.asp
http://www.w3counter.com/globalstats.php
1 Like
So the centered, full width are designed for what kinds of screens? Why are those the default screen settings for Bubble?
Those terms a little misleading. Think of them as specifying different pre-configured widths – i.e. small, medium, and large.
Mobile = small
Centered = medium
Full Width = large
The preset widths are only sizes that the creators of Bubble think are standard sizes you may want to use. You can really specify any width you want and you’ll notice that when you do that the “Preset page width” field changes to custom.
1 Like
Cool thanks. What would be your personal suggestion for a enterprise web application?
Probably somewhere around 980 – hopefully resolutions of 800px for desktops is almost dead in most enterprises.
You can see some common application sizes here: https://www.iteracy.com/resources/item/size-and-layout-of-a-web-page?page=size-and-layout-of-a-web-page
1 Like
So these presets just change the width of the page. full width is 1200 px so its going to fill more of the screen with your data. what i would do if you think people with smaller laptop screens will be using your app is use centered since its 960 px. Then i would use stripes to fill the entire space of your background. Even areas without an image and just a color bg i would create a stripe of the same color so it appears to extend with the screensize. you can see that i have done this with my homepage here. Everything appears to be fluid with page size and just the content stays in the middle. (ps. Mine is set to 1200 because I cant image very many desktop monitors that arent at least 1200 px wide)
1 Like
Very helpful buddy. I appreciate it. I assume that with the smallest setting it will expand out to fit a larger screen. Would this be incorrect?
The main content will not expand, but Bubble will center the page no matter what width you pick. So if you have a solid background it will look OK on screen sizes larger than your specified size, they will just see a lot of space on either side.
If you looked at the CSS on the “main-page” div you would see that they set left and right margins to “auto” which means that it will always stay centered.
Well I think I am going to use 1366x768 since it says that is number one resolution currently. I guess you could make two versions of the app. Then the landing page would allow you to choose between mobile and desktop version.
My app would show a lot of space on the sides when someone has a 1920x1080 resolution I guess.
Just realize that enterprises are not always the quickest to refresh technology. According to W3Schools, from 2014-2016, 1024-to-1280px width browsers made up about 13%-20% of the market.
So what would happen when you set the width to 1920px and a user’s screen is 1366px wide? (most commonly used nowadays apparently:)
http://www.websitedimensions.com/
Would the user need to scroll left and right?
More than likely yes, if you set the width higher than the width available, the user would have to scroll. Since 1366px wide has been (and still somehow is) the most common screen size, I like to set my content width to >1300px to avoid sideways scrolling and give myself some cushion known as padding.
*Edit: But for my first app that I’m still developing with Bubble, I’ve been using the 980px width that it started me out with and its been working out fine so far.
1 Like
The keyword is “minimum width”. Now that Bubble is responsive, you have much more flexibility to design the page for different screen sizes. So you could show the screen a certain way at 1920, 1366, 1280, et cetra. Just make sure you have a minimum width set low enough that it doesn’t require any of the screens to have horizontal scroll – 300px is a good minimum width that will allow you to design all the way down to mobile devices.
Hello,
Sorry to have to ask this. I’m hoping this is a problem with my computer only. But I noticed that when I set the preset page width to full-width the width gets set to 1200px and left aligned. So on my 15" 1400px screen there is a 200px-wide white empty space on the right.
If I set the preset page width to centered, the page becomes full width!
I don’t understand why. Am I doing something wrong?
Thanks for any help.
When you set the page width within Bubble, you’re setting the width of your site. So, if you set it for 1200px and view it on a larger screen, then your site will show up as only 1200px.
There are good solutions for this within Bubble. I recommend reviewing the bubble videos on making your site responsive (which means adapting it based on the width of the user’s screen). This will help you design the user interface so that it looks good on devises of all different widths and ensures you don’t have extra white space that’s not intended.
Hi. I couldn’t;t see a link to your site… could you please post the URL? I can’t figure out how to make my 960 bubble page be centred when the browser window id bigger than 960. Thanks.
