Skip to content
This repository has been archived by the owner on Feb 2, 2023. It is now read-only.

Homepage #14

Closed
peterdesmet opened this issue Nov 14, 2022 · 30 comments
Closed

Homepage #14

peterdesmet opened this issue Nov 14, 2022 · 30 comments
Assignees

Comments

@peterdesmet
Copy link
Member

The homepage currently contains 7 elements:

  1. Content
  2. Box to highlight something
  3. Three standards
  4. Button to journal
  5. Latest news
  6. Box to subscribe to newsletter
  7. Button to become member
  8. (currently only on jekyll site) Latest tweets by @tdwg

@stanblum which of these elements do you think we should retain or change?

Biodiversity-Information-Standards-TDWG-

@stanblum
Copy link
Member

stanblum commented Nov 14, 2022 via email

@peterdesmet
Copy link
Member Author

Does this work well for the alert box:

https://github.com/tdwg/website/blob/db897b48798af085f5edc9b5bcb9cea56b4bd4bf/content/pages/home/index.md?plain=1#L12-L17

Or would you prefer more customization?

@peterdesmet
Copy link
Member Author

Additionally, do you think the alert box needs an image?

@stanblum
Copy link
Member

stanblum commented Nov 14, 2022 via email

@peterdesmet
Copy link
Member Author

Ok, let's support an image! It is optional and I have simplified things a bit, the settings are now:

https://github.com/tdwg/website-jekyll/blob/6af899155db5668b6db1fc178e8d377214f1c7a5/pages/home.md?plain=1#L10-L15

The subscribe and become a member buttons are replicated in Markdown.

The page looks like this (https://tdwg.github.io/website-jekyll/)

TDWG (2)

@stanblum is this sufficient?

@gkampmeier
Copy link

I like having an image because it is eye-catching and usually relevant and it is often the same one used either in the news item or on the webpage that it points to. That the attribution does not appear on/with that image (but is in the code), is a bit problematic to me, but given the size of the image on the box, it is probably not worth worrying about (and we don't see it on any of the other small boxes (currently). I am not on the fence--I like having an image.

@peterdesmet
Copy link
Member Author

@gkampmeier Good that image is implemented then 😄

It does indeed not include image attribution. I didn't add it for cards because of the size and because all cards (except the "featured" box) directly take you to a page where image attribution is shown.


Other comments about the home page? https://tdwg.github.io/website-jekyll/

@baskaufs
Copy link

It seems like the colored TDWG log needs to appear somewhere prominently on the home page. It's fine in the tiny version in the top banner for being on every page. But for the home page it could go somewhere in the permanent content (description of the organization, etc.)

@peterdesmet peterdesmet self-assigned this Nov 23, 2022
@ben-norton
Copy link
Member

ben-norton commented Nov 23, 2022

I created a couple of alternate design mockups for the homepage to accommodate a much larger version of the logo.
tdwg-homepage-mockup-elephant
tdwg-homepage-mockup-jellyfish
tdwg-homepage-mockup-wolf

@gkampmeier
Copy link

@ben-norton these are interesting but I like @peterdesmet's current incarnation https://tdwg.github.io/website-jekyll/ of the background, as it is more about texture than any one animal--your examples also may be more difficult to maintain and attribute as they appear to be cutouts. The clearly featured animals (and I hear the botanists, and all the other -ologists also squawking that the are not represented!), draw the eye away from the logo without apparent purpose. Was there a reason you didn't try to use the logo on the existing background? Or as @baskaufs suggested, use the colored logo in the body of the text? This way we could preserve the uniformity of navigation of the pages.

@ben-norton
Copy link
Member

ben-norton commented Nov 24, 2022

Ya it's hard to see the logo on the current background. Some of the background images are a bit noisy.
Fortunately, the animals aren't cutouts. https://unsplash.com/photos/FNVYos3W0AY
There are some awesome animal photos with black backgrounds. I did the same here https://stateofmammals.org/
and I think it worked.
Regardless, you do make a myriad of good points. It's just an idea to help find a solution.
The idea is to show that we are bringing collections / animals out of the darkness.
You could argue that we are doing so in more ways than one. The jellyfish just has cool colors.

@gkampmeier
Copy link

Ah, @ben-norton I can now appreciate your reasoning for the imagery (bringing out of the darkness) and yes, the jellyfish has cool colors, but so do a myriad of arthropods, fungi, and plants. Makes me recall when changing images on home pages was a new phenomenon--is that done anymore? Or has the fashion changed?

@ben-norton
Copy link
Member

ben-norton commented Nov 25, 2022

@gkampmeier By "changing images on home pages", do you mean loading an image at random every time the home page loads? I'm not sure about trends, but I've used it to solve this specific problem many times. It's very easy to set up. Every image in a set gets a number. When the page load, a number is selected at random, then the corresponding image loads. I've used this technique many times to solve the issue of fair representation. It's always worked. If we were to go that route, I would opt not to go with my design. It'll be much easier to create a collection of big backgrounds. My design requires not only dark shadowy silhouettes but the right placement and visible features.

@gkampmeier
Copy link

@ben-norton yes, that's what I meant, but having/finding a collection suitable of big backgrounds seems like a distraction at this point. Nice to know that it's still in use and works, though.

@peterdesmet
Copy link
Member Author

I have added a colour logo on the homepage as @baskaufs suggested:

TDWG (6)

I also removed the news items, but still find it quite cluttered. I think it might work better if the featured item is an alert at the top, with the logo on the side

TDWG (7)

@gkampmeier
Copy link

@peterdesmet I prefer the first iteration--the logo is outsized and dominates the page in the second one. It balances nicely with the featured item in the first and does not appear cluttered to me but modular.

@baskaufs
Copy link

I agree with @gkampmeier The first version seems about right.

@thearyung
Copy link

I prefer the first one too but I like the small box alert for news items in the second one

@peterdesmet
Copy link
Member Author

Outreach and communications FS asked for Twitter feed to be visible on homepage. I have thus moved the featured item to the top of the content rather than the side column. It does allow the inclusion of an image to call attention.

TDWG home

peterdesmet added a commit to tdwg/website that referenced this issue Dec 8, 2022
- Include Twitter feed
- Disable display of blog posts
- Allow to feature an item
- Include rest as Markdown (including buttons)

See #tdwg/website-migration-2022#14
@ben-norton
Copy link
Member

Nice work on integrating the Twitter feed. It looks good Peter despite the obnoxious restrictions twitter enforces regarding customizing the look and feel.

@ben-norton ben-norton reopened this Dec 8, 2022
@ben-norton
Copy link
Member

ben-norton commented Dec 8, 2022

Reopen - Reclose.
You can't comment on a close issue?

@peterdesmet
Copy link
Member Author

Reopening: with changes at Twitter, it was decided not to feature the Twitter feed on homepage. Will look how to best integrate logo.

@peterdesmet
Copy link
Member Author

Here are two new versions.

  • It does no longer have the Twitter feed
  • I kept the featured item at the top (as preferred by @thearyung and me). Note that this featured item isn't necessarily always there
  • I increased the size of the first paragraph

I prefer the version on the left with the long horizontal logo as it is clean, readable and will work well on smaller screens.

Thoughts?

peterdesmet added a commit to tdwg/website that referenced this issue Jan 16, 2023
@gkampmeier
Copy link

@peterdesmet @thearyung my biggest problem with having the alert box so front-and-center is as here, when content is stale/outdated. You could argue that it will push us to do better, but what happens if we have no photo (focal point; e.g., we need to put something up about TDWG 2023 but have no official photo yet from the conference organizers) or nothing of shirt-grabbing interest or more than one thing?

On the home page, what is most important and how do we make sure that users coming to our home page either see that information there or have the confidence to know where to go within a click or two to find it? Is this the alert box or is who/what we are more important? While these are philosophical questions (possibly without clearly consistent answers depending on users/visitors to the site), I would like to make sure that the design is not limiting for us.

I (personally) tend to prefer the compact logo version (right hand version) over the string (which seems more appropriate to a footer or header), but while I would like to see this up top, its placement with the buttons to subscribe or become a member are balanced nicely. The question of how it all looks on mobile screens is a valid one, but I can't tell anything from the screen captures. In the current website, the alert box appears below the text about TDWG in mobile...as a compact, rather than long box, it is well-formatted for mobile with a photo + information + button.

@peterdesmet
Copy link
Member Author

@gkampmeier Note that the alert box 1) does not require an image and 2) can be removed if there is no news. The fact that potentially can be removed makes it more complex to design in a separate column (previous iterations), i.e. what do you do when there is no alert?

Screenshot 2023-01-17 at 09 51 06

So, I'd opt to leave the alert box as is. I'll try to incorporate the non-stretched logo.

@ben-norton
Copy link
Member

ben-norton commented Jan 17, 2023

I think the optional alert box is critical. It's also referred to as a type of call out banner.
I suggest:

  1. Design it to accommodate three items at any given time.
  2. Put in place some sort of rules governing when and how it is to be used. Nothing to restrictive, just enough to keep it clean.
  3. Designate someone responsible for maintaining it.

You could call it "community action items".

@gkampmeier
Copy link

@ben-norton we also have a news section for additional items. The alert box may refer to a news item or something more pressing (opening and/or deadline for a review, abstract submission, conference registration), and I agree, it is critical to have timely, changing content, particularly that calling for action by the community. Currently, its size and structure restrict what can be featured there. It is maintained primarily by the Secretary (currently includes @thearyung and @stanblum), but others of us have also had occasion to add things.

@ben-norton
Copy link
Member

@gkampmeier
In my experience, timely content like "community action items" are best handled by a separate person that is not in a formal leadership role. They are often much too busy to provide the attention timely content needs to remain relevant and succinct. It often defaults to leadership, but shouldn't. Maybe an approval process, but you need a person to drive it. Does that make sense?

"Community action items" are separate from news. They are single actions that people can take advantage of right at that moment like a public comment period for a particular issue. They are targeted and arguably the most direct mechanism for engaging the community. It enables the community to take action by making a contribution with one click.

@gkampmeier
Copy link

@ben-norton good ideas; is also part of Outreach & Communications as well and strategic planning.

@peterdesmet
Copy link
Member Author

I reverted to a "card" based approach for the featured item, shown on the right side. When there is no featured item, that column won't be used and content will be centered. The logo is shown next to the buttons.

Closing this issue.

Wide screen

TDWG (9)

Small screen

TDWG (8)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants