New about page content and layout

[melange396]

I tried to make this match Roni's "About Delphi Apr2024" document as best i could... I think i mostly succeeded except that i did a little bit of editing to make the use of periods more consistent.

(Also see https://cmu-delphi.atlassian.net/browse/OKRS24-142 )

[netlify]

✅ Deploy Preview for cmu-delphi-main ready!

Name	Link
🔨 Latest commit	a4b4629
🔍 Latest deploy log	https://app.netlify.com/sites/cmu-delphi-main/deploys/664228203b7e290008f18719
😎 Deploy Preview	https://deploy-preview-965--cmu-delphi-main.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[melange396]

Please check the preview of the about page at https://deploy-preview-965--cmu-delphi-main.netlify.app/about/

Markdown does not support underlines, and i tried to insert HTML tags to do it, but that is not doing the trick... @RoniRos: can we replace the underlines with bold text? Or go without? I can put some more time into making it work but i think it is going to require big changes, or dirty and fragile hacks.

[rlunde]

I think underlines are deprecated in web pages (for the most part) due to confusion with links. This looks good to me.

[carlynvandyke]

Two suggestions:

• I do think bolding would be nice (both for emphasis and for a bit more visual interest)
• I would prefer the mission and the vision separated, like this:

Our mission: Develop the theory and practice of epidemic detection, tracking and forecasting, and their use in decision making, both public and private.

Our vision: Make this technology as useful as weather forecasting is today.

But as always I defer to the big boss 😉

[dshemetov]

Bouncing of what Carlyn said, curious how this will look

Suggested change

	#### **Our mission:** *To develop the theory and practice of epidemic detection, tracking and forecasting, and their use in decision making, both public and private.* Our vision is to make this technology as useful as weather forecasting is today.
	**Our mission**: To develop the theory and practice of epidemic detection, tracking and forecasting, and their use in decision making, both public and private.
	**Our vision**: Make epidemic forecasting as useful as weather forecasting is today.

[RoniRos]

Please check the preview of the about page at https://deploy-preview-965--cmu-delphi-main.netlify.app/about/

Markdown does not support underlines, and i tried to insert HTML tags to do it, but that is not doing the trick... @RoniRos: can we replace the underlines with bold text? Or go without? I can put some more time into making it work but i think it is going to require big changes, or dirty and fragile hacks.

@melange396 My bad, the underlines were there just as placeholder for links. Please remove them, and we'll add these extra links when we have them.

[RoniRos]

Two suggestions:

• I do think bolding would be nice (both for emphasis and for a bit more visual interest)
• I would prefer the mission and the vision separated, like this:

Our mission: Develop the theory and practice of epidemic detection, tracking and forecasting, and their use in decision making, both public and private.
Our vision: Make this technology as useful as weather forecasting is today.

But as always I defer to the big boss 😉

I'm happy to go with your preference for separating the Mission and Vision.
And if you are referring to boldfacing "Our Mission:" and "Our vision:", then I agree with that, too.

[RoniRos]

It all looks very good to me!
I would have liked it if more of the content would be visible "above the fold" on a typical laptop or desktop. But I am not sure how to achieve that while maintaining the aesthetics (i.e. not appearing too crowded). Any ideas? Maybe make the text box a bit wider?

[carlynvandyke]

It all looks very good to me! I would have liked it if more of the content would be visible "above the fold" on a typical laptop or desktop. But I am not sure how to achieve that while maintaining the aesthetics (i.e. not appearing too crowded). Any ideas? Maybe make the text box a bit wider?

On our About COVIDcast and Flu & Other Pathogens pages we use a different layout that both takes away the header image and makes the text box wider. Can we switch to that, @melange396?

[melange396]

I made it so "Our mission" and "Our vision" are on separate lines. I also removed the "header" formatting on the mission statement as @dshemetov suggested, which made that text a little smaller -- this saves some screen real estate, but may downplay the significance of the mission statement. If we want to keep the reduced the size of those, i think it makes sense to also make the headers "Our strategy" and "Our target users" match, but i wanted to leave them as-is for now so you can compare.

There is another copy of the mission statement text that appears on the main "landing" page (preview here) just below the "carousel" (the thing that rotates between some highlighted articles / blog posts / etc)... How (if at all) should we format and/or distinguish the "vision" portion of the statement there?

The current "about" page uses a content bounding box that maxes out around 800 pixels horizontally, which is pretty standard these days; you can see a very similar width on articles from all the major news outlets, and even on this very github PR (you can see this by opening such a web page and hovering it above the Delphi "about" page). From a UX prespective, lines that are too long limit readability because they make it difficult to scan back to the beginning of the line to find the appropriate next line. For perspective, i can create a new PR based on this one that has a formatting that doesn't use the bounding box.

I also removed any markup intended to do underlining.

There is a problem with all of this markdown formatting and editing, in that it is not WYSIWYG and has a long turnaround/feedback cycle time... @RoniRos if you would like to get together some time (on Zoom or in-person), we can make changes together and possibly have a faster path to getting something that you are happy with.

[RoniRos]

@melange396 I agree the turnaround time is too large given the many small details we are trying to perfect. I'd like to take you up on your offer. Can you please schedule some time with Christy for us to meet in person and resolve this interactively?

[melange396]

Roni and i went over things and evaluated some different options. We agreed that the current state of this PR does an effective job of getting the message across! I will merge shortly.