Naver Webmail Testing: What You Need to Know
Launched in 1999, Naver is a Web portal in South Korea featuring lots of services including email. Naver received 2 billion queries in 2007, accounting for 70% of search queries in South Korea and making it the fifth most used search engine in the world. More than 25 million South Koreans have Naver as their home page.
In this post we'll be examining how well Naver supports common HTML and CSS elements in email. If you need to see how your email looks in Naver, try out email testing platform! Email on Acid proudly supports email testing in this client.
Table of content
The Good
We tested a set of common HTML elements and CSS styles to see how well supported they are.
Headers and Paragraphs
As always, semantic HTML markup is very helpful when trying to increase the accessibility of an email. I found Naver to have good support for paragraphs and headers.
<h1>Header</h1>
<p>paragraph</p>Spacing
Like other good webmail clients, I found Naver to have support for all the usual spacing methods. We tested the following code.
padding: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top:20px;
padding-bottom: 20px;
padding: 20px 0px 20px 0px;Borders
Naver has good support for borders, including styles like dashed 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. Naver will also render dashed and dotted borders.
Font and Text styles
Naver does support commonly used font styling techniques. Pretty standard stuff, but good to have. We tested with this following code.
font-size: 14px;
font-family: sans-serif;
line-height: 16px;Animated GIFs
Anyone who knows me knows I love animation. I'm very happy to say animated GIFs will render fully in Naver.
Background colours
Background colours also render well in the Naver 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 Naver, both using inline CSS and HTML.
background-image: url(images/image.jpg)
background="images/image.jpg"Max-width
The backbone of a fluid-hybrid layout, max-width will work within Naver!
max-width: 600px !important;Lists
I found that both ordered and unordered lists work.
<ul></ul>
<ol></ol>The Bad
Unfortunately, Naver follows the pattern of many webmail clients in stripping <style> elements out of the header. To fix this issue, make sure to inline your styles. This has some implications as you can see in the reference table below.
Naver 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, the Naver webmail client follows the standard webmail support guidelines: we have a lot of support for HTML and inline CSS including borders, animated GIFs, border-radius but, the big drawback is the lack of support for style in the head. Do you send to Naver? Have you found some weird quirks? We'd love to hear what you find so we can keep this guide updated.
It's important to test emails constantly, we never know when an email client will change how it handles code. Naver 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!
