I've just encountered a new issue that hasn't popped up in the 2.5 years I've been doing it. I send emails using Mailchimp and use HTML coding to format. Recently, my email campaigns have been clickable on desktop but spotty on mobile. Certain images will be clickable, certain ones won't - and when I return to the email, some new images are clickable or sometimes no images are clickable. It's very random. Below is an example of how I have always coded my emails. Picture of Code Used
You are using an area map to get precise locations on an image to link. However, on mobiles, those images are getting shrunk, depending on their size. Every email platform will shrink them differently, and depending on the content of the email, and the size of the images, they will shrink to different sizes.
So that explains the discrepancy you see. Now how to solve it?
Essentially, instead of providing one massive image, you need to use HTML + CSS, with tables and separate images and links. You need to lookup any modern resource on HTML emails and follow their guides or templates. This way, when the images move around to fit on mobiles, each image or word will have it's own link, and it will work consistently.
Related
This is probably going to seem like a stupid question and I've probably glossed over something and missed the answer but is it possible to have one link which will lead to multiple images or an image directory?
I am making a website for a restaurant and ideally I would like a textual link for the menus (each of which are comprised off 3+ images).
Initially I created a separate page for each menu with an image gallery in it and the link pointing to the respective page but due to the restrictions off needing a user input event to make the gallery full screen I decided against using this idea.
I am currently using I frames for the menus but they don't fit in as nice as I would like with the design off the website and I am running into issues with them going full screen on iOS mobile.
i have this bug on my site, dont know what could I do to change it so it will be displayed correctly.
My problem is the filmstrip on my site kecy.sk a.k.a gallery... when I refresh, there are elements appearing and then dissapearing and work properly... But that first look is ugly... It is supose to be displayed in one row as it is. but when I do refresh the page, I see those pictures in filmstrip stack for a little while in multiple rows and then it goes to normal one row.
P.S. Dont mind that big big pictures... it's gonna be smaller sizes...
Thank you
You are serving scaled images thus your website speed is very slow
Dont scale image using HTML or CSS. Try to create a php function for resize them.
You have to specify cache validator.
The following resources have identical contents, but are served from different URLs. Serve these resources from a consistent URL to save 9 request(s) and 1.7KiB.
https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i7!2i69!3i44!4i256!2m3!1e0!2sm!3i373056598!3m14!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjZ8cy5lOmd8cC52Om9mZixzLnQ6NXxwLnY6b2ZmLHMudDozfHAudjpvZmYscy50OjF8cC52Om9mZixzLnQ6MnxwLnY6b2ZmLHMudDoxfHAudjpvZmYscy5lOmx8cC52Om9mZg!4e0&token=48356
https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i7!2i69!3i43!4i256!2m3!1e0!2sm!3i373056598!3m14!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjZ8cy5lOmd8cC52Om9mZixzLnQ6NXxwLnY6b2ZmLHMudDozfHAudjpvZmYscy50OjF8cC52Om9mZixzLnQ6MnxwLnY6b2ZmLHMudDoxfHAudjpvZmYscy5lOmx8cC52Om9mZg!4e0&token=78498
I'm working on a newsletter for my photo community website. In the newsletter, I want to have a grid of images. Here's an unfinished rendering in an email client. As you can see it has problems, this is only to illustrate what I'm trying to build.
The image files in reality are about twice the resolution as shown in the email. Furthermore, they can be in any aspect ratio and orientation. What I would like to achieve:
Force all images into 200 x 200px cells
Do not distort the image, the aspect ratio must be maintained
The cell must always be filled, both horizontally and vertically
Background sizing should be centered
Elements must be clickable, leading to that particular photo
Should be robust and work in most popular email clients
In normal web technology (as opposed to HTML in email), this would be a matter of setting the image container to the fixed dimensions and using background-size: cover. I've learned about many HTML email limitations yet am trying to persist in finding one way or another.
Am I really on an impossible mission here?
What I've tried so far:
Setting the image as a background on the a that wraps around the img tag. With some tweaks it can come to a reasonable result, yet centering is a problem and outlook.com does not show the images at all.
Using normal img tags with "a" around it and trying to control max width and height on the image and its wrapper. Here too centering is the main problem
I really hope this can be done, one way or another (not that server-side resizing is not an option in my case).
Since this is on an email client, you can't use any scripting language. This mean that manipulating the image is impossible on the client side of thing.
You will have to manually create thumbnails for your pictures or make some code that creates thumbnail server side before creating the email.
This is as much as I can tell you without knowing how you are creating your emails.
This question already has answers here:
When to use IMG vs. CSS background-image?
(31 answers)
Closed 9 years ago.
I just read this entry but I am still not quite sure about the reasoning for the choices. In particular, I'd like to understand exactly what is meant by "content" and "non-content/other" images and why I should use img when I am adding content images to my site and background-image when adding non content images.
Here is my understanding of "content" and "non-content" image:
Content images are those images that are dynamically generated. For example, images of users that are displayed on their profile page and images that are uploaded to a photo gallery, a blog, etc.
Non-content images are those non-dynamic images that are part of the site design. They're "baked in" if you will. E.g. logos, image links, image buttons, etc.
If my definitions are correct - and please tell me if they're not - then it seems to me the reasoning for using each would be as follows (although this isn't exactly apparent in the article linked to, hence my follow up question):
Non content images tend to not change as much as content images. I.e. logos, button images, links with images, etc. tend to stay the same. They're only changed if the site owner decides to redesign the site.
Content images, on the other hand, tend to change frequently. New images are uploaded often, users change their profile images and photo galleries, etc.
So because of the dynamic nature of content images, they need an img tag that can dynamically be modified by whatever tech stack the site is driven by. The not so frequently changing images don't need image tags. They can be loaded from the site design assets directly in the css file for performance and easy maintainability.
Is that about right or am I missing something?
CSS is used for describing the presentation semantics (the look and formatting). So if you use css to show your images, it means (in theory) that you are showing that image only to style some element to look better or express itself better. If in the future you would change the skin of your web site, it is likely you would consider changing those images as well.
Content images on the other hand would be part of the information/data of your web site. If you show some user's photo it is nothing to do with styling. It is as important information as user's name, surname or age.
the img tag can be fetched by SEO, and it can using alt, but background-image can't
so, if you wanna some pics fetched by google, bing, or other, you should using img tag.
Assuming there is no og:image or link rel img_source, does anyone have any real-world experience or advice on better-than-random techniques to choose an image that best represents a web page?
Update: All answers are good, so upvoted them all and selected one, although it seems there is no great way of doing this. I will experiment with largest picture and screenshot of what it would like on a low-res client. Thanks all!
PS: I'm finding that quite a few pages seem to have og:image or link rel img_source anyway. More than I expected
Taking a screenshot of the website in its smallest possible form, how it would look on a notebook laptop or even a mobile (but not the mobile site version), would be a non-random approach.
Most good web designers will try to make sure users are able to see what the page is about immediately upon loading and include the most important and relevant information 'above the fold' as they say.
Choose the logo of your page as the og:image. That way your brand becomes associated with all your posts, without having to worry about what image best defines each individual page.
For other pages, you cannot control what image they have.
You could investigate how sharer.php works but other than that there is no silver bullet as to choose which image for a web page that has no definable image.
I don't have any experience with Facebook opengraph, but one trick I've used before is to grab favicons of sites I've linked to and use them as link button icons... They're small and are usually always associated with the company name and/or logo, and they're pretty universal across most professional websites. And the usually univeral filename favicon.ico makes it really easy to pick out of the html (or the link attributes if they change the filename).
Might give that a shot if that could be adapted into what you are trying to do. If you find that doesn't look too good, you can try a more "web 2.0" take and check for iPhone/iPad button apple-touch-icon png images (probably only find them on big name sites though)http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
I would normally suggest that you simply scrape the page of img tags. However, these days, CSS background images are frequently applied to h1/header/div/a/etc. tags to display logos in place of text.
One possible solution is to grab all elements with 'logo' in their ID/class name:
var l = $('[id*="logo"],[id*="Logo"],[class*="logo"],[class*="Logo"]');
If this is/contains an img tag, chances are you have the site's logo. Otherwise, if it's a div or other such container, you'll need to dig into the child elements' CSS properties to see if they have a background image.
From this you can build a set of candidate images, which when combined with a heuristic based on (for example) image dimensions, should hopefully spit out a logo every time.
I hope this helps you on your way!
Going for the logo is usually the wrong way. Seeing it from a user of your website's point of view I would rather want no image than a logo all the time. This is the same as in Google+ or Facebook links. Only show images when it really does make sense.
However finding the corresponding image may not always be trivial if there is no og:image or rel="image_source" provided.
An article usually has a title which is presented as <h1> or <h2> tag. The nearest image may be the right one. However the nearest may also be a logo so this can go wrong.
I would do that very pragmatic. I would fetch the most likely image first and read the given EXIF data, if this is a real image there are informations provided. If this is just a logo, spacer or some other kind of layout graphic it does not have EXIF data and therefore is not relevant. If the first picture is not the right tough, I would fetch the next one and so on.
Another clue may be the HTML5 <article> tag which usually has the corresponding image to the post nested.
Nevertheless there are several web designer not using standards and their webpage may not be parable nicely.