Update Project Profile: Undebate

[harishlingam]

Overview

Update the following fields for your project. These updated fields will then be updated to be shown on the website.

Action Items

Provide in the comments below:

• Updated wording, if necessary, on the project card (see hackforla.org).
• Information on which tools your team is using for the project (Ex: Figma, Balsamiq, Photoshop, etc.). This is different than programming languages.
• Updates for "Looking For" section.
• Any updated links that are not currently displayed on the site (do you have a demo site?).
• Hero image to be displayed on Project Home Page at 1500 x 700 px.
• Any resources for a Getting Started link (either a link to a wiki or readme).

Resources/Instructions

See the hero image on the hackforla.org homepage.

[ddfridley]

@harishlingam The instructions say that the banner image should be 16:9 but the example you show is 10:1 (1298x129) . Can you clarify what you are looking for? Is it to replace what's on the hackforla site now, or is it for a new use?

When you say "update the fields" I'm not sure how, but I think you mean by leaving a comment here. If something else, please let me know.

For tools, please add "Figma"
For Looking For: please add "marketing/messaging"
Getting Started is at https://github.com/EnCiv/undebate/blob/master/README.md
thanks!

[harishlingam]

Hi @ddfridley, 1) please provide all requested information as a comment on this page, as you've already started to do. 2) We've just updated our issue card to specify dimensions for the banner image. Please let me know if you have any other questions!

[ExperimentsInHonesty]

@ddfridley do you have an updated image for our hero?

• Hero image to be displayed on Project Home Page at 1500 x 700 px

[ddfridley]

[ddfridley]

Here is a better version for that aspect ration.

[ExperimentsInHonesty]

@ddfridley How about something like this... but with different peoples pictures, not the same ones repeated.
. And names below. I am sure I can get consent from everyone at CfA and we can get a screen shot of anyone on any of my video calls, if I ask them, so you would have no shortage of people willing to add their images to it. The idea being to show that lots of people use the tool.

[ExperimentsInHonesty]

slacked @ddfridley asking for update.

[WilliamMFerguson]

How about this?

[ddfridley]

Here is one with less text. Having the written question is important to the meaning, but the text is pretty big. If you could give an example of scaled down and blurry where the image will be used, we might be able to make it better.

[ExperimentsInHonesty]

Click here to see our work in progress for your project's homepage at hackforla's website: undebate

See how in this screen shot, the word undebate is appearing over the hero image. If we used the image above it would just be a mishmash of text over the "why are you running for office" + the navigation buttons.

[WilliamMFerguson]

OK, let's try this...

We can provide whatever resolution you need. The picture needs to communicate Undebate in two seconds.

[ddfridley]

Try this image

[ExperimentsInHonesty]

to discuss with david. PR 318 is the one that changed the image. We can't revert because it has other things tied to it (the id). But we can overwrite back.

[KianBadie]

@ExperimentsInHonesty As requested, here is a comparison of the 2 hero images

[ExperimentsInHonesty]

@KianBadie can you show us what those two images look like on mobile? #255 (comment)

[KianBadie]

@ExperimentsInHonesty sorry for replying so late Bonnie. I forgot about this and was reminded while looking at issues assigned to me.

Also sorry, this post will be long because I am going to post screenshots for different screen sizes

iPhone5

iPhoneX

Pixel 2 XL

Also, my previous comment of the desktop views had darker tints to them (I don't know if this happens in the process of screenshotting and uploading to GitHub), but I'll upload them again in hopes that they appear more accurately:

[ddfridley]

If we have to do it like this, then go with the blue silhouette image. But please consider:

1. to make an image useful in the wide frame, and also zoomed in like this is a tough constraint, and the real information that people want is below the fold, when your on these small screen sizes.

2. In the header, with class="project=hero" there is:

@media (max-width: 479px)
.project-hero {
        max-height: 350px;
        min-height: 0;
}

You could change it to:

.project-hero {
        min-height: 0;
        width: 100vw;
        height: auto;
}

And then it would look like this:

or this:

And you wouldn't need to do media queries, and you wouldn't need to test how it looks at all the different media query break points.

In general, I suggest avoiding using px dimensions on anything and define sizes in vw, vh, em, or rem for responsive web pages, it will make the appearance more consistent across devices, and save time.

[KianBadie]

@ddfridley

Thanks for the feedback, yeah that's something we can talk about and consider. I'll look more into it tomorrow :)

[KianBadie]

So I did some experimenting, and here are the questions and thoughts I had:

• So basically, from what I understood, you are saying on mobile the hero image takes up more space than it merits. With the styling rules you suggested, the hero image would be much shorter, but still show the hero image with much less cropping or zooming in (at least that's how it appears when I did it). While before, the hero images would keep the same height, but in order to compensate the image would be cropped/zoomed much more on mobile.
• As you said, it is nice that the image changes correctly depending on the screen size (with minimal cropping/zooming on different screen sizes), while on the original the cropping/zooming of the image changes depending on the screen size.

Example: iPhone 5 vs Pixel 2XL

With your mobile rules:

(Ignore the white line in between the hero and the content, that can be removed)

With current rules:

Applying the rules past mobile

• From my understanding of the last comment, you would want these rules not just for mobile breakpoints. If I integrated that correctly, it does indeed look like the second screenshot you posted
  (again, you can ignore the white line in between the nav bar and the image because that's not dependent on what we are talking about)
  
• One thing I noticed is that in both my screenshot and yours, the image is cropped and zoomed in. This does not affect yours too much, since it still captures the people talking well. But for others it might have more affects. One I can think of is the New Schools Today image, where the image is a group photo. With the rules, you see less people with the crop/zooming in. Other images though it might not matter (for example: VRMS has the city skyline and Public Tree map has the image of the map. Depending on how you feel, the zooming in might not be too big of a deal)
  
  
  

Would like to hear your thoughts @ddfridley. Again, thanks for the feedback! I think these are good ideas.

[ddfridley]

min-height: 33vh But I see that there's no way to please every display. Either you crop the sides, or you crop top/bottom with the way it is currently You could use @media (orientation: landscape) and @media (orientation: portrait) to make things different for the different layouts (and use vw and vh to specify sizes) but I don't know how much trouble that is, and how valuable this is vs other features.

…

On 4/4/2020 1:28 PM, Kian Badie wrote: So I did some experimenting, and here are the questions and thoughts I had: * So basically, from what I understood, you are saying on mobile the hero image takes up more space than it merits. With the styling rules you suggested, the hero image would be much shorter, but still show the hero image with much less cropping or zooming in (at least that's how it appears when I did it). While before, the hero images would keep the same height, but in order to compensate the image would be cropped/zoomed much more on mobile. * As you said, it is nice that the image changes correctly depending on the screen size (with minimal cropping/zooming on different screen sizes), while on the original the cropping/zooming of the image changes depending on the screen size. Example: iPhone 5 vs Pixel 2XL With your mobile rules: Screenshot from 2020-04-04 13-06-10 <https://user-images.githubusercontent.com/18221058/78460378-31625300-7675-11ea-80b5-88760788ec40.png> (Ignore the white line in between the hero and the content, that can be removed) Screenshot from 2020-04-04 13-06-19 <https://user-images.githubusercontent.com/18221058/78460379-31fae980-7675-11ea-8f1c-1232056f3b9b.png> With current rules: Screenshot from 2020-04-04 13-07-29 <https://user-images.githubusercontent.com/18221058/78460390-4a6b0400-7675-11ea-9d29-b502dade4401.png> Screenshot from 2020-04-04 13-07-36 <https://user-images.githubusercontent.com/18221058/78460392-4b039a80-7675-11ea-8f56-c58f9ee7a7d2.png> Applying the rules past mobile * From my understanding of the last comment, you would want these rules not just for mobile breakpoints. If I integrated that correctly, it does indeed look like the second screenshot you posted (again, you can ignore the white line in between the nav bar and the image because that's not dependent on what we are talking about) Screenshot from 2020-04-04 13-15-58 <https://user-images.githubusercontent.com/18221058/78460539-85ba0280-7676-11ea-947a-bc81744cc0ae.png> * One thing I noticed is that in both my screenshot and yours, the image is cropped and zoomed in. This does not affect yours too much, since it still captures the people talking well. But for others it might have more affects. One I can think of is the New Schools Today image, where the image is a group photo. With the rules, you see less people with the crop/zooming in. Other images though it might not matter (for example: VRMS has the city skyline and Public Tree map has the image of the map. Depending on how you feel, the zooming in might not be too big of a deal) Screenshot from 2020-04-04 13-25-42 <https://user-images.githubusercontent.com/18221058/78460703-e39b1a00-7677-11ea-871b-dca210d3bbba.png> Screenshot from 2020-04-04 13-25-52 <https://user-images.githubusercontent.com/18221058/78460704-e4cc4700-7677-11ea-9556-35406d69234c.png> Screenshot from 2020-04-04 13-26-06 <https://user-images.githubusercontent.com/18221058/78460705-e4cc4700-7677-11ea-9dda-022498796bc7.png> Would like to hear your thoughts @ddfridley <https://github.com/ddfridley>. Again, thanks for the feedback! I think these are good ideas. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#255 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAZJ534255TBHXEGXO4MGTTRK6J6HANCNFSM4KDRJDKA>.

[ExperimentsInHonesty]

@KianBadie I just got a change to read through this fully. Do you know what David means by @media orientation landscape and portrait, in terms of code?

[ExperimentsInHonesty]

@ExperimentsInHonesty to setup a zoom meeting with @cnk , @KianBadie & @leonelRos with @ddfridley

[ExperimentsInHonesty]

Put this on hold, this week. Trying to schedule for this week. Sent message on slack this morning. Please add your schedule in the thread.

[KianBadie]

So me @leonelRos and @ddfridley had our meeting on Tuesday and here are some points we discussed. Let me know if I missed anything:

• David pointed out how using pixels to determine the height and width of elements is a problem. It is not as flexible for different screen sizes.
• On mobile, the banner image makes the content of the page start off towards the bottom of the screen (I believe this is because we are using a fixed pixel height). This shows more especially on small mobile screens
• The current implementation crops the image in different ways. On mobile for example, I think the height is too big. This results in the image zooming in in order to display the full image from top to bottom at the cost of cutting off the sides. On the other hand, when the width is too large length wise, it seems like the top and bottom is being cut off.

Initial improvements:

• David's styling rules when applied on mobile reduce the height of the image, which reduces the amount of overall cropping

I was going to fiddle around with this by adding an actual image element to the header rather than have it be in the "background-image" property. I stopped fiddling with it to wait until we discuss it as a group and create an actual issue out of it.

@ddfridley I would say the overall goal of the discussion/new issue was to minimize the amount of cropping and display the banner images better. I'm not too sure how to boil it down into something more specific, can you think of anything?

[ExperimentsInHonesty]

@KianBadie to make new issue and mention this issue #255 in it, and close this issue with a link to the new issue.

[KianBadie]

Link to new issues that @ExperimentsInHonesty mentioned above: #510