반응 형 이메일을 구축하기위한 트릭 상자-IT산업-php.cn

Responsive Mail Design Guide : 다양한 장치에 이메일을 완벽하게 제공합니다

코어 포인트

전자 메일 읽기에서 모바일 장치가 인기를 얻음에 따라 응답 형 메일 레이아웃은 모바일 장치의 특성을 고려해야합니다. 이를 위해서는 메일 컨텐츠를 재 배열하고 원래 수평으로 정렬 된 셀을 모바일 장치에 세로로 배열해야합니다. 단일 열 메일 레이아웃 (일반적으로 단일 제목 이미지가 포함 된)에는 재 배열 요소가 필요하지 않으며 장치 크기와 일치하도록 너비를 조정하십시오. 이것은 반응 형 디자인이 아닌 확장 가능한 디자인입니다.

멀티 컬럼 메일 레이아웃은 장치 너비가 감소함에 따라 열을 재 배열해야합니다. 중첩 테이블을 사용하거나 테이블 셀의

반응 형 전자 메일의 이미지는 고전적인 응답 기술 만 필요합니다 (). 그러나 미디어 쿼리를 사용하면 하나의 이미지를 숨길 수 있고 다른 이미지를 배경 이미지로 사용할 수 있습니다.
그림에 의해 제공된 그림 : FishBulb1022 display

보도 자료에 관한 이전 기사에서, 우리는 다른 고객에게 이메일이 어떻게 나타나는지 크게 변경할 수있는 몇 가지 팁을 배웠습니다.

또한 이메일 읽기에 점점 더 많이 사용되는 모바일 장치를 고려해야합니다. 이것은 이메일에 대한 반응 형 레이아웃을 구축하는 문제가 발생합니다. img {max-width: 100%;} 우리는 전자 메일 템플릿이 HTML 테이블로 제작되었으며 인라인 CSS를 가지고 있다는 것을 알고 있기 때문에 우리의 작업은 평소보다 조금 더 복잡합니다.

~~인라인 CSS 규칙의 특이성 값이 높습니다 (항상 승리).~~

테이블은 레이아웃 조합을 위해 설계되지 않았으므로 전자 메일의 조합에주의를 기울여야하며 셀 (자연 수평 포지셔닝)은 모바일 장치에 세로로 배열되어야한다는 것을 기억해야합니다.

물론 우리는 JavaScript를 사용할 수 없습니다. A Box of Tricks for Building Responsive Email

운 좋게도 대부분의 모바일 장치는 최신 CSS 규칙과 호환성이 높기 때문에 미디어 쿼리로 이러한 모든 문제를 쉽게 해결하고 많은

선언을 사용하여 (인라인 스타일을 재정의), 배열에주의를 기울일 수 있습니다. 내용의 신중하게.

이러한 프로젝트의 경우 소형 장치에서 올바르게 배열 할 수없는 레이아웃을 피하면서 "모바일 최초"접근 방식을 채택하는 것이 중요합니다.

이 기사에서도 반응 형 문제 만 논의하면 반응 모바일 메일이 반드시 좋은 메일 일 필요는 없습니다. 효과적인 모바일 이메일 디자인에는 글꼴 크기, 레이아웃 조합 등 많은 요소가 포함됩니다. 이는 매우 중요한 작업이며 다른 기사에서 다룰 것입니다.

메일 레이아웃 모드 응답성에 대해서는 단일 열과 여러 열의 두 가지 유형의 메일을 식별 할 수 있습니다.

단일 열 레이아웃

단일 열 레이아웃 (일반적으로 하나의 제목 이미지 만)에는 특별한 요구가 없습니다. 요소를 재 배열 할 필요가 없으므로 모든 너비가 장치 크기와 일치하도록 우아하게 다운 그레이드됩니다. 이것은 반응 형 디자인이 아니라 확장 가능한 디자인의 전형적인 예입니다 (확장 가능, 유체 또는 반응 형 : 메일 이동 방법 이해).

단일 열 레이아웃 이메일이 올바르게 크기를 조정하려면 테이블 너비 만 조정하면됩니다.

또한 이미지를 크기를 조정하고 (이 기사의 끝에있는 "이미지 정보"단락 참조) 글꼴을 조정해야하지만 다른 특별한 요구는 없습니다. A Box of Tricks for Building Responsive Email 멀티 컬럼 레이아웃

다중 열 레이아웃은 장치 너비가 감소함에 따라 열을 재 배열해야합니다. 2 개, 3 개 또는 더 많은 열을 사용하든 수평으로 수직으로 표시해야합니다.

이것을 달성하는 두 가지 간단한 방법이 있습니다 :

중첩 테이블을 사용하는

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

로그인 후 복사

테이블 셀의

@media screen and (max-width:480px) {
    table {
        width: 100%!important;
    }
}

로그인 후 복사

속성을 변경하십시오.

중첩 테이블 레이아웃 <🎜 🎜> 이메일 조합은 일반적으로 중첩 테이블을 사용해야합니다. 이것은 항상 클라이언트 호환성을 보장하는 가장 좋은 방법으로 간주되지만 반면에 생성 된 코드는 매우 혼란스럽고 실제로 읽기가 어렵습니다.

트릭은 <🎜 🎜> 속성을 사용하여 테이블이 수평으로 정렬됩니다.

각 요소의 너비는

특정

이어야하며 합계는 컨테이너 값과 동일해야합니다.

A Box of Tricks for Building Responsive Email <<>

장치 너비가 줄어들면 컨테이너 크기를 조정하고 모든 테이블 열을 100% 너비로 강제해야합니다.

이 기술은 대부분의 클라이언트와의 호환성을 보장합니다. 리트머스에서 데모 파일을 테스트했으며 모든 클라이언트가 좋은 결과를 얻으므로 다음 경고를 허용합니다.

Lotus Notes의 가장 오래된 버전; Gmail Android 앱.

이것은 좋은 출발점입니다 (테스트 결과 중 일부는 아래 참조)이 테스트는 빈 테이블로 구축 된 것을 고려해야합니다. 콘텐츠 추가 (및 더 중첩 된 테이블 !!) 모든 오류를 수정 하고이 기술이 모든 클라이언트와 제대로 작동하도록하십시오.

display <<>

리트머스 호환성 테스트 결과의 일부

테이블 셀의 디스플레이 속성을 변경하십시오 멀티 컬럼 메시지를 구축하는 두 번째 방법은 더 우아하고 기본 CSS 규칙을 사용합니다.

이 기술에는 장치 폭이 줄어드는 경우 기본 테이블 셀의

특성을 변경하는 것이 포함됩니다 (ResponsiveEmailPatterns.com에서 많은 예제를 찾을 수 있음). 이것은 세포가 수직으로 다시 스택되게한다 :

<🎜 🎜> <<>

디스플레이 계획을 변경 <🎜 🎜>

display 이 테스트 결과는 매우 좋습니다. 모든 클라이언트는 테스트 메일을 올바르게 렌더링합니다 (때로는 미묘한 오류가 있습니다). 그러나 우리는 빈 메일을 시도했으며 콘텐츠를 추가 한 후 결과가 다를 수 있음을 기억하십시오.

<🎜 🎜> 이미지 <🎜 🎜> 반응 메일에서 이미지는 현재 웹에서 사용하고있는 전형적인 반응 기술 만 필요합니다 (<🎜 🎜 🎜>).

그러나 캠페인 모니터의 반응 형 메일 디자인 안내서에 제안 된 바와 같이 미디어 쿼리를 사용하여 하나의 이미지를 숨기고 다른 이미지로 배경 이미지로 바꿀 수 있습니다. A Box of Tricks for Building Responsive Email

<<>

CSS를 통해 숨겨진 이미지조차도 클라이언트에로드 될 것이므로이를 알고 있어야합니다.

<table> cellspacing="0" cellpadding="0" border="0" width="600">

</table>

로그인 후 복사

좋은 옵션은

태그 및 <🎜 🎜> 소스에 동일한 이미지를 사용하는 것입니다. 다음 예와 같이 이러한 모든 범위에서 사용하기 위해 다중 목적 <🎜 🎜> 이미지를 준비해야합니다. </p> <<> <h2> <the> 적절한 이미지를 선택한 후 많은 미디어 쿼리 중단 점에 사용할 수 있습니다. 준비가되면 소량의 CSS 규칙 만 추가하면됩니다. </h2> <add> 각 브레이크 포인트 뷰를 조정하기 위해 <p> 속성을 추가 할 수도 있습니다 (이 규칙에 대한 클라이언트의 지원에 유의하십시오). <code>img {max-width: 100%;}</code> 불행히도, 이것은 고밀도 장치에 대한 모든 요구를 해결하지는 못하지만 다른 모든 경우에로드 된 파일 수를 줄일 수 있습니다. </p> <p> 결론 <🎜 🎜> <there> 그래서, 단일, 다재다능하고 대응적인 이메일 제작 기술이 있습니까? </p> <answer> 일반적으로 대답은 아니오입니다. 각 프로젝트마다 다른 접근 방식이 필요하며 다른 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>@media screen and (max-width:480px) { table { width: 100%!important; } }

로그인 후 복사

가 있습니다. 진정한 대답은 다양한 유용한 기술을 마스터하고 지속적으로 새로운 방법을 시도하는 것입니다. A Box of Tricks for Building Responsive Email

자원

위 내용은 반응 형 이메일을 구축하기위한 트릭 상자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!