[Marketing] Website quickfix: sponsors page design notes

Committees Marketing
1

Some good news, it looks like we can find the design documents from GetInteractive, and can revise engineer some details, to recover the sponsors page:

  • Checking meeting notes sponsor wireframes were sent to the list for discussion
  • Email indicates this google document and I can see the wireframe on page 17
  • It looks like the wordpress theme is very simple, and relied on some care being used when producing the sponsors images

This leaves us with a clear “quickfix”:
a) go through the sponsors logos and place each on a 740 x 412 template (taking care to centre and adjust so the result is “fair” visually)

b) restore the css styling (rows and columns) matching design

Here are my research notes for anyone wishing to check my work…
Jody

NOTES

GetInteractive Design

  • When editing a sponsors page - and adding a logo the image produces a warning indicating:
    • Width should be at least: 740px
    • Height should be at least: 412px
  • 740 by 412px (aspect ratio of 1.80)
  • The easiest thing to do is recreate the sponsor logos in this size and then multi-column layout becomes easier
  • The wireframe shows rectangles, with some margins between them (which would mitigate some of the relative size conflicts we are experiencing)

Looking at wordpress media:

The original logos provided by GetInteractive all have filenames sponsor-xxxxx

sponsor-gaia3d-e1594996762376.png

  • August 9, 2017
  • 16 KB
  • 358 by 160 pixels (aspect ratio 2.24)

sponsor-geodan.png

  • August 9, 2017
  • 14 KB
  • 358 by 160 pixels (aspect ratio 2.24)

Further more these were created with a consistent amount of white space.

Newer logos did not keep this aspect ratio, or the recommended size:

OrangeMan-Logo_RoundOrangeENG.png

  • December 29, 2021

  • 24 KB

  • 380 by 385 pixels (aspect ratio 0.99)

camptocamp_logo_square_moto_2020_cmyk-1.png

  • February 22, 2021
  • 63 KB
  • 897 by 447 pixels (aspect ratio of 2.01)

Changes to page theme

  • The logos are now arranged in square, not the rectangles from the wireframe
  • CSS allows logos to completely fill the available square (example 500x500 pixels)
  • Q: I wonder if we can compare with the initial GetInteractive design in version history

Checking www_osgeo/origional branch:

···

–
Jody Garnett

2

Hey folks, I am moving notes to a GitHub issue here: https://github.com/OSGeo/osgeo/issues/250
I have made a good visual template for aligning sponsor logos within a 740 x 412 px tile.

image.jpg

···

–
Jody Garnett

–
Jody Garnett

3

The results for current sponsors are now available online: https://www.osgeo.org/sponsors/
While the sponsors page will not look correct until multi-column layout is restored, the website footer is noticeably better.

The files are available here: https://github.com/OSGeo/osgeo/tree/master/marketing/website

image.jpg

···

–
Jody Garnett

–
Jody Garnett

–
Jody Garnett

4

The page has been restored to column layout, and looks much better: https://www.osgeo.org/sponsors/

Limitations:

image.jpg

···

–
Jody Garnett

–
Jody Garnett

–
Jody Garnett

–
Jody Garnett

5

On 2024-02-19 18:07, Jody Garnett via Marketing wrote:

The page has been restored to column layout, and looks much better: https://www.osgeo.org/sponsors/

Limitations:

  * The column layout does not adapt to narrow screens (such as phone
    or tablet) - anyone good with CSS :slight_smile:

Tested on my phone (Android with Firefox and Chrome) and the table collapses to a single column nicely. Also tested with the mobile view on desktop (again Firefox and Chromium) and looks the same. Where are you having issues exactly?

--
Jorge Sanz |https://www.osgeo.org/member/jorge-sanz/

6

On 2024-02-20 10:07, Jody Garnett wrote:

iPad tablet, can reproduce the same effect with Firefox and responsive design mode:

--
Jody Garnett

Ah, you mean in portrait mode. I get a similar layout on my browser when rotate the screen.

Would you expect it to be in a single column also on that layout? (maybe this convo should be moved to a ticket).

--
Jorge Sanz |https://www.osgeo.org/member/jorge-sanz/

image.jpg