As a developer, is it possible to disable AMP Email on mobile devices so that the text/html, MIME content-type would display instead?
No. You can, however, hide AMP elements and replace them by something non-AMP using media-queries and good old display:none (and probably some additional cross-email-client-compatible nonsense), but I am not sure if that is what one actually needs, unless you target mso obv. as then everything is allowed to me.
Related
This question is similar to "Standard way to detect mobile browsers in a web application based on the http request" except for mail clients. For instance, if an email message is opened on the built-in iPhone mail client it will display a version of the message specially formatted for the iPhone. If opened on an tablet or desktop it will display as the complete, full-size version of the email. This is similar in principle to web sites that have mobile-friendly versions of the site that load automatically by detecting the user-agent - but for email clients.
So - is it possible to detect the mail client being used to open an email and format the message accordingly? Perhaps a way to detect the screen resolution?
You can try to apply #media css queries that target specific browsers like mobile devices. There is a good introduction on the campaignmonitor help website but be aware, it probably is only supported in a hand full of browsers and devices, iOS being on of them luckily :)
Basically you are defining css styles that target specific screen widths so that you can optimize your email for limited screen space.
#media only screen and (max-device-width: 480px) { ... }
When talking really detection and displaying a totally different email, that's really impossible since you are talking about javascript there and that's not done in emails and probably won't even work in 99% of all email clients. But you can go a loooong way with #media queries.
I think the best solution is using responsive web design techniques. So my suggestion would be a fluid email layout that would adjust based on the size of the cellphone screen.
Here is an example: http://stylecampaign.com/blog/?p=85
Note: Writing markup for email is a whole different beast than the browser. Here are a few guides worth looking at:
http://articles.sitepoint.com/article/code-html-email-newsletters/
http://www.mailchimp.com/resources/guides/email-marketing-field-guide/
If you want CSS that specifically targets mobile browsers you can try the following code.
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen" />
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />
HEAD tags are often stripped out by email clients, so inline styles are preferred. But if you link to CSS inside the BODY tags it should work.
When you say "mail client", do you mean the real email client that uses ActiveSync, IMAP or POP access? Then you'd need to know if there is any information on each protocol that could simulate the User-Agent from HTTP, which unfortunately there is none on IMAP or POP3 AFAIK. Over Active-Sync, being HTTP, you have the User-Agent and can tweak the responses as you which - for example, first the device asks for a text version (e.g. the preview lines on the list view), and then asks for the whole mime version (possibly html). At this point the server can tweak the email mime and return an optimized version (e.g. tweak the markup, convert or resize attachments, etc.)
I have a phone number on my contact page and I want it to dial when someone taps it on a smartphone browser, Android and iPhone. Can someone tell me how that's done? Thanks! BTW, I'm using Cufon which is not selectable. Is that a problem here?
Most Android phones will pick up phone-number-looking numbers automatically (sometimes too aggressively - my DroidX insists that all 4-digit numbers are phone numbers, which is rather irritating), but I suppose the cufon might be messing with that.
If you want to be explicit, though, you can use an RFC3966 telephone link, e.g.
<a href="tel:+1-800-275-2273">
Call Apple Customer Support at 1-800-275-2273
</a>.
You can also check out Apple's docs on phone links.
Take a look at http://en.wikipedia.org/wiki/URI_scheme to learn what a URI scheme is.
the tel URI scheme seems like what you need, but I have no idea if it really works or is implemented.
You can disable the now native phone number detection by using a simple tag:
Credit: http://mobile.tutsplus.com/tutorials/mobile-web-apps/phone-number-links/
My wish is to know how I can program a mobile website, that fit to all mobile phones.
Are there any special approaches to recognize a device and render the code according to it?
Which tools and coding languages are required?
My first thought was to hold the website in XML, which would be parsed depending on the device.
You have to consider old phones, even devices with only wap support.
For example: The mobile website has to recognize Nokia N75 and render/send the code that looks optimal for this device. Same thing with an iPhone or a Motorola Razr.
There are all sorts of problems associated with developing mobile websites. Doing it well takes a lot of time and effort, as phones have such varying support of web standards. There are tools that do it for you, such as the Mobile Web Toolkit and Vodafone's PartnerMl. These tend to force you to write your pages using dedicated XML tags which describe a limited set of elements and styles that can be rendered on the page. The phone requests these xml pages, and the server side software intercepts the request, examines the type of phone (the User Agent), and serves back markup appropriate to that phone. The disadvantage of this system is that it is very inflexible; you are limited to the set of XML elements that the tool supplies, rather than the full flexibility of HTML.
If you want to do it yourself, essentially, you have to do the following.
Using server-side code, examine the User Agent in the Http Header. This tells you what kind of phone/browser made the request
Output appropriate markup and CSS for that user agent.
Useful tools are the User Agent Switcher add-in for Firefox. Using this, you can, for instance, visit the BBC's website, pretending to be various devices. You will see that the BBC outputs 3 or 4 versions of its markup, as well as 3 or 4 different versions of the CSS, depending on the user agent.
mobiForge contains useful information. WURFL and DeviceAtlas are databases that allow you to determine the capabilities of the device that has made the request.
You will quickly realise that you will have to keep your design simple, and it's best not to rely on Javascript, as only the most modern phones can handle it well.
XML is the way to go.
From there, you mosey on to parsing out and acting upon the Agent tags in the request.
From there you can choose (assuming the device supports it), having the device render it via XSLT, or you can apply the XSLT on your end and stream down the appropriate markup language for the device.
In the end, you end up with a specific "rendering" per device. Ideally, the more compatible the devices are with normal browsers, the close the final XSLT is to each other. But you'll still likely have a version for each device that you support.
The beauty of this is that you can add devices incrementally, as time and demand permits. And as devices converge, you gain value by being able to converge your renderings. Also, your back end stays the same no matter what.
Finally, it also works great for non-mobile as well.
Yea, it's a burden to support the different devices, but that's just a truth of the marketplace.
One way is to use strict html with very clear semantics and minimum of css tricking. Do only use relative measures (for example em and %). Trust the browsers default values, because they are in one way optimal for every device, more or less.
Nowadays there isn't exist good tools to do this.
A good practice is to respect the different W3C standards about the accessibility (like the WCAG, the XHTML, etc).
If you made your web site the most accessible as possible it'll be more adaptable. (independently from device, screen size, with or without screen touch...)
If you want more information you can read one of my article about the web accessibility here if you want: Guideline to move a website on a mobile device.
However you can use some meta tags to allow the web browser of the phone to adjust the content like this for the iPhone:
<meta name="viewport" content="width=device-width">
You might wanna check out WURFL
Is there a way to force to iPhone’s Safari to use media="handheld" in place of media="screen"?
You can't. Safari intentionally disregards media=handheld, as such stylesheets were typically tailored to pre-iPhone handhelds with much lower capabilities, and would therefore result in a poor low-quality version of the page.
However, you can direct Safari to use specific stylesheets using conditional css.
I have a webpage and I was recently asked to create the mobile version for it, now that I've done it I was asked to make an automatic redirection so that if the user goes into the webpage through a PDA/iPhone/Smartphone/etc he/she gets automatically directed to the m.website.com but I have no idea how to do this =/ I've tried some php's and javascripts I found using google but nothing so far has helped me. Could you guys?
Check out WURFL and build a 302 redirector for User-Agents that match its list of mobile browser user-agent strings.
Or, just look for iPhone in the User-Agent and redirect those to your iPhone site. The other browsers command such small market-share it is hardly worth targeting them. iPhone is 67 percent of the mobile web HTML traffic. You could do this in Javascript on your web page.
I have published the last version of "Apache Mobile Filter", this open source project has in the first 8 months, more than 1100 downloads from sourceforge and I suppose the same from CPAN.
The Apache Mobile Filter allows you to access WURFL from any programming language, not just Java and php that is traditionally used for dynamic mobile web sites.
The module detects the mobile device and passes the WURFL capabilities on to the other web application as environment variables. It can also be used to resize images on the fly to adapt to the screen size of the mobile device.
Try it and let me know your opinion.
For more info: http://www.idelfuschini.it/it/apache-mobile-filter-v2x.html
I wrote a JS script called "redirection_mobile.js" to solve this issue. It detects the User Agent and redirects to a mobile version if you're accessing a site from a mobile device.
In some case you want to redirect from a mobile device to a desktop version (like with a link "Go to the main site"), the script will handle that and once you finish your session, you'll access to the mobile version again.
You can find the source code on github here https://github.com/sebarmeli/JS-Redirection-Mobile-Site and you can read more details in one of my article here:
http://blog.sebarmeli.com/2010/11/02/how-to-redirect-your-site-to-a-mobile-version-through-javascript/
perhaps if you list your code that is not working, more help could be provided.
if you've got php, User Agent detection works well in most circumstances.
< ?php
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
if ($browser == true) { header(”Location: http://www.example.com/“); }
}
?>
Also, this looks like a dupe of:
Identifying different mobile handsets and redirecting to different websites
A very similar question was asked and answered here:
How do I determine whether it's a mobile device with PHP?
Traditionally mobile devices have been
detected by comparing the HTTP
User-Agent header against a list of
well known mobile UA strings. A novel
approach instead tries to detect the
presence of a desktop OS - anything
which is found to not be a desktop OS
must then be mobile.
This results in far less false
positives.
I've written a post with sample code
in Python here:
http://notnotmobile.appspot.com
Detect whether a device is a desktop - if it is not then redirect to your mobile site!
Cheers,
John
Once you get your mobile subdomain set-up, be sure to refer to this article from A List Apart which describes how mobile devices react to the CSS attribute, media="handheld". Unfortunately, not all react equally.
http://www.alistapart.com/articles/returnofthemobilestylesheet
The "Apache Mobile Filter" is one of the modules of "Apache Module Registry" portal (http://modules.apache.org/search.php?id=1787)
I use http://detectmobilebrowser.com, and found it is the quickest and easiest way. It works quite well. This site generates server scripts automatically (php, perl, python, coldfusion, apache, jquery, etc.) that detects mobile browser and redirects accordingly. You can just copy and paste the code somewhere in your Index file.
This bit of Javascript also might assist:
<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB10|IEMobile|Opera Mini/i.test(navigator.userAgent) ) //Specify the mobile devices that you would like this if statement to apply to.
{
image_y = document.getElementById('bodyID'); //Get the ID of the body and assign it to a variable.
image_y.parentNode.removeChild(image_y); //Remove the body to prevent anything loading on the screen in case there are issues with the window location redirect.
window.location = "mobile.html"; //Re-assign the window location to a new html page that is caters for the redirect.
}
</script>
I placed it in the start of the HTML body.