New App Design Considerations Part 1 - Screen Size

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.

1 Like

You’re off to a good start by asking the right questions. I agree that JavaScript is the way to go on new projects - you can do more.

You’re also right about scrolling. Vertically scrolling a form is fine. It was discouraged in the early days of web apps, but everyone is good with it now.

Have a look at Flexbox as well - it’s a great control:
https://blog.appstudio.dev/2018/11/introducing-the-new-flexbox-control/

I’m going to ask Tomo, our UI guy, if he can comment further.

Responsive Web Design can help you create pages that change their appearance according to device screen dimensions.

There is a lot of information about Responsive Web Design online like this introduction:
https://www.w3schools.com/css/css_rwd_intro.asp

What @tomo said. Don’t hardcode pixels or deminsions, use % instead as this allows your app to be more responsive and run without issues on many different devices.

Thanks all

I suggested in my original post that 360 x 640 was the smallest screen size in general usage. Any users with screens smaller will have to deal with zoom or scrolling. AppStudio doesn’t have the 360 x 640 size screen as the target screen size when creating a project. Is there a way to set 360 x 640 as the size or should I use one that is close? I’m concerned about scaling when the screen size if 20 pixels different than the design size.

You can specify the size you want on a form by form basis. Specify the height and width in the form’s Bounds properties.

Oops - I should have found tried that.