Decrease the logo width in the header and footer on small screens

michaelhagedon commented 2 years ago

Motivation

At certain widths below the small breakpoint, the logo seems too big:

Proposed Resolution

Describe the solution you'd like

Let's introduce more right padding, like so:

Describe alternatives you've considered

Alternatively, we could make the width configurable.

Roles and Permissions considerations

Everyone would see this.

trackleft commented 2 years ago

Are you using a web header svg for that? All logos provided by marketing have the exact same Width to Block A relationship as far as I remember, in order to keep the A the same size for everyone with differing unit designation text to the right of it.

Otherwise we would be manually adjusting logos on each of the hundreds of sites we manage.

I think the aspect ratio is 108 : 17 with the block A set at 17px height, the overall height of the logo graphic is variable as long as the ratio between the width of the logo graphic(artboard) and the "Block A" is the same.

I used this calculator to calculate sizes https://andrew.hedges.name/experiments/aspect_ratio/, though with a vector graphic, you should only need the ratio.

For example: https://cdn.uanews.arizona.edu/s3fs-public/news%20lockup%202020.png https://president.arizona.edu/sites/default/files/EOP_WebHeader_0.png https://marcomm.arizona.edu/sites/default/files/UniversityMarketing%26Communications_Webheader-01_0.png

Though even if you had the logo with the built-in padding on the right, I agree the current QS2 implementation needs work.

As a side note, when adding logos to web sites, please be sure to use the RGB or Hex color versions, since all other logos are meant for print. Marketing used a process to match RGB to CMYK a while back with a spectrophotometer in the University of Arizona Digital Print Studio to make sure that the RGB colors matched printed materials as closely as possible, but many people have been using print logos and colors in Digital applications and vice-versa. Like the light blue block A on some tv commercials.

michaelhagedon commented 2 years ago

Well, I didn't know most of that, nor do I know exactly what we're doing except that, yes, it's an SVG...

camikazegreen commented 2 years ago

I would love Sanjana's take on this, since we typically have to resize all of the logos that we get from marketing to get them to display correctly (and have the A's the same size) on our sites.

natebyerley commented 2 years ago

I think we should strive to use the .svg as provided by marketing and brand, rather than resizing/adjusting/changing file format. If marketing and brand is creating a consistent product, then we remove the variable of one of us adjusting things based on personal preference. This should lead to more consistency and time savings on our side. Since our last discussion about .svg compatibility, I have been uploading the straight svg from the digital file folder. Seems like we could reduce the logo container width to maybe 75% for smaller screens.

trackleft commented 2 years ago

@natebyerley could you please provide some logo files we can test with.

I think I could write a script to resize the svg artboards to the correct ratio in relation to the A height.

danahertzberg commented 2 years ago

Next steps: Discuss current landscape of logo use on websites, then determine how we can standardize.

trackleft commented 2 years ago

az-digital / az_quickstart