I am designing a new app completely from scratch. Few decisions have been made thus far in the process of prototyping the backend services and simple UI test programs.
Premises:
- Using AppStudio as the main programming IDE tool and to create the webapp.
- Using PhoneGap as the method for creating Andriod and IOS “native” apps.
- Targeting as many devices as possible from SmartPhones to Desktops.
- Programming in JavaScript - AppStudio was originally picked because of Basic language was supported. After prototyping many features, I found it was best to write the code in JavaScript, as that’s what you’re going to look at in the console log.
The program flow is similar to surveymonkey and is as follows: The questions are downloaded, presented to the user, and the data is uploaded back to the server. This discussion surrounds the process of designing the UI for a user experience that works and doesn’t turn off the users.
The first question to answer is what is the screen size we are targeting. In this case, I want all normal sizes in use today looking really great. I am would like to have 80% of all users have a good UI experience. I don’t care about users who have outdated equipment whose screen size is really small, like 200x400 pixels. They may have to scroll a lot - buy a new phone - ask mom for her old phone - something.
After some research I found that as of 3rd quarter 2019, the smallest screen in wide usage (over 20% of smartphone users) is 360x640. This is an increase over the last several years from 320x460 https://discuss.appstudio.dev/t/smallest-screen-dimensions-these-days/436. This link is probably the easiest to use to get current and historic screen size data: https://gs.statcounter.com/screen-resolution-stats
Another consideration is scrolling of the screen is aok now more than in the recent past. But the consensus is (and I couldn’t agree more) that horizontal scrolling is awkward. Vertical scrolling has become acceptable as long as the amount of vertical scrolling must be reasonable. With that in mind, we’re really only worried about the width of the screen.
Further to complicate is screen rotation, something that happens after we have painted the screen in a particular layout. Rotation events need to be handled well. Especially if zoom is employed in one orientation.
Viewport vs screen size is another consideration. Have you noted web pages that render on your brand new smart phone so small you can’t see it. Viewports is a typical method of avoiding this problem. The viewport (on smartphones) is generally much smaller dimensions in pixels than the screen itself. The viewport may be 360x640 while the screen is 1440x2560 pixels (Samsung S7). AppStudio automatically, when you set the screen sizes appropriately in design mode, uses a viewport method.
I’ve seen in the description of BS4 Grid there being 5 screen size classes:
-
.col-(extra small devices - screen width less than 576px) -
.col-sm-(small devices - screen width equal to or greater than 576px) -
.col-md-(medium devices - screen width equal to or greater than 768px) -
.col-lg-(large devices - screen width equal to or greater than 992px) -
.col-xl-(xlarge devices - screen width equal to or greater than 1200px).
I’ve also found references https://mediag.com/blog/popular-screen-resolutions-designing-for-all/ that talk about different sizes and a suggested scheme of creating a set of screen layouts based on total screen size. They suggest anything under a width of 480 is a smart phone, 480 to 767 is a medium tablet, 768 to 991 is a large tablet, while 992 and larger is a desktop. Somewhat similar.
On the other hand, the CSSGrid control, which should automatically adjust for you, does not have the screen size.classes (which makes sense - it’s supposed to do it automatically). And just because these are the categories of screen sizes, that doesn’t answer the question of what size should we target as the smallest, so we can gauge everything else about screen layout and UI.
Bottom line for today is 360x640 is what I will be targeting as the smallest. I am going to take a look at using zoom for small screens, vs forcing the horizontal scroll.
Before moving on to the next design consideration, I wanted to bounce these ideas to make sure that designing the smallest screen for the app at 360x640 was a good starting point, knowing that I must also gracefully and elegantly handle larger screen sizes.