bernhard Posted June 11 Share Posted June 11 I'm working on a website for a local municipal and they have a section showing logos of partners: 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 More sharing options...
dynweb Posted June 11 Share Posted June 11 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... 3 Link to comment Share on other sites More sharing options...
bernhard Posted June 11 Author Share Posted June 11 Thx, my only concern is that this element gets very very very long for 24 logos like in the example, which is a real world example... Link to comment Share on other sites More sharing options...
netcarver Posted June 11 Share Posted June 11 Carousel of some kind, rotating through all the logos? Not sure I like it, but it might work. 1 Link to comment Share on other sites More sharing options...
BrendonKoz Posted June 11 Share Posted June 11 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. 2 1 Link to comment Share on other sites More sharing options...
BillH Posted June 12 Share Posted June 12 Or if acceptable (which it might not be!), use a text list of names - maybe with icon-sized versions of logos. Perhaps this could be combined with the suggestion from @BrendonKoz. Link to comment Share on other sites More sharing options...
psy Posted June 12 Share Posted June 12 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. 2 Link to comment Share on other sites More sharing options...
dotnetic Posted June 12 Share Posted June 12 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. On https://digital-summit.eu/de/partner/ I used a static vertical list on mobile. 2 Link to comment Share on other sites More sharing options...
Recommended Posts