search

organicmaps / organicmaps.github.io

Official Organic Maps website source code. Please contribute your translations!
Apache License 2.0
35 stars 33 forks source link

Add new screenshots with latest feature #145

Closed Jean-BaptisteC closed 1 year ago

Jean-BaptisteC commented 1 year ago

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)

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 https://github.com/organicmaps/organicmaps/issues/2293

Jean-BaptisteC commented 1 year ago

@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 commented 1 year ago

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

Jean-BaptisteC commented 1 year ago

@biodranik PTAL

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

biodranik commented 1 year ago
  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 commented 1 year ago
  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 commented 1 year ago

@biodranik PTAL

biodranik commented 1 year ago

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 commented 1 year ago

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:

biodranik commented 1 year ago

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

meenbeese commented 1 year ago

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:

image-gallery

biodranik commented 1 year ago

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

meenbeese commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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