1 00:00:02,240 --> 00:00:05,740 Let's start simple with the size of the device 2 00:00:05,750 --> 00:00:12,140 we're running on. Right now I have relatively big emulators here and I will now change this and I'll 3 00:00:12,140 --> 00:00:13,090 change it on Android 4 00:00:13,100 --> 00:00:18,620 but of course we could do the same on iOS. Here on Android and I will create a new virtual device which 5 00:00:18,620 --> 00:00:20,690 is actually way smaller 6 00:00:20,690 --> 00:00:26,570 and for that in my list of images here when creating a new virtual device, I'll pick a super small one 7 00:00:26,660 --> 00:00:27,410 like this 8 00:00:27,410 --> 00:00:30,040 3.7 inch phone here. 9 00:00:30,050 --> 00:00:36,290 Now one important side note, you might be thinking that not many users use such small devices anymore 10 00:00:36,470 --> 00:00:39,980 but that really depends on the market you're targeting. 11 00:00:39,980 --> 00:00:45,980 If you're targeting primarily the US, well then maybe you don't really need to optimize your app for 12 00:00:45,980 --> 00:00:47,360 small devices 13 00:00:47,360 --> 00:00:52,910 but if you're targeting the whole world or maybe some emerging countries, well then that looks different, 14 00:00:52,910 --> 00:00:58,340 so you definitely want to know what your target is and which devices your target users use. 15 00:00:59,150 --> 00:01:06,170 So I will create this device here, a relatively small one, simply click next here, pick Android pie in 16 00:01:06,170 --> 00:01:09,640 my case here as the Android version and then finish this 17 00:01:09,770 --> 00:01:14,190 and now this will create this virtual device and now I will also launch it. 18 00:01:14,240 --> 00:01:19,740 So now this is booting up, on my second screen I'll bring it back here in a second, 19 00:01:19,770 --> 00:01:22,110 I'll close this Android device for the moment, 20 00:01:22,110 --> 00:01:27,330 this bigger one and here's my smaller one booting up. 21 00:01:27,430 --> 00:01:33,550 So let me also increase this a little bit and this just increases the size in which we can see it, not 22 00:01:33,580 --> 00:01:36,300 the dimension of the phone 23 00:01:36,420 --> 00:01:43,010 and as you can already tell, this is definitely a smaller device with less pixels available both on the 24 00:01:43,010 --> 00:01:45,640 on the height and the width. 25 00:01:45,660 --> 00:01:50,360 So now with that, I already am back in my project, 26 00:01:50,380 --> 00:01:54,900 this is the project we worked on in the last sections and you find it attached in case you didn't follow 27 00:01:54,900 --> 00:01:59,730 along here and I already started my expo server with npm start 28 00:01:59,730 --> 00:02:06,410 and by hitting a, I now install expo and then this app here on this emulator. 29 00:02:06,510 --> 00:02:13,460 So let's wait for this to finish and launch and here's my app and we can already tell that our app is 30 00:02:13,550 --> 00:02:17,200 certainly not optimized for smaller screens, here 31 00:02:17,210 --> 00:02:22,060 the buttons are not really positioned that well so something's wrong there 32 00:02:22,060 --> 00:02:26,090 and now let's see how it works when we start the game. 33 00:02:26,090 --> 00:02:37,490 Well then here this seems to work, if I click Start Game, well that certainly is working here but 34 00:02:37,550 --> 00:02:42,670 we have an issue on our starting screen and maybe here, we want to change some sizes as well, maybe we want 35 00:02:42,670 --> 00:02:49,730 to remove the margin or reduce the margin we have between this number and this box with our inputs here, 36 00:02:50,330 --> 00:02:58,490 maybe want to increase the width of our boxes down there, our log of the rounds we had have, 37 00:02:58,490 --> 00:03:03,590 so maybe we want to change something there and when the game is over, maybe we want to shrink the size 38 00:03:03,590 --> 00:03:08,570 of the image a little bit but because this is super large and it actually has one huge disadvantage 39 00:03:08,810 --> 00:03:12,320 because since this page isn't scrollable, I can't reached the new game button, 40 00:03:12,470 --> 00:03:14,950 so that's a real game breaker, 41 00:03:15,140 --> 00:03:20,740 it's really breaking our game, this distance here also is a bit too big between the image and the 42 00:03:20,780 --> 00:03:22,280 text. 43 00:03:22,280 --> 00:03:26,000 There's a bunch of work to do just because we're on a smaller device, 44 00:03:26,000 --> 00:03:31,610 this doesn't even respect the fact that our users might rotate the device which by the way at the moment 45 00:03:31,640 --> 00:03:36,150 is disabled anyway and so I'll come back to this and how to enable it in a second. 46 00:03:36,170 --> 00:03:43,010 So let's start working on that and let's learn how we can actually calculate our space we're distributing, 47 00:03:43,010 --> 00:03:49,160 the sizes we use in a more dynamic way and make sure that our app looks good on all kinds of devices.