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>
Related
Main idea
I have a web page with custom css files for different screens. After a lot of searching and using responsive simulator testers that show no errors, some iPhone users complain about broken page style.
Code basics
Page has 2 custom CSS files for larger (>960px) and smaller(<=960px) screens.
I have this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This is my page to test
Test and results
On browser testing for smaller screens (even down to 260px width) show no problems. Also validated the CSS here.
This is how it looks for some people with new updated iPhone 6 browsers (Safari and Chrome have the same result).
All the other phones (as far as I know) don't have this issue.
Relating to what others said about the 150 % width: there is some JavaScript setting that width in js_compressed.js... it's compressed so it's difficult to tell what the point of it is, but here's what it looks like pretty-printed in Chrome Devtools:
b() && ($("section.top").css("width", "150%"),
$("footer").css("width", "150%"));
Right below it there is some stuff related to FancyBox (this, I presume)... maybe could be related to that?
Your header (and possibly footer) are set to a width of 150%?
That's what's breaking your page...
It's creating a wider section, and therefore breaking the main section of your site.
Try removing the hard width of 150%;
max-width should never be more than 100%.
Since I don't have specific code snippet to detect your problem thus It's tough to identify which part of your code creating this issue so I am not able to answer your question specifically also I haven't got this thing on my devices but I have something for you that you might need to look
Check out this SO post check out the first answer specifically it has all the hacks that you need to know for iOS safari browser.
With this I hope that my try will do the trick for you :)
Please try
#top_block_wrapper, #secondary_block{
display: block;
}
Instead of display: table-cell
I'm making an HTML email that has a mobile and desktop version. The way I'm accomplishing this is by making two separate tables, one with an id of #desktop and the other with one as #mobile. At a certain point with a media query (around 450px) I set display for #desktop to none, and it works. On my phone, only the mobile version shows up as expected; however, on desktop, when prompted with the "Display Images Below" from gmail, after clicking it, the mobile version of the email shows up below the desktop version (even though it's display is naturally set to none).
Now. I've tried a million ways to fix this. I've tweaked the media queries. I gave #mobile a margin to hide it, I changed all the images to background-images, but for some reason no matter what I do I can't get around this... has anyone had a similar experience where they found a solution?
I think i know whats happening here and since you havent given any code to go with i will take a stab in the dark. For mobile verison to hide completely, you need the images to be set at 1px x 1px or 0px x 0px.
You are controling the mobile version using CSS so each you can target each of the images and give it a width of 100% and height auto important.
Let me know if it works for you.
I'm a graphic designer, I have a small question, Ive learnt some of css and completed the HTML tutorial package over the internet multi time, so I have a good base of html-css coding at least, I do want to start converting PSD webdesigns into HTML-CSS, I've seen many tutorials step by step guides etc.. and they were helpful for sure but I'm afraid of many points:
The flexible point of the website, which means the following: my monitor is currently 1920x1080, let's say that I will code the website to fit on my screen and someone with a small / big screen than mine would open the site, will he see the objects moved from its original place? because defining by px is measured to fit to the user's monitor as far as I know.
Ensuring that the site will be working on at least 3 browsers plus, I know that every browser has its own css base reader and its very hard to set the website to fit all browsers especially internet explorer.
So, I don't want a special help to be honest, all I need is some points / well-guided tutorials to follow to ensure that the points I've reviewed being at least 50% solved..
What you are talking about is Responsive Web Design. Literally just search it up on the internet and you'll find tons of resources and blogs.
My tips are:
For testing multiple browsers download all of them (Chrome, Firefox, Opera, IE) and when you save your work (do this all the time) open it in all browsers so you know where your errors are coming from
Use the developer tools on your browsers. Chrome and Firefox have very good developer tools and help me figure our my problems. You can also use it to emulate mobile browsers and show your media queries (explained later).
Use em instead of px. pixels may look nice on your screen, but if the users screen is small they may find it hard to read your text. here is a good px to em converter http://pxtoem.com/
Use percentages. For example you can make your content div have width of 80% so that you have some space on both sides of your screen (like the design of stackoverflow). This means that your content will fit on most desktops well. Another example is a navbar, you can make it 100% wide so that it always fits the screen no matter the desktop.
Then we have media queries. These allows us to change the content based on the size of the screen. For example you can hide the navbar using a media query when a mobile user is viewing your website. Here is onc elink about media queries:http://cssmediaqueries.com/what-are-css-media-queries.html
Some people still develop for IE8 but it is a pain in the ass. You need to decide whether your audience will be using IE8. I'm guessing as a graphics designer you're going to be making a graphics blog, meaning that your audience will probably be using up to date browsers. So have a think if you really need to develop for older browsers.
As for the first point: there are some ready css frameworks, with responsive elements included. The most popular, I suppose, is Twitter Bootstrap. It has a grid system to help you make your html blocks change their width and even get hidden depending on the viewport width.
If you want to understand the techniques, you can study how media queries work.
As about cross browser stuff: you will have to test your pages in all browsers you want to support. That's the rule. On your way, this link can be useful.
The flexible point of the website, which means the following: my
monitor is currently 1920x1080, let's say that I will code the website
to fit on my screen and someone with a small / big screen than mine
would open the site, will he see the objects moved from its original
place?
The general way to get around this is to build a centered window, thus:
<html>
<div id="container">
<!-- your design lives here -->
</div>
</html>
#container
{
width:728px;
margin: auto 0;
}
Your design is now set at 728px which should fit most resolutions. You can have graphics that expand beyond this, see the bar at the top of SO, but your content should live inside this container.
Another potential solution to this is to allow you design to be completely flexible and contain all your elements in divs that float about, see Masonry for an example of a tool that helps with this.
Ensuring that the site will be working on at least 3 browsers plus, I
know that every browser has its own css base reader and its very hard
to set the website to fit all browsers especially internet explorer.
This is a bain of every web designers life. There is no substitute for good testing here. Something that will help is a CSS rest script like this one. This will remove some of the inconsistencies across browsers. But really you just need to, test and test again.
I'm embarking on my first mobile site. Its a simple one and should be easy enough but I do have some questions:
Please answer any or all q's you can!
1) How do I tell the site to serve the "styles_mobile.css" sheet to mobile traffic? Is there a most commonly used piece of code for this?
2) I have an index page and am creating a new mobile one: "/index_mobile.htm" is that "wrong". Should the mobile page be it's own entity (e.g. /mobile.htm) or based of the existing index page? How do I redirect it? How do I create the address "m.mywebsiteaddress.com"
3) Currently I am making edits on my laptop and then to see what they look like am having to upload them to my ISP to see the effects of my edits on my iphone - how do I do this straight from my Mac?
4) s there a standard structure wrt html elements? E.g. a standard doc has html, head and body elements. HTML5 now has header, nav and footer elements - are there any mobi specific ones I should be aware off?
That's all for now but I can see myself adding to this over the next few days. Any pointers or ad hoc advice welcome
My experience with mobile is that you need to think about it as being a different site altogether. Different html, different css, different js. Many implementations i've seen just tag this to the address m.site.com or just www.site.com/m/. The key element is to think about them separately.
About your questions:
There various frameworks that help discriminate traffic depending on the device. The trick is to check for the user agent sent by the browser to do the discrimination. Depending on the user agent you would send traffic to each of the two sites you've created. Spring has some basic functionality to do this spring-mobile.
This goes back to the first part of my answer. I usually create a directory called /m containing the html, css, and js under it. You can use an http redirect, based on the user agent, to send the traffic to each site. As for creating the m.site.com, it depends on what you have setup and wether you can create subdomains.
You can publish directly on your mac, depending on what software you are using. In your mac you can go to system preferences/sharing and enable web sharing. This will actually activate an apache server in your mac. If you put your files in /Users/yourid/Sites/project you can then access that by hitting http://yourlocalip/~yourid/project. I'm doing this by memory so I might be off here or there.
I would suggest you take a look at jquery + jquerymobile for your mobile site. It will take away a lot of grief in the process.
1) How do I tell the site to serve the "styles_mobile.css" sheet to mobile traffic? Is there a most commonly used piece of code for this?
You can use link stylesheets that have media queries in them:
<link rel="stylesheet" media="only screen and (max-width: 480px)" href="mobile.css">
2) I have an index page and am creating a new mobile one: "/index_mobile.htm" is that "wrong". Should the mobile page be it's own entity (e.g. /mobile.htm) or based of the existing index page? How do I redirect it? How do I create the address "m.mywebsiteaddress.com"
The other option is to serve one page (index.html) and just start stacking floated elements on top of one another as the viewing area shrinks. View http://www.html5rocks.com/en/ in both your desktop and on your phone. Or, if your phone is not near you at the moment, simply resize your browser and watch as the site starts getting rid of multiple columns and creates a one-column view. They are only serving one file (i.e. index.html) and not redirecting mobile users to a mobile page (i.e. mobile.html).
3) Currently I am making edits on my laptop and then to see what they look like am having to upload them to my ISP to see the effects of my edits on my iphone - how do I do this straight from my Mac?
Install Apache Server on your Mac, do a port forward on the proper ports (ports 80 and 8080 IIRC), and you'll be able to view the pages on your phone without having to constantly upload the files to an ISP. The URL will be (http://xx.xxx.xx.xx) or something similar to it.
4) s there a standard structure wrt html elements? E.g. a standard doc has html, head and body elements. HTML5 now has header, nav and footer elements - are there any mobi specific ones I should be aware off?
No, mobile browsers render the same HTML tags as desktop browsers. The one thing you should consider doing is using the HTML5 doctype (which mobile browsers support) because I've had a LOT of trouble getting "mobified" websites using XHTML or HTML4 doctypes to look OK in mobile browsers even when using the viewport meta tag as the sites would look extremely zoomed out.
Here's by far the best resource I've stumbled upon in regards to mobile web development.
http://www.html5rocks.com/en/mobile/mobifying/
The previous two answers were good, but I don't wholly agree with them. They are too complicated.
Use CSS media queries to style your content differently for different screen widths and/or orientations.
Don't bother. For maintainability, you should just create one site which is styled differently with media queries.
Again, media queries. Instead of using (max-device-width: 480px) for mobiles, you could use (max-width) and develop/debug directly in the browser. Otherwise, if you're on OS X, the iOS Simulator that comes with Xcode works nicely (includes iPads too!)
No. It's just a webpage as normal.
As a side note, I don't think you should take the advice of loading in another stylesheet for mobile devices. Loading another stylesheet means one extra HTTP request. You can keep all of your media query styles in your main stylesheet.
To use media queries inside your "regular" stylesheet (i.e. desktop stylesheet), do the following:
/* desktop */
body { background: #FFFFFF; }
header { width: 100%; }
/* queries for devices with a max viewing area of 480px */
#media only screen and (max-width: 480px) {
body { background: #444444; }
}
The above CSS can be tested in a desktop browser. For instance, put the styles above into a style tag and view the page in a browser in a width greater than 480px (a maximized window will do). Then, resize the window width until you see the background change into a dark color (which will happen once the window width is less than 480px).
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.