---

Nate is a Web portal in South Korea featuring a wide variety services including email. In 2003, they acquired social media website CyWorld and the following year they surpassed their rival Duam by achieving 3.8 million local page views.

In this post, we’ll be examining how well Nate supports common HTML and CSS elements in email. If you need to see how your email looks in Nate, try our email testing platform! Email on Acid proudly supports email testing in this client.

The bottom line? Nate has amazing support for common email HTML and CSS!

The Good

We tested a set of common HTML elements and CSS styles to see how well supported they are.

Headers and Paragraphs

Accessibility is a hot topic in the email development world, with good reason, and semantic HTML markup is key to good accessibility. Good news here as Nate will render both heading and paragraph tags.

<h1>Header</h1>
<p>paragraph</p>

Padding

Like a good number of webmail clients, I found Nate to have support for all the usual padding methods. I tested the following code.

padding: 20px;
padding-left: 20px;    
padding-right: 20px;    
padding-top:20px;    
padding-bottom: 20px;    
padding: 20px 0px 20px 0px;

Borders

Nate has good support for borders, including stylised borders such as dashed or dotted borders.

border: 5px solid #ff0000;
Border-radius: 5px;

A fun little element to use in email, border-radius enables us to use rounded corners without images. Nate will also render dashed and dotted borders.

Font and Text styles

I found Nate to support all our common text and font options with the following code.

font-size: 14px;    
font-family: sans-serif;    
line-height: 16px;

Animated GIFs

I’m very happy to say animated GIFs will render fully in Nate.

Box Shadows

A fun little way of progressively enhancing your emails, Nate will support box shadows.

box-shadow: 10px 10px 5px #888888;

Backgrounds

Background colours also render well in the Nate webmail. In terms of adding colour you have the freedom to do it with either HTML attributes or inline CSS.

HTML: background="#ff0000"  
CSS: background-color: #ff0000;

I’m also happy to report that background images will work in Nate, however you will have to use HTML attribute backgrounds, rather than CSS to achieve this.

background="images/image.jpg"

Max-width

A requirement of a fluid-hybrid layout, max-width will work within Nate!

max-width: 600px !important;

Lists

I found that both ordered and unordered lists work.

<ul></ul>   
<ol></ol>

Style

Good news to report on this! Nate breaks the pattern of many webmail clients by supporting <style> tags in the head of your email.

Nate Support
Element/Style	Support
<style> in head
<style> in body
CSS Selectors
classes
ids
padding
margin
<ol>
<ul>
border-radius
border
line-height
font-family
font-size
max-width
Animated GIFs
<h1>-<h7>
<p>
CSS inline background
HTML attribute background

Closing words

Overall Nate is one of the best email clients we’ve tested in this series. Unlike many others who fall at the hurdle of stripping styles, Nate will allow you to control the style of your email through embedded style sheets.

It’s important to test emails constantly, we never know when an email client will change how it handles code. Nate is included in our suite of email clients to test on, so if you’re sending email to South Korean recipients, we’ve got you covered!