Take screenshots automatically on several devices and languages

[javiergonzper]

The idea it is create screenshots using Fastlane on several devices and languages. More info at: https://docs.fastlane.tools/getting-started/ios/screenshots/

Also would be great if we add the screenshots into devices frames with a translated explanation on them: https://docs.fastlane.tools/getting-started/ios/screenshots/#put-your-screenshots-into-device-frames

To take the screenshots I need a server with demo files to be shown on the screenshots.

Also I need to know which views we want to show on the screenshots, for example:

• Login
• File list
• Create folder
• PDF Preview
• Settings

Depending the screens also we need to know which text we want to show on the frame if we use it (I recommend it because it is more professional).

We can set the color of the title and subtitle, background, size, text color... more info at: https://docs.fastlane.tools/getting-started/ios/screenshots/#put-your-screenshots-into-device-frames

Ex:

[michaelstingl]

@owncloud/marketing Should we define a folder structure and example files for marketing purpose? (all platforms)

[hosy]

Apple allows up to 10 screenshots. I think we should use this number to show as much as possible to the user. Here are some further ideas for screenshots:

• Gallery View
• Upload Photo (Gridview)
• Certificate Validation Details
• File Actions
• Status View

[MichaelvanLaar]

Could we perhaps show some of the features which we promoted in our blog articles / press release (such as password manager support for example)? Only if there is something good looking to show.

[javiergonzper]

Remember that we will use an iPhone simulator. If we want to show the Upload Photo (Gridview) with a custom list of images we will need to include an extra step to fill the simulators with images unless we want to use the default ones.

On the last meeting @michaelstingl said that we have to use a real server instead to use mocked information (no server but simulating that we connect with one). So we need a server with an account filled with the structure of of files and folder that you want to show on the screenshots.

[michaelstingl]

Apple allows up to 10 screenshots. I think we should use this number to show as much as possible to the user.

Very simple approach would be enough in the first step. Can be extended whenever it's needed…

[michaelstingl]

So we need a server with an account filled with the structure of of files and folder that you want to show on the screenshots.

Start with the default ones? https://github.com/owncloud/example-files

[javiergonzper]

@lefherz you opinion about the screenshots are welcome 👍

[MichaelvanLaar]

Start with the default ones? https://github.com/owncloud/example-files

I like the cute squirrel pic. Almost cat content. ;-)

[javiergonzper]

I advanced a lot on this issue. Right now as I shown in the demo the screenshots are taking automatically and inserted in a frame with a translated text.

Ex:

It is an initial design, we can change the background, the font, the text color...

Pending:

• Navigate in the app to take the screenshots that we want
• Add the new strings files to be translated by Transifex

To navigate I tried to use Earlgrey as we use on the UI Tests that we have on the app but Earlgrey works with Unit test Targets and this Snapshots (screenshots) only works with XCUITest targets.

I checked Kif but also have the same problem.

I will check how to do it using the native XCUITests

What do you think @hosy @mneuwert ?

[michaelstingl]

I will check how to do it using the native XCUITests

Works for now. I heard next version of Earlgrey supports XCUITests as well. Need to check again…

• Native Development: As with EarlGrey 1.0, you can use EarlGrey 2.0 natively with Xcode. You can run tests directly from Xcode or xcodebuild. Please note that EarlGrey 2.0 uses a UI Testing Target and not a Unit Testing Target like EarlGrey 1.0.

(Source: https://opensource.google.com/projects/earlgrey)

[michaelstingl]

In the files view, for the beginning just showing the directory listing of the root directory is okay.

[javiergonzper]

I had some issues related with work with a real server. Finally using a docker on local it works fine:

There is some typo on the text I will fix it. Anyway if people of marketing could tell me which text want would by awesome (cc: @MichaelvanLaar)

[hurradieweltgehtunter]

Hi,

@michaelstingl asked me for help so I created sth. Hard facts:

• Font Family: Open Sans Regular
• Font color: OCBlue (#182a3b)
• I added a slight drop shadow on the mobile phone. Ignore if this is not possible.
• No gradient on background

So the result should look like this:

[javiergonzper]

@hurradieweltgehtunter amazing job. I will try to make it as you say or at least most similar (depends of the limitations of fastlane).

[javiergonzper]

Work in progress:

[hurradieweltgehtunter]

Some feedback? :)

• second line seems to be too big (font size: 30px, at least in photoshop, might differ in your tool)
• both lines seem to extend the borders of the mobile phone (keep the text inside the borders and decrease the font size if needed. Font sizes are secondary)

[javiergonzper]

Some feedback? :)

• second line seems to be too big (font size: 30px, at least in photoshop, might differ in your tool)
• both lines seem to extend the borders of the mobile phone (keep the text inside the borders and decrease the font size if needed. Font sizes are secondary)

Sadly there are not so much options related with the font size. Just a "font_scale_factor". The most similar to your mockup I think that it is 0.15 value:

The lines do not extend the limit of the device. Look here with an higher scale:

(the device on quick "frameit" script is black because I did not pass the white parameter, but on the final one will be white unless do you prefer black).

[hurradieweltgehtunter]

I though so. Maybe just make the second line a bit smaller then it's fine. I like the white one better. Is it possible to use a newer mobile phone template (e.g. iPhone X/10) ?

[hosy]

I also think iPhone X would look better.

[ChrisEdS]

One of the main ideas here is that the user sees the device he is using.

[javiergonzper]

@hurradieweltgehtunter I got the second line smaller and also the iPhone X 👍

I added a border on github to see the limit of the image

[michaelstingl]

@javiergonzper Nice, this looks very cool now! 👍

[javiergonzper]

Thank you @michaelstingl . The only thing it is the space between the first line, the second and the image.

Between the second line and the image is higher than the first and the second line: Padding: 50

Padding: 50x40

I think that Padding: 50x40 is the most similar to the one that design @hurradieweltgehtunter. What do you prefer? If I reduce the size between the second line and the image also it is reduced the size between the first line and the top of the image

An important detail it is that we have to use shorted titles (keyword on frameit tool) than the description (title on frameit tool). If not we will have things like this:

The size of the font depends of the number of characters than the sentence have even if we have a propotion set it could not work properly with very long sentences on the titles (keyword on frameit tool)

[hurradieweltgehtunter]

The bigger headline should be indeed short and act as a cliffhanger. If you send me all headlines + sublines I'm happy to work sth out

[michaelstingl]

Screnshots for public 1.0.1 release generated and uploaded automatically 👍