Bringing Zeplin Mobile to iPadOS
Now that we launched our client app for the official Zeplin API on iPhone we brought our attention on making the app a good fit for the iPadOS. Being a project we usually work on in our Fridays, some corner-cutting had to be done to hit the market faster. The first version of the app was aimed towards providing the ability to discuss designs on smaller screens.
The iPad was always on our radar but with the initial launch the tablet app was just a letterboxed version of the phone app. That was just unacceptable.
We do feel that iPad has an enormous potential of being a great productivity device and we wanted to experiment a bit with where can we go with that in mind.
It wasn’t as easy as ticking a checkbox, though. There is a fair bit of customization going on in the iPhone version of the app that had to be dealt with to fit iPadOS better.
We can’t stress enough how much of a difference using split views brings to the app interaction on the tablets. The bigger space gives you the opportunity to accommodate more information in a very useful way. We wanted to have a sidebar with the projects list that is always visible. In a very short amount of time, we had a proof of concept that allowed us to switch projects from entry points that were not possible before.
On the phone, you can tap twice on the image in the screen details view to trigger what we call ‘the full screen mode”. That mode allows you to preview designs on the device without any app chrome and we wanted to keep the same interaction on the tablets as well.
You can hook a keyboard to an iPad and it made sense to us to provide a keyboard shortcut for the interaction. While we were at it we added some shortcuts for going to the previous/next screen in the details view as well. You can still do that by swiping but the shortcuts were another way to make our app “a good citizen” of the platform.
We use custom expandable bottom sheets to host some of the supplementary info (project members, screen versions) and we have an integration between the comments sheet and the screen previews. Although it works (and looks) great on the phone, it does not feel particularly good fit for the bigger screens.
There’s a modal presentation style that adapts its layout and behaviour depending on the screen size that Apple is using throughout the iPadOS. We like the approach a lot and we put in some work in making our custom presentations to behave in the same fashion. Again, it did not took us long before we started to see our custom presenters acting as expected.
We looked at our habits of using iPhoneOS. Using the system’s split view to display two apps side by side is a thing we do a lot and we wanted our app to be part of it. We decided to stay off allowing multiple windows for now, but the app can be displayed next to any other app in the split view mode. We also recognised that you may want to be able to export the screen thumbnails on the tablet for further use and we added support for that.
The variety of the screen sizes was another thing we did some explorations around. We tweaked our project and screen lists to show more info on the larger screens. As a result we now show from 3 to 5 thumbnails in a row, depending on the size of the iPad. We keep the size of the UI elements roughly the same, but the bigger screens look less empty now.
This is just our first delivery of the app on the tablets. We often say that software is never done and there are plenty of things we want to do with the next updates. One thing is sure, though — we are going to have fun doing it.
