Guidelines on developing HTML Newsletter - UxDT

Guidelines on developing HTML Newsletter

User Experience Design and Technology Division

Page | 1

Guidelines on developing

HTML Newsletter

(NIC-UxDT-HN-1.0)



Page | 2

Abstract Newsletter is an important way to keep a targeted audience connected through periodic communication. As the HTML newsletter is delivered to the email boxes of the audience, it has proven to be a very powerful and cost effective way of connecting and communicating the ideas related to your product, service, research or such similar things. Design and development of HTML newsletter however requires proper consideration related to content, HTML and CSS markups so that it is rendered as envisaged on various email clients. This document captures guidelines and best practices for preparing HTML newsletter. The document describes the challenges of preparing the HTML newsletter and recommends tips and techniques that can be applied to overcome the challenges. The document will help Government officials in understanding the challenges of developing a better and effective HTML newsletter. Key words: HTML, Newsletter, CSS, email client, browser Government of India, Ministry of Electronics & Information Technology, National Informatics Centre New Delhi July, 2020 No part of this publication may be produced in any form, in an electronic retrieval system or otherwise, without the prior written permission of NIC.



Page | 3

Contributors

Prepared By User Experience Design & Technology Division

Reviewed By Mohan Das Viswam, STD

Approved By Pawan Joshi, DDG

Amendment Log

Version Date Brief Description Section Change

1.0 27 July 2020



Page | 4

Index

Sl. No. Topic

Page No.

1. Preparation of Newsletter Content

5

2. Development of Newsletter HTML & Graphics

8

3. Testing of HTML Newsletter

11

4. Use case: A HTML newsletter send by UxDT Division

12

5. Helpful online tools

22



Page | 5

1. Preparation of Newsletter Content

1.1. Highlight the helpfulness of the newsletter in the subject line and create a catchy title

The first thing your readers will see is your email newsletter’s subject line and article title. If those two things are not intriguing enough, there are fewer chances of its being readout.

1.2. Make your newsletter Unique

People will pick your newsletter only if it is fresh and unique. That means it is more beneficial to create new content instead of simply copying others’ articles.

1.3. Write for your audience in simple and clear language

You are an expert in your field, your subscribers may not be. This means that you must explain everything in layman's terms and explain any industry terms, abbreviations and acronyms. If abbreviations are used, it needs to be explained at the first occurrence.

We all get used to our industry terms and we often forget that others don't automatically understand them too. So be careful and proofread your newsletter content looking for any assumed understanding and explain it better.

1.4. Make It easy to read

Many people do not like reading long articles or big blocks of texts. Make it easier for them to go through your newsletter by:

■ Adding subheadings ■ Using bullet points ■ Highlighting (bold or italicize) vital information

1.5. Orient the content rightly

Create the content using short sentences and paragraphs that:at:

● Answers their questions and solves their problems



Page | 6

● They can apply in their own lives and businesses ● As much as possible, can be used no matter how old the newsletter

becomes

1.6. Use of minimum graphics

Use graphics only when it adds value to what you want to convey. Unnecessary use of graphics for decorative purposes should be avoided.

1.7. Prefer to be informative

People subscribe to email newsletters generally because they want to learn from the author. You should offer something genuinely helpful - think tips from experts, how-to guides, etc. Make sure you highlight the helpfulness of the newsletter in the subject line.

1.8. Ensure the quality of content You are an expert and an authoritative figure in your chosen niche. That is what you want your readers to understand. Your email newsletter should not have a poor design and/or grammatical errors. Check for possible grammar, punctuation, and spelling errors while preparing the newsletter content. Always go for a Plagiarism check to ensure that your content is unique and important. There are many online free tools available to support you in checking the Plagiarism, spelling,

and grammar for the content. Please refer to the section on “Helpful online tools” to discover online tools available.

1.9. Connect with your reader

Your newsletter might have hundreds or thousands of subscribers. However, remember that your newsletter will reach and be read by them individually, so you have to make your writing as personal as possible.

Instead of collectively referring to your subscribers as “readers,” use words, such as “you,” that endear you to them.



Page | 7

2. Development of Newsletter HTML & Graphics

Designing a HTML newsletter is different from normal web pages. It is difficult to get an

HTML email to look pixel-perfect for every single one of your users. There are just too

many combinations of email clients, versions, and browsers. Keep it in mind that email

clients are not web browsers and will not support the latest web technologies. We have

listed some important considerations for designing a HTML newsletter that would help you

design the same with ease:

2.1. HTML structure ■ Use Tables in your Layouts: Tables are the easiest way to get everything

working properly among the various email clients. The cardinal rule for HTML emails is to use nested tables instead of the <div> tag to space out your content. Using this table's inception ensures that you’re email’s structure is the most robust and consistent since different clients handle CSS properties for divs in different ways.

■ Fixed-Width Positioning: The best option to follow is to set fixed widths for your containing table. There are many varying monitor resolutions — you won’t be able to please everybody. If you don’t have particular elements with static widths, you could always use width="100%" on your containing table. This will allow your content to fill the entire width of all email clients. However, we recommend working with 600px-650px maximum document width. This shall ensure that your e-mail template scales down to fit properly on lesser horizontal screen sizes as well.

■ Use Pixel Units: Try to keep units in pixels (px) rather than in another type of unit. Percentages can easily get mixed up with the many webmail clients and software windows. So for simplicity’s sake, stick to pixel-based alignments.

■ Anchor Links: There may be some links into your newsletter. These could be outbound links to other pages around the web, or maybe links leading to the most popular pages on your website. A neat trick is to include both inline color and an additional span tag within the anchor element. <a href="https://www.uxdt.nic.in” style="color:#3147ca;"><span style="color:#3147ca;">UxDT, NIC</span></a>



Page | 8

2.2. Styling using inline CSS

Most email clients are built to strip away any extraneous CSS content. Hence, you should use only inline CSS for styling.

2.3. Adding Image Content: Images are another reason to offer your readers a web-based solution. By default, email clients are set to strip images out of the content. If your address is added to a safe list, all images will be displayed by default, but the user has to accept this setup so it’s certainly not a guarantee. Just make sure images aren’t required as part of the main content, but included as an extra topping for page aesthetics.

■ Height and Width: Always set both width and height attributes on your img tags. Without these specifications in order, some clients will distort the image content.

■ ALT text: A big reason for having meaningful ALT texts for images is the case where the image cannot be rendered. Sometimes this is due to image blocking being enabled within the email client or possibly because of a slow internet connection. An alternate text can still convey the message/intent to the user in these cases. Another reason is for users who have disabilities and use a screen reader, they can still get context from the ALT attribute.

■ Image Positioning: Positioning the images in your email can get tricky. Avoid using floats at all costs! The image align="left" attribute will work much better, or alternatively map out exact table cells to fit your images along the top, left, or right side of your newsletter.

■ Image format: Images in JPEG or PNG format are suggested for the newsletter as both of them appear to render well with most of the email clients/browsers.

■ Image size: You need to experiment with high-resolution images and find a balance between image width, pixel, and DPI so that the image when rendered across browsers/clients remains impactful.

2.4. Offer Web-Based View: Readers won’t always be able (or be willing) to view your email natively. Offering another version somewhere on the Web will give a sense of ease and compatibility. You might have seen links like “Having trouble reading this email? View it in your mobile/ web browser” This facility helps those users to read the HTML version where due to limitations of email client the newsletter could not be rendered properly.



Page | 9

3. Testing of HTML Newsletter

Once your HTML newsletter is ready, it is important to test it before it is delivered as a newsletter to your audience.

3.1. Browser compatibility: Test your HTML newsletter with major browsers to ensure

that the same is rendered properly across a variety of popular browsers.

3.2. Desktop and mobile views: Test your HTML newsletter on various desktop and mobile views to ensure proper rendering and fix any issue that you come across.

3.3. Test in major Email clients: Test your HTML newsletter with major email clients before you actually send them. For testing, make sure you set up accounts with all the major web-based email services like Gmail, Hotmail, and Yahoo Mail as well as the common desktop email clients like Outlook, Apple Mail, and Thunderbird as well as the mobile Android and iPhone mail apps.



Page | 10

4. Use case: A HTML newsletter send by UxDT Division

Now, based on the above guidelines the use case of a HTML newsletter send by UxDT Division is shared below for a better understanding of the whole idea:

4.1. The content: The following content was prepared for designing the HTML

newsletter:

Here's the inaugural issue of UX-Nuggets, to take you closer to the User Experience (UX) matters. UX influences the quality of eGovernance solutions, and designing better UX can help improve the usability of various products and services provided to the citizens and stakeholders. In this issue, we present you the best practices recommended for designing User Interface for software applications and web portals.

Best Practices for Designing User Interface

The process of creating visual interfaces of software Applications, Products and Web solutions with a focus on looks or style is known as User Interface (UI) Design. It aims to create screens, layouts and various visual elements which help users identify the purpose and enjoyable. The user experience of an application can significantly be improved by a well-designed user interface. Here are the recommended best practices.

Keep the interface simple

Avoid unnecessary elements and use clear language for the labels and messages

Maintain consistency and use common UI elements

By using common elements in the User Interface, users feel more comfortable and are able to get things done more quickly. It is also important to create patterns in language, layout, and design throughout the site to help facilitate efficiency

Be purposeful in page layout

Structure the page based on importance. Careful placement of items can help



Page | 11

draw attention to the most important pieces of information improving readability and visual scanning.

Strategically use colour and texture

Use colour, light, contrast, and texture to direct attention toward or redirect attention away from items to your advantage.

Use typography to create hierarchy and clarity

Choose typeface carefully. Font characteristics such as types, font sizes, and arrangement of the text help increase the legibility, readability, and scanability.

Make sure that the system communicates what's happening

Always inform your users of location, actions, changes in state, or errors. Use of various UI elements to communicate status and, if necessary, the next steps can reduce frustration for your user.

Think about the defaults

Create smart defaults that can reduce the burden on the user. This becomes more helpful in case of form design where you can have certain pre-chosen or filled-out fields.

4.2. The HTML & CSS Code

<body style="margin:0px; font-size:0px;"> <table style="width:100%; background:#f1f1f1;" cellspacing="0" cellpadding="0" border="0" align="center"> <tr><td valign="middle"> <table width="650" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td style="line-height:0;">

<img src="images/uxnuggets_header.png" alt="UX Nuggets - GETTING CLOSER TO



Page | 12

UX MATTERS" border="0" style="width:100%;"> </td> </tr> <tr><td style="color:#ffffff; font-size:16px;font-family: 'Roboto', sans-serif; line-height:20px;font-weight:300" bgcolor="#c0688b" align="left"> <p style="margin: 31px 40px 16px; text-align: justify; font-size:14px;">Here's the inaugural issue of UX-Nuggets, to take you closer to the User Experience (UX) matters. UX influences the quality of eGovernance solutions, and designing better UX can help improve the usability of various products and services provided to the citizens and stakeholders. In this Issue, we present you the best practices recommended for designing User Interface for software applications and web portals.</p></td></tr><tr> <td><img src="images/line.png" alt="divider line" border="0" height="30" style="width:100%;"></td></tr> <tr><td style="color:#333333; font-size:16px;font-family: 'Roboto', sans-serif; line-height:20px;font-weight:300" bgcolor="#ffffff" align="left"> <p style="margin: 16px 40px; text-align: left;"> <span style="font-size: 36px; margin-bottom: 0px; margin-top: 10px; font-weight:400; line-height: 36px;">Best Practices for Designing User Interface</span></p> <p style="font-size: 15px; margin: 25px 40px 16px; text-align: justify; font-weight:400;">The process of creating visual interfaces of software Applications, Products and Web solutions with a focus on looks or style is known as User Interface (UI) Design. It aims to create screens, layouts and various visual elements which help users identify the purpose and enjoyable. The user experience of an application can significantly be improved by a well-designed user interface. Here are the recommended best practices.</p></td> </tr>

<tr><td style="font-family: 'Roboto', sans-serif; font-weight:400;" bgcolor="#ffffff" align="left"><div style="margin:16px 40px; text-align: justify;"> <h5 style="font-size:18px; color:#bf5882; margin-bottom:0px; margin-top: 1px; text-align: left;">Keep the interface simple</h5> <p style="font-size:15px; color:#484848; margin-top:5px;">Avoid unnecessary elements and use clear language for the labels and messages</p>

<h5 style="font-size:18px; color:#bf5882; margin-bottom:0px; margin-top: 20px; text-align: left;">Maintain consistency and use common UI elements</h5>



Page | 13

<p style="font-size:15px; color:#484848; margin-top:5px;">By using common elements in the User Interface, users feel more comfortable and are able to get things done more quickly. It is also important to create patterns in language, layout, and design throughout the site to help facilitate efficiency</p>

<h5 style="font-size:18px; color:#bf5882; margin-bottom:0px; margin-top: 20px; text-align: left;">Be purposeful in page layout</h5>

<p style="font-size:15px; color:#484848; margin-top:5px;">Structure the page based on importance. Careful placement of items can help draw attention to the most important pieces of information improving readability and visual scanning.</p>

<h5 style="font-size:18px; color:#bf5882; margin-bottom:0px; margin-top: 20px; text-align: left;">Strategically use colour and texture</h5>

<p style="font-size:15px; color:#484848; margin-top:5px;">Use colour, light, contrast, and texture to direct attention toward or redirect attention away from items to your advantage.</p>

<h5 style="font-size:18px; color:#bf5882; margin-bottom:0px; margin-top: 20px; text-align: left;">Use typography to create hierarchy and clarity</h5>

<p style="font-size:15px; color:#484848; margin-top:5px;">Choose typeface carefully. Font characteristics such as types, font sizes, and arrangement of the text help increase the legibility, readability, and scanability.</p>

<h5 style="font-size:18px; color:#bf5882; margin-bottom:0px; margin-top: 20px; text-align: left;">Make sure that the system communicates what's happening</h5>

<p style="font-size:15px; color:#484848; margin-top:5px;">Always inform your users of location, actions, changes in state, or errors. Use of various UI elements to communicate status and, if necessary, the next steps can reduce frustration for your user.</p>

<h5 style="font-size:18px; color:#bf5882; margin-bottom:0px; margin-top: 20px; text-align: left;">Think about the defaults</h5>

<p style="font-size:15px; color:#484848; margin-top:5px;">Create smart defaults



Page | 14

that can reduce the burden on the user. This becomes more helpful in case of form design where you can have certain pre-chosen or filled-out fields.</p>

<p style="font-size: 14px; color: #484848; margin-top: 5px;"> </p></div> </td></tr>

<tr><td><a href="https://uxdt.nic.in" target="_blank"><img src="images/uxnuggets_footer.png" alt="UX Nuggets, brought to you by User Experience Design & Technology Division, NIC" border="0" style="width:100%;"></a> </td> </tr></table> </td></tr> </table> </body>

4.3. Images used

■ Header image

uxnuggets_header.png (PNG Image, 1200 × 174 pixels)

■ Divider line image

line.png (PNG Image, 1200 × 41 pixels)

■ Footer image



Page | 15

uxnuggets_footer.png (PNG Image, 1200 × 173 pixels)

4.4. The HTML newsletter as viewed in a browser



Page | 16

4.5. Desktop and mobile views: The HTML newsletter as viewed on different mobile, desktop and tablet:

■ Mobile view



Page | 17

■ Desktop view



Page | 18

■ Tab view



Page | 19

5. Helpful online tools

5.1. Grammarly: You may like to use Grammarly ( https://www.grammarly.com/) for checking grammar, spelling, Plagiarism Detection.

5.2. Smallseotools: You can check plagiarism at https://smallseotools.com/plagiarism-checker/ and grammar at https://smallseotools.com/grammar-checker/

Guidelines on developing HTML Newsletter - UxDT

Documents

Transcript of Guidelines on developing HTML Newsletter - UxDT