/    Sign up×
Community /Pin to ProfileBookmark

White space in e-mail newsletter ONLY when seen through Gmail app on Android device.

Copy linkTweet thisAlerts:
Oct 14.2014

Hi,

So, I’ve created an image based e-mail newsletter with each image in its own cell. Several cells use colspan.

I’ve used all the usual tricks – display:block; cell-spacing:0; border-spacing:0 etc etc.

The newsletter displays as it’s supposed to in…

Yahoo via browser on laptop and via browser on my android tablet
Gmail via browser on laptop and via browser on my android tablet
Outlook online via browser on laptop and via browser on my android tablet
Outlook desktop on my laptop
iPhone mail browser
iPhone via Gmail app

However, on the Gmail app on my Acer Android tablet, I get white space next to some images (next to and not underneath). I’ve checked on a Samsung Galaxy – ditto. The spacing is more apparent when you hold the tablet in portrait mode (attached image 2). There’s only one image showing the white space in landscape mode (attached image 1).

The person I did this for decided to send it as is but it’s been bugging me and I want to know what the problem is.

P.S. All images were cut to the correct sizes and come to 800 pixels wide – I’ve double, double, double checked this. I only say this because in the portrait mode image you can see an image at the bottom looking like its fractionally wider.

[canned-message]attachments-removed-during-migration[/canned-message]

to post a comment
HTML

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@jedaisoulOct 14.2014 — I'm surprised you managed to get the display to match so closely!

Why not design the columns around the pictures instead of cutting the pictures to fit a pre-designed layout? That should allow the gaps to fall between the pictures instead of right through them. Also, I'd imagine that by setting the background color to match the border color, the lines might entirely disappear?
Copy linkTweet thisAlerts:
@deathshadowOct 14.2014 — Why would you have the images cut at those points in the first place? (or cut at all for that matter)

Though without seeing the code for the mail itself, along with the images and how you've cut them, not really sure how you expect us to help.

Of course, usign that many images in an HTML e-mail much less using HTML in an e-mail in the first place is just asking to "Fail hard". ESPECIALLY since you mentioned throwing CSS properties at it when most mail clients have piss poor support for any of them... which is why generally you have to pretend CSS and well over half of HTML 4 doesn't even exist.
Copy linkTweet thisAlerts:
@riz-manauthorOct 14.2014 — I'm surprised you managed to get the display to match so closely!

Why not design the columns around the pictures instead of cutting the pictures to fit a pre-designed layout? That should allow the gaps to fall between the pictures instead of right through them. Also, I'd imagine that by setting the background color to match the border color, the lines might entirely disappear?[/QUOTE]

Hi, thanks for your input.

Alas...i'm just the guy who has to put it together - the graphic designer is elsewhere...as is the actual owner of the newsletter - the joys of outsourcing :o)

As it is, I think I've worked out the problem - it's the colspan. I set border to "1" and could see white space to the right of every image that was in a colspan cell.

It's probably easier for me to cut the image up further so that colspans won't be needed in future rather than have graphic designer try to design the front cover so that everything fits perfectly in to set columns. That's more work for me...but that's on the guy paying :o)

@deathshadow - Apologies for the lack of info on my problem but I was hoping to get a response from someone who'd experienced the Gmail app issue I was dealing with themselves and could then give me a..."oh yeh, it's this" response. As it is, the newsletter, worked in many different scenarios but this specific one - so I wouldn't call it a fail hard situation - just a temporary, albeit, frustrating challenge. Nevertheless, thank you for your thoughts.
Copy linkTweet thisAlerts:
@deathshadowOct 14.2014 — I'm not seeing why you'd even HAVE colspans in the first place.... but then I suspect the proper answer would be LESS images, not more.

Not even sure why you'd have more than ONE image for that... of course if you're working with one of those pixel-pushing halfwit PSD jockeys who don't know enough about the medium (HTML, in this case as it applies to e-mails) to be designing jack ****, [i]Well there's your problem[/i]

Seriously, have you considered using the span overlap trick to use just ONE image for the whole thing? Or maybe a image map instead of a table? (I'm assuming you are splitting it up so you can have anchors or some such on it)

ONe giant image and you're slicing it up WHY? Unless you are turning the text in the images into plaintext (which is why I'd kick the "designer" right square in the junk and remove them from the process altogether) there's no reason for that. Even AS tables and slices, I don't see any reason for there to be image slices where your white lines are showing up whatsoever!

but again, seeing what you are doing for markup and possibly the original source image, as well as how you went about 'slicing' it (possibly for nothing) would let us be a heck of a lot more helpful...

... even if I were to end up throwing it away.
Copy linkTweet thisAlerts:
@jamunaapartmentOct 15.2014 — First off, this is the same old gmail, still no embedded css (only inline) and still the same old quirks. What is new is the support for @media, although when i say "support" I use the term very loosely.Gmail calls it auto-sizing and it can be turned off on the fly (although the availabilty of that option depends on the width of the email).

The bad news is that as far as i could tell, the only property read from the media query was width, so while a 100% wide table will display fine, try adjusting text size or making your links "thumb-ready" and you'll be out of luck.
Copy linkTweet thisAlerts:
@riz-manauthorOct 15.2014 — Thanks for all the suggestions.

I've given up on what the cause is but will try deathshadow's suggestions next time I'm asked to do a newsletter like this. Up until this assignment, I've only ever produced text based newsletters with the odd image included and this was the first time I was asked to do it this way. I hadn't even thought about using image maps for e-mail newsletters. Certainly when I've viewed the many professional e-mail newsletters I get from companies, none seem to be set up that way. Anywayz, once again, thank you for your time.
×

Success!

Help @riz-man spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...