I'm designing an HTML newsletter that is supposed to load nicely including on mobile devices.
I found these links to sites that show blank templates:
http://www.emailology.org/
http://htmlemailboilerplate.com/#f2
But with both I didn't succeed in showing responsive design on my mobile Android 2.3.3
Does someone have a live example for such responsive email, so I can learn from it?
I tried to look for one on the web but couldn't find one...
Reading up on responsive HTML emails my self, I stumbled upon your question. Even though a bit late, I though I'd take the time to share what I've found so far.
I've found a couple of good resources to read, both provided by email newsletter web services.
Campaign Monitor provide a pretty extensive guide on how to design responsive HTML emails. It discusses different approaches to take, things to think about and shows a few handy "hacks". In the guide, they also reference a few downloadable examples of responsive emails that you can use as a starting ground, and build your own email upon.
MailChimp also has a guide on email for mobile devices. It has a broader focus and discuss everything from statistics to user behavior and best practices, but it also has a section on various design approaches.
To get live examples to learn from, I suggest you sign up for newsletters by some of the major companies, that has spent time on developing their newsletters. I'm not going to market any company in particular, but I know that both above referenced guides mention a few companies that they think have great HTML newsletters, that could be worth having a look at.
HTML emails are a different beast all together. There are a couple of websites dedicated to having HTML clients support standard markup, but that day is not anywhere close to becoming a reality. I doubt many email clients (if any) support the media queries needed for responsive CSS to work. My suggestion would be to make an HTML email template that is adaptable enough to work at a mobile resolution and still look good in an normal desktop resolution. Maybe some liquid widths.
For help with which clients support what and how well the support HTML / CSS features, check these two links out.
Email Standards Projects
Campaign Monitor Email CSS Support
I have a superb solution for this issue. Solution is that - you can opt to create HTML email newsletter using fluid technique. I mean that you should build it in percentages - so that all the devices out there can fit your email.
I have a tutorial on creating: Fluid responsive email newsletter.
Hope this helps many people out there.
Thanks!
Sumesh M.S
Related
I am in the process of building a website for a local small business. The website is for a removals and house clearance company, and will consist of several pages: a simple case of a home page, an “about us” page, FAQs, and a contact form. The aim of the website is simply to provide a web presence, and to advertise and promote the company to attract some extra custom.
In other words, this website will be basic “brochureware” and is in no way intended to be state-of-the-art. However, I am conscious of the fact that in any case, these days websites need to be responsive due to the increasingly large number of mobile users. Although I have a very good knowledge of designing websites to work across various types of desktop web browsers, I have to admit that my knowledge of mobile phones is non-existent.
To ensure that this website is in some way responsive, ideally I would like to create three main CSS files:
a stylesheet for basic mobiles
a stylesheet for for smartphones
a stylesheet for for traditional desktop browsers
(I suppose you could basically call it “small”, “medium” and “large” version of the website.)
To be more specific, the question I would like answered is: Could anyone please recommend the most common CSS Media Queries to act as a catch-all for the most common types of devices (as of 2016)?
All I can seem to find when doing a Google search so far for this question are gigantic lists of CSS Media Queries that can only be described as monolithic! Is there any simpler way to make a basic website, without having to resort to ridiculous numbers of stylesheets and script files?! I would be grateful for any advice on this matter. Thanks in advance.
In retrospect, I admit that this question I asked is broad as well as a bit vague. This is partly due to me not keeping up-to-date with the latest trends in front-end design, as well as a misunderstanding and misconceptions of the art and science around responsive web design.
However, I argue that this question should remain (if not on Stack Overflow, at least on somewhere more relevant on the Stack Exchange network), as the comments I have received have helped me a lot to better understand the fundamentals of how to actually implement a responsive design, and could also be beneficial to others in a similar situation.
Although there is no black-and-white answer to my question, thanks to those who have commented, I think that the best guidelines for responsive web design in general, are to:
focus on the project specifics
design with the content itself in mind
(Both points suggested in the comments by CBroe.)
I have also found the following articles helpful:
Justin Avery: “Why you don’t need device specific breakpoints”
Google Developers: “How to choose breakpoints”
Nick La: “Setting Breakpoints in Responsive Design”
I also think that these articles from A List Apart, although published in 2000 and 2010 respectively, are excellent resources – both help you to understand the fundamental philosophy behind responsive web design:
John Allsopp: “A Dao of Web Design” (2000)
Ethan Marcotte: “Responsive Web Design” (2010)
I need to make an email template and make it responsive. As I see that to achieve that you need to use media queries and css styles on a header etc. I was wondering if tables are not needed anymore to set the layout (they are quite annoying anyway).
But I see blogs explaining how to make a responsive HTML email with tables so I wonder why do they use tables if they have CSS?
Is it because it's some type of compatibility approach? So that old systems will still show the layout even if not perfect and new ones will show it better?
Cheers.
Email clients use really old rendering engines. If you opt for using div's instead of tables you will see your email breaking almost everywhere (specially outlook). Using tables allows you to support old email clients as well as making your email responsive for those that support it.
There are a lot of good tutorials out there that give you templates that you can start from, I suggest you use those and build from there. It takes a little while to perfect it across all clients and platforms and the testing ain't no fun!
This tutorial will come in handy.
If you can get a Litmus account it makes the testing less painful and they get it right most of the time.
Also, if you are already doing emails try to study what device/client most of audience uses and you can use that to make sure your new template renders fine on these.
Good luck!
I currently send out multiple desktop version newsletters that have a "View as Mobile" link with a hosted mobile version, but I am trying to explore options for displaying a mobile version right when the user opens the email.
I've read about responsive designs with variations of the following code using internal stylesheets
#media screen and (max-width : 320px), screen and (max-device-width: 320px)
But according to http://www.campaignmonitor.com/css/ not all ESPs allow or read internal style sheets. In short, is there a good way to have responsive emails using the above code or is it not viable due to lack of support?
In general, email clients are bad at supporting css (for a few reasons) so you may want to stay away from doing too much with CSS. That being said you can find support table here http://www.emailonacid.com/blog/details/C6/media_queries_in_html_emails and just make sure you use CSS to progressively enhance for supporting clients instead of punishing those that dont.
I agree with Andy in 'email clients are bad at supporting css'. This is a general rule and has been for ages.
That said - when we talk about Mobile Email clients, there aren't any phones out there running MS Outlook '95, if you know what I mean!
Look at the market breakdown of email capable smartphone devices out there, and you'll see that support is present in a higher percentage than the desktop world.
At our company, more than 50% of the readership of our weekly emails is on iPhones alone. that includes desktop Gmail, Hotmail, Outlook etc. We're seeing a continuing trend toward mobile usage being our focus, with desktop playing second fiddle.
We're not running out and building mobile websites, but we're tailoring our emails to be mobile friendly. For example: Everguide Weekly Guide Email
So regarding your CSS - it is in fact very difficult at this time to ensure media queries are being read and interpreted correctly.
We have found that Android does not like to play ball as iOS does, but with some good tweaks and code hacks, we're getting there.
Here's an example of one of our transactional email templates - that is capped at 520px wide, but scales to device widths etc when on different devices.
It takes testing and patience to get this right. For our next project, I will be starting from scratch using this new guide from Campaign Monitor: Campaign Monitor's guide to Responsive Email Design
I will be building it up bit by bit, Using adobe shadow (this has been renamed recently I think) and various on-screen emulators to make sure the code is truly responsive every step of the way.
If I were you, id nail down your own 'boilerplate' first, save this off, then make all future email designs off this template.
I specialise in this - and there is no tried and true method as yet.
Good luck!
The problem with creating responsive e-mails is that lot of clients just ignores the style tag, so there is no way to build real responsive e-mails...
But there is a trick... ;)
You can build the e-mail in a mobile-first way, so the basic html is the mobile version.
If you create the media queries in a way, that they "recreate" the original desktop version, then you have a kinda good solution...
So if a client ignores media queries, then it will show the mobile version.
I found a great template what works in a way that I mentioned, you can find it here:
http://internations.github.io/antwort/
I am building a website both mobile and pc version.But I am in a fix what should be used to do it.I have some question for which I am confused :
1. make a website with separate mobile version and pc version and render page depending on the device users use ?
2. Another is a single version website that would be all device compatible.this can adapt the layout according to the device resolution ?
3. if I do the thing I mentioned at point 1 , Can I built a site with wordpress and mobile version with jquery mobile ?
4. If I use a mobile compatible wordpress template I mentioned in point 2, can I use all other plugin form outside?
Please Help me.Thanks in advance.
So what should I do? building two different version ?? if yes, Can I
use the wordpress for both? do you know any plugin or way to make both
pc and mobile version in wordpress ?
This is what I did to achieve what you are aiming for:
Install WordPress as normal.
Add the Mobile Smart plugin - or possibly mobile smart pro.
Create a theme for regular desktop browsers and activate it in WordPress
Create a completely separate theme for mobile browsers. You may wish to use the sample code supplied with the plugin; I created my own from scratch.
Change the settings of Mobile Smart so that it knows which is your mobile theme
Add content and enjoy!
Please read the documentation with Mobile Smart. It is important to understand what it is doing.
Also, remember that your two themes are completely separate, in completely separate directories, so you can use completely different functions.php, headers, footers, scripts, etc. as necessary.
Quote from https://github.com/ChristianPeters/crispy-mobile that I agree with:
CSS media queries are nice. But not for mobile.
They just add up code you send to your clients instead of reducing it for mobile devices.
Imagine you want to make a responsive product page.
Do you really want to deliver a big 90KB product photo, if a 15KB photo would already fill the mobile screen?
Do you really want to compute personalized product recommendations if they are just hidden afterwards?
Do you really want mobile devices to download and interpret your whole stylesheet if half of the interface elements are going to be hidden anyway?
You don't.
If you start mobile-first, don't let your mobile performance be affected by additional desktop features.
Be kind, serve the clients exactly what they need.
If the mobile internet was fast enough and limits weren't as low as they are, I would probably think the other way. But we have to wait few years for that. For now in my opinion it is better to build seperate mobile website. But it is also very useful to have responsive design - that can't hurt even with separate mobile design.
I'm going to avoid too much subjectivity here, as everyone will have a different opinion.
Yes, I have this approach working well on my company website (www.achaleon.com). I was involved in the beta testing for a WordPress plugin called Mobile Smart Pro. It implements elements from a bigger open source project to detect mobile devices and apply a completely different theme to the mobile site. It has the advantage that you can create two completely separate themes and optimise every aspect of them for the device and the context in which it is being used. You can even serve up different content if you wish in the two versions.
This approach requires careful planning and thorough testing. It is also more demanding for the designer. I have friends in the WP community who have built sites this way. My understanding is that this requires stronger programming skills (you need to plan far more carefully than with a standard 'static' css implementation). They used cssgrid.net as a start point
I have a form that needs to be emailed. I am currently using a table design and wanted to make it look better so decided to use css. I am really concerned about the fact that not all clients will handle css so I wanted to get some advice. If anyone of you had to email a form, how might you handle it? It pretty much needs to be rock solid, well, for I'd say at least 95% of the email clients out there, including yahoo and gmail. I already know that gmail strips the css out of the form. I am using rounded corners in this form and unfortunately inline css is not an option because of the sequence that the css needs to be in.
Please offer me some advice before I begin this journey. Thanks.
EDIT:
Inline css is not an option with the form I currently designed but could be an option for a different design that allows rounded courners.
The best advice for designing and building HTML for emails if you want "rock solid" as you say is to pretend you are living in 1997 and use <table>, image slices, and even the dreaded <font>.
Some CSS is supported, as seen in this chart of compatibility across different email clients at the Campaign Monitor site. The biggest hit is that if you have any users on GMail, inline CSS is your only option as GMail strips all <style> tags.
As far as the rounded corners go, you will have to use images.
Unfortunately, HTML support in email clients isn't at all standardized. If you're aiming to hit the majority (your 95%) of users, you're best off designing the email form using tables (without rounded corners...unfortunately it's not going to look great). Taking that approach with get you the widest supported user base.
Unfortunately there's a trade-off of good looks versus compatibility. You just have to decide which is more important.
I agree (and voted for above): The table with images circa 1997 is what I would recommend.
I may be mis-reading it a bit, but I'd push back a little bit on the "email a form" requirement. Emailing forms and expecting them to work at all is optimistic, if not unrealistic.
First, you may have problems getting form elements to display in email clients. I tested forms in email a couple years ago, and I can't remember whether it was the form tags that were removed, or the actual input elements. That was when I talked my client out of it.
If you can get the form to display, where is it going to submit to? Is the email client really going to allow this? What are you going to do if there are form validation errors? How does that work?
I know people have done this, but it will be an uphill battle. It seems like what is much more common is to provide links to web pages with forms. Perhaps you can provide customized links that get people through filling out most of the form (pre-filling email addresses, etc.), but have the actual form submit happen from a web page.
Good luck!
So just write the stylesheet in the page? Or is that not possible for some reason?
Images maybe not be be loaded though [automatically], and that's for the clients benefit, so depending on how you do your design, you may like to think that over.