Jump to content

How would you show that on mobile?


bernhard
 Share

Recommended Posts

I'm working on a website for a local municipal and they have a section showing logos of partners:

kkHLgSS.png

Now the designer and I were wondering: How would we present that on mobile?

Logos one by one in a slider? Logos 2x2 in a slider? Just a list of logos to scroll? Or maybe a div with max-height that fades out to white at the bottom and shows a button "show all"?

Link to comment
Share on other sites

In my experience: Just show them all, on first sight, without need to tap, even if it is ugly ?

If not, you will inevitably have to deal with one or more logo partners deeply dissatisfied for lacking visibility. "No one will tap 10 times until they arrive at our logo..."

Just my 2cents...

  • Like 3
Link to comment
Share on other sites

When I had a similar situation and huge variants in image dimensions, I solved this a different way by moving a logo "section" from a page block to providing a full page that is dedicated to partner/sponsor organizations. It enabled me to provide the organization name (which isn't always immediately evident from just a logo [for people; bots would have indexed the ALT text just fine]), the website address (so if someone saved an image of the page the website location still exists), and a short summary description of the organization - which could be anything: how they've partnered/helped, a description of their organization, a pulled meta description from their website (if available), etc.

I could display all of them at once since it was a dedicated page, I could decide to order them alphabetically, by level of sponsorship, or randomly, thereby removing unexpected bias between the sponsors (or at least defending the decision), and although it wasn't necessarily quite as nice as having a clean block of images to separate out content on the prior page, it did clean things up when it had its own dedicated space - and the original image section became a call-to-action area to link to the dedicated page. It allows a bit more freedom for design options, too.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

17 hours ago, BrendonKoz said:

providing a full page that is dedicated to partner/sponsor organizations

Agree with @BrendonKoz. A vertical list on mobile is boring and no one scrolls on a carousel. The thing that has worked best for me is to shuffle the list. This has several benefits:

  • No sponsor can complain their logo isn't visible - all have an equal opportunity
  • Page content is constantly fresh which keeps the search engines happy

Maybe on mobile have a small number of random logos on the home page/footer and a button linking to a sponsor list page.

Have clients take this one step further and give each sponsor a dedicated page after clicking on their logo. Again this has worked well for SEO especially when the sponsor shared their page on their socials.

  • Like 2
Link to comment
Share on other sites

I used different approaches on different websites, but wouldn't say that one is right or wrong.

On the site https://techland.org/network/ I have chosen to display them as an infinite self-scrolling carousel, you can even hover over the logos to pause and go to the website of the partner (all done with pure CSS).
Advantage: You don't get a long vertical list of logos.
Disadvantage: You can not see all logos at once, but that would also be the case if you use a vertical list.

image.thumb.png.307a9f58367e5acb3b861d8fbfca9315.png

On https://digital-summit.eu/de/partner/ I used a static vertical list on mobile.

image.thumb.png.bad5724337fdd540a3002ba088163ae0.png

  • Like 2
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...