I need to build a responsive email template. I did my research and learnt that media queries are not widely supported by the email clients.
So, I tried not to use media query and stacked the columns using display: inline-block; max-width:290px;.
But what if I want to change the font size for mobile version? Also I have a case where client wants few blocks to be visible in mobile but not on desktop. How can I achieve these without media query?
Also, in my case when I add style rules and media queries, I guess iOS supports media queries. But rues under media queries are not appearing but the other rules defines in <style></style> works just fine.
The template looks somewhat like this:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
table {
font-size: 24px;
}
#tdtoshowinmobile {
display: none;
}
#media only screen and max-device-width(767px){
table {
font-size: 32px !important;
}
#tdtoshowinmobile {
display: block !important;
}
}
</style>
</head>
<body>
<table>
...tr...td....
</table>
</body>
The above template adds the normal rules to inline elements but removes the media queries in my case. I read an article that says that mail clients remove style tags and add it to inline elements. And I guess since media queries can't be defined inline they are being ignored.
So, again my questions are:
how to change font-size or color etc in responsive email template without using media queries?
how to add media queries the right way?(For me adding them in style tag is not working)
1 Think it can be done only using media query.
Some popular mobile mail clients support media query, so in my opinion it's worth.
2 Hope this code can help you
#media screen and (max-device-width: 767px),
screen and (max-width: 767px) {
}
also, maybe use some doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If you lookin for responsive email example with multiple columns please take a look at litmus or other free templates ( this one looks really good as example )
Related
I know most email clients are not fans of media queries but they do support them in a limited format.
All I am trying to do is alter the font size on one link .
<style type="text/css">
.link {color: rgb(133, 16, 16); font-size: 24px;}
#media only screen and (max-width: 420px) {
.link {font-size: 14px !important;}
}
</style>
DOWNLOAD
It works fine in a browser but not when emailed. Can anyone see anything i'm missing?
You need to inline styles generally, because some email clients do not support <style> blocks.
Not sure what client/version/device you are using but that code can work on some.
However, consider inlining mobile-first, because that will cover Gmail IMAP, and then using min-width to cover the desktops. You'll also need something for Outlook Windows, since that doesn't accept <style> blocks, so here I'm using "mso-ansi-font-size" and that will take precedence over font-size for them.
This worked across all main emails:
<head> <!-- I needed to put a little bit of structure -->
<style type="text/css">
#media only screen and (min-width: 420px) { <!-- Note this is for desktops -->
.link {font-size: 24px !important;}
}
</style>
</head>
<body>
DOWNLOAD <!-- Note inlined; and Outlook alternative -->
</body>
If you do need to consider some really old desktop ISPs, some of which do not support <style> blocks, they will show the mobile version (14px). There is no way around it. But I prefer that than a desktop-first approach, because there are usually very few if any people on my lists that use old desktop ISPs, but a lot of people use Gmail IMAP (business accounts, typically).
For more on choosing mobile-first vs desktop-first approach for email, see https://htmlemailprinciples.com/third-precedent-of-practicality
I'm new to this and not really understand why is this happening and how to solve this.
I'm building my web-site with #media queries to be mobile-friendly. When I'm accessing the site from mobile I see the mobile-friendly version as I should, but when I'm trying to switch for desktop-view, the mobile-friendly version is remained and the desktop(normal) isn't showing.
With my *.css file I did as following:
my styles for global(normal - desktop) view
...
...
...
#media (max-width:500px){
my styles for mobile-friendly view
}
I don't want to use #media for my desktop view as not all browsers support #media, just in case some one will think it may solve this problem.
Hope for your help
Always ensure you include the following <meta> tag within your <head> </head> element:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
The viewport tag is used to serve your website in a certain style regardless of device. The width property controls the size of the viewport (the virtual "window") and can be set to a specific pixel size, or the width of the device. The initial-scale property controls the zoom level when the page is loaded. maximum-scale, minimum-scale, and user-scalable all control how users are allowed to zoom the page in out out.
I personally have disabled user-scalable to keep a consistent page view, like when a user focuses on a select element it ensures the page does not zoom. Let me know if this fixes your problem, otherwise I will need some example of your CSS to figure out your problem! Cheers ~
The only browsers that do not support media queries are IE 5 to 8. IE 9+ supports it. Less than 1% of my website views come from an Internet Explorer browser, so in my opinion I would not sacrifice a good design for IE. I would recommend to always code mobile first, and after implement size specifications.
Implementing the viewport in the head section of your page is a must.
<meta name="viewport" content="width=device-width, initial-scale=1">
I wouldn't use a max-width:500px since this is a random max width... Stick to the correct ones, and your CSS will look like this:
*-- SINCE WE ARE CODING MOBILE-FIRST, WE DO NOT NEED A MEDIA QUERY FOR IT --*/
Enter all base code here
/*-- TABLET --*/
#media(min-width: 641px) {
...
}
/*-- SMALL DESKTOP --*/
#media(min-width: 768px) {
...
}
/*-- DESKTOP --*/
#media(min-width: 992px) {
...
}
/*-- BIG DESKTOP (rarely used, but can be useful) --*/
#media(min-width: 1280px) {
...
}
Coding mobile-first CSS will simplify your code and create a solid style base. Switching your habits to mobile-first coding will be a plus for you and the designers that may eventually need to work with your layouts. This should be considered an effective method to help create bulletproof responsive designs.
A css question about meta tags in head
<link rel="stylesheet"media="screen and <min width npx)" href="assets/stylesheets/large.css">
Does the code below still need to go in?
<link rel="stylesheet" href="large.css">
Do not use multiple stylesheets for responsive design. This just creates more HTTP requests which are not necessary. Read here for why
Instead, use media queries within your CSS file. Like so:
#media (min-width: 10em) and (max-width: 20em) {
/* responsive styles go here */
}
Read here for more on how to use these: http://css-tricks.com/logic-in-media-queries/
Media queries are a feature of the CSS language within a single stylesheet.
You do not need to change the <link> tag at all.
The <link media="..."> tag is only useful if you have an entire stylesheet of rules that should only be applied under a specific media query; this allows the browser to skip downloading the file if the media query doesn't match (saving bandwidth)
I've got a large site that runs in ASP.NET MVC using the Razor view engine.
I have a base stylesheet which contains all of the generic styling for the whole site. On occasion, however, I have page specific styles which in the <head> of the page - usually this is one or 2 lines.
I don't particularly like putting the CSS in <head> as its not strictly separation of concerns, but for one or two lines, that really is specific to that page, I prefer not have to attach another file and add to the bandwidth.
I've got an instance though where I would like to put a page specific media query into the <head>, but because a media query uses the # symbol and brackets {} it's clashing with the razor syntax:
#section cphPageHead{
<style>
/* PAGE SPECIFIC CSS */
...
#media only screen and (max-width : 960px) <-- the # symbol here is clashing!
{
... }
}
</style>
}
Is there a way I can get around this?
use double ## symbols. That will escape # symbol and render #media correctly on client side
Also remember to add a space after double ##:
## media only screen and (max-width : 960px)
##media with no space did not work for me.
I realize this is old question, but this is the only solution that worked for me:
#section cphPageHead{
<style type="text/css" media="screen and (max-width:959px)">
</style>
<style type="text/css" media="screen and (min-width:960px)">
</style>
}
I've just discovered CSS #media queries and I think they're great! However, I know that not all browsers support them (namely all but the most recent versions of I.E.).
What should I do then, in my default stylesheet? Should I target a normal-sized screen? Should I go route of lowest-common-denominator and load the mobile stylesheet? Or should I make the design completely fluid?
What is generally a good plan when making the default stylesheet for browsers that don't support #media queries?
It depends on whether you go with de 'mobile first' approach or 'desktop first'.
The desktop first should not cause any trouble with desktop browsers not supporting #media, because they will just ignore the mobile stylesheet rules, like they should. The only problem is mobile browsers that don't support media queries. They will render the page like seen on desktop. But most smartphones support media queries, except pre-win7 phones. The question is if you want to support those phones.
You stylesheet should look something like this.
body {
width: 960px;
margin: 0 auto;
}
#media only screen and (max-width: 500px) {
/* override desktop rules to accommodate small screens*/
body{
width: auto;
margin: 0;
}
The other approach is mobile first. You create a base stylesheet for mobile, and then use mediaqueries to spice thinks up for desktop users. You can put the desktop rules in a separate file, and use media queries and conditional comments to load it in modern desktop browsers and IE. But here the problem is IE mobile also supports conditional comments, so no pre-win7 phone support. Your html should look something like:
<link rel="stylesheet" href="/css/basic.css" />
<link rel="stylesheet" href="/css/desktop.css" media="all and (min-width: 500px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/desktop.css" />
<![endif]-->
Making your design fluid will help a lot. The aim is that no matter what screen size, your site will always look good. Just resize your window to try it out. Fluid designs can't make your sidebar move to the bottom if the screen is to narrow. For this you need mediaqueries.
Good luck