diff --git a/README.md b/README.md index 4deedb1..0b71c18 100644 --- a/README.md +++ b/README.md @@ -1,68 +1,41 @@ -# Responsive HTML mail signatures -### Let's punch email clients in the stomach! -Responsive templates for mail signatures.
+# ONE스토어 반응형 이메일 서명 +## 왜 필요한가? +> ![enter image description here](https://lh3.googleusercontent.com/BzNweHa8hVXwlLmUierMRZjqdCHcTXV1H1XRBii--RzLBy-xnZ8PIREtFz9x_8Su_Ybw=s0 "IMG_1172.PNG") +> [이 사진은 주작 입니다. ] -When you need some basic signatures that work on mobile.
-...and your colleagues need them too.
-...but you don't want to deal with tables and inline styles. +최근에 업체랑 이야기를 하다보니 위와 같은 말을 들었다. +그래서 이유를 확인해보니 **이메일의 서명**이 이미지 파일을 사용하다보니 거의 모든 이메일이 첨부파일이 있는 것으로 분류가 되고 있었습니다. -## Preview -Here's how the samples look: - -![responsive emails-01](https://cloud.githubusercontent.com/assets/1515742/10591900/13889d32-76b9-11e5-8dc0-b89d80189e93.png) -![responsive emails-02](https://cloud.githubusercontent.com/assets/1515742/10591901/139c4954-76b9-11e5-80f7-5b0ccaf5af81.png) - -## Motivation -Let's make writing HTML emails & email signatures easier. We won't fix all email clients, but we can surely make the process of satisfying them a tad nicer.
-See a fairly comprehensive rant on the subject (and not only) [in this article](http://fadeit.dk/blog/post/html-emails-and-email-signatures-how-hard-can-it-be). +> ![enter image description here](https://lh3.googleusercontent.com/dA1R2hr5dBFIY-SDUrGN8h8JwXauOMM5uJzrEsDtU0HphqdmnVObd_0UJOEckF2Y-dZO=s0 "IMG_1174.PNG") -## What does it do -- [x] config-based template generation -- [x] allows generating multiple templates (for your colleagues too!) -- [x] transforms linked (``) CSS into inline styles -- [x] embeds local `img[src]` into the template (base64).* -- [x] minifies the template -- [x] media queries for mail clients that support them -- [x] can build templates from multiple sources -- [x] watches HTML/CSS files for changes and re-builds +## fadeit 의 이메일 템플릿 엔진 활용 +이미지를 파일을 tag로만 처리하면 해결되는 것이지만 조금 더 욕심을 내보려고 깃헙에서 fadeit 의 템플릿을 뽑아와서 수정을 했습니다. +- [원본 레파지토리 확인하기](https://github.com/fadeit/responsive-html-email-signature) -**Some mail clients don't support them, so an external URL might be a good idea.* +### 제공하는 것 +- NODE JS (gulp) 기반의 이메일 템플릿 빌드 엔진 +- 빌드 시, inline CSS HTML 파일을 자동 생성 +- 이미지 파일을 그냥 html 코드로 넣어버림 (base64) +- media queries 지원 (메일 클라이언트 지원시) - -## Getting started -``` -$ npm install -$ gulp -``` - -Take a look at `src/fadeit/` for an example. Copy / Paste, rename it and change `src/fadeit/conf.js` to suite your needs. Run `gulp` to build the templates (into `/dist`). The gulp task will watch HTML & CSS files by default. - -## Overview +> Overview This diagram shows what happens to your templates. ![Responsive HTML email template/signatures diagram](http://fadeit.dk/posts/html-emails-and-email-signatures-how-hard-can-it-be/html-responsive-email-template-build-diagram.png) -## CSS Support -Remember, it's HTML mails, so you need to check a big-ass table to find out nothing's gonna work. -See [this](https://www.campaignmonitor.com/css/). Still [gulp-inline-css](https://www.npmjs.com/package/gulp-inline-css) is being used to convert whatever CSS you throw at it to inline styles. +### 샘플 파일 확인 +>![enter image description here](https://lh3.googleusercontent.com/-Y4PAWNMyBzQ/Vw3jt6UsGDI/AAAAAAAAeS0/vmqPMt9AMyEDZ5fZOyeyzGQlB5J9Okmdg/h300/%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA+2016-04-13+%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE+3.13.10.png "스크린샷 2016-04-13 오후 3.13.10.png")![enter image description here](https://lh3.googleusercontent.com/-hZvXa0vMFzk/Vw3lhGXRkqI/AAAAAAAAeTM/OUsSQwEYb0oGHFGxUSz9Mi6u1hnvISCQg/h300/%25E1%2584%2589%25E1%2585%25B3%25E1%2584%258F%25E1%2585%25B3%25E1%2584%2585%25E1%2585%25B5%25E1%2586%25AB%25E1%2584%2589%25E1%2585%25A3%25E1%2586%25BA+2016-04-13+%25E1%2584%258B%25E1%2585%25A9%25E1%2584%2592%25E1%2585%25AE+3.13.16.png "스크린샷 2016-04-13 오후 3.13.16.png") + +>**Some mail clients don't support them, so an external URL might be a good idea.* -## TODO: -- [ ] closing `inline-css` issue [#8](https://github.com/jonkemp/inline-css/issues/8#issuecomment-149025428) would greatly improve this repo -- [ ] preprocessor support (simplifies BEM) -- [ ] use github pages to show live demos -- [ ] check [gulp-inline-css](https://github.com/jonkemp/inline-css) for new features +## 메일 클라이언트에 적용하는 법 +### 아웃룩 -## Usage with different e-mail clients - -### Thunderbird -There are several Thunderbird plugins which can automatically insert signatures when composing e-mails. We recommend [SmartTemplate4](https://addons.mozilla.org/en-us/thunderbird/addon/smarttemplate4) as one of the options. It can use different templates for new e-mails, replies and forwarded e-mails. - - -### Apple Mail / OS X (oh boy) +### Apple Mail / OS X #### Solution 1 - Open Mail.app and go to `Mail` -> `Preferences` -> `Signatures` @@ -83,26 +56,10 @@ $ open -a TextEdit ~/Library/Mobile\ Documents/com~apple~mail/Data/V3/MailData/S You can also open the HTML files in `/dist` in a browser, CMD + A, CMD + C and then paste into the signature box. This won't copy the `` part or the `
안녕하세요. 박주형 매니저 입니다.
Thanks for writing up this email.
We are delighted to reply with a responsive template.
\ No newline at end of file +
안녕하세요.
Thanks for writing up this email.
We are delighted to reply with a responsive template.
\ No newline at end of file diff --git a/dist/ONEstore/signature-ONEstore.html b/dist/ONEstore/signature-ONEstore.html index dd64d4f..273126f 100644 --- a/dist/ONEstore/signature-ONEstore.html +++ b/dist/ONEstore/signature-ONEstore.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/dist/ONEstore/signature-reply-ONEstore.html b/dist/ONEstore/signature-reply-ONEstore.html index 7ea7e0a..66e378a 100644 --- a/dist/ONEstore/signature-reply-ONEstore.html +++ b/dist/ONEstore/signature-reply-ONEstore.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/dist/ONEstoreBlack/full-mail-ONEstoreBlack.html b/dist/ONEstoreBlack/full-mail-ONEstoreBlack.html new file mode 100644 index 0000000..b5ece23 --- /dev/null +++ b/dist/ONEstoreBlack/full-mail-ONEstoreBlack.html @@ -0,0 +1 @@ +
안녕하세요.
Thanks for writing up this email.
We are delighted to reply with a responsive template.
\ No newline at end of file diff --git a/dist/ONEstoreBlack/signature-ONEstoreBlack.html b/dist/ONEstoreBlack/signature-ONEstoreBlack.html index a70648c..bbd4005 100644 --- a/dist/ONEstoreBlack/signature-ONEstoreBlack.html +++ b/dist/ONEstoreBlack/signature-ONEstoreBlack.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/dist/ONEstoreBlack/signature-reply-ONEstoreBlack.html b/dist/ONEstoreBlack/signature-reply-ONEstoreBlack.html index fb049dd..ddfa75f 100644 --- a/dist/ONEstoreBlack/signature-reply-ONEstoreBlack.html +++ b/dist/ONEstoreBlack/signature-reply-ONEstoreBlack.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/src/ONEstore/conf.js b/src/ONEstore/conf.js index a3e5f22..983e18b 100644 --- a/src/ONEstore/conf.js +++ b/src/ONEstore/conf.js @@ -5,15 +5,17 @@ module.exports = [ { id: 'ONEstore', // Will be appended to the built templates. - signature: '서비스 기획팀 | 매니저', - name: '박 주 형', - welcome: '안녕하세요. 박주형 매니저 입니다.', + // signature: '감사합니다.', + name: '매 니 저', + team: '스토어 기술개발팀', + title: 'SW engineer', + welcome: '안녕하세요.', introParagraph: 'Thanks for writing up this email.
We are delighted to reply with a responsive template.', - contactMain: '+82-10-2129-0021 | ', // Wrap phone numbers like this to prevent iOS mail from making them blue. - contactMail: 'jude.park@sk.com', + contactMain: '+82-10-1234-5678 | ', // Wrap phone numbers like this to prevent iOS mail from making them blue. + contactMail: 'devhelper@onestore.co.kr', contactSecondary: '성남시 분당구 판교역로 188 SK플래닛 건물 11층', - logoUrl: 'http://cfile25.uf.tistory.com/image/2455244C570C6A371D53B6', + logoUrl: 'http://cfile24.uf.tistory.com/image/224EEA3B570DEAB015AB12', logoAlt: 'Onestore logo', - website: 'http://onesto.re' + website: 'http://onesto.re/' } ] \ No newline at end of file diff --git a/src/ONEstore/footer.inc.html b/src/ONEstore/footer.inc.html index 0ce5e38..43e0245 100644 --- a/src/ONEstore/footer.inc.html +++ b/src/ONEstore/footer.inc.html @@ -4,7 +4,7 @@ -
+ |

@@ -29,7 +29,7 @@ - <!-- @echo logoAlt --> + <!-- @echo logoAlt -->
diff --git a/src/ONEstoreBlack/assets/ONEstoreBlack-logo.png b/src/ONEstoreBlack/assets/ONEstoreBlack-logo.png new file mode 100644 index 0000000..587c07d Binary files /dev/null and b/src/ONEstoreBlack/assets/ONEstoreBlack-logo.png differ diff --git a/src/ONEstoreBlack/conf.js b/src/ONEstoreBlack/conf.js index af0862c..f886b0b 100644 --- a/src/ONEstoreBlack/conf.js +++ b/src/ONEstoreBlack/conf.js @@ -1,13 +1,21 @@ +/* + * NB: for images, if you pass in a relative path ('assets/logo.png'), they will be automatically embedded (base64). If you pass in a URL, it will stay as it is. + */ + module.exports = [ { - id: 'ONEstoreBlack', + id: 'ONEstoreBlack', // Will be appended to the built templates. signature: 'Best regards,', - name: 'Joo Hyung Park | Sevice Planning Team', - contactMain: 'Call +82-10-2129-0021 or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue. - contactMail: 'jude.park@sk.com', - slogan: 'The 1st integrated Android App store in Korea', + name: 'Joo Hyung Park', + team: 'Store Platform Developmet team', + title: 'SW engineer', + welcome: '안녕하세요.', + introParagraph: 'Thanks for writing up this email.
We are delighted to reply with a responsive template.', + contactMain: 'Call +82-10-1234-5678 or email us at', // Wrap phone numbers like this to prevent iOS mail from making them blue. + contactMail: 'devhelper@onestore.co.kr', + // slogan: '\"The 1st integrated Android App store in Korea\"', contactSecondary: '188, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea', - logoUrl: 'http://cfile9.uf.tistory.com/image/2178343D570C68482371D5', + logoUrl: 'http://cfile5.uf.tistory.com/image/21450F3B570DEAB01F8E92', logoAlt: 'ONEstore. logo', website: 'http://onesto.re/' } diff --git a/src/ONEstoreBlack/footer.inc.html b/src/ONEstoreBlack/footer.inc.html index c70f880..3f79328 100644 --- a/src/ONEstoreBlack/footer.inc.html +++ b/src/ONEstoreBlack/footer.inc.html @@ -6,6 +6,7 @@

+ | @@ -26,9 +27,9 @@ diff --git a/src/ONEstoreBlack/full-mail.html b/src/ONEstoreBlack/full-mail.html new file mode 100644 index 0000000..9245d75 --- /dev/null +++ b/src/ONEstoreBlack/full-mail.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ diff --git a/src/ONEstoreBlack/play.css b/src/ONEstoreBlack/play.css index bba83e8..5cb61d3 100644 --- a/src/ONEstoreBlack/play.css +++ b/src/ONEstoreBlack/play.css @@ -92,7 +92,7 @@ a{ */ .footer{ /* @todo gulp-inline-css doesn't parse background-color -> bgcolor */ - background-color: #FF4244; + background-color: #303030; padding: 20px 30px 0px 30px; color: #f5f5f5; border-top: 8px solid #585858;