Update docs

This commit is contained in:
Dan Mindru 2018-09-03 21:56:50 +02:00
parent 207737f437
commit bae078590a
2 changed files with 26 additions and 48 deletions

View File

@ -1,7 +1,7 @@
# Responsive HTML email signature(s) # Responsive HTML email signature(s)
[![npm](https://img.shields.io/npm/v/responsive-html-email-signature.svg)](https://www.npmjs.com/package/responsive-html-email-signature) [![npm](https://img.shields.io/npm/v/responsive-html-email-signature.svg)](https://www.npmjs.com/package/responsive-html-email-signature)
[![license](https://img.shields.io/github/license/fadeit/responsive-html-email-signature.svg)](/LICENSE) [![license](https://img.shields.io/github/license/danmindru/responsive-html-email-signature.svg)](/LICENSE)
[![Issue Stats](https://img.shields.io/issuestats/p/github/fadeit/responsive-html-email-signature.svg)](https://github.com/fadeit/responsive-html-email-signature/pulls) [![Issue Stats](https://img.shields.io/issuestats/p/github/danmindru/responsive-html-email-signature.svg)](https://github.com/danmindru/responsive-html-email-signature/pulls)
### Let's punch email clients in the stomach 👊 ### Let's punch email clients in the stomach 👊
When you need some basic responsive email signatures that work on mobile.<br/> When you need some basic responsive email signatures that work on mobile.<br/>
@ -17,8 +17,8 @@ Here are some examples:
![responsive emails-02](https://cloud.githubusercontent.com/assets/1515742/10591901/139c4954-76b9-11e5-80f7-5b0ccaf5af81.png) ![responsive emails-02](https://cloud.githubusercontent.com/assets/1515742/10591901/139c4954-76b9-11e5-80f7-5b0ccaf5af81.png)
## Getting started ## Getting started
- Clone repo `git clone https://github.com/fadeit/responsive-html-email-signature.git` - Clone repo `git clone https://github.com/danmindru/responsive-html-email-signature.git`
- Run `yarn` or `npm install` - Run `npm install`
- Run `gulp` to generate templates from configuration (one time) - Run `gulp` to generate templates from configuration (one time)
### Customizing templates ### Customizing templates
@ -31,8 +31,6 @@ Here are some examples:
## Motivation ## Motivation
Writing HTML emails & email signatures sucks. Let's make it easier. We can't fix all email clients, but we can surely make our lives easier with some automation. <br/> Writing HTML emails & email signatures sucks. Let's make it easier. We can't fix all email clients, but we can surely make our lives easier with some automation. <br/>
> See a fairly comprehensive rant on the subject (and not only) [in this article](https://fadeit.dk/blog/post/html-emails-and-email-signatures-how-hard-can-it-be).
## What does this pile of code do ## What does this pile of code do
- [x] generates email templates from your config - [x] generates email templates from your config
@ -52,11 +50,11 @@ Writing HTML emails & email signatures sucks. Let's make it easier. We can't fix
## Docs ## Docs
### Installing ### Installing
```bash ```bash
$ yarn # or npm install $ npm install
$ gulp # By default, HTML & CSS files in './src' will be watched for changes $ gulp # By default, HTML & CSS files in './src' will be watched for changes
``` ```
> Note: it's built using node v7.x, so please make sure your node version is up to date. Version 6+ should be fine. > Note: it's built using node v8.x, so please make sure your node.js version is up to date. Version 6+ should be fine.
### Configuring ### Configuring
To make a basic email from existing templates, you only have to edit the `conf.json` file in each template. To make a basic email from existing templates, you only have to edit the `conf.json` file in each template.
@ -154,7 +152,7 @@ You are of course encouraged to change the default structure for your use case.
## Overview of the build process ## Overview of the build process
The diagram below shows what happens to your email templates. The diagram below shows what happens to your email templates.
Each folder in 'src' is considered a `template group`. A template file will be generated for each of the configuration objects you add have in the template group -> `conf.js`. Each folder in 'src' is considered a `template group`. A template file will be generated for each of the configuration objects you add have in the template group -> `conf.js`.
![Responsive HTML email template/signatures diagram](https://fadeit.dk/posts/html-emails-and-email-signatures-how-hard-can-it-be/html-responsive-email-template-build-diagram.png) ![Responsive HTML email template/signatures diagram](https://user-images.githubusercontent.com/1515742/45000195-35268300-afc3-11e8-82b4-7507430c48a0.png)
## CSS Support ## CSS Support
@ -233,11 +231,3 @@ Unfortnately, Outlook 2010 client dosen't support HTML file import features for
> **NB**: base 64 will not be shown on Outlook 2010 client. So, I recommend to use external url if you want to use images. > **NB**: base 64 will not be shown on Outlook 2010 client. So, I recommend to use external url if you want to use images.
------------------------------
<br/>
<a href="http:fadeit.dk"><img src="https://fadeit.dk/src/assets/img/brand/fadeit_logo_full.svg" alt="The fadeit logo" style="width:200px;"/></a><br/><br/>
#### About fadeit
We build awesome software, web and mobile applications.
See more at [fadeit.dk](https://fadeit.dk)

View File

@ -14,10 +14,7 @@
![responsive emails-02](https://cloud.githubusercontent.com/assets/1515742/10591901/139c4954-76b9-11e5-80f7-5b0ccaf5af81.png) ![responsive emails-02](https://cloud.githubusercontent.com/assets/1515742/10591901/139c4954-76b9-11e5-80f7-5b0ccaf5af81.png)
## 만들게된 동기 (Motivation) ## 만들게된 동기 (Motivation)
이메일용 html은 일반적인 HTML과 달리 모든 코드를 in-line CSS로 만들어야 합니다. 그래서 이메일 템플릿이랑 서명을 만들기가 굉장히 어렵습니다. "이런 HTML 템플릿과 서명을 편하게 만들어보자!" 라는 생각에서 이 템플릿을 만들었습니다. 물론 모든 이메일 클라이언트의 이슈를 전부 다 고칠 수는 없지만, 이 템플릿을 활용해서 조금 더 쉽고 깔끔한 반응형 이메일을 만들어서 받는 사람 보내는 사람 모두가 만족하게 만들 수 있습니다! 이메일용 html은 일반적인 HTML과 달리 모든 코드를 in-line CSS로 만들어야 합니다. 그래서 이메일 템플릿이랑 서명을 만들기가 굉장히 어렵습니다. "이런 HTML 템플릿과 서명을 편하게 만들어보자!" 라는 생각에서 이 템플릿을 만들었습니다. 물론 모든 이메일 클라이언트의 이슈를 전부 다 고칠 수는 없지만, 이 템플릿을 활용해서 조금 더 쉽고 깔끔한 반응형 이메일을 만들어서 받는 사람 보내는 사람 모두가 만족하게 만들 수 있습니다!
이 [블로그 포스팅](http://fadeit.dk/blog/post/html-emails-and-email-signatures-how-hard-can-it-be)에서 fadeit 의 더 많은 이애기를 들어보세요.
## 이 템플릿에서 무엇을 할 수 있나? (What does it do?) ## 이 템플릿에서 무엇을 할 수 있나? (What does it do?)
- [x] config-based template generation - [x] config-based template generation
@ -38,7 +35,7 @@ $ npm install
$ gulp $ gulp
``` ```
`src/fadeit/` 를 확인해보시면 멋진 2개의 이메일 템플릿 샘플이 있습니다. 폴더를 통째로 다른 이름으로 복사/붙여넣기 하시고 그 안에 있는 `src/fadeit/conf.js` 파일을 입맛대로 바꿔보세요. 다음으로는 `gulp`를 실행해서 여러분 만의 이메일 템플릿을 빌드하세요. gulp 의 task가 동작하면서 기본 html CSS 파일을 확인하고 새로운 html 파일을 `/dist`에 저장합니다. `src/dark/` 를 확인해보시면 멋진 2개의 이메일 템플릿 샘플이 있습니다. 폴더를 통째로 다른 이름으로 복사/붙여넣기 하시고 그 안에 있는 `src/dark/conf.js` 파일을 입맛대로 바꿔보세요. 다음으로는 `gulp`를 실행해서 여러분 만의 이메일 템플릿을 빌드하세요. gulp 의 task가 동작하면서 기본 html CSS 파일을 확인하고 새로운 html 파일을 `/dist`에 저장합니다.
## 살펴보기 (Overview) ## 살펴보기 (Overview)
아래 순서도는 여러분이 만든 템플릿이 어떻게 빌드가 되는지를 보여줍니다. 아래 순서도는 여러분이 만든 템플릿이 어떻게 빌드가 되는지를 보여줍니다.
@ -61,15 +58,15 @@ $ gulp
## 다른 이메일 클라이언트에서 사용하는 법 (Usage with different e-mail clients) ## 다른 이메일 클라이언트에서 사용하는 법 (Usage with different e-mail clients)
### Thunderbird ### Thunderbird
썬더버드 이메일 클라이언트에 html 서명을 자동으로 넣어주는 몇몇 플러그인이 있스빈다. 일단 우리는 [SmartTemplate4](https://addons.mozilla.org/en-us/thunderbird/addon/smarttemplate4) 를 추천합니다. 이 플러그인을 쓰면 새 이메일, 답장, 전달 등을 할 때마다 각각 다른 이메일 템플릿을 쓸 수 있습니다. 썬더버드 이메일 클라이언트에 html 서명을 자동으로 넣어주는 몇몇 플러그인이 있스빈다. 일단 우리는 [SmartTemplate4](https://addons.mozilla.org/en-us/thunderbird/addon/smarttemplate4) 를 추천합니다. 이 플러그인을 쓰면 새 이메일, 답장, 전달 등을 할 때마다 각각 다른 이메일 템플릿을 쓸 수 있습니다.
### Apple Mail / OS X (꼭.. 써야 한다면?) ### Apple Mail / OS X (꼭.. 써야 한다면?)
#### 방법 1 #### 방법 1
- 이메일 앱을 열고 `Mail` -> `Preferences` -> `Signatures` 로 이동하세요. - 이메일 앱을 열고 `Mail` -> `Preferences` -> `Signatures` 로 이동하세요.
- 아무거나 새 이메일 서명을 만들세요. (나중에 찾기 편하게 placeholder 를 써두는 것이 좋습니다.) - 아무거나 새 이메일 서명을 만들세요. (나중에 찾기 편하게 placeholder 를 써두는 것이 좋습니다.)
- 이메일을 닫으세요. - 이메일을 닫으세요.
- 터미널을 열고 TextEdit으로 서명 파일을 열어보세요. (iCloud drive를 사용하는 경우는 잘 작동하지 않는 경우가 있습니다. 아래 troubleshooting을 참고하세요. ) - 터미널을 열고 TextEdit으로 서명 파일을 열어보세요. (iCloud drive를 사용하는 경우는 잘 작동하지 않는 경우가 있습니다. 아래 troubleshooting을 참고하세요. )
``` ```
@ -79,16 +76,16 @@ $ open -a TextEdit ~/Library/Mobile\ Documents/com~apple~mail/Data/V3/MailData/S
- `<body>...</body>` 의 모든 html 코드를 여러분이 빌드한 `/dist/`의 html 파일로 교체 합니다. (`<body>`외에 다른 메타 정보는 수정하지 마세요!) - `<body>...</body>` 의 모든 html 코드를 여러분이 빌드한 `/dist/`의 html 파일로 교체 합니다. (`<body>`외에 다른 메타 정보는 수정하지 마세요!)
- 메일앱을 다시 실행하고 새로 바뀐 서명을 확인해보세요 :) - 메일앱을 다시 실행하고 새로 바뀐 서명을 확인해보세요 :)
> **주의**: 이미지 파일은 원래 `preference`의 미리보기 화면에서는 나오지 않습니다. 하지만 이메일을 만들고 발송하는 곳에서는 잘 보여지니깐 걱정마세요! > **주의**: 이미지 파일은 원래 `preference`의 미리보기 화면에서는 나오지 않습니다. 하지만 이메일을 만들고 발송하는 곳에서는 잘 보여지니깐 걱정마세요!
#### 방법 2 #### 방법 2
다른 방법으로는 `/dist` 에 빌드한 html 파일을 CMD + A, CMD + C 해서 설정에 이메일 서명 박스에 붙여넣기 해서 쓸 수도 있습니다. 하지만 이렇게 복붙을 하는 경우 파일의 `<html>` 이나 반응형 웹을 위한 미디어쿼리가 들어있는 `<style>` 부분을 복붙하는 것이 아니라 정상적으로 작동하지 않을 수 있습니다. 다른 방법으로는 `/dist` 에 빌드한 html 파일을 CMD + A, CMD + C 해서 설정에 이메일 서명 박스에 붙여넣기 해서 쓸 수도 있습니다. 하지만 이렇게 복붙을 하는 경우 파일의 `<html>` 이나 반응형 웹을 위한 미디어쿼리가 들어있는 `<style>` 부분을 복붙하는 것이 아니라 정상적으로 작동하지 않을 수 있습니다.
#### Troubleshooting #### Troubleshooting
만약 위의 방법 1이 정상적으로 작동하지 않는다면 파일을 수정 후 메일 앱을 열기전에 아래 방법으로 파일을 잠궈야 합니다. 만약 위의 방법 1이 정상적으로 작동하지 않는다면 파일을 수정 후 메일 앱을 열기전에 아래 방법으로 파일을 잠궈야 합니다.
Lock Files: Lock Files:
``` ```
@ -104,39 +101,30 @@ $ chflags nouchg ~/Library/Mail/V3/MailData/Signatures/*.mailsignature
### 아웃룩 2010에서 사용하기 (Outlook 2010) ### 아웃룩 2010에서 사용하기 (Outlook 2010)
#### 방법 1 #### 방법 1
- 아웃룩 2010을 켜고 `File > Option > Mail > Signature` 으로 접속하세요. - 아웃룩 2010을 켜고 `File > Option > Mail > Signature` 으로 접속하세요.
- 새 서명을 만드세요. (나중에 확인하기 좋게, 표시를 해두시면 좋습니다.) - 새 서명을 만드세요. (나중에 확인하기 좋게, 표시를 해두시면 좋습니다.)
- CMD를 켜고 아래와 같이 입력하세요. - CMD를 켜고 아래와 같이 입력하세요.
> AppData 폴더가 숨김 폴더라 가급적이면 CMD를 사용하는 것을 권장합니다. > AppData 폴더가 숨김 폴더라 가급적이면 CMD를 사용하는 것을 권장합니다.
``` ```
cd AppData\Roamin\Microsoft cd AppData\Roamin\Microsoft
start Signatures start Signatures
``` ```
- 이 폴더에서 아까 만든 서명파일을 찾아서 우클릭해서 편집을 하세요. - 이 폴더에서 아까 만든 서명파일을 찾아서 우클릭해서 편집을 하세요.
- 모든 HTML코드를 여러분이 새로 만든 코드로 바꿔버리세요. - 모든 HTML코드를 여러분이 새로 만든 코드로 바꿔버리세요.
- 아웃룩을 열고 서명이 적용됐는지 확인해주세요. - 아웃룩을 열고 서명이 적용됐는지 확인해주세요.
> **주의** 위 방법으로 진행할 경우, 한글 등 유니코드가 깨지는 문제가 있습니다. 한글 이메일 서명의 경우 아래 **방법2**을 사용하시기 바랍니다. > **주의** 위 방법으로 진행할 경우, 한글 등 유니코드가 깨지는 문제가 있습니다. 한글 이메일 서명의 경우 아래 **방법2**을 사용하시기 바랍니다.
#### 방법 2 #### 방법 2
아웃룩에서는 html 파일을 넣는 방법을 제공하지 않습니다. (아...) 그래서 위의 **방법 2** 처럼 파일을 복사/붙여넣기 하는 방법으로 사용할 수 있습니다. 아웃룩에서는 html 파일을 넣는 방법을 제공하지 않습니다. (아...) 그래서 위의 **방법 2** 처럼 파일을 복사/붙여넣기 하는 방법으로 사용할 수 있습니다.
- `/dist` 에 빌드한 html 파일을 브라우저에서 열고, ctrl A + C 로 복사하세요. - `/dist` 에 빌드한 html 파일을 브라우저에서 열고, ctrl A + C 로 복사하세요.
- Outlook 을 열고 `파일 > 옵션 > 메일 > 서명` 으로 들어가세요. - Outlook 을 열고 `파일 > 옵션 > 메일 > 서명` 으로 들어가세요.
- 새 서명을 만들고 아래 박스에 Ctrl + V 로 파일을 붙여넣기 하세요. - 새 서명을 만들고 아래 박스에 Ctrl + V 로 파일을 붙여넣기 하세요.
> base 64로 만든 이메일 파일은 잘 작동하지 않을 수 있습니다. 외부 링크를 활용하시기를 권장합니다. > base 64로 만든 이메일 파일은 잘 작동하지 않을 수 있습니다. 외부 링크를 활용하시기를 권장합니다.
===================
<br/>
<a href="http:fadeit.dk"><img src="http://fadeit.dk/src/assets/img/brand/fadeit_logo_full.svg" alt="The fadeit logo" style="width:200px;"/></a><br/><br/>
#### About fadeit
We build awesome software, web and mobile applications.
See more at [fadeit.dk](http://fadeit.dk)