Proper UI Design

[DanielHerr]

Design the UI so that it looks good on any form factor, and implement support back to FF 18.

[sonofluiz]

@DanielHerr I'd like to be assigned this issue

[DanielHerr]

Sure. Design only, or with implementation?

[sonofluiz]

I can provide implementation but can you provide more details? It has to run on firefox 18?

[DanielHerr]

Yes 18 is the web engine version corresponding to the first version of FFOS, so the UI should be compatible back that far. That means no grid, legacy prefixed flexbox, etc. Of course still using modern enhancements where available such as working in light/dark modes. If you don't want to deal with backwards compatibility you can just worry about the design and I can handle the legacy compatibility.

[sonofluiz]

Ok sounds good.

here is a first draft

[DanielHerr]

That's cool. But I'm not sure whether low end FFOS phones will be able to handle a page with hundreds of images. We'll have to test that sometime. So perhaps you could focus on the app details pages and homepage for now. Do you have a FF phone, and if so which?

[sonofluiz]

@DanielHerr

handle a page with hundreds of images

Right. Shouldn't we break up the list into pages? The use of pagination instead of one long list creates a more organized and manageable user interface (UI). You could have 40 or less items per page and maybe make the loading more manageable.

focus on the app details page

here is a draft of app details page:

Let me know if there is another way you'd like me to share drafts.

Do you have a FF phone

No, I don't, but I'm interested in archival efforts and I'm a fan of Firefox. I was planning on trying to run FFOS on a VM.

[DanielHerr]

Pagination could be an option, but I'm keeping the lists with all because I personally dislike it in most cases.

I don't know what you would use to create those drafts, if it has some kind of sharing or collaboration system you could use it.

Running FFOS in a VM or simulator is an option. You can also install old versions of FF desktop or Android.

https://ftp.mozilla.org/pub/firefox/releases/45.9.0esr/

[sonofluiz]

@DanielHerr Check for prototype design here:

https://www.figma.com/proto/c7h9B3CS1BZ5P4rT6hCZCw/Firefox-Apps-Archive?page-id=0%3A1&node-id=16-3&p=f&viewport=18%2C-664%2C0.67&t=m4vgkBVPudduLkBn-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=16%3A3&show-proto-sidebar=1

[sonofluiz]

@DanielHerr please review my questions in the figma design comments

[sonofluiz]

@DanielHerr please review changes to the design.

I updated the style according to Firefox brand guidelines and Mozilla design protocol.

I added categories to the homepage and download button to the app details page as well as other minor changes.

I also asked a question about install/download button in the comments.