Email html frameworks? (aka Bootstrap for emails) [closed] - html

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I am looking for a list of good Email/HTML frameworks for my next web project. As far as I know, it is very difficult to make good working HTML for all platforms & browsers.
Best working solution would have following:
List of patterns, that can be reused (say basic elements like copy, H1, H2, full-width images, tables, lists)
CSS template engine (LESS/SASS), to style all files once
Basic grid
Support for mobile devices
I have found only this solution from Mailchimp: https://github.com/mailchimp/Email-Blueprints
Any other options?
Upd. So far found these:
http://zurb.com/ink/
https://github.com/rodriguezcommaj/salted
https://github.com/mailgun/transactional-email-templates
https://github.com/leemunroe/html-email-template
Also really good overview about sending emails here — http://www.leemunroe.com/sending-email-designers-developers/

You should check out mjml, which is a nice component based markup language from which you can generate email html. https://mjml.io/ You can even fork it on Github: https://github.com/mjmlio/mjml This component based approach is getting more and more wide spread.
Also, we have built a nice editor tool for creating responsive emails. You can try the editor if you click on the demo button here: http://edmdesigner.com/responsive-email-editor-for-end-users If you like it, you can register here: https://app.edmdesigner.com

You can try this http://zurb.com/ink/
If you are adding background images, this site will help you to get that showing in outlook http://backgrounds.cm/
And here you can get another boilerplate emailology.org
Emails are tricky. None of those above mentioned boiler-plates are full-proof. Best option would be to test your emails.
Email testing tool > litmus.com or emailonacid.com Unfortunately they are not free.
A free email sending service to test your emails by sending to your email address (and perhaps your friends who have other devices) is putsmail.com

Generally simple HTML should work quite well in todays mail clients/browsers. Avoid images and external resources, write everything needed to display the E-Mail correctly inline inside the HTML code. Like ths CSS. Avoid JavaScript, this will not work.
If you wanna use a service, MailChimp is awesome, but you also check wanna check
sendgrid.com
and
https://sendloop.com
Wich I personally both also liked. But I would prefer MailChimp in general for you.

Related

Do I need to modify my HTML document every time I want to add an article to my site? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I want to create a really simple blog and so far I learned HTML and CSS.
So if I want to add a new node or article, do I need to modify my HTML document and then upload it again or is there any other way?
If you're only using simple HTML
Then the css should be made in a way that would make it reusable, so that when you just add another article shouldn't affect anyhing else. The HTML however must be changed, as you'll need to add your content somehow
The thing is, no one uses plain HTML anymore. If you want everything to happen dynamically then you should use DOM manipulation frameworks. The most basic one of which is JQuery, while the most powerful ones as of now are React, Angular, and Vue
Well, of course you have to modify something and upload it again, but not necessarily the HTML code.
You could youse AJAX (Asynchronous JavaScript and XML) - which, by the way, you can also use with JSON instead of XML - then create a standard article model, get the latest article from your file with
fetch("your-file.xml-or-json-or-whatever").then(
function(response) { /* Do something with the response, see the link below for an example */ }
);
and finally turn it into a DOM element with JS.
This method is pretty inefficient, though, if you don't have a way to cut the output from your list of articles. In fact, if, say, you have one thousand articles, it's inconvenient (inconvenient to say the least) to serve them all and the just use the first ten. If you have a static server, you might want to split the content into multiple files. If, instead, you have access to PHP (or other HTML preprocessors), then you should consider cutting it dynamically. Below are some links to help you.
AJAX tutorial on W3Schools
Fetch documentation on Mozilla Developer
You could also think of using frameworks like Angular (or AngularJS) to make your website even more dynamic. However, those are better for web apps than websites, as I've heard that it's a bit harder for Google to register an Angular app.

Is there any possible way to give a <p> or a <h1> Tag. Something like a "src"? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I want to create Websites for small companies like restaurants. But i can imagine that i will often get called when they need help "Changing the text". Because they simply doesnt know better. Then i often will have do it for them. But there might be another way?
Image changing is simple. Just rename any Picture you want.
Like:
indexPicture.jpg
Everyone easily can replace those jpg. They simply rename any picture to indexPicture.jpg (preferable same size).
But when it comes changing to text. I can imagine a customer, that destroys html code. and removed some tags like (30 min work). Because he doesn't know better.
Can't I bind some text file to a <p> tag? So they simply have to open it and write something new.
Are there any better method?
Like a free App, they can open every website and simply drag and drop changes or select a <p> tag and simply rename it?
This isn't something that's really supported in basic HTML5, so the simple answer to a simple question is: no.
But life is never that simple in the modern web. If you're using a client-side templating framework like React or Angular (both are JavaScript frameworks which are freely available) you can code the pages to load fragments of text from disparate files which your client may have an easier time editing. I don't believe posting example code here is valuable to the question since that's basically a tutorial on how Angular or React work. There are great tutorials and examples on their sites.
As suggested in the comments the most accurate thing I can think of is to use a CMS. These are very helpful when changing the content of your site. Some examples are Wordpress, Drupal or Joomla. You can have a look here: https://www.ucl.ac.uk/building-great-websites/managing-your-website/using-a-cms
I hope that helps you!
You could try a shtml file instead? No CMS needed. I recently found out about this when creating my own HTML5 site as I wanted an easy way to edit a common footer rather than going through all the pages.
Just create a folder with the necessary files (Every paragraph maybe) and include it in the main file using a code like this:
<!--#include virtual="../filename.shtml" -->
I noticed that you didn't want to use a CMS such as WordPress, which as the comments suggest would be a really effective solution.
I once had an issue where I couldn't use a CMS cause I didn't have Cpanel access and what we essentially did was the follow.
Define a XML file, with clearly defined tags for each section of the
website that the client may want to change periodically.
Access the XML file through PHP(something like SimpleXML), and
display the tags/relevant content in the page.
Create a backend that allows the client to view/update content
through forms.
Alternatively, you may use a similar solution with databases and give forms for editing.

Are there any practical reasons to not build a responsive email for Gmail first? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Having ranged through a number of support indices and point - trouble - shooting, templates and tutorials, I felt like I was struck by a thunderbolt when it occurred to me that I should be making all my emails to work in Gmail first, because I don't recall at least ever seeing that as a specific recommendation.
This is assuming I have elements I may want to be visible depending on the user's device/screen, and as such, out of all the email clients I've been hassled by, Gmail is the least flexible since it doesn't support any embedded styles. So, to me, it would make the most sense to layout the email for how it should work in Gmail, then add on to it from there primarily with embedded styles.
As per the question guidelines, I'm not looking for opinions about this, but technical limitations that you all could foresee arising as a result of this workflow. That being said, what would they be, if any?
I've been slicing emails for a very long time and have watched the changes (or lack thereof) over the years. I don't think in terms of "GMail" or "Outlook" first but rather what I consider the three basic categories of HTML emails: fixed, fluid or responsive (or a combo of one of the first two and responsive, too).
A properly done fixed email looks the same everywhere and is supported by every major email client. A fluid email will change on every email client but the changes will be relative to neighboring changes and can for the most part be predicted. A responsive email, although similar to a fluid email, has much more granular control over rendering and can actually set the "fluid rules" based on screen size.
Depending on your target audience, my recommendation to you would be to build a fixed email that looks awesome (you're worst case scenario) and then add styles to the <body> tag to handle responsive to make it even more awesome. Once you get the knack for building fixed emails it goes pretty fast so you'll spend most of your time in the responsive side of things.
View Campaign Monitor's Guide to CSS for the most comprehensive guide of supported CSS in email clients. In general, before you use a certain type of css you should see what email clients are supported. Gmail would be a good reference point to start, but you will want to be aware that there are some elements that will not work in some other clients.

Programming Languages required to develop a website like Imgur? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I'm new to web development. So far, I have a good idea of HTML and CSS.
1) I would like to know what are programming languages are required to develop a website like Imgur and what's the role of each language that will be used.
2) Assuming that a user has just uploaded an Image to Imgur, What would be the required steps to generate a unique HMTL file for that particular Image.
You would need:
HTML
CSS
A server-side framework (e.g., PHP, Ruby on Rails, etc.)
Most likely Javascript (but you might be able to get by without it)
A database backend, such as PostgreSQL or MongoDB
You wouldn't need individual HTML sites. When someone goes to http://www.yoursite.com/image/1, the backend (usually .htaccess in Apache) will process it and turn it into /image.php?id=1, which PHP (or another framework) then uses to create an image-specific HTML page.
Good luck!
-totallyuneekname
1) You're probably best looking into either PHP or ASP for a server side language. Also learn SQL, as you'll need to store information about the images somewhere, and a database will probably be best.
2)
Get unique ID of image from URL
Get the address of corresponding image from database, along with title, description etc.
Fill data into relevant parts of your template, i.e image address inside image tag, title in h1 and title tags etc.
You wouldn't need to create new HTML files every time you want someone to view an image. You can just have 1 php file which loads something from a database which gets what you are looking for.
For this you'll probably need: HTML, CSS, MySQLi\pdo, javascript.
It might also be beneficial not just for you to learn a framework, but to work on one too, as it can help you in big projects.
One I regularly work with is codeigniter and it has a lot of good documentation to read through.

Use own custom form with MailChimp [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 4 years ago.
Improve this question
I'm currently working on a "coming soon" page that has a single text field and button where a user can input his/her email address to get notified when the app launches. I've heard that mailchimp is quite a nice little tool to use that handles all the user details that gets collected (meaning I don't have to worry about any scripting and a database my side) as well as automatically emailing the user that signed up thanking them etc.
I've tried designing a form to use on my site with mailchimp but I'm just not happy with the overall look and feel of the forms. Sure I can change edit some properties like color and all that jazz, but it just doesn't fit my needs.
Is there a way that I can use my current html form that I already have, with mailchimp? Instead of using the forms that one designs on mailchimp.
Thanks in advance
You bet.
I'd check out their support article about custom hosted forms. It explains a bit about how form fields will need to look to jive with their database. You could also view-source of the mailchimp-hosted form you designed and see how the input names/types are put together there specifically for your list.
Also, paid accounts can use advanced forms mode to customize the HTML that they host for a list.
Yes, as winfred mentionned there are several ways.
If you know html, just get the code from the subscription html page (through "View Source" for example) and paste into a blank html page that you can modify before uploading to your website.
As you just need the email, this should be straight forward.
If you haven't seen it yet, this page could help:
http://kb.mailchimp.com/article/can-i-host-my-own-sign-up-forms
Good Luck!