Update homepage layout

[mariagould]

The ROR homepage has not been updated since the site launched in August 2018. We would like to do a light design refresh to be able to surface more content on the homepage and help users navigate the site. The homepage would include a hero image and/or carousel, feature the registry search prominently on the page (removing the search box from the nav menu), and include dynamic content like twitter and blog feeds.

Mockup

[bcgwebdesign]

• [x] pull css into sass partials for easier development
• [x] enable latest posts for blog section on homepage
• [x] fix stylings
• [x] more to come

[cazinc]

Hi @mariagould this is now done and ready for your review too, in the Summer-2022-updates branch... although I would say we might need some design tweaks - TBD. For now though functionality is there.

The "Featured" pages (Use the registry, Join the community, etc. for now) are controlled via files in ../data/homepage_features/. If you have a look at these it will hopefully be fairly obvious how it all works, but shout if questions or amends needed to functionality.

The News & Updates block is mostly automated, pulling in the last 3 items. You can control the excerpt text used like so: 1) If you don't do anything, it pulls in the first 20 words. This is configured in the config .toml files (summaryLength). The Amanda French post is working this way.
2) If you set an excerpt in frontmatter, it will use this instead. The Three New Steering Group Members post is working this way. 3) You can put a <!--more--> anywhere in content and all the text up to that point will be used. The ROR-ing on our own post is working this way.

[mariagould]

Documenting feedback/discussion from earlier today:

1. Move text out of hero image block
2. Shorten height of hero image block
3. Change background color of search block from light gray to ROR teal
4. Enable website editors to "pin" a select blog post to the homepage
5. Add new block beneath blog posts to feature recent Tweets

[cazinc]

Some of the above changes have now been made @mariagould:

1. Text moved out of hero block (we've just deleted it from the appropriate place in the .toml files, where it is controlled - see attached). We moved then moved the text to the second line of the about block (as that was already quite similar), which is controlled in /data/blurb/main.yaml.
2. Height of hero image block has been reduced, and fixed.
3. The Search block is now green. We didn't change text to white in the end as it's not Accessible.

Items 4 and 5 are in process.

[mariagould]

Thanks @cazinc looks good so far. I'm still seeing the text in the hero block fyi.

[cazinc]

Hi @mariagould sorry, I always forget that changes need to be made in the site-specific .toml file as well. So I had removed the banner text in localhost.toml, but it's actually dev.toml that is used for the dev site. Just fixed that and have merged it into dev and the text is gone now.

[cazinc]

Pinned posts @mariagould we've got "Pinned post" functionality in place now too (all merged into dev branch). It uses the pre-existing weight front matter and it works like this:

• Adding a weight = x (where x is an integer) parameter to the frontmatter of the post will bring it to the top of the featured posts on the homepage and the top of the list on the blog page itself.
• So you can manipulate the order of the featured posts with the weight - lower numbers are more important, e.g., weight = 100 comes after weight = 1
• If the post does not have a weight then it will come after those that do have a weight.

So in practice, if you want to pin a single post, give it a weight of 1 and it will be pinned first on the homepage, and will sit at the top of the Blog page. If you want to pin 2 posts, give them weights of 1 and 2. To "unpin" just remove the weight.

If you want to pin more than 2, just keep in mind that on the homepage once you have 3 pinned posts you won't get any recent posts.

Twitter block We've also had a go at Tweets but it is problematic as I feared. Twitter only lets us embed a whole, vertical timeline, which doesn't fit well on the homepage at all. You can see an example of one on this page: https://www.saxbam.com/canvas_article/dialling-up-the-mix-perfecting-the-leadership-skills/ (right sidebar, or beneath copy if window is smaller). Twitter isn't motivated to provide more flexibility with the layout and styling of this because really they want to control the user experience.

There are some software libraries out there designed to get around this, but they don't tend to work with Hugo as it's a static site generator.

TBH I think you may be better off without the feed, as users tend to want to interact with social posts on the actual platform (or its app) rather than another site.

What do you think?

[mariagould]

Regarding the Twitter embed - would it be at all possible to include a tweet feed as one of the three news blocks on the homepage (so we'd end up with 2 recent blog posts plus the twitter feed)? If too complicated to implement, we can skip for now, but I just wanted to explore it as a possible option.

The interest is not so much in encouraging interaction with social posts but just drawing attention to recent news/announcements that might not otherwise be published on the blog.

[bcgwebdesign]

That would be possible but might end up quite narrow - will quickly add it to our branch and let you know

[mariagould]

thank you @bcgwebdesign ! Totally understand it may not be workable.

[bcgwebdesign]

try that @mariagould

I've set it to just show 1 tweet - can get rid of the header "Tweets from @membername" but not much else.

Also could have more than 1 tweet in a fixed height element with a scroll bar down the side but that gets a bit messier.

Doesn't look too bad if I'm honest but it's your call!

[mariagould]

Thanks for setting this up @bcgwebdesign. I'm not convinced this is the best way to go so let's skip it for now and just go with the three news blocks.

[bcgwebdesign]

Cool @mariagould I've put it back to how it was.

[mariagould]

One quick question about the homepage design (unrelated to prior topics) - Is the height of the block just underneath the hero image dependent on the text within it? In other words, if we remove some of the text, will the height shorten accordingly? We're going to have a shorter tagline here so I wanted to make sure the relationship of text to whitespace would be proportional. In general, I think we could go with a bit less padding around the next, so the section with the search box underneath it doesn't get lost below the fold.

[bcgwebdesign]

It is totally driven by the content - the padding is quite generous to give it some degree of visual impact/space.

You can experiment with it on a local build by changing the header and text content in /data/blurb/main.yaml

Making each one fit a single line at desktop monitor size would help the below the fold issue, but as soon as you head to smaller display sizes the text(s) will break over 2 or more lines and push things down again?

Just had a wee check and the padding is the same for all sections - 70px above and below.

I've changed it to 50px above and below and pushed to the summer branch if you want to see how that looks?

[amandafrench]

Can we get a direct link to https://ror.org/search somewhere on the home page? I was thinking maybe just a small text link underneath the nice prominent search field on the home page, maybe something like [Visit the ROR search page](https://ror.org/search). Open to other ideas.

I ask because we had a question from a user about where "the list" of organizations in the registry is, and the search page is basically that -- it has useful info such as the total number of organizations at the top, and 500+ pagination links at the bottom, and some sample org records for people who don't want to do a specific search but just want to look around -- people who want to browse instead of search.

[cazinc]

Hi @amandafrench, sure, I think a link there would make a lot of sense. We'll get that added in.

A couple points worth thinking about on this:

1. We could equally add in some "common searches" as links on the homepage, like one that brings up the orgs in the registry. Looking at the homepage of ror.org/search I'm not sure it would be immediately obvious how to find this sort of thing out for users. Actually, maybe some common searches could be put onto the homepage of the /search page instead?
2. You might also take a more general approach along the lines of "...or visit the search page where you can browser, find sample org records, or just see who the member orgs are. Again I'm not sure that 500 pages is the sort of thing that people would think to start picking through.

Overall I think it's useful to give people a route direct to the search page, but that it doesn't actually offer any more "hints" as to what to search for than they would currently see on the new dev site homepage, if you see what I mean?

[amandafrench]

@cazinc Wow, thanks, those are great points! Re 1), I especially like the idea of sample searches, and my vote would be to put a couple of them under the search box on the home page in the teal box rather than on /search itself, but I defer to @mariagould and @lizkrznarich. I'll come up with a couple today. I have noticed that people do usually just search for their own organization first, but I think it would be great to have some "hints" about what else to search for, sample searches that show a bit more about the registry and what it's useful for.

Re 2) I'm not so sure: I used the word "browse" to explain why I think it's a good idea to have a direct link to /search but the /search app isn't actually a browse interface, so I think let's just stick with "Visit the ROR search page" (or similar) as the language. You are definitely right that most people probably won't click on any of those pagination links at the bottom, so yes, the sample searches will do a better job of letting people see more of the registry itself. Also we don't have member orgs, so that's not applicable -- just a "list" of 100k+ research organizations.

[amandafrench]

Some possible sample searches:

https://ror.org/search?query=ministry%20of%20health

https://ror.org/search?query=nih

https://ror.org/search?query=nsf

https://ror.org/search?query=lincoln%20university

https://ror.org/search?query=concordia

https://ror.org/search?query=berkeley

https://ror.org/search?query=%20Universidad%20Libre%20Colombia%20

https://ror.org/search?query=universite%20de%20paris

[mariagould]

I'm open to including a link to the main search page from the homepage. Will add that in a set of notes I'm putting together for you about final touches @cazinc (coming soon!).

As far as search examples etc., I don't see these having a place on the homepage per se., and I think we should plan to address that as part of a next-phase refresh/examination of updates to the search UI.

[lizkrznarich]

I’m fairly agnostic about including search hints on the homepage, however, if/when we add them, I would suggest adding a prompt like “search by name, acronym or identifier”, since the ?query search used in the search UI is limited to name and ext ID fields. Maybe we could add some additional details in a popover about the limitations of the UI search and the advanced search available in the API.

[cazinc]

We've implemented the general link to the /search page now per Issue #70. Just let us know if you do decide you'd like any further changes on the ror-site side of things.