Update website for jbrowse-desktop release

[carolinebridge]

summary of changes

landing page

• revamped logo presentation (two options)
• added tagline (I found in the web files)
• reworded mission statement, added bolding
• added buttons for downloading desktop and web demo
• distilled 'other' tools into a sentence with links, links will lead to downloads page
• added a banner, banner text can be changed with the version number to highlight a new feature we want to push
• banner button leads to most recent release notes
• added a subtle border and curved edges to the screenshots

• reworded and emphasized words under features, added another SS

• added logos to our supporters

downloads page

• added buttons for downloading each, downloads are direct downloads where the links are derived from the latest release

• moved some links and descriptions from the landing page to here (embedded, cli, etc.)

docs

• updated docs landing page with link to desktop quickstart
• updated desktop quickstart by removing 'coming soon' descriptors

blog

• new blog post

need feedback / assets

1. Quick-start guide in docs:

• I removed the 'coming soon' messaging, but if any of the other points are no longer relevant, I will need some guidance on wording it (I think it's fine?)

2. Landing page:

• I need two updated screenshots on the landing page or confirmation that they are good to be shipped (personally I think these should be updated with desktop ones?)
• I have two possible landing pages, please let me know which is more desirable

OPTION A

OPTION B

3. Blog post:

• I kinda improvised with, feel free to hit me with any wording that needs to be changed
• Any additional information missing? Importing sessions from web to desktop?

[cmdcolin]

• I think it might be good to keep text that is similar to what is currently on the homepage to introduce the app. If needed, introducing our mission and consortium (we have a consortium?) could go in an about page?

• Maybe less all caps text

• I'd make the screenshot in "Features" the same size as the top figure if possible

• Maybe have the text in the features aligned to top (not centered vertically)

• There is "Download desktop" and then "Browse web". Do we want "Other downloads" to take care of other users?

• Minor but the "Latest web release" pointing to blog will probably change as blog posts will probably now contain desktop downloads

• Use pngquant for screenshots

Fundamentally great stuff here though

[carolinebridge]

• I think it might be good to keep text that is similar to what is currently on the homepage to introduce the app. If needed, introducing our mission and consortium (we have a consortium?) could go in an about page?

I didn't write this, and have no qualms reverting it back ;; consortium just means group of collaborators, which by nature is true of JBrowse.

• Maybe less all caps text
• I'd make the screenshot in "Features" the same size as the top figure if possible
• Maybe have the text in the features aligned to top (not centered vertically)

Can do!

• There is "Download desktop" and then "Browse web". Do we want "Other downloads" to take care of other users?

The blurb below the buttons has specific links to take the user to the respective category within 'downloads'. I thought this would be preferable to a general 'other' button or link, because as I was experimenting with the UI, multiple buttons started looking messy.

• Minor but the "Latest web release" pointing to blog will probably change as blog posts will probably now contain desktop downloads

It leads to the release notes on github actually! And that is propagated when we make a new release through the const in the docusaurus.config.

• Use pngquant for screenshots

Roger that.

Fundamentally great stuff here though

😄

[carolinebridge]

updated changes based on colin's feedback

• landing page in lowercase
• added new SS with multiple views
• moved features text to the start
• pngquant'd SS's
• updated some grammar
• resized the SS's a bit
• changed the text back to closer to what it was

[codecov]

Codecov Report

Merging #2407 (b1a5e1f) into main (cc4a26e) will increase coverage by 0.02%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main    #2407      +/-   ##
==========================================
+ Coverage   61.08%   61.11%   +0.02%     
==========================================
  Files         533      533              
  Lines       24545    24545              
  Branches     5769     5769              
==========================================
+ Hits        14994    15001       +7     
+ Misses       9235     9228       -7     
  Partials      316      316              

Impacted Files	Coverage Δ
...nts/src/SNPCoverageRenderer/SNPCoverageRenderer.ts	80.24% <0.00%> (-7.41%)	⬇️
packages/core/util/index.ts	79.84% <0.00%> (ø)
packages/core/TextSearch/TextSearchManager.ts	100.00% <0.00%> (+3.44%)	⬆️
...r-view/src/BaseChordDisplay/components/Loading.tsx	100.00% <0.00%> (+5.00%)	⬆️
...inearGenomeView/components/RefNameAutocomplete.tsx	88.04% <0.00%> (+11.95%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cc4a26e...b1a5e1f. Read the comment docs.

[cmdcolin]

Not sure about the new screenshot, I'd maybe like it changed back to the spreadsheet/circular here with no breakpoint split view https://user-images.githubusercontent.com/83305007/137416737-5e994ff2-a4cf-4d89-85c3-0f4b72d6d1fb.png the breakpoint split view is interesting but I think not easily understandable by passerbys and also, it is a chaotic view and not common in bioinfo. The hi-c triangle and circos views are recognizable motifs.

Also the text/buttons in the landing area looks a bit chaotic to me. There is the logo, diff font colors and sizes and buttons all tightly arranged and formatted. I am not sure how to help but I might go towards "less is more".... No logo needed, simple font, simple buttons, simple message, simple links to downloads

[ihh]

Weighing in: I pretty much agree with @cmdcolin's points. I think the screenshot with SV inspector and split view has too much empty space in it - also I tend to think every landing or download page should feature at least one screenshot of the linear view, since that is the primary thing people use, and a page that includes only a screenshot of a different view might confuse some people into thinking they were downloading the wrong program.

In terms of visual layout I agree with Colin's principle of "less is more". Could simplify by removing logo & using fewer font faces. I think the buttons and text are probably as simple as they can get without losing information, though.

[carolinebridge]

updated with ian’s and colin’s feedback

• removed bolding and letter spacing (it’s all the same font face, Roboto, so I am assuming that is what you meant?)
• removed logo
• added a gap between text and buttons per colin’s spacing comment
• changed screenshots around
• added screenshot with linear track to downloads page
• reverted back to ‘mission statement’ (it’s actually more concise than the previous one and I think being explicit about having a web and desktop app is redundant when we have buttons right below that tell them that)

Also fixed some minor styling things, added direct download links to the blog post.

downloads page:

[rbuels]

This all looks great to me. @carolinebridge-oicr I think you can merge when ready. :-)