Portico /apps screenshots for android and iOS

[alexandraciobica]

Solves part of zulip/zulip-mobile#3433.

I created the screenshots so they match the content of the web screenshots.

Screenshots:

This is how they look like:

[gnprice]

Thanks @alexandraciobica ! Visually these look great.

I think I'd prefer to have the example screen be in a stream narrow, rather than "All messages", because that feels like the usage mode I'd rather emphasize. @rishig or others, what do you think?

(I know the existing shots are in "All messages"; I guess that makes this another thing it'd be good to update while we're updating these.)

[rishig]

I would say we can just do a topic narrow. Two more thoughts:

• Not sure if this needs updating, but another thing we could check is that the background devices look like the latest devices (e.g. pixel 3, iphone X)
• Possibly one of the devices should be in night mode?

[alexandraciobica]

I'll remake the screenshots so they are in a topic narrow.

The background devices are:

• Pixel XL (I made this background device frame because this is my phone and I could easier see how the screenshot will look like)
• and iPhone 7/8, I'm not sure about this one because I used the one that was already there.

I can create the Pixel 3 and iPhone X frames, but how do I see how the application looks on those devices? Is there any easy way of emulating the phones without having to install xCode to emulate the iPhone and something else for android?

[gnprice]

For making an iOS screenshot, you generally need either an iOS device, or Xcode to emulate one. There are some services on the web that offer to make mobile screenshots for you (presumably using one of the above); I don't know anything about them, but one of them might be helpful. Same thing for Android (except Android Studio is the system that gets you an emulator). A Pixel XL sounds perfectly fine to me, though.

…

On Thu, Apr 11, 2019 at 9:00 AM Alexandra Ciobica ***@***.***> wrote: I'll remake the screenshots so they are in a topic narrow. The background devices are: - Pixel XL (I made this background device frame because this is my phone and I could easier see how the screenshot will look like) - and iPhone 7/8, I'm not sure about this one because I used the one that was already there. I can create the Pixel 3 and iPhone X frames, but how do I see how the application looks on those devices? Is there any easy way of emulating the phones without having to install xCode to emulate the iPhone and something else for android? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#12047 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABuDZ77D8jVc8JkRnZsQdksGL-RAZoZks5vf1wKgaJpZM4cbAwO> .

[rishig]

Is there any easy way of emulating the phones

Is the issue just seeing how we handle the iPhone notch? Other than that the app should look about the same across different phones, right?

[gnprice]

Is the issue just seeing how we handle the iPhone notch? Other than that the app should look about the same across different phones, right?

There are various bits of UI that look different between platforms. ... On a bit of poking around, though, I guess the ones that go inside the app don't actually appear on major screens like the message list, when screenshotted at rest. (They do appear in settings screens, and in certain dynamic effects like the feedback when you touch some widget.)

That does leave the status bars, though, and the home/back/etc. buttons at the bottom. I think to a lot of users a screenshot where those are from the other platform will look off, even if they don't put their finger on why.

[alexandraciobica]

I've redone the screenshots from scratch and changed the devices, I used the emulators for both (needed some work to be able to to that)

• for ios I used iPhone X
• for android I used Pixel 2 XL (the pixel 3 is not in the android studio so I couldn't make that one)

I used daymode for ios and nightmode for android.

I would suggest having a place where the vector versions of the screenshots will be added, so that the next person who does that(if it's not me) won't have to work that much for the screenshots. I can provide the .ai files.

P.S. Sorry it took so much time, I have a hard time with classes, too much workload. And also my computer crashed a couple of times while I was doing the screenshots, so I had to start over because it didn't save the work.

[rishig]

awesome, thanks! And yeah, definitely want to save the svg files in the repo :). You can just put the svg file next to the png in the repo.

One small comment is that the spacing at

doesn't look quite right (though maybe it is?), but other than that it's good to go from my end.

(edit: another is that at least on my android phone the time (9:00) is a bit more to the left?)

[alexandraciobica]

One small comment is that the spacing
doesn't look quite right (though maybe it is?), but other than that it's good to go from my end.

It is exactly how it looks in the application, I overlapped perfectly the type with the actual screenshots.
The hour is also exactly how it is in the emulator, but I can move it a bit to the left if you want.

This is the actual screenshot from the emulator:

[rishig]

ok great, lgtm then! You can just put the svgs into the same directory as the pngs, and then should be good to go.

[alexandraciobica]

Done.

[timabbott]

Merged, thanks @alexandraciobica and thanks for the review work @rishig!