search

hackforla / website

Hack for LA's website
https://www.hackforla.org
GNU General Public License v2.0
324 stars 768 forks source link

Update Project Profile: Undebate #255

Closed harishlingam closed 4 years ago

harishlingam commented 4 years ago

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:

Resources/Instructions

See the hero image on the hackforla.org homepage.

ddfridley commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

ddfridley commented 4 years ago

undebate-sf-da-1500x700

ddfridley commented 4 years ago

undebate-sf-da-centered-1500x700 Here is a better version for that aspect ration.

ExperimentsInHonesty commented 4 years ago

@ddfridley How about something like this... but with different peoples pictures, not the same ones repeated. Screen Shot 2020-02-16 at 2 01 34 PM. 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 commented 4 years ago

slacked @ddfridley asking for update.

WilliamMFerguson commented 4 years ago

How about this? Undebate Mockup Image 2

ddfridley commented 4 years ago

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.

image

ExperimentsInHonesty commented 4 years ago

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.

Screen Shot 2020-03-02 at 10 39 07 PM

WilliamMFerguson commented 4 years ago

OK, let's try this...

Undebate Mockup Image 3

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

ddfridley commented 4 years ago

silhouettes-776666-extended-pixabay-1500x750 Try this image

ExperimentsInHonesty commented 4 years ago

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 commented 4 years ago

@ExperimentsInHonesty As requested, here is a comparison of the 2 hero images Screenshot from 2020-03-15 10-29-13 Screenshot from 2020-03-15 10-29-20

ExperimentsInHonesty commented 4 years ago

@KianBadie can you show us what those two images look like on mobile? https://github.com/hackforla/website/issues/255#issuecomment-599240112

KianBadie commented 4 years ago

@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

undebate_black_iphone5 undebate_blue_iphone5

iPhoneX

undebate_black_iphonex undebate_blue_iphonex

Pixel 2 XL

undebate_black_pixel2xl undebate_blue_pixel2xl

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: Screenshot from 2020-04-02 19-58-28 Screenshot from 2020-04-02 19-59-17

ddfridley commented 4 years ago

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: image or this: image

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 commented 4 years ago

@ddfridley

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

KianBadie commented 4 years ago

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

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

ddfridley commented 4 years ago

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

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 https://github.com/hackforla/website/issues/255#issuecomment-609084787, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAZJ534255TBHXEGXO4MGTTRK6J6HANCNFSM4KDRJDKA.

ExperimentsInHonesty commented 4 years ago

@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 commented 4 years ago

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

ExperimentsInHonesty commented 4 years ago

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 commented 4 years ago

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

Initial improvements:

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 commented 4 years ago

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

KianBadie commented 4 years ago

Link to new issues that @ExperimentsInHonesty mentioned above: https://github.com/hackforla/website/issues/510