Website Suggestions

[Lucas-Mc]

When the browser window is narrowed considerably, or when the display is scaled up or down (command+- or command+= on a mac), some strange or unfortunate things happen

• header logo shouldn't scale up and down. It and the header Laboratory for Computational Physiology should retain same relative sizes. Alignment of logo and header should be massaged so they maintain pleasing relationship. It might be a good idea to float both logo and header left, so they act as a unit.

• I like seeing the logo as being inside a padded box with background color rgm(223,232,245) as on the old site. I can make a new version of the image file with background included, if that's easier to use.

• background gradient of homepage image should be tweaked so it starts with the same as color of lcp logo. Right now its looks slightly off. Set it to linear-gradient (rgb(68, 102, 170) 50%, rgb(0, 0, 0))? rather than using rgba? Or can you start at rgba(68, 102, 170, 1.0)?

• footer logos shouldn't scale, and it might be good to provide text adjacent to the logos explaining what they signify. Also, alt text should say, e.g., MIT logo, not MIT photo logo. Size/scale and alignment of logos should be adjusted. http://imes.mit.edu/ and https://hst.mit.edu/ both show text with logo. We should look at graphics standards on these sites (or elsewhere) to make sure we're using the logo (and associated text) correctly.

• font-family on page is Playfair Display, Georgia, Times New Roman, serif. I think Playfair Display is ugly. I'd just use Georgia, Times, serif. (Times New Roman isn't really a complete font....)

• font in footer headers is weight 700, too bold. Should be 500 to match other headers on the page.

• links in footer, and probably all links on the page, should be set to target="_blank". Either that, or we should provide breadcrumbs, though I don't much like those.

• same thing for continue reading... links. (Also, I basically dislike continue reading... links. They're fine if you're presenting clickbait, or if there really is a vast amount of content. Otherwise, just put the text on the page so the user can see it and maybe skim it or just scroll past it. My bias may be because I don't use a cell phone for web browsing....)

• In the following text:

<p>The Laboratory for Computational Physiology (LCP), under the direction of Professor Roger Mark, conducts research on improving health care through new and refined approaches to interpreting data. Some of the group’s researchers have medical backgrounds; others have backgrounds in computer science, electrical engineering, physics, or mathematics; and others have training that spans several of these disciplines. Current laboratory research incorporates physiology, computer science, engineering, and applied mathematics. <br><br> Using modern approaches to modeling, signal processing, pattern recognition, and machine learning, the lab’s researchers develop and refine methods for analyzing data—for example, from patients in intensive care units—and for generating predictive models that will aid in patient care. Current laboratory research comprises two major projects, the <a href="mimic">MIMIC</a> project and <a href="physionet">PhysioNet</a>. See their respective pages for more detailed information. </p>

and maybe elsewhere <br><br> should be replaced by </p><p>. There are two paragraphs in the passage.

• on the .../about page, header spacing is strange. Prabably should increase padding-top for h2. Maybe adjust font sizes for h1, h2, etc.

• I think the contact address should be mailing address, 77 Massachusetts Ave. Street address is for couriers or in-person visits -- we can provide it privately as needed.

• scaling the page (command+- or command+=) probably shouldn't affect width of displayed text. That is, we should allow the user to scale the text down without also squeezing it into a narrow column. The old (blue) lcp site has this problem too. The current physionet site does not -- hitting command+- repeatedly still gives a full-width page.

• navbar should wrap in a narrow browser window. Right now, overflow is off the screen and unreachable. This is a showstopper, though admittedly the problem is only there in relatively extreme circumstances.

• .col-md-3 should scale differently. It can be set to 25%, but also give it a min-width so it won't squash past a certain point.

• I have only once had to grapple with bootstrap css. Good news is that it's meant to cover all cases. Bad news is that it's really hard to figure out what's going on sometimes, and how to make adjustments.

• header hierarchy on People page seems wrong. Individual names should probably be h3. Header font sizes and padding should be adjusted. (On old (blue) lcp site, I used a dl for names and bios. I think this is clearer structurally.)

• alt tags for images on People page should say, e.g., photo of Roger Mark rather than just Roger Mark.

• I think a search form would be useful. (not Google due to the ads!!)

• more about the footer: I'm not sure we should include recent publications. Folks who want publications can click the tab up above. In any case, the read more... link is superfluous. The quick links should probably include some sort of explanatory text: most are subprojects of the lcp, though I'm not sure about Sana. Accessibility is there because it has to be. All of the links lead away from the lcp site.

• we should provide Skip to content links as on the old (blue) site, for those using lynx or screen readers.

---

• continue reading for the news items should be expanded inside of the news box (or have a scroll bar)

• the sidebars with internal links need a minimum width to be set

• the top navbar should be justified to the left to prevent spaced apart items

• there is an extra </head> tag from the skip-to-content addition, move skip-to-content to just before the first LCP header

• remove the map

---

• Change address to E25-505

• Change News to Announcements

• Remove recent publications in footer / Emphasize recent publications -> quick links

• Move content from current website

• Add links to PhysioNet and MIMIC in the text

• Move quick links from footer to top of each page

• Remove Sana and Critical Data / add Consortium, Courses, Datathons, Educational, etc.

• New tab with other links with description