Add new screenshots with latest feature

[Jean-BaptisteC]

Our screenshots is outdated, somes elements of UI have changed. I suggest to add new screenshots, on website, main depot and stores

I have worked on new screenshots, tell me if you have better ideas :)
All screenshots have a reduced quality (~50%) to improve loading on pages (1Mo screenshot is too big)
I have enable on android demonstrate mode to have always same top bar (hours, network and battery)

• berlin screenshot replace prague screenshot, i show on screen place page and ability to use bookmarks

• hiking (In Howth, Ireland) screenshot show ability to add stop in routing, show elevation profiles and map layer about level (i know it's not the best place for that)

• metro screenshot show metro layer in fullscreen mode (In Sydney)

• search show ability to search restaurant and see results on map (In Paris)

In the past, you have suggest to do different screenshots following country of users but i think, it's a lot of work (i can doing same screenshots with different languages)
I can try to update screenshots regularly to show new features

Maybe, we can show screenshots about lanes assist ? (in US or canada for example)
I think in website 4 screenshots is enough
organicmaps/organicmaps#2293

[Jean-BaptisteC]

@biodranik I have update all screenshots with your feedback except hiking (i try to find the best place for that)
Tell me which screenshots do you want you use on website
(I can again update screenshots if necessary but not screenshots about routing because i use fake location app is horrible, it's too hard to do screenshots, position is always update :) )

[Jean-BaptisteC]

@biodranik PTAL
I have update hiking screenshot, tell me which do you want keep on website, the others can be used on app stores

[biodranik]

I'm thinking that we actually need to implement a simple scrolling screenshots gallery on the website, accurately implemented for mobiles and desktops. Then we can add more than 4 screenshots and show all features of OM. Do you know the basics of HTML/CSS/JS? Ideally, it would be great to implement it CSS-only, as some users may disable JS for privacy reasons.

Regarding screenshots:

1. It would be great to have a flight mode enabled on all screenshots, to show that OM doesn't use the Internet.
2. One subway routing screenshot doesn't have some maps downloaded.
3. It would be better to use numeric coordinates in PP on all screenshots instead of OSM links.
4. Would it be possible to make a similar hiking screenshot with one or two stops, but with elevation meters visible?
5. A bit more complex public transport routing (maybe changing lines?) would be great!
6. One dark nav screenshot with lanes would be enough.
7. Where to eat looks nicer with different search icons, while toilets look more important... It's a hard choice :)

Do you have any other ideas on which important features can we demonstrate with screenshots?

Btw, is it hard to make a few seconds animated gif for car routing (and maybe for some other feature)?

[Jean-BaptisteC]

@biodranik PTAL

Not sorry, i'm not knowledge in devlopment web, do you want doing screenshots gallery like here https://streetcomplete.app/ ?

• I have enabled flight mode on all screenshots
• I have fixed metro in NY
• I have update coordinates on screenshots
• I have add new hiking screenshot with elevation
• For screenshot about search, i have used Where to eat category near of cathedrale of paris, to see beautiful 3d buildings :)

[biodranik]

1. For the gallery, we can show two or more screenshots/animated gifs at the same time on the screen, and allow scrolling them (or scroll automatically). That can be done later separately.
2. Now we can use 6 screenshots instead of 4 to show more features.
3. Do you still have originals of your screenshots? It's better to have a better quality (current 50% looks blurry), but change screenshots width, for example, to 800 or even to 400 pixels (now its set as max-width in CSS).
4. To avoid breaking changes, you can put these screenshots separately from the main ones, so we can safely merge them and then test and replace the main screenshots.

[Jean-BaptisteC]

1. I have created issue for animated gifs
2. I have removed metro layer screenshot to keep 6 screenshots
3. I have resized screenshots in 800 * 1778 in full quality
4. I have kept older screenshots

[Jean-BaptisteC]

@biodranik PTAL

[biodranik]

Thanks! There is an important question now, how will we display all these screenshots? Looks like something like a screenshots carousel is needed. Another question is about iOS screenshots: should they also be represented or not?

At the moment, we're communicating with the UX design agency about our website, I'll try to find answers with them. But in any case, collecting good quality and representative screenshots is a great idea. For example, on a hiking screenshot (or somewhere else) we may show an imported track.

[Jean-BaptisteC]

I suggest to do not wait carrousel is developed to update screenshots on website.
For screenshot on IOS, I don't have IOS device, but to make screenshots you can create post on Discussions Github or on Channel Matrix.

I have two suggestions for screenshot with imported track, tell me what you prefer:

• https://hiking.waymarkedtrails.org/#route?id=15703494&type=relation&map=12.0/-13.213/-72.463

• https://hiking.waymarkedtrails.org/#route?id=1673569&type=relation&map=11.0/-41.828/146.0542

[biodranik]

Imported track may also show bookmarks of different colors on it. Screenshot may also have two or more tracks of different colors.

[meenbeese]

Thanks! There is an important question now, how will we display all these screenshots? Looks like something like a screenshots carousel is needed. Another question is about iOS screenshots: should they also be represented or not?

No need to implement it from scratch, I made a simple image gallery recently. You can use the arrows to view different images and the hovered image is enlarged while others are grayscale. Maybe we can use it here with some minor changes for OM? Here is a screenshot for reference and you can tell me how you like it:

[biodranik]

Any live preview? Is it optimized for mobiles too? Is there a timer to scroll images?

[meenbeese]

Any live preview?

You can check it here: https://image-gallery-simple.netlify.app/

Is it optimized for mobiles too?

No, it is not. But it should be fairly easily to do if we decide on using this.

Is there a timer to scroll images?

There isn't and I'm not sure if this makes much sense to add. There will be only 4-6 images to scroll through and that can easily be done with only pressing one button to view the rest.

[biodranik]

Thanks for the link! We need to focus on the mobile experience first, and the desktop one second. Your current demo is not ready for our case yet. Can we check how it's done on some other cool websites and do it in a similar (maybe simpler) way?

1. On mobile, one screenshot should take almost all the screen, and auto-scroll or scroll by tap.
2. For iOS users iOS screenshots are needed, for Android - Android ones (we can do it later, but keep it in mind now).
3. Screenshots may be localized, e.g. French-speaking users may see France on screenshots.
4. On Desktops and tablets, maybe also on mobiles in a landscape, there's plenty of space to show several screenshots depending on the available width.

[Jean-BaptisteC]

Please review, do you want to wait the slider is developed to merge screenshots?
At least tell me, if screenshots can be added to the main repo to update screenshots on AppStore

[biodranik]

Let's keep them in the repo and think how to render them in a better way.