tdwg / website-migration-2022

Website migration 2022
0 stars 0 forks source link

Homepage #14

Closed peterdesmet closed 1 year ago

peterdesmet commented 1 year ago

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 commented 1 year ago
  1. Content
  2. Alert box (hot item)
  3. TDWG Announcements subscription
  4. News (once hot, now cooling items)
  5. Membership

  6. Standards
  7. Journal

It's not that Standards and Journal are not important, obviously they are, but there are (will be) menu items at the top of the page that link directly to those topic areas.

On Mon, Nov 14, 2022 at 9:32 AM Peter Desmet @.***> wrote:

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 https://tdwg.github.io/website-jekyll/) Latest tweets by @tdwg https://github.com/tdwg

@stanblum https://github.com/stanblum which of these elements do you think we should retain or change?

[image: Biodiversity-Information-Standards-TDWG-] https://user-images.githubusercontent.com/600993/201726793-c3c10de6-af98-4f4c-8923-c629185cc7da.png

— Reply to this email directly, view it on GitHub https://github.com/tdwg/website-jekyll/issues/14, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACKZUDJCRM2EIPM6MSW2ZF3WIJZS7ANCNFSM6AAAAAASAB7PDM . You are receiving this because you were mentioned.Message ID: @.***>

peterdesmet commented 1 year ago

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 commented 1 year ago

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

stanblum commented 1 year ago

The primary function of an image here is to grab attention or provide an associated identity.

We have been "branding" conferences with an image or a logo, and used that image/logo in the alert box when the alert is about the conference. I don't know how strong that branding is, and it changes every year. Some alerts are about other organizations or projects, and they sometimes have logos we can/do use there (e.g., BiCIKL, GBIF)

Our standards generally don't have strongly associated images, so for alerts about our standards we just try to use something both eye-catching and relevant.

Those are the arguments "for" having an image. I'm on the fence.

On Mon, Nov 14, 2022 at 10:52 AM Peter Desmet @.***> wrote:

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

— Reply to this email directly, view it on GitHub https://github.com/tdwg/website-jekyll/issues/14#issuecomment-1314223731, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACKZUDPEWED62PIRY3HV3GTWIKC5RANCNFSM6AAAAAASAB7PDM . You are receiving this because you were mentioned.Message ID: @.***>

peterdesmet commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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.)

ben-norton commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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

thearyung commented 1 year ago

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

peterdesmet commented 1 year ago

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

ben-norton commented 1 year ago

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 commented 1 year ago

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

peterdesmet commented 1 year ago

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

peterdesmet commented 1 year ago

Here are two new versions.

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?

gkampmeier commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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

peterdesmet commented 1 year ago

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)