Obsessive completionist that I am, I’ve been adding logos for some of the larger companies where I’ve used my card in Taiwan.
There seems to be a (potential) issue with the way they are displayed in the app. Take the logo for 頂好 Wellcome:
In the app it displays like this:
Short of manually cropping logos to get the best square version, maybe it’s best that they are set as (pardon the CSS background-size terminology) contain instead of cover within the container.
Or for the easiest possible win, when crowdsourcing logos make it clear that they should be square
Yep, W or 頂好 would be best, but I guess that would require manual cropping at Mondo’s end, or the implementation of a whole picture upload/crop feature in the app.
Sizing the logo to fit in the square container rather than cropping seemed like less of an ask
Thanks for the feedback. Hopefully I can provide a little insight into how we manage this at the moment, and where we hope to go in the coming months…
Most of our logos are sourced from twitter, and one of the main reasons for this is because they are usually square and therefore look great in your feed. With the new merchant feedback feature we have had a range of logo urls come in, and we want to try and make each customer’s feed look as they want it to look (as far as possible). We have therefore taken these urls, where they work, and included them.
However, in some cases these logos don’t look very good, such as in your example! If this happens, we can remove it, leaving you with the placeholder logo, or you can keep the partly-shown logo. I would be interested in hearing which you’d prefer. In your example above, would you prefer the placeholder logo or the partly-shown ‘Wellcome’ logo?
Obviously, neither solution is ideal at the moment, and we would love to be able to provide customers with a selection of images from which to pick.
As with many things, we will iterate and try new things as we go, so all of your feedback is useful!
Mondo actually already handle these images in two different ways. In the feed the icons are shrunk to fit in the bounding box of the icon, like this:
(by the way, looks like you’re in need of image resampling when scaling)
But on the transaction info page, suddenly the image is cropped to fit whichever is the smaller dimension (so for wide logos, the left and right are cut off), like this:
As you can see, even with a logo that’s almost square, this leads to bits getting chopped off. This will just always be the case if you use logos that aren’t perfectly square and do automated cropping, and I’m guessing hatimbt won’t volunteer to fix every logo
So my suggestion is that logos are handled on transaction pages the way they’re already handled in the feed. For example, the 頂好 Wellcome logo would look something like this:
Okay, it’s small, but doesn’t have the appearance of actually being broken, so I think it’s a big improvement.
@jmap yes, we didn’t follow your suggestion. Sorry about that
The reasons for this are multiple:
Icons should be squares (or square-ish) so we’re designing the app mainly for those cases. If an icon happens to be 110x100 instead of 100x100 we think it’s better to cut a few pixels from each side instead of scaling it and showing white/black bars top and bottom.
It’s a safer fallback. Imagine a crazy long icon 100,000x100. If we scale it to make it fit it would look just one hair-thin horizontal line. (Weird edge-case, I know, but we need to provide for it).
For icons as rectangular as those from your examples we should either “design” them on our side or at some point have a flag that says “this icon looks better scaled”, but we don’t have that yet, so at this point our only option is to try to find that logo properly squared somewhere, for example: https://lh3.googleusercontent.com/1R5BIEV0Dii0rl9VMylLSvNeHzInTgGraF2QYheBHJkq-iyqP9GfgwKVpYQTRPDQdDfL (I just updated it for you in the app).
So, we didn’t follow your suggestion but we’re always happy to make your feed look nice for particular merchants if we find proper logos anyway
I recently made a suggestion for one of my favourite local pub/restaurants using the in-App feedback button and pointing to the establishment’s formal website. Obviously that means one of you lovely people in ville needs to go and do some work in extracting the correct logo from their website.
But I’ve added the contact record for the establishment to my phone’s address book already, and being a neat-freak have already done the necessary resizing so that it looks okay in the iPhone address book. I’ve kept a copy of the resized logo on my NAS (but could equally have been placed in Dropbox or some other cloud storage).
@hugo would it be easier to submit these corrections so that could download them directly from the contributor rather than the formal websites?
then this:
is preferable to this?
This is a qualitative judgement, but to me they’re both equally bad.
But compare to the square-ish Vieshow logo, which will either look like this (actual screenshot):
or this:
Anyway as you say, the long-term solution is definitely to use square logos. It’s just a matter of the best way to present non-square logos in the meantime
@hugo, I wonder if a good way to automatically extract good quality square icons is to use those specified in the <head> section of a website. So if someone doesn’t like the look of the Twitter icon for a merchant, or they don’t have a Twitter account, we could submit the merchant’s website instead. You could then use the icons specified in the web page in some order of preference such as:
apple-touch-icon
icon with filename containing android-chrome
icon with filename containing favicon
The problem with Twitter icons is they are often not optimised for small size (for some reason), whereas apple-touch-icons and favicons are. For instance, the ScotRail Twitter icon uses the logo plus text which does not look good as a small icon in my feed. The website, however, uses a nice favicon with just the ‘><’ logo and this would look much better in my feed (I’ve just submitted a link to the apple-touch-icon of this in the :mondo: app).
I imagine most sites now have a decent apple-touch-icon or favicon, so it would be great if :mondo: could pull those out without us having to look into the site’s source (which is tricky on a phone).
To add, Apple Pay on the web uses the touch-icon in the payment sheet. Hopefully more websites that don’t already have them will be motivated to add good icons now.
Cool, thanks, I have done!
.
).
ville needs to go and do some work in extracting the correct logo from their website.
