디자이너와 개발자 모두 언젠가는 고객이 일종의 뉴스레터용 이메일 템플릿을 요청할 것입니다. HTML과 CSS에 대한 지원에 큰 차이가 있기 때문에 이메일 템플릿이 그다지 흥미롭지 않다는 점을 꼭 말해야 합니다. 오늘날 우리가 HTML5와 CSS3를 추진하고 있기 때문에 그렇지 않을 것이라고 생각할 것입니다. 그러나 전자 메일을 렌더링하는 경우에는 그렇지 않다는 점에 대해 유감스럽게 생각합니다.
HTML 이메일 템플릿을 만들 때 가장 먼저 염두에 두어야 할 사항은 모든 CSS 스타일이 인라인으로 수행되어야 한다는 사실입니다. 다른 경우에는 이것은 매우 큰 일입니다. 하지만 외부 CSS와 헤드의 CSS에 대한 지원이 거의 없기 때문에 인라인이 그 방법입니다. 또한 이전에 이에 대해 들어본 적이 있을 것입니다. 템플릿은 DIV가 아닌 TABLE로 생성해야 합니다. 다시 한 번 이것은 불행하지만 가야 할 길입니다. 이메일이 전체적으로 그렇게 크지 않다는 점을 감안할 때 이메일을 디자인하고 만드는 것은 어렵지 않습니다. 웹이나 모바일 디자인에 비해 지루할 뿐입니다.
목차 보기
디자인
구조
스타일
내용
인라인 스타일
몸
테이블
첫 번째 행 – 헤더
두 번째 행
세 번째 행
네 번째 행
다섯 번째 행 – 바닥글
마지막 말
디자인
권장 사항: 최신 CSS 프레임워크를 사용하여 디자인 프로세스 속도를 높이는 방법은 무엇입니까?
구조
HTML 페이지의 본문 내에 아래 코드를 붙여넣습니다. 코드를 보면 이 이메일의 구조가 별로 없다는 것을 알 수 있습니다. 이메일은 결코 복잡해서는 안 되기 때문에 실제로 매우 좋은 일입니다. 지금까지 전체 표의 너비를 지정하고 표의 셀 사이에 아무 것도 없는 스타일 지정도 아주 적습니다.
테이블을 콘텐츠로 채울 때가 왔습니다. 이 튜토리얼의 시작 부분에서 위에 제공된 파일 내에서 이미지를 찾을 수 있습니다. 이제 이 이메일에 포함될 모든 텍스트와 이미지를 입력해야 합니다. 튜토리얼에서 하이퍼링크를 실제로 연결할 필요는 없으며 자신의 이미지도 자유롭게 사용할 수 있습니다. 지금까지 코드 내에서 크기가 설정되었는지 확인하기 위해 세 이미지 모두의 너비를 정의했습니다.
당신이 극도로 인식해야 할 것이 있습니다. 이미지는 a: 크기가 작고 b: 이미지를 잘 설명하는 alt 태그가 있는 한 이메일에 적합합니다. 이메일에 이미지가 표시되려면 이 이메일의 수신자가 이미지가 표시되도록 허용해야 한다는 것을 알고 계실 것입니다. 그렇게 하지 않는다면 그들이 무엇을 기대해야 하는지 말해 줄 것이 없습니다. 시각 장애인을 위한 설명을 제공하지 않는 것도 접근성 문제입니다. 그러나 그것은 또 다른 이야기입니다. 따라서 교훈은 항상 alt 태그가 있는 작은 이미지를 사용하는 것입니다!
<table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>
인라인 스타일
마지막으로 할 일은 이 HTML 이메일 템플릿에 대한 인라인 CSS 스타일을 제공하는 것입니다. 지금까지 이 이메일이 전혀 예쁘게 보이지 않았음을 알 수 있듯이 이메일의 모양을 만드는 것입니다. 이 부분이 너무 압도적이지 않도록 작은 조각으로 나눕니다.
당신은 또한 좋아할지도 모릅니다: 이메일 제목을 클릭하기 쉽게 만드는 7가지 유용한 팁.
몸
먼저 전체 이메일 페이지의 배경색과 기본 글꼴 크기 및 글꼴 색상을 설정해 보겠습니다.
<body bgcolor="#f7d973" ></body>
테이블
다음으로 해야 할 일은 이메일 콘텐츠를 중앙에 배치하고 자체 배경색을 제공하여 눈에 띄게 만드는 것입니다.
첫 번째 행 – 헤더
첫 번째 행의 셀 내에서 진행되는 많은 일이 있습니다. 인라인 스타일은 <tr>이 아닌 <td>에 있습니다. 여기서 우리가 하는 일은 로고와 일치하는 새로운 배경색입니다. 또한 약간의 패딩 및 정렬도 있습니다. 이제 대체 텍스트는 기본적으로 검은색이므로 텍스트 색상을 흰색으로 변경합니다. 이 배경에서는 볼 수 없으므로 텍스트 색상을 변경하여 볼 수 있도록 합니다. 그것은 당신에게 쓸모없는 것처럼 보일 수 있지만 내가 말했듯이 이것은 기본적으로 허용되는 이미지가 없는 사람들에게 매우 중요합니다.
행 내에는 다시 한 번 두 개의 열에 걸쳐 있는 하나의 셀만 있습니다. 이 셀은 약간의 여백을 추가하고 하단에 분리선을 추가하여 내용을 아래 행과 분리하여 약간 조작하고 있습니다. 여백을 통해 약간의 공간을 확보하는 큰 헤드라인도 있습니다. 그리고, 이것이 이 행에 대한 것입니다.
<tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>
세 번째 행
여기서 두 셀 모두에 대해 너비와 패딩을 모두 설정합니다. 세포가 반으로 균등하게 분할되도록 정확히 동일합니다. 그 외에는 셀이 이미지와 그에 대한 텍스트로 채워져 있기 때문에 다른 것은 없습니다.
<tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>
네 번째 행
이것은 이 HTML 이메일 템플릿에서 가장 양식화된 섹션입니다. 아래 코드에서 볼 수 있듯이 많은 작업이 진행되고 있습니다. 먼저 전체 행에 새로운 배경색과 텍스트 색상이 적용되어 헤더에서와 같이 텍스트가 잘 보이도록 합니다. 첫 번째 및 두 번째 셀과 그 내용은 모두 동일한 스타일 변경을 받고 있습니다. 첫째, 셀 자체가 새로운 배경 및 텍스트 색상을 갖게 됩니다. 그런 다음 제목 내의 링크가 노란색으로 변경됩니다. 마지막으로, 마지막 단락에 밑줄이 그어지고 약간의 분리를 추가하기 위해 여백도 추가됩니다. 내가 말했듯이, 두 번째 셀과 그 내용은 정확히 같은 스타일을 얻고 있습니다.
<tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer<tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer
그리고 마지막으로 바닥글입니다. 여기에는 거의 진행되지 않습니다. 패딩을 통한 약간의 간격만 있으면 됩니다!
<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>
마지막 말
이 자습서는 약간 길지만 처음부터 HTML 전자 메일 템플릿을 만드는 데 필요한 사항을 이제 이해하셨기를 바랍니다. 복잡한 개념은 아니지만 지루할 수 있습니다. 이제 나가서 놀랍도록 고급스러운 이메일을 만들기 시작할 차례입니다! 이메일 템플릿을 만드는 여러 기술을 결합하여 더 고유하게 만들 수 있습니다.
이 기사는 Hannah Butler가 작성했습니다. 그녀는 웹 개발자 및 디자이너로 일하고 있습니다. 게다가 그녀는 기사의 형태로 자신의 경험을 공유하는 것을 좋아합니다. 이 경우 그녀는 WriteMyPaper4Me.co 웹사이트에 자신의 섹션을 가지고 있습니다. 앞으로 그녀는 자신의 작업 방식을 다른 사람들에게 설명하기 위해 블로그에 글을 쓰기 시작할 것입니다.
