I am making a HTML email that will need to work on a variety of devices, there are two problems that are getting the better of me:
1)when viewing on an iOs device some of the images seem to be shifting by 1px when the email is first opened but when zoomed into the email the image seems to move back into place depending on the amount you are zoomed in(for example when the email is first opened there is a 1px line above some image and below others, then I zoom in a bit and the 1px line disappears, then I zoom in a bit more and the line reappeares). Is this a rendering problem with the iOS device or more likely a problem with the code?(The same problem occurs viewing hotmail, gmail and an outlook web access account via the iOS built-in mail function and while viewing in outlook web access via mobile safari)
2) I have asked this question from numerous people before and have been unable to come up with an answer(but I'll try my luck again). If I am sending an email from outlook 2007 to a web based email account is there any way to lock the formatting of the HTML email?(for example when I send a HTML email from outlook 2007 to hotmail or gmail it loses its background color, spaces of about 7/8px appear below the images, the email losses its centring and appears floating to the left)
Any help would be greatly appreciated guys, thanks in advance.
I definitely think there is a problem with your code. The best way to send emails to iOS devices is to keep the emails as simple as possible, using as little HTML and CSS as possible and making sure that the code that you do use is supported in email clients.
Different browsers and mail clients will render your code differently. As with my above suggestion, keep the code to a minimum and design with flexibility in mind. Give images their own line, or use as few as possible to skip these sorts of issues.
Related
I understand that adding <meta name="viewport" content="..."> determines the layout on mobile browsers for HTML documents - but is there something (e.g. HTTP header) that tells the browser how to display documents such as plain text files?
Case in point, Gmail's robots.txt looks tiny, like a desktop website without a viewport meta tag:
On the other hand, StackOverflow's robots.txt is displayed in a more mobile-friendly way on the same browser:
Is this standardized anywhere? Does Chrome have some undocumented heuristic to decide this?
No, there is nothing that tells the browser how to display documents such as plain text files.
For some reason Chrome (mobile) zooms only .txt files with more than 302 characters.
This seems to be true for other webkit browsers too.
Gmail's robots.txt is 128 characters long and Chrome doesn't zoom it.
Here are two almost identical files, in the same folder; the only difference is the number of characters stored.
301 characters long .txt file:
http://tonttest.altervista.org/301byte.txt
302 characters long .txt file:
http://tonttest.altervista.org/302byte.txt
Not a complete answer, but I don't think it should be a comment either.
Some testing indicate that it's not related to HTTP headers but related to a zoom formula which uses character count and viewport width. Formula could probably be derived from here. But I'm not up to that task.
A few findings about this "formula":
Shows visible effect only when viewport width <= 980
Starts working when character count < 302
Firefox doesn't care about it.
I'm guessing this is actually a standard and Firefox didn't implement it because it's not that important. But I could be wrong, and it could be a non-standard Chrome thing.
also, in html from personal experience i know that when programming or coding a website, you have to put more effort into actually coding it to make it fit nicely to a mobile screen and/or a computer screen/monitor. a quick google search would help you with that too.
in your case, it's possible that google didn't bother to put forth the effort into styling that page so that its more easily viewable on mobile devices, and figured that people aren't typically going to be going to that text file on the gmail website. and they may have also figured that if someone did want to or need to view it, they'd be doing something such as, but not limited to programming or coding.
and stack overflow decided to because its a website revolving around coding and programming.
hope this helps!
On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution.
Any advice on how to remove the default padding/spacing that seems to be applied to the tables by the Gmail iPhone App which is drastically affecting the design layout. Looks perfect in Outlook, MacBook App, Gmail online etc. But on Gmail iPhone app, I'm getting this. (see attached).
Screenshot
I think I have tried all possible existing solutions so I am here to ask if anyone know what is the best way to display a:
simple (clickable or not clickable) image
using a different image for desktop and mobile
compatible with most popular email clients
The solution posted here: A Slick, New Image Swapping Technique for Responsive Emails seems to be the best so far but it has one little big issue, the 2 images are always downloaded (I don't mean displayed), either you are on mobile or desktop.
<a href="http://www.emailonacid.com">
<span id="switcher">
<img id="houdini" src="http://www.sample.com/desktop.jpg" alt="">
</span>
</a>
<style>
#media only screen and (max-device-width: 489px) {
span[id=switcher] {
display:block;
background-image: url(http://www.sample.com/mobile.jpg) !important;
background-repeat: no-repeat !important;
background-position: center !important;
width: 300px !important;
height: 250px !important;
}
img[id=houdini] {display: none !important;}1
}
</style>
The "img" tag always download the image even if it is not displayed (display:none).
I have tried many other ways, using background-images on tables but this seems to require VML code for microsoft and the solution looks really messy and sometimes not even working on android.
Is anyone able to help?
JSFiddle
Thank you
There is no way to have different images for desktop and mobile and not have them both downloaded, for email. Getting around that requires Javascript, which isn't supported in any major email client.
I should also like to point out that image swapping, no matter which method you use, isn't supported on some major mail apps, especially Gmail. From design standpoint, the best practice is to use the same image for desktop and mobile.
As others mentioned, hiding image will never be stable. My solution is to create a small server-side script which will serve different images for different devices. I think that is the most stable and robust solution.
You can identify the os, device and screen width from the header of the request, although any browser/email client could send fake info.
We use this package to parse user agent info: https://www.npmjs.com/package/ua-parser
and we can fetch these info with it:
https://github.com/EDMdesigner/supertracker/blob/master/models/session.js
Based on the device field, you can serve different images.
This is possible, sort of, and it’s a bit tricky to pull off. Gmail is probably the biggest hurdle since it strips out the <style> tag and thus, doesn't support media queries.
First, one caveat: Google Apps webmail + Mobile Gmail will render the same, but we can get regular Gmail webmail to be different.
Gmail strips class and id attributes from all elements but leaves some other attributes intact: style, title, lang, width, height, alt, href. So we can target regular Gmail webmail using something like [lang~="x-houdini"] {display: none !important;}.
So use Mobile Gmail as the base for what you want to show, then you can overwrite regular Gmail webmail by targeting it to hide the Mobile Gmail image and show the regular Gmail webmail image.
Again, this won’t work on Google Apps webmail, it will display the same as Gmail App.
This article on Fresh Inbox explains how to target specific versions of Gmail. Worth a read if you go down this path and have questions!
How about just having the image with width 100%?
I tried it and it seems to work for different width's.
I even tried it with chrome's responsive mode and even there it seems to work for iphone sized device although the image quality was not as sharp.
<html>
<head>
<title>ResponsiveImage</title>
</head>
<body>
<img src="Tulips.jpg" width="100%">
</body>
</html>
I am trying to use Zurb's Ink to build responsive HTML emails but I am still seeing the large layouts on both desktop monitors and mobile devices. The layouts are responsive in the browser but within the email client on both desktop and my phone I am only seeing the large layout of the email. I guess my questions about this is, am I supposed to be seeing the mobile view of the HTML email on mobile device's email and the larger layout on my desktop email? I know email clients are supposed to read media queries so I am bit confused about what his framework is supposed to do. I am using "the send page as email" option from IE within parallels on my desktop machine to send the email and I am not using MailChimp or CampaignMonitor, so is this the problem? I guess I assumed I would see the single column layout of the template from gmail on my phone and the multi-column layout in gmail on my desktop. I'm probably not understanding something basic here but was jw if anyone had any insight.
Thanks.
Gmail does not support media queries (or the style tag). It only supports inlined CSS.
If you want Gmail support, try a fluid template instead of a responsive one. I have a few of them listed here
I've got a html5 website/webapp. I only want people to view this website/webapp from their mobile phone i.e. iphone, android, blackberry.
If they try to visit the website/webapp from their desktop browser, It should display an error message as the website/webapp is only meant for the mobile phone.
Is this possbile? any tips?
Thanks
There's no way to check for sure wether a site is on mobile or desktop. HTML is made to be device agnostic.
you can do browsersniffing BUT
user_agents are easily changed in several browsers
you need to make sure to keep your user agent->mobile/desktop mapping up to date
you could do mediaqueries and conditionally display a query that way, but with the large array of formfactors available today there's no clear line to draw that way either.
Both methods will be prone to misidentification.
Quite Frankly, I'm kinda puzzled why you would want to prevent people from accessing your site. Why do you care if someone accesses your site from a desktop instead of a mobile device?
A site designed for mobile will work on a desktop just fine (it's the other way around that might be problematic)
Grab the script for the language you prefer from here:
http://detectmobilebrowsers.com/
Works for me.
You could use media queries, on the page and check the device width on which the page is width. Say if the page is viewed on Desktop, You can show a Message that this App is compatible with Mobiles Devices only and Not Desktops. similarly this should apply for tablets as well and this message can be customized.
Are you using any serer side technologies (ASP.NET, PHP) to generate the page? If so, you can perform your logic on the server side and return different content (like your message) on the desktop requests.
This is usually done by reading the user-agent. Are you ok with a desktop user over-riding their user agent to simulate a mobile browser and viewing the mobile content?