I'm trying to transform the following example into a version compatible with mobile devices email client apps (Gmail, Yahoo, etc.).
Putting a background image to a table and then putting 2 images works correctly on webmail clients, but not all mobile devices display the background image.
Is there any way to get this same result without using background-image?
Using <img> appears to be the only way to make the email responsive and all devices display it correctly.
Why not place a background image in a container div instead of the actual table?. This will make it pretty much universally compatible. While outlook mail doesn't support divs with certain CSS styling, if you are using a static background container div, you shouldn't run into any problems.
article on issue
Related
Is there any WORKING example of an email that will show a background image?
Even "bulletproof" VML solutions won't really work, ex:
https://codepen.io/palak-tal/pen/eYWggYa
How make background image on newsletter in outlook?
Tried, VML, img tags, background images on different tags, svg, nothing seems to really work for Outlook Desktop.
For the record, background images will work anywhere but Outloook Desktop client (gmail, outlook web/mobile, etc).
Thanks.
The background-image CSS property is not supported by the Word editor in Outlook. You can read more about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.
Word renders HTML images in Outlook, and it does not support background images for the body HTML element. Try to create a table that takes the whole client area and specify a background image for that table.
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'm building a website using WordPress. Although the pages are well suited for Mobile site, this particular page is displayed very congested. This is the page from the website website - http://www.cyberfosters.com/anspress/
If you click F12 using Chrome browser on this page and toggle the "Device Mode" you'll see how it appears on a mobile device, I'm going through the CSS files to find out what needs to be changed but I can't seem to find out.
What I want is that the page should appear on a mobile as it does on the website but just scaled down.
I was looking at your html and css and the problem seems to be very simple, your site is not build to small deviced because it uses a mix of width values in PX and %, the design must be set in % to work well on multiple devices without using special pages for mobiles and other for pc this is my recomendation.
Example if you put a 1090px image on a 800px screen resolution it will just not work so what we do is to set image width value to 100% in this case and so on that way the images get auto resized the easy way. Do the same with tables images divs spans etc
I have done about 20 websites which included the Business Catalyst gallery module. This is the first one that I'm having problems with and I don't know why. Please check out: http://topspindenver.businesscatalyst.com/gallery.html.
You will notice that if you make the window smaller, the gallery thumbnails start overflowing the window. In every other website that I've done, the gallery was responsive within the specified skeleton columns, and the thumbnails automatically get smaller, like on this site: http://mountaingardendiva.com/.
Does anyone know why this is happening only on this site? I have already tried specifically targeting the table that the thumbnails sit in and given it a max-width:100%, but it didn't work.
I'm guessing you're using Firefox to view this site and noticing this problem for the first time, because it looks fine in Chrome. It has to do with how Firefox computes the width of a table and the max-width of images within the table. You can solve the problem by applying a max-width to td.photogalleryitem with each media query that changes the page width.
It does work in Chrome, but to make it work in FireFox try setting the css on your images to width:100% instead of max-width:100%
I have found a relatively big image on the net and i set it as background in my web page. Though it appears in normal size..Is there any simple way to resize it in my html code?
Thank you in advance
You can use CSS3 background size property to set the size of the background image. - http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size. But it's better if you resize the image using photo editing s/w and use it as it is advisable to keep the size of a web page as low as possible.
WARNING
This is a CSS3 property, and it cant be assured that it'll work perfectly in all the browsers.
EDIT
To change the size of the image on the fly according to the browser size using jQuery check this - http://css-tricks.com/766-how-to-resizeable-background-image/