[Discussion] New Pulsar Website

[Anonymitaet]

We've launched the New Pulsar Website on May 11, 2022 (UTC +8).

Now everything goes fine except for a few known issues as below.

Search does not fully work

🙌 Status: WIP.
🙌 Technical details and progress see here1 and here2
Issue:

Some pages are not entirely translated

Some new contents are not completely ready

We're continually improving them all the time. 🙌
Feel free to comment if you have any suggestions for the New Pulsar Website, thanks!

[hpvd]

looks awesome!!

when looking in devtools (firefox) there seems to be a small error:

[hpvd]

it's a little bit irritating that not the latest release is advertised (probably missing blog content...maybe linking to changelog https://github.com/apache/pulsar/releases/tag/v2.10.0 ?)

[hpvd]

stunning fast!

[hpvd]

depending on browser used: the step is less or more visible (sceenshot was taken from firefox)

[Anonymitaet]

@hpvd Thanks for raising this up!

Issue 2:
Now the latest tech blog is 2.9.2.
2.10 tech blog is not available, @DaveDuggins is working on it, stay tuned.

Issue 1 & 3:
@Paul-TT will look into these issues.

[dave2wave]

depending on browser used: the step is less or more visible (sceenshot was taken from firefox)

This is the animated sine wave graphic. @hpvd di this ever animate? What brower, version, and os are you on? Do you allow javascript or block it?

[dave2wave]

Here's what I see on macOS Catalina, Firefox 99.0.1

[hpvd]

@dave2wave

seems like I have grabbed an extreme case with Firefox 100 @ W10 @ 4K screen, everything is animated perfectly, js active..

[hpvd]

@dave2wave
in other environments it's visible but not that extreme:

always latest browser versions, zoom level 100%

[Anonymitaet]

We got much negative feedback about the blue background color, it decreases readability significantly.

They prefer the white background color as before, which looks more clearly.

Feel free to 👍 if you feel the same. We may change the background color to white based on your thoughts, thanks!

[jinmu003]

Can we redesign this part?

[Anonymitaet]

Hi @jinmu003 thanks for your feedback! Can you explain more about your requirements? Do you mean re-categorize the industries or something else?

P.S. We plan to add filters for the Case Studies page to keep things organized. .

[hpvd]

@Anonymitaet what do think of documenting and highlighting the project quality with hard facts and numbers
using automatic badges summarizing some interesting/important quality markers?

e.g.

1. activity:
   • date of latest commit,
   • latest release,
   • number of contributers
2. passing status of
   • tests
   • owasp-dep-check (already in use)
   • spotbugs (already in use)
   • sonar quality gate (has to be defined)
3. popularity:
   • number of downloads
   • github stars (added from task 4 in [Improvements] New Pulsar Website #15550)

this could be done either on the new website
or in the readme.md shown on github (or both:-)

for how to see:

https://docs.github.com/en/actions/monitoring-and-troubleshooting-workflows/adding-a-workflow-status-badge

and to get an idea what is possible search for github on https://shields.io/

[dave2wave]

We got much negative feedback about the blue background color, it decreases readability significantly.

Who is the "we" here? On what channel was this feedback received?

[hpvd]

@Anonymitaet showing github stars on the website as already planned in #15550 task 4
goes into the same direction as proposal in #15538 (comment)

The other markers named there, goes more into detail and give every prospect/interested party and also existing users a great peace of mind to use / to start using pulsar - it could perfectly help to argued/justified to any decision maker to deeply rely on pulsar (beside the great feature sets) even in large projects...

[Anonymitaet]

@hpvd thanks for your valuable suggestions! Adding badges to README.md is a good way to show community growth.

[Anonymitaet]

@dave2wave Pulsar Website User Survey and Slack.

[hpvd]

two things that are not that great for seo (ranking in search engines) and accessibility:

• tiny: alt tag of pulsar logo is misspelled
• titles of svg-s (images) are pretty generic
  

[Anonymitaet]

@hpvd good catch! We'll update them

[zhaoyajun2009]

It is too much white space！

[Anonymitaet]

@zhaoyajun2009 thanks for your feedback! We need to check other people's thoughts on this.
If you feel the same, please 👍 on @zhaoyajun2009's comment.

It is too much white space！

[hpvd]

doc/connectors:

• tiny: should be plural (see attachment)
• when following link to "elastic search" config: the menu disappears
  https://pulsar.apache.org/docs/io-elasticsearch-sink/
• "elastic" could not be found by search

[hpvd]

the visible structuring of blog-posts is not that clear,
for comparison, simple release notes are much easier to understand/overview
both at 100% zoom:

[Anonymitaet]

@hpvd thanks for your feedback! Please see my interlined reply:

• tiny: should be plural (see attachment)

OK, we're redesigning the Pulsar Information Architecture. Re-constructing the connector doc is on the way.
/ cc @D-2-Ed @DaveDuggins @momo-jun

• when following link to "elastic search" config: the menu disappears
  https://pulsar.apache.org/docs/io-elasticsearch-sink/

All connectors do not have the left navigation. They only have the right panel.

• "elastic" could not be found by search

Search does not work properly is a known issue recorded here.

[Anonymitaet]

the visible structuring of blog-posts is not that clear, for comparison, simple release notes are much easier to understand/overview both at 100% zoom:

Hi @DaveDuggins you're the author of the 2.10.0 tech blog, any thoughts on this comment?

[hpvd]

@Anonymitaet regarding blog structure, it's possibly mostly about predifined css for different elements (headlines, p, lists) like

• font sizes
• whitespaces
• margins/intend
• ...

[asafm]

Notes on Main Page

1. Background color: I can express this technically as I'm not a designer, but I can say it doesn't feel right. Something about the contrast to the other colors on the page and that vague color to it, instead more bright and vivid colors, broadcast that sense of "gloominess" to it. Not sure I'm expressing my self correctly - it's just doesn't feel right :)
2. The following items - Search bar, Sun, Github stars - just seem to be in the wrong place visually. It creates a big whitespace gap and the alignment and spacing between them is not symmetrical. It's just fees like they are in the wrong place.
3. Logo positioning and white space - it's as if it's just thrown out there without any "anchor" to it, maybe due to the large whitespace this opening part of the main page has in general.

Docs section

1. There is a very large section of whitespace between the actual docs content to the upper section (bar).
2. The logo looks mis-aligned relative to the content section below IMO, as if it is just "thrown there" in metaphorical speaking.

IMO we should aim for a more "neat"/clean look, maybe in it's own page like here?

[Anonymitaet]

@hpvd @asafm I feel the same as you.

Here is the feedback from the website designer team:

We've run the beta version of the new website for more than 3 months. The beta period has passed. The design was approved by the community and executed. As representatives to the community and members of the design team, we have to commit to the design that has been implemented. Once a decision is made, we support that decision. We can revisit in 3-6 months as needed and after appropriate usability testing, etc.

But do not hesitate to add more comments! Suggestions are always welcome!

[hpvd]

@Anonymitaet

did some optimizations on the wave images, to cut size down (both are near 1 MB)
to improve download time, client and server load...
Got less than 1/3 for each image with IMHO near identically visual quality and technical details (like background transparency...)

just have a look:

originals (downloaded from website):

optimized versions:

[Anonymitaet]

Hi @hpvd thanks for your great idea, that makes sense! Would you like to replace the old one with the new image? Please submit the new image to pulsar repo. Thanks!

cc @Paul-TT

[hpvd]

@Anonymitaet please let your designer double check if quality target is reached with the new image versions.
He/she could easily save the images from my comment and integrate them into the website.

[github-actions]

The issue had no activity for 30 days, mark with Stale label.

[tisonkun]

Closed as delivered.

[visortelle]

I'm watching @sijie's video on YouTube and the website looks much more readable and modern than it looks now.

[tisonkun]

@visortelle Good to know, lol.