My html e-mail looks different on a browser than in the Gmail app, even with the same width, and I want to debug why. Is there some way to inspect the html elements within the Android Gmail app?
Generally speaking, email debugging is really difficult and in this specific case (as far as I know), there is no way to replicate how the Gmail App works on Android, on the web.
An option would be to use a tool like Console.Re, which is a remote javascript console, and try consoling your whole document or even specific parts of your interest, in case you can find anything useful to help you overcome your issue.
I hope it helps.
Impossible to do on the gmail app, but you can inspect element on the android browser. App like this can help you inspect the email: Dev Browser
Related
We are facing few HTML/CSS issues on rendering our HTML email on Apple mail client on iPhones
Is there a way one can inspect and debug the issue?
Does Apple provide any emulator/tool to do the same?
What worked for us is Epiphany browser. It mimicked the restricted ability of Apple mail client to render HTML far more closely than any of the solutions below -
google chrome, firefox, safari in responsive design mode
Someone suggested to try emulator in XCode but I couldn't get hold of Apple mail in Xcode -> Window -> Devices and Simulators
You can download an emulator in xcode and visually inspect most Apple devices in emulation.
A simple approach is to use Google Chrome. The engine powering Chrome is based on Webkit, which is the same html engine that powers Safari and IOS and iPadOS devices. The Inspector can allow you to inspect a variety of devices in emulation.
You can do much of this with Apple Safari as well.
A third approach is go post your code, define the problem and let people see if they can determine a fix.
Good luck.
I made an email HTML template. It is developed using some tables with 2 columns.
If I watch this email with some clients in different devices everithing looks good. But if I watch the email with an iPhone (of my friend) my template become 1 column, images become bigger, tables with border and some other problems.
I don't have an apple device, so testing is very difficult. what I'm asking here is if exist a way to emulate the iOS mail client or other any suggestions are appreciate.
Thanks
Look into using Google Chrome. It's based on webkit, an open source browser engine which is also what IOS uses to render emails.
When you use Inspect mode, it gives you a list of devices it can emulate. I can't verify right now that it's the same list for Windows or linux. It's close.
It's not a replacement for using actual devices or a services like Email on Acid or Litmus, but it gets you some feedback on how your design looks on other devices and it's free.
Good luck.
Confirmed: I finally got Windows 10 working and I can confirm that Google Chrome allows you to Inspect your code and emulate the look on an iPhone, iPad, Galaxy or Pixel device. You can customize to add specific devices (if available).
This is exactly what you are after:
https://litmus.com/email-testing
I have used this a lot! And it works really well!
Also, try and take a look at this:
https://www.campaignmonitor.com/css/
Really nice tool to check what's compatible in different e-mail clients.
I'm looking to link to a sign up page on an external webapp via a chrome app. The simplest way to manage this seems to be to open a new tab in the chrome browser (not a new webview in a new window of the app).
Tabs seem deprecated and a webview appears very unofficial and unsafe. Basically, is there a way to effectively do this:
Sign up
And the bigger question of course: is there a better way to approach what seems like a simple problem?
Your conceptions, "Tabs seem deprecated and a webview appears very unofficial and unsafe", seem very strange. tabs is simply not enabled for Apps, and <webview> is alive and well.
But if you must open it in the browser, window.open will do the trick. See also this question.
Edit: Also, upcoming is the chrome.browser.openTab API. Leave your feedback if you have use cases for this feature.
Ok, I know its possible to get a number to be callable with Skype using callto:, and I know its possible to get a number clickable on iOS and droids by using tel: in an a tag.
However, what about tablets/iPads? Does this work for them?
What if they have Skype installed on their iPad and click a tel: link.
I believe you cant make calls from an iPad or droid tablet even with a service plan (I dont own either, just an assumption. Enlightenment would be great). Would callto: work for a mobile browser to make them use Skype instead (if installed, obviously)?
No, it would not work. The way Skype accomplishes this on a desktop is through an extension installed in the browser. On an iPad you cannot install these types of browser extensions. It may be possible on an Android tablet.
Edit:
My answer is based on the assumption that you would visit a page with telephone links and you are asking if the browser will perform like it does on a desktop. Where the browser will 'rewrite' tel: tags you use Skype if installed.
Edit 2:
Updated answer to reflect #ceejayoz's input.
I'm attempting to build a responsive email template and I'm having rendering issues when viewing the email on the GMAIL application for the iPhone. I was wondering if any fellow developers have any suggestions for testing and debugging code similar to how you would with Firebug/Developer Tools on a desktop.
I've been researching for some time now and only seem to find websites built to test the code in mobile browsers.
Any help would be appreciated!
This is a known issue and hopefully something that Google will tackle soon. Their smartphone app does not honour media queries and basically renders emails as per the desktop viewport