00:00:10 ◼ ► So this summer, as most summers are filled with, there's been a sizable amount of speculation
00:00:31 ◼ ► But what I thought would be interesting to dive into this week is to talk a little bit,
00:00:41 ◼ ► but I think more generally an interesting discussion around making apps and developing apps
00:00:48 ◼ ► and designing apps in a way to accommodate the varying screen sizes that we have to deal with.
00:01:01 ◼ ► so in terms of which devices are knocked out from it, you have to deal with the iPhone 5 size,
00:01:40 ◼ ► I think we finally got rid of the iPad 2, which was the one that was holding us back on that.
00:01:52 ◼ ► I remember distinctly developing my initial applications in a world where developing an app
00:02:23 ◼ ► If I'm doing localization testing, when I load up German, do any of my strings overflow and get truncated?
00:02:41 ◼ ► which at the time was this genius way to make the screen better and in some ways show more on it,
00:03:09 ◼ ► Maybe you could have gotten away with slightly smaller fonts and a few other tricks like that
00:03:25 ◼ ► which again wasn't too bad of a transition because a lot of layouts tend to be flexible vertically.
00:04:17 ◼ ► They were trying to push that a little bit with the way that it was a phone that you could use in either orientation,
00:04:22 ◼ ► but still, there's a lot of things that we have to deal with when we're having to navigate that.
00:04:27 ◼ ► I'm in the process of finishing up a big update and just got a whole bunch of new localization strings in.
00:04:32 ◼ ► It takes a non-substantial amount of time to go through my app in all the different screens
00:04:38 ◼ ► and on all the different test devices I have to make sure it looks good in a variety of different languages.
00:04:58 ◼ ► You know, whatever the most common screen size is, which I think for me and for my phones is the...
00:05:18 ◼ ► And do I want to optimize for that? I think for me it's about 50% of my users are on that screen size.
00:05:41 ◼ ► which I've got to say I'm slightly encouraged by, that there's not two new screen sizes.
00:05:46 ◼ ► But there's going to be this whole new screen size, and this one sounds pretty different
00:05:55 ◼ ► in terms of it may have a cutout into the top of the screen, which you didn't have to deal with before.
00:06:00 ◼ ► And it may be edge-to-edge, and so now you have to deal with margins where you can't go put your content
00:06:31 ◼ ► but you also now have partial screen apps, and partial screen apps of so many different sizes and widths
00:06:38 ◼ ► that ultimately with anything I do on the iPad, it's just sort of like make things as absolutely fluid as possible,
00:06:56 ◼ ► because it does relate in some ways to the realities of designing a modern app for multiple screen sizes,
00:07:02 ◼ ► because when Apple introduced universal layout, and I forget exactly when this main thing was,
00:07:08 ◼ ► maybe around iOS 7 or 8, when they introduced this concept of you don't have a separate iPhone and iPad,
00:07:20 ◼ ► and you have just one interface that adapts itself to whether it's running on a phone or an iPad.
00:08:13 ◼ ► of you have a separate iPad app and an iPhone app. Like even in the store, they're separate apps.
00:08:18 ◼ ► These days, the market and Apple are strongly encouraging people to have one universal app
00:08:25 ◼ ► that runs on every size phone and every size iPad, and can transition between the sizes while running.
00:08:32 ◼ ► And if you try to do this, as I said, if you try to do this without universal layout stuff,
00:08:47 ◼ ► And then if you do it with the universal API stuff, it's still not easy. It's just less difficult.
00:09:01 ◼ ► or I guess now the 5.5 inch screen landscape mode on the phone that kind of treats split views like iPad layouts.
00:09:10 ◼ ► So you have this little tiny skinny bar on the left and slightly less skinny bar on the right.
00:09:15 ◼ ► That messes up universal layouts like crazy. You have different things like certain layouts will work in portrait on the iPad,
00:09:31 ◼ ► because the aspect ratio of your app can change and you have to be able to accommodate that in most cases.
00:09:44 ◼ ► in fact I almost never follow this advice, but it's something I keep in the back of my head,
00:09:55 ◼ ► sticking to UI kits, stock layouts, stock components, not trying to be too fancy with custom stuff.
00:10:02 ◼ ► This was helped tremendously with the move away from textured bitmap interfaces from iOS 6 and earlier,
00:10:18 ◼ ► That has helped us a lot, because if you're still doing pixel perfect graphics heavy design,
00:10:31 ◼ ► Whereas if you have a more visually simple and more flexible, more web-like layout in your UI,
00:10:39 ◼ ► then when a new phone comes out or a new iPad comes out, you might not have to do any real work on the UI to get it to work.
00:10:51 ◼ ► where we don't have a huge team like Instagram does, although they're a bad example since they still don't have an iPad app,
00:10:58 ◼ ► but we don't have a huge team like some of these big companies do that can throw 15, 20, 100 engineers at their iOS apps,
00:11:06 ◼ ► and somebody has a team responsible for adapting to new screen sizes. No, it's just us.
00:11:11 ◼ ► And adapting to new screen sizes is not something that we should be spending a ton of our time on.
00:11:17 ◼ ► It's not a great use of our time. That should be something that we keep as simple as possible so we can focus on other stuff about our apps.
00:11:24 ◼ ► And so we are very well rewarded by using stock stuff, by not altering it too much, by not customizing it too much,
00:11:42 ◼ ► "Well, it's the same width, but just add another table row." It was 88 points taller, so that's two toolbars or a table row, basically.
00:11:50 ◼ ► It was very, very easy to adapt to that, because most apps had the scrolling table view.
00:11:58 ◼ ► But the ones that didn't, the ones that had the big graphical things, some of those apps are still running Letterbox today.
00:12:05 ◼ ► Some of them are still not updated. Even the Tesla app was not updated for the screen size for a very long time.
00:12:13 ◼ ► Modern apps that are being updated, or banking apps, they're famous, the reason they haven't updated in a lot of these cases,
00:12:28 ◼ ► Don't get too crazy with hacking UIKit or making custom layouts that can't be very easily adapted to new screen sizes,
00:12:54 ◼ ► My analytics basically reflects what you said about yours, which is about half the people are using the 4.7 inch screen size.
00:13:02 ◼ ► And unfortunately, the other half is split pretty well between the iPhone SE 4 inch size and the Plus phone 5.5 inch size.
00:13:21 ◼ ► And one of the concerns I had when choosing my own device even, is when I was weighing whether I wanted to get a Plus size phone or not,
00:13:30 ◼ ► one of the downsides of getting a Plus size phone for me is that I would, my own use of the app would be skewed a little bit towards this large screen,
00:13:41 ◼ ► And because I have a self designed app, I think it's important for me to be using what the most of my customers are going to be using,
00:13:57 ◼ ► Yeah, because I think from an optimization perspective, like the only sane approach that I've really been able to land on is to optimize for one device,
00:14:10 ◼ ► And then in my technical approach, do make no assumptions about the size of things, and make everything essentially scale up and scale down
00:14:26 ◼ ► So like optimize for the midpoint, just like you said, and especially because it works out well, the middle size is the most used size,
00:14:33 ◼ ► and so you can optimize for that, and then most of my code is structured such that you can give it any arbitrary height or width,
00:14:44 ◼ ► and it will adjust the frames and the layout accordingly, but it's doing essentially just a dumb scaling of that.
00:14:53 ◼ ► It's not radically changing things, it's not like when you go down to the small ones, suddenly the controls that were laid out side by side
00:15:01 ◼ ► are now on top of each other and it's taller, like I've never gone down that road, and instead it's basically just having things scroll up,
00:15:09 ◼ ► sort of scale up and down, but not doing it in the way that it looks bad, and it's not rendering it at a small size and squishing it up or down.
00:15:22 ◼ ► And then usually it's just a question of adding a few adjustments to make sure labels don't get truncated and so on.
00:15:30 ◼ ► But anything other than that can just, in my experience, become so unwieldy to try and keep track of,
00:15:46 ◼ ► So in watchOS we have the same problem but in a slightly different way, where there's two different watch sizes,
00:15:53 ◼ ► a big one and a small one, and in that case I actually designed my apps for the small size,
00:16:00 ◼ ► and then the way watchOS is geared and designed, it'll almost naturally just expand out to fill the bigger 42mm size watches,
00:16:14 ◼ ► It's an approach that's not perfect, it's definitely one of these things where I think you have to just become okay with the fact that you're not,
00:16:35 ◼ ► where things are on 8 pixel grids and terms that you start to get into for how people are being very precise in their layout.
00:16:43 ◼ ► I tend to do something sort of like that, like I'll do a fairly precise layout to make sure the aesthetics are perfect on that middle size,
00:16:56 ◼ ► I mean, it's probably a fair place to confess too that I also don't use size classes in any of my apps.
00:17:05 ◼ ► Yeah, I mean, size classes, storyboards, like the crazy advanced stuff that you can do in nib files now,
00:17:14 ◼ ► there's all this stuff that is theoretically possible to do there, where when you open up a file in Interface Builder,
00:17:21 ◼ ► or an Interface Builder file in Xcode now, you see, you know, you can look at this layout in this phone size,
00:17:29 ◼ ► this phone size, this layout, this layout, I mean, you have this huge array of options there,
00:17:33 ◼ ► and that's just so cumbersome to me, and especially because those kind of files are so opaque.
00:17:45 ◼ ► and there's a bunch of math, and it just sort of sits there, and as long as I don't hard code any values,
00:17:51 ◼ ► if all the values are relative and parametric, so I can change them, every now and then we'll have something
00:17:59 ◼ ► where it's like on the small phone, decrease the padding amount a bit more than you do on a bigger phone,
00:18:06 ◼ ► or things like that, but in general, like taking that approach where it's very straightforward and simplistic,
00:18:12 ◼ ► is the only approach that I found that keeps me sane, because otherwise there's just too many things to think about,
00:18:18 ◼ ► and it's optimizing for something that I don't know, maybe for different, for other apps it would be super important,
00:18:25 ◼ ► but in general, I find that a really well thought out, well conceived design for the middle case,
00:18:39 ◼ ► If it doesn't, that's probably an indication that it's a bad design in the first place, rather than the need to be like,
00:18:45 ◼ ► "Okay, well let's do this totally different thing on this size, let's do this totally different thing on this size."
00:18:50 ◼ ► And so, that's the approach I take, and it seems to work pretty well, I mean, maybe if I spent more time optimizing it,
00:18:58 ◼ ► it would be better, but the reality too is, like you said, it's hard because I've tried having multiple phones
00:19:07 ◼ ► that I switch between on a regular basis, in terms of, it's hard if you don't use a phone or a layout on a regular basis,
00:19:16 ◼ ► to really know what's going to feel good there and be nice, because as much as it's, you know,
00:19:25 ◼ ► when I'm developing, I'm constantly, on a regular basis, I'm cycling through which simulator I'm running it on,
00:19:32 ◼ ► or what iPhone I'm testing on at my desk, but it's never going to be the same as if I was actually using that phone
00:19:39 ◼ ► on a day-to-day basis, using the app in regular use, and unless I'm willing to do that, which can get complicated and awkward,
00:19:48 ◼ ► and some of the things that have held me back from doing that before are getting slightly better,
00:19:52 ◼ ► and I was eleven with the sinking of health kit data and things, but still, you have all the issues with like,
00:19:57 ◼ ► which phone is your Apple Watch paired to, or do you pair a different watch to each phone,
00:20:02 ◼ ► and just hope for the best, and hope it all sinks out, but in general, I find I'm just going to pick one,
00:20:13 ◼ ► Yeah, because you have to draw a line somewhere, you know, as Indy's, like, how much time do we have,
00:20:18 ◼ ► how much money do we have for devices, how much of a hassle is it to switch between them,
00:20:22 ◼ ► you know, one of the things I usually do is, most of my simulator use, I use the smallest device,
00:20:30 ◼ ► so I use like the iPhone SE for the phone, I use a 38mm for the watch, and then on, you know,
00:20:36 ◼ ► on my actual devices, I have a 42mm watch, and I have the 4.7 inch phone, and so, because about half of my design
00:20:43 ◼ ► and development is on the simulator, and about half is on the device, I get a decent blend there.
00:20:47 ◼ ► I also, you know, because again, like, failing on a small device, I feel like is a worse failure mode
00:20:53 ◼ ► than not looking great or not taking advantage of a big device, so my standalone testing device,
00:21:00 ◼ ► you know, my main phone, which I do most of my testing on, is the 4.7 inch, but also on my desk,
00:21:06 ◼ ► in a charging dock all the time, is an iPhone 5S, and so whenever I need to test something that I think might be slow,
00:21:13 ◼ ► or might, where like I need to see how it fits on the small screen, like in my hand, not just in the simulator,
00:21:19 ◼ ► I kick it over to the iPhone 5S, and there, you know, I can't like take this phone outside and do anything,
00:21:24 ◼ ► there's no SIM, I don't have any service on it, it's just an old iPhone 5S, but it is like a physical device
00:21:30 ◼ ► of the smallest size that my app supports, that is useful for testing. I don't have a 38mm watch,
00:21:36 ◼ ► just because I don't, you know, my watch apps aren't that important to me, so it's not that big of a deal,
00:21:40 ◼ ► I feel like, you know, the simulator is good enough for that, and similarly with iPads, I don't have a 12.9 inch iPad Pro,
00:21:48 ◼ ► because like, this is another area, you know, you have to kind of figure out like for your app,
00:21:52 ◼ ► if hardly anybody uses it on the watch, or hardly anybody uses it on the iPad, you don't really need to invest too much
00:21:59 ◼ ► in optimizing those, like, the overcast interface on the iPad is fine in landscape, and pretty rough in portrait,
00:22:07 ◼ ► and the main reason why is because almost no one uses overcast on the iPad, and I used to optimize like crazy for it,
00:22:14 ◼ ► and it was tons of overhead, tons of code, tons of testing, tons of bugs, trying to manage the universal layout
00:22:22 ◼ ► between portrait modes on the iPad, and so when I redesigned the layout for 3.0 with the little slidey-pain thing,
00:22:29 ◼ ► I kind of half-assed the iPad portrait version, because almost no one uses it, and it was going to be a huge ordeal,
00:22:36 ◼ ► to try to fix that, so now if you launch overcast on the iPad, you get this giant, expansive white space that includes the play controls,
00:22:45 ◼ ► and a little square thing above it for artwork, and to fix that again would be so much work, I just decided this isn't worth it to me,
00:22:52 ◼ ► and you have to do that, you know, with some of these things, like if no one uses something, that's just, you know,
00:23:01 ◼ ► This episode of One of the Radars brought to you by ZOJO. ZOJO is a cross-platform development tool for creating native apps for desktop, mobile, web, and Raspberry Pi.
00:23:17 ◼ ► With ZOJO, you just write one version of your app, so for example, you can write it on the Mac, and then you check a checkbox,
00:23:23 ◼ ► and you can have a completely native Windows version as well, and ZOJO apps use native controls, so your app looks at home on every platform.
00:23:38 ◼ ► It's currently used by over 300,000 developers worldwide, from students to Fortune 500 companies.
00:23:44 ◼ ► So go take a look at their site, and you will see just how many companies you know use ZOJO.
00:23:49 ◼ ► It's free to use, and licenses are required to build standalone applications, so you can see for yourself, try it out for free.
00:23:55 ◼ ► Go to ZOJO.com, that's X-O-J-O dot com slash radar to find out more, and listeners of this show can get 20% off any license with the code radar.
00:24:09 ◼ ► So the thing that probably makes sense to wrap up talking about is a little bit of expectations for what's going to happen in a few weeks when the new iPhones are released,
00:24:19 ◼ ► because I will say one of the things that does drive me crazy is when we're in a cycle like this where we had WWDC and Apple laid a few hints,
00:24:30 ◼ ► maybe there's a few APIs that are kind of indications that things are going to be different,
00:24:35 ◼ ► but then we spend the summer working, and we're working on updates for iOS 11, and just trying to be all ready,
00:24:41 ◼ ► and then in the back of my mind I know that I'm developing an app without knowing a big important aspect of how this will ultimately be used.
00:24:53 ◼ ► That there is this information that exists in the world that I do not have that I can't really make any choices about in the meantime.
00:25:02 ◼ ► So it always leads to this mad rush in the sense that what I expect will happen is sometime in early September,
00:25:11 ◼ ► probably the first Wednesday or the second Tuesday of September, there will be an event, Apple will announce it,
00:25:19 ◼ ► "Hey, show all this fancy new stuff on the new phone," is why they expect it will have a new layout,
00:25:24 ◼ ► and then a few hours later there will be a new version of Xcode that comes out that includes a simulator for that screen size,
00:25:36 ◼ ► if there's weird constraints or things that we have to do, the way we indicate to the OS that we're sort of ready for it,
00:25:43 ◼ ► because typically what Apple has always done is when there's a new screen size you have to actively opt into it,
00:25:49 ◼ ► and if you don't you just run in a compatibility mode where typically the phone will report to your app that the screen is
00:26:06 ◼ ► and so you get tricked into thinking, "Oh, I can just run like I'm running on a plus size or a regular or a four-inch size,"
00:26:14 ◼ ► and then we'll kind of have this bad rush, and then I'll probably be getting up in the middle of the night to pre-order a phone
00:26:30 ◼ ► or I used to go and wait in line at the Apple store in the middle of the night, but I think I'm getting too old for that,
00:26:36 ◼ ► so I'll just wait around for the UPS guy, and then just kind of like hope that, you know, grab the phone as soon as it comes.
00:26:41 ◼ ► The first thing I do is I'm just kind of sad in some ways when you get this brand new phone that's super cool.
00:26:45 ◼ ► The first thing I do is I run downstairs into my office, plug it in, and just launch all my apps and see how broken they are,
00:26:52 ◼ ► because inevitably something's different from the simulator, and this is kind of the cycle that I'm expecting,
00:26:57 ◼ ► and it's a little annoying and a little frustrating, but that's probably what we have to look forward to for us in the middle of September this year.
00:27:05 ◼ ► Yeah, I mean, again, that's kind of all we can do, right? And it's going to be one of those things, like depending on how different it is from what we've seen before,
00:27:13 ◼ ► you know, like there's speculation about this status bar notch and this possible function area on the bottom,
00:27:19 ◼ ► and if these things are accessible to developers in some ways, we're probably going to have to do some work to adopt to that.
00:27:25 ◼ ► And I would guess, based on how things have gone in the past, this is another one of those areas where if you stick with stock controls, you are better off,
00:27:34 ◼ ► and Apple is kind of pushing you into sticking with stock controls. You know, for things like, if for example, you know, bars scroll under the status bar tabs up there, up top,
00:27:44 ◼ ► or if bar button items from navigation bars get put in the function area, as some designers have speculated,
00:27:50 ◼ ► like, if that kind of thing happens, you need to be using the standard controls probably to take advantage of those.
00:27:56 ◼ ► Like, again, keeping things standard and not messing with them too much is almost certainly going to help you with transitions like this.
00:28:04 ◼ ► So, I guess if there's a theme to this, it would be don't mess around too much with custom layouts,
00:28:10 ◼ ► because the standard stuff Apple tends to, you know, force us into over time to get the best stuff or to have flexible layouts or to not have tons of headaches.
00:28:25 ◼ ► Yeah, and I think we just look forward to a slightly frantic middle of September, but otherwise, hopefully, if we've been flexible enough in our designs and, you know, code, it shouldn't be too bad.
00:28:36 ◼ ► I can definitely say that the transition has gotten easier over time because I've learned the lesson to not hard code anything.
00:28:44 ◼ ► You know, I remember distinctly going through my app in the first, like, the first one, I think it was the iPhone 4 came out, I remember going through and searching for, you know, searching for 320 all over my app.