search

makeabilitylab / makeabilitylabwebsite

The Makeability Lab website
https://makeabilitylab.cs.washington.edu
MIT License
8 stars 67 forks source link

Black affiliation footer looks like crap both on desktop and mobile #689

Closed jonfroehlich closed 5 years ago

jonfroehlich commented 5 years ago

On desktop/laptop, the black affiliations footer looks bad because of spacing and size

image

And on mobile, it's even worse (horrendous). Related to: https://github.com/jonfroehlich/makeabilitylabwebsite/issues/571

image

higherdefender commented 5 years ago

I'll work on this one after you merge #690 to the main branch. Not that I can't work on it right away, but I'd like to batch this for later.

jonfroehlich commented 5 years ago

Makes sense.

higherdefender commented 5 years ago

I tried to play around with the black affiliation when working on #690. For now I used a hack to make it look better:

  1. I made the spacing and size better for larger screen sizes.
  2. I removed the affiliation for smaller widths.

To do this the really right way, all logo images should be the same size. I will do some image editing later and see if it's possible to come to a better solution.

On Thu, Nov 8, 2018 at 11:05 AM Jon Froehlich notifications@github.com wrote:

Makes sense.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/jonfroehlich/makeabilitylabwebsite/issues/689#issuecomment-437118276, or mute the thread https://github.com/notifications/unsubscribe-auth/ALGPL_BP9xlfbwxeG0hifLtdyqul_v9Aks5utIB3gaJpZM4YTuSw .

jonfroehlich commented 5 years ago

Can you post some screenshots at different browser widths so I can see what you're talking about? It should also be easy enough to download all of the logo images and edit them...

higherdefender commented 5 years ago

@jonfroehlich black-footer

jonfroehlich commented 5 years ago

What happens at the end? Looks like it disappears?

Sent from my iPhone

On Nov 12, 2018, at 4:58 PM, Dhruv Jain notifications@github.com wrote:

@jonfroehlich

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

higherdefender commented 5 years ago

Yes, that’s the hack I did for now :P

On Mon, Nov 12, 2018 at 6:09 PM Jon Froehlich notifications@github.com wrote:

What happens at the end? Looks like it disappears?

Sent from my iPhone

On Nov 12, 2018, at 4:58 PM, Dhruv Jain notifications@github.com wrote:

@jonfroehlich

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/jonfroehlich/makeabilitylabwebsite/issues/689#issuecomment-438102848, or mute the thread https://github.com/notifications/unsubscribe-auth/ALGPLyCyKv0Wp1ILz5gy1dhCe9Ey4Yr_ks5uuinKgaJpZM4YTuSw .

-- sent from phone -DJ

jonfroehlich commented 5 years ago

That’s not a reasonable solution imo.

Sent from my iPhone

On Nov 12, 2018, at 6:39 PM, Dhruv Jain notifications@github.com wrote:

Yes, that’s the hack I did for now :P

On Mon, Nov 12, 2018 at 6:09 PM Jon Froehlich notifications@github.com wrote:

What happens at the end? Looks like it disappears?

Sent from my iPhone

On Nov 12, 2018, at 4:58 PM, Dhruv Jain notifications@github.com wrote:

@jonfroehlich

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/jonfroehlich/makeabilitylabwebsite/issues/689#issuecomment-438102848, or mute the thread https://github.com/notifications/unsubscribe-auth/ALGPLyCyKv0Wp1ILz5gy1dhCe9Ey4Yr_ks5uuinKgaJpZM4YTuSw .

-- sent from phone -DJ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

jonfroehlich commented 5 years ago

I like your idea of just showing icon versions of the affiliations once the page gets to a certain width.

higherdefender commented 5 years ago

Perfect, I’ll work on building these designs then. I’ll probably mockup before implementing.

On Tue, Nov 13, 2018 at 2:26 PM Jon Froehlich notifications@github.com wrote:

I like your idea of just showing icon versions of the affiliations once the page gets to a certain width.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/jonfroehlich/makeabilitylabwebsite/issues/689#issuecomment-438462197, or mute the thread https://github.com/notifications/unsubscribe-auth/ALGPL0cvYgxFBddq4QqpQaIkYmAxcrQyks5uu0cWgaJpZM4YTuSw .

-- sent from phone -DJ

higherdefender commented 5 years ago

Also, I am removing the UMD CS logo as per our discussion.

Pax vobiscum, dhruvjain.info

Good emailing strategies, please read this http://thinksimplenow.com/productivity/15-tips-for-writing-effective-email/ .

On Tue, Nov 13, 2018 at 2:27 PM Dhruv Jain dhruvjainiit@gmail.com wrote:

Perfect, I’ll work on building these designs then. I’ll probably mockup before implementing.

On Tue, Nov 13, 2018 at 2:26 PM Jon Froehlich notifications@github.com wrote:

I like your idea of just showing icon versions of the affiliations once the page gets to a certain width.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/jonfroehlich/makeabilitylabwebsite/issues/689#issuecomment-438462197, or mute the thread https://github.com/notifications/unsubscribe-auth/ALGPL0cvYgxFBddq4QqpQaIkYmAxcrQyks5uu0cWgaJpZM4YTuSw .

-- sent from phone -DJ

jonfroehlich commented 5 years ago

Our discussion was that the UMD CS logo should be removed after Seokbin graduates and we no longer have ML members at Maryland.

higherdefender commented 5 years ago

Ah okay. And the UMD logo would still stay?

On Wed, Nov 14, 2018 at 11:08 AM Jon Froehlich notifications@github.com wrote:

Our discussion was that the UMD CS logo should be removed after Seokbin graduates and we no longer have ML members at Maryland.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/jonfroehlich/makeabilitylabwebsite/issues/689#issuecomment-438780460, or mute the thread https://github.com/notifications/unsubscribe-auth/ALGPLx_espgRkXiWBeC1h7OV_UTfjGinks5uvGoYgaJpZM4YTuSw .

jonfroehlich commented 5 years ago

Yes, given that we have ML students at UMD, I think it's important for inclusivity purposes that we also include UMD on the affiliation bar.

I'm not sure what the source of confusion is stemming from: yesterday, we spoke about how we both really liked the UMD CS logo (woohoo!) and that I'd like to keep UMD affiliation the webpage (and our t-shirts) until all of our UMD ties are severed. This won't happen until we graduate all of the UMD students. :)

jonfroehlich commented 5 years ago

@higherdefender, what's the status of this? Perhaps @htadeusiak could take over if you tell him which branch you were working on and explain the current status...

higherdefender commented 5 years ago

@htadeusiak https://github.com/htadeusiak Yes, please go ahead on this if you would like to. The branch is mobile-footer-black-affiliation. I haven't done much (just changed some padding a bit) so you could just start from the master branch itself if you want.

On Thu, Dec 27, 2018 at 5:54 AM Jon Froehlich notifications@github.com wrote:

@higherdefender https://github.com/higherdefender, what's the status of this? Perhaps @htadeusiak https://github.com/htadeusiak could take over if you tell him which branch you were working on and explain the current status...

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jonfroehlich/makeabilitylabwebsite/issues/689#issuecomment-450154716, or mute the thread https://github.com/notifications/unsubscribe-auth/ALGPL-8m1xD3zGP1VYU6tdH6elPmrDNrks5u9NEggaJpZM4YTuSw .

jonfroehlich commented 5 years ago

Thanks @higherdefender. Can you give us a more comprehensive idea of what you were planning to do and the discussions we've had thus far?

higherdefender commented 5 years ago

Oh yes! Sure!

So, we were thinking of how to make the black affiliation footer appear well on different screen sizes (currently it looks awkward on smaller screen sizes). One solution that both Jon and I liked is to have full logo (with text) on big screen size and put icons on the small screen size.

As an example, see this logo:

[image: image.png]

On smaller screen sizes, going by our example, this would only show the "W".

[image: image.png]

As another idea, you could also decrease the number of logo on mobile screen sizes. For example, instead of having UW CSE and UW logos, you could only show the UW logo. Similarly, for UMD CS and UMD logos can be replaced with a single UMD logo.

You might want to experiment a bit with different screen sizes (perhaps by gradually decreasing the window size on a computer) to see what works best for you.

On Thu, Dec 27, 2018 at 12:50 PM Jon Froehlich notifications@github.com wrote:

Thanks @higherdefender https://github.com/higherdefender. Can you give us a more comprehensive idea of what you were planning to do and the discussions we've had thus far?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jonfroehlich/makeabilitylabwebsite/issues/689#issuecomment-450228681, or mute the thread https://github.com/notifications/unsubscribe-auth/ALGPL1bVm9Z5bmZ2m5zZjeDZRREs-Ejsks5u9TJ8gaJpZM4YTuSw .

jonfroehlich commented 5 years ago

Thanks @higherdefender but note that your images didn't come through.

htadeusiak commented 5 years ago

I start at 380px wide and expand it out. Opinions?

resize

I could have a single UMD logo with no text instead of the two UMD logo when its mobile. So that would just be three icons instead of four. It would look something like this:

screen shot 2018-12-29 at 1 49 39 pm
jonfroehlich commented 5 years ago

I like the 3 logo version (second option). It’s clean and simple. Nice job.

Sent from my iPhone

On Dec 29, 2018, at 1:51 PM, Hank Tadeusiak notifications@github.com wrote:

I start at 380px wide and expand it out. Opinions?

I could have a single UMD logo with no text instead of the two UMD logo when its mobile. So that would just be three icons instead of four. It would look something like this:

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

htadeusiak commented 5 years ago

Before:

screen shot 2019-01-02 at 12 20 47 pm

After:

screen shot 2019-01-02 at 12 20 38 pm

Before:

screen shot 2019-01-02 at 12 21 45 pm

After:

screen shot 2019-01-02 at 12 21 51 pm

Before:

screen shot 2019-01-02 at 12 22 03 pm

After:

screen shot 2019-01-02 at 12 22 08 pm
jonfroehlich commented 5 years ago

Looks good. Just merged the PR. Unfortunately, makeability-test is down right now but hopefully it will be up soon so we can test there too.

On Wed, Jan 2, 2019 at 12:23 PM Hank Tadeusiak notifications@github.com wrote:

Before: [image: screen shot 2019-01-02 at 12 20 47 pm] https://user-images.githubusercontent.com/33988444/50610741-e6152f80-0e88-11e9-9dbb-6a7f2f217ec1.png After: [image: screen shot 2019-01-02 at 12 20 38 pm] https://user-images.githubusercontent.com/33988444/50610744-e9a8b680-0e88-11e9-9614-85efa81d9068.png

Before: [image: screen shot 2019-01-02 at 12 21 45 pm] https://user-images.githubusercontent.com/33988444/50610785-09d87580-0e89-11e9-83b1-e039fb8f6a51.png After: [image: screen shot 2019-01-02 at 12 21 51 pm] https://user-images.githubusercontent.com/33988444/50610789-0d6bfc80-0e89-11e9-99a5-3fc2c917d586.png

Before: [image: screen shot 2019-01-02 at 12 22 03 pm] https://user-images.githubusercontent.com/33988444/50610798-14930a80-0e89-11e9-912f-32a5b8459eeb.png After: [image: screen shot 2019-01-02 at 12 22 08 pm] https://user-images.githubusercontent.com/33988444/50610808-178dfb00-0e89-11e9-8d0d-5cefdd27ab5d.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jonfroehlich/makeabilitylabwebsite/issues/689#issuecomment-450974121, or mute the thread https://github.com/notifications/unsubscribe-auth/ABi-9d11QnOtFc6Hdj769KofxwmdlTFCks5u_RUqgaJpZM4YTuSw .

-- Jon Froehlich Associate Professor Paul G. Allen School of Computer Science & Engineering University of Washington http://www.cs.umd.edu/~jonf/ http://makeabilitylab.io @jonfroehlich https://twitter.com/jonfroehlich - Twitter