Using CSS in HTML Emails: The Real Story Should you be sending HTML emails at all? This is surely a debated issue, but ultimately I say if you have a message you feel would benefit from a nicely designed email you should go for it. If you just want to do it because everyone else on your block is doing it too, don't. Only send email to people that opted to receive them.Make sure to create it so that it looks the best it possibly can in all email clients.Don't overdo it. WRITE your email before you design it The first thing you should do is to write the plain-text version of your email. Couple quick tips for your plain-text email: Hard-wrap your lines at 60 characters and write out full URL's instead of using anchor tags. Design for the lowest common denominator first. After the plain text version of your email is done, then start thinking about design. What you CAN'T do: Include a <head> section with styles. There are quite a few more things you should be aware of. What you CAN do. In two words, inline styles. Help! Quick tips!
JavaScript Form Validations Made Easy! Using client side JavaScript is an efficient way to validate the user input in web forms. When there are many fields in the form, the JavaScript validation becomes too complex. The JavaScript class presented here makes the form validations many times easier. Contents How to add JavaScript Form Validation quickly First, download the JavaScript form validation script here. The script has a catalog of almost all the common validation types built-in. The idea is to create a set of “validation descriptors” associated with each element in a form. Each field in the form can have zero one or more validations. In other words, in order to validate a field, you just associate a set of validation descriptors for each input field in the form. Just Choose Validations! Simfatic Forms is a feature-rich web form maker. Using the form validation script Include gen_validatorv4.js in your html file just before closing the HEAD tag Now, add the validations required The format of the addValidation() function is:
Guide to CSS support in email - Articles & Tips Version history 14 November 2017 Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties. Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10. 22 September 2017 Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries. 13 September 2017 A complete rewrite and redesign of the guide, testing 278 different CSS properties and features across 35 email clients. To accommodate the huge increase in content, we’ve added search functionality and the ability to link directly to individual the email clients and properties for easy sharing.Discuss this on our blog. 2 May 2014 Removed support for various selector options (E) in Gmail and added support for direction, vertical-align and list-style-type in Outlook ’07/’10/’13. 19 September 2013 30 January 2013 1 February 2012 background-image is now supported in Gmail. 10 December 2010
47+ Excellent Ajax CSS Forms Forms needs a solid visual structure, a profound hierarchy of form elements (Fields and Labels), powerful techniques and Functionality (AJAX) to make the form look and work creatively. There is a great bunch of creative, outstanding and individually designed from scratch forms. Thanks to AJAX, we can provide real-time feedback to our users using server-side validation scripts and eliminate the need for redundant validation functions and processing data. Let’s take a look, hopefully you’ll find new ideas you can develop further on your own. You might be interested to check some of the designs that was mentioned in the posts below: Styling Forms 1) Uni Form – an attempt to standardize form markup (xhtml) and css, "modularize" it, to get nice looking, well structured, highly customizable, semantic, accessible and usable forms. 2) CSS-Only, Table-less Forms – A great example of a well designed form using modern css techniques. Demo Styling Form Elements Demo : Form Usability and Accessibility Demo:
Case study: reader fatigue in email newsletters Published by Elizabeth Yin By Jennifer and Elizabeth A couple weeks ago, we received this email: Hi Jennifer, I have a question. Our open rate keeps going down and I have no clue what’s going on there. Thank you, [Newsletter publisher name] We generated this graph to get them some answers. This graph breaks their subscribers into cohorts by the month they subscribed. As you can see, the overall open rate is indeed decreasing. Over time, however, they don’t open as often. Older customer acquisition channels are more engaged Almost all the cohorts in this case mimic a similar pattern regardless of their starting and ending open rates. Moreover, the older subscribers on this list seem to be much more engaged. We recommended taking a closer look at August-October customer acquisition channels to see if there was something unique about their marketing then that is different now. Cheaper customer acquisition channels vs. open rate? On the outset, this seems like a win for them.
Sending Nice HTML Email with PHP This is going to be a continuation of the Website Change Request Form demo we've been using around here for a while. If you need to catch up, first I talked about it, then I built it, then I screencasted it, then I secured it. Throughout all of this, the end result has been a boring text-only email that gets sent to a single email address. We're going to improve that output, and make the email into a nicer looking HTML-formatted email. It's Not Much Different Than Text Email Sending HTML Email through PHP uses the exact same mail function as text email: mail($to, $subject, $message, $headers); The last parameter, the headers, are optional for the function but required for sending HTML email, as this is where we are able to pass along the Content-Type declaration telling email clients to parse the email as HTML. In fact, the headers area gives us the opportunity to do lots of important email functions. Now We Can Use HTML Tags $message = '<html><body>'; $message .= '<h1>Hello, World! Concerns
Form field hints with CSS and JavaScript (Ask the CSS Guy) My co-workers pointed out a nice effect on the Vox registration form. As you tab through each input field, some helper text appears in box out to the right. Try it out. Update (4/20/2007): It has been pointed out that Vox has changed their form, and it no longer uses this effect. Vox Registration Form It’s a basic example of how helpful a little JavaScript and CSS can be in a form. View demo; Download zip The HTML We’ll start with a simple form. <dl><dt><label for="firstname">First Name:</label></dt><dd><input name="firstname" id="firstname" type="text" /></dd> ... more <dt>'s and <dd>'s ... Immediately after each input field, add a span with a class of hint and create a hint for each input, like so: <dl><dt><label for="firstname">First Name:</label></dt><dd><input name="firstname" id="firstname" type="text" /><span class="hint">Use your real name! View what we have so far – an unstyled form. Some CSS Let’s give this form some style. It’s coming along. See how it looks. The JavaScript
Ideal method for creating HTML newsletters - WDTV Episode 17 - .net magazine net magazine is the number one choice for the professional web designer and developer. It’s here that you find out about the latest new web trends, technologies and techniques – all in one handy package. Each issue boasts a wealth of expert tips and advice, including in-depth features and over 30 pages of advanced front- and backend tutorials on subjects as diverse as CSS, HTML, JavaScript, WordPress, PHP, and plenty more. net compiles the hottest new sites from around the web, and being the voice of web design, our mission is to source the best articles written by the best people in the industry and feature interviews and opinions crammed with inspiration and creative advice. In short, If you're serious about web design and development, then net is the magazine for you. Editorial Advertising
10 useful techniques to improve your user interface designs Advertisement Web design consists, for the most part, of interface design. There are many techniques involved in crafting beautiful and functional interfaces. Here’s my collection of 10 that I think you’ll find useful in your work. They’re not related to any particular theme, but are rather a collection of techniques I use in my own projects. 1. Links (or anchors) are inline elements by default, which means that their clickable area spans only the height and width of the text. Obviously, the larger the clickable area is, the easier it is to click on the link because there is less of a chance of missing it. Make sure to also add a healthy dose of padding to the links, because converting a link into a block only affects its behavior and width; adding padding ensures that the link is high enough and has some room to breathe. 2. Attention to every detail is what separates a great product from a mediocre one. This gives the whole button a more balanced look and feel. 3. 4. 5. 6. 7. 8. 9. 10.
Why I am super-excited about Email Marketing in... - Retail Analytics UPDATE ( July 3rd, 2013 ) - ht to Tim SchulzTim sent this to me today - It looks like this post was on track with the data that is coming out: Source Why I am super bullish on Email Marketing: I have received a lot of pushback, criticism, and flaming flack for being super bullish on email marketing for 2013 - email is dying they tell me & I 'don't get it' they say... Think of email as the cover to the magazine that used to be delivered via the Post - the visual design drives your to open & read... the same thing here! 1. 2. 3. Make life easy for them Email will be the tool because when you do it right - it's a really valuable experience that you can customize with very little investment in changing the core nature of your application. The Science Behind Those Obama Campaign E-MailsOne fascination in a presidential race mostly bereft of intrigue was the strange, incessant, and weirdly overfamiliar e-mails that emanated from the Obama Reelection Campaign .
php - Looking for a some good options to send users reset password emails Practical XML: Form Validation [XML, XSLT & Web Services] I like XML. I really do. Still, my eyes glaze over just as much as the next person’s when I hear about how wonderful it is. Wonderful it may be, but as a Web developer, how does XML help me? I use XHTML on my site, yet that doesn’t provide any advantages above and beyond those I’d gain using HTML. It’s time to be selfish. The Concept One area that always annoys me when I build Web pages is form validation. SitePoint has run a couple of articles (Read and Display Server-Side XML with JavaScript and XML and JavaScript in Mozilla) about loading an XML file with JavaScript, but none that have detailed a practical benefit of the technology. The idea is that, instead of having to include those messy variables in an external JavaScript file, we can create an XML vocabulary, uploading these special XML files to specify the constraints we place upon our forms. The Precepts When building an XML vocabulary, I like to keep a few rules in mind. SimpleEasily understandableConcise The XML The JavaScript
Create the perfect [HTML] newsletter (2009) - .net magazine net magazine is the number one choice for the professional web designer and developer. It’s here that you find out about the latest new web trends, technologies and techniques – all in one handy package. Each issue boasts a wealth of expert tips and advice, including in-depth features and over 30 pages of advanced front- and backend tutorials on subjects as diverse as CSS, HTML, JavaScript, WordPress, PHP, and plenty more. net compiles the hottest new sites from around the web, and being the voice of web design, our mission is to source the best articles written by the best people in the industry and feature interviews and opinions crammed with inspiration and creative advice. Editorial Oliver Lindberg, editor, oliver.lindberg@futurenet.com Martin Cooper, deputy editor, martin.cooper@futurenet.com Tanya Combrinck, digital editor, tanya.combrinck@futurenet.com Jenny Williams, production editor, jenny.williams@futurenet.com Mike Brennan, art editor, mike.brennan@futurenet.com Advertising
Sliding Labels v2 – Patch « CSSKarma Last week I wrote an article about sliding form labels that got quite a bit of attention. Many of the commenters brought up a couple good points/bug in the Sliding Label code that I wanted to address and provide a patch for: The sliding label was barfing out in Safari when auto-fill was activeThe default scripting didn’t work on textareas I sat down yesterday and wrote a patch/new version of sliding labels which I think addresses these two problems. View the Demo The new jQuery Textarea HTML The HTML for the textarea follows the same convention as the rest of the inputs, in only needing a wrapping element. <div id="comment-wrap" class="slider"><label for="comment">Comment</label><textarea cols="53" rows="10" id="comment"></textarea></div><! There are no major changes to the plugin, just a few tweaks.