Дома Туторијали Како да креирате прилагодлив образец за електронска пошта

Туторијали

Како да креирате прилагодлив образец за електронска пошта

650

Читањето електронската пошта на таблет или мобилен телефон никогаш не било полесно. Исто како и кај модерните веб страници, така и билтенот со новости на електронската пошта треба да се оптимизира за различни екрани. Можеби изгледа добро на десктоп екран, но не значи дека ќе биде исто толку добро и на екран од мобилен уред. Ако проверите, сигурно ќе видите колку неубаво иститот може да изгледа на мобилен уред, со нерамни елементи и прекршени колони.

Според EmailMonday, 91 процент од корисниците секој ден проверуваат електронска пошта на мобилен уред. Токму тоа е причината зошто треба да ги оптимизирате вашите образци за електронска пошта.

Како да ги оптимизирате? Додека вие размислувате да употребите модерен начин на кодирање на HTML образец со div и надворешен CSS, некои од клиентите, како Outlook и Yahoo Mail употребуваат различен пристап.

Поддршката за HTML5 и CSS3 е ограничена кога станува збор за дизајн на електронска пошта, па затоа најдобар начин да направите responsive образец за е-пошта е да одите по чекорите на стариот начин: употреба на табела, внатрешно CSS, inline CSS и медиа прашалници.

Дали сите клиенти за е-пошта поддржуваат медиа прашалници?

Иако повеќето ги поддржуваат, сеуште постојат неколку, како Gmail Android апликацијата, кои имаат ограничена поддршка. Добрата работа е што сепак може да додадеме проценти во табели и други HTML елементи за да креираме responsive структура за страница за различни екрани.

За да ви прикажеме како може да ги аплицирате сите овие информации, ќе ви покажеме како со употреба на гореспоменатите елементи да креирате дизајн кој реагира на резолуцијата на екранот. Да почнеме.

Забелешка: Јас веќе креирав скица во Photoshop за дизајнот на нашиот образец за е-пошта.

Што ни е потребно..

• Raleway и Lato Google фонтови
• Исечени слики и икони
• Познавање од HTML и CSS
• Познавање од медиа прашалници

Финален производ

Дизајнот на нашиот билтен ќе има модерен рамен дизајн. Еве како изгледа.

Да почнеме

Пред да почнеме, треба да ставиме елементи во секцијата за заглавје. Прво, ќе додадеме HTML doctype кое ќе се следи од html таг со xmlns атрибут за да се специфизира xml просторот за име за нашиот документ. Остатокот се meta информации и тагот за насловот.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta name=”viewport” content=”initial-scale=1.0″/>
<meta name=”format-detection” content=”telephone=no”/>
<title>KATAUSTRIA – Email Template</title>
</head>

Ознака

За ознаката, ќе почнеме со табели и потоа ќе додаваме атрибути во табелата. Овде ќе бидат содржани следните елементи:

Заглавје/Банер
3 Box Приказ
Секција за наслов
Секција –За нас
Секција-Спремни за нов проект
Табела со цени
Подножје

Секции Banner и 3 Box showcase

Секоја од овие две секции ќе ја завиткаме со col-600 класа за подоцна да може да ја прилагодиме висината за нив во нашите CSS. Ќе додадеме убав банер со нашето лого и текст. За 3 Box приказот, ќе употребиме col3 и ќе дадеме висина од 183. Забележувате дека употребувам висина на <td> таг за да дадам празно место.

<!– START HEADER/BANNER –>
<tr>
<td align=”center”>
<table class=”col-600″ width=”600″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td align=”center” valign=”top” background=”images/header-background.jpg” bgcolor=”#66809b” style=”background-size:cover; background-position:top;height=”400″”>
<table class=”col-600″ width=”600″ height=”400″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”40″></td>
</tr>
<tr>
<td align=”center” style=”line-height: 0px;”><img style=”display:block; line-height:0px; font-size:0px; border:0px;” src=”images/logo.png” width=”109″ height=”103″ alt=”logo” />
</td>
</tr>
<tr>
<td align=”center” style=”font-family: ‘Raleway’, sans-serif; font-size:37px; color:#ffffff; line-height:24px; font-weight: bold; letter-spacing: 7px;”>EMAIL <span style=”font-family: ‘Raleway’, sans-serif; font-size:37px; color:#ffffff; line-height:39px; font-weight: 300; letter-spacing: 7px;”>TEMPLATE</span>
</td>
</tr>
<tr>
<td align=”center” style=”font-family: ‘Lato’, sans-serif; font-size:15px; color:#ffffff; line-height:24px; font-weight: 300;”>A creative email template for your email campaigns, promotions <br/>and products across different email platforms.
</td>
</tr>
<tr>
<td height=”50″></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!– END HEADER/BANNER –>
<!– START 3 BOX SHOWCASE –>
<tr>
<td align=”center”>
<table class=”col-600″ width=”600″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ style=”margin-left:20px; margin-right:20px; border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;”>
<tr>
<td height=”35″></td>
</tr>
<tr>
<td align=”center” style=”font-family: ‘Raleway’, sans-serif; font-size:22px; font-weight: bold; color:#2a3a4b;”>A creative way to showcase your content</td>
</tr>
<tr>
<td height=”10″></td>
</tr>
<tr>
<td align=”center” style=”font-family: ‘Lato’, sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;”>Prepare some flat icons of your choice. You can place your content below.<br/>Make sure it’s awesome.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align=”center”>
<table class=”col-600″ width=”600″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ style=”border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9; “>
<tr>
<td height=”10″></td>
</tr>
<tr>
<td>
<table class=”col3″ width=”183″ border=”0″ align=”left” cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”30″></td>
</tr>
<tr>
<td align=”center”>
<table class=”insider” width=”133″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr align=”center” style=”line-height:0px;”>
<td>
<img style=”display:block; line-height:0px; font-size:0px; border:0px;” src=”images/icon-about.png” width=”69″ height=”78″ alt=”icon” />
</td>
</tr>
<tr>
<td height=”15″></td>
</tr>
<tr align=”center”>
<td style=”font-family: ‘Raleway’, Arial, sans-serif; font-size:20px; color:#2b3c4d; line-height:24px; font-weight: bold;”>About Us</td>
</tr>
<tr>
<td height=”10″></td>
</tr>
<tr align=”center”>
<td style=”font-family: ‘Lato’, sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;”>Place some cool text here.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=”30″ ></td>
</tr>
</table>
<table width=”1″ height=”20″ border=”0″ cellpadding=”0″ cellspacing=”0″ align=”left” >
<tr>
<td height=”20″ style=”font-size: 0;line-height: 0;border-collapse: collapse;”>
<p style=”padding-left: 24px;”> </p>
</td>
</tr>
</table>
<table class=”col3″ width=”183″ border=”0″ align=”left” cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”30″></td>
</tr>
<tr>
<td align=”center”>
<table class=”insider” width=”133″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr align=”center” style=”line-height:0px;”>
<td>
<img style=”display:block; line-height:0px; font-size:0px; border:0px;” src=”images/icon-team.png” width=”69″ height=”78″ alt=”icon” />
</td>
</tr>
<tr>
<td height=”15″></td>
</tr>
<tr align=”center”>
<td style=”font-family: ‘Raleway’, sans-serif; font-size:20px; color:#2b3c4d; line-height:24px; font-weight: bold;”>Our Team</td>
</tr>
<tr>
<td height=”10″></td>
</tr>
<tr align=”center”>
<td style=”font-family: ‘Lato’, sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;”>Place some cool text here.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=”30″></td>
</tr>
</table>
<table width=”1″ height=”20″ border=”0″ cellpadding=”0″ cellspacing=”0″ align=”left”>
<tr>
<td height=”20″ style=”font-size: 0;line-height: 0;border-collapse: collapse;”>
<p style=”padding-left: 24px;”> </p>
</td>
</tr>
</table>
<table class=”col3″ width=”183″ border=”0″ align=”right” cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”30″></td>
</tr>
<tr>
<td align=”center”>
<table class=”insider” width=”133″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr align=”center” style=”line-height:0px;”>
<td>
<img style=”display:block; line-height:0px; font-size:0px; border:0px;” src=”images/icon-portfolio.png” width=”69″ height=”78″ alt=”icon” />
</td>
</tr>
<tr>
<td height=”15″></td>
</tr>
<tr align=”center”>
<td style=”font-family: ‘Raleway’, sans-serif; font-size:20px; color:#2b3c4d; line-height:24px; font-weight: bold;”>Our Portfolio</td>
</tr>
<tr>
<td height=”10″></td>
</tr>
<tr align=”center”>
<td style=”font-family: ‘Lato’, sans-serif; font-size:14px; color:#757575; line-height:24px; font-weight: 300;”>Place some cool text here.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=”30″></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=”5″></td>
</tr>
<!– END 3 BOX SHOWCASE –>

Секции – Awesome Title и What We Do

Секоја од овие секции ќе употребува col-600 класа, меѓутоа ќе употребиме различни класи на секој елемент од внатре. За првиот елемент – икона во секцијата за наслов ќе употребиме col1 и col3_one на текстот. Ќе ја менуваме големината подоцна во медиа прашалникот.

За секцијата – What We Do, ќе употребиме col2 за секоја колона. Употребувам inline CSS за да ги стилизирам елементите.

<!– START AWESOME TITLE –>
<tr>
<td align=”center”>
<table align=”center” class=”col-600″ width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td align=”center” bgcolor=”#2a3b4c”>
<table class=”col-600″ width=”600″ align=”center” width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td height=”33″></td>
</tr>
<tr>
<td>
<table class=”col1″ width=”183″ border=”0″ align=”left” cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”18″></td>
</tr>
<tr>
<td align=”center”>
<img style=”display:block; line-height:0px; font-size:0px; border:0px;” class=”images_style” src=”images/icon-title.png” alt=”img” width=”156″ height=”136″ />
</td>
</tr>
</table>
<table class=”col3_one” width=”380″ border=”0″ align=”right” cellpadding=”0″ cellspacing=”0″>
<tr align=”left” valign=”top”>
<td style=”font-family: ‘Raleway’, sans-serif; font-size:20px; color:#f1c40f; line-height:30px; font-weight: bold;”>This title is definitely awesome! </td>
</tr>
<tr>
<td height=”5″></td>
</tr>
<tr align=”left” valign=”top”>
<td style=”font-family: ‘Lato’, sans-serif; font-size:14px; color:#fff; line-height:24px; font-weight: 300;”>The use of flat colors in web design is more than a recent trend, it is a style designers have used for years to create impactful visuals. When you hear “flat”, it doesn’t mean boring it just means minimalist.
</td>
</tr>
<tr>
<td height=”10″></td>
</tr>
<tr align=”left” valign=”top”>
<td>
<table class=”button” style=”border: 2px solid #fff;” bgcolor=”#2b3c4d” width=”30%” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”10″></td>
<td height=”30″ align=”center” style=”font-family: ‘Open Sans’, Arial, sans-serif; font-size:13px; color:#ffffff;”><a href=”#” style=”color:#ffffff;”>Read more</a>
</td>
<td width=”10″></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=”33″></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!– END AWESOME TITLE –>
<!– START WHAT WE DO –>
<tr>
<td align=”center”>
<table class=”col-600″ width=”600″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ style=”margin-left:20px; margin-right:20px;”>
<tr>
<td align=”center”>
<table class=”col-600″ width=”600″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ style=” border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;”>
<tr>
<td height=”50″></td>
</tr>
<tr>
<td align=”right”>
<table class=”col2″ width=”287″ border=”0″ align=”right” cellpadding=”0″ cellspacing=”0″>
<tr>
<td align=”center” style=”line-height:0px;”>
<img style=”display:block; line-height:0px; font-size:0px; border:0px;” class=”images_style” src=”images/icon-responsive.png” width=”169″ height=”138″ />
</td>
</tr>
</table>
<table width=”287″ border=”0″ align=”left” cellpadding=”0″ cellspacing=”0″ class=”col2″ style=””>
<tr>
<td align=”center”>
<table class=”insider” width=”237″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr align=”left”>
<td style=”font-family: ‘Raleway’, sans-serif; font-size:23px; color:#2a3b4c; line-height:30px; font-weight: bold;”>What we do?</td>
</tr>
<tr>
<td height=”5″></td>
</tr>
<tr>
<td style=”font-family: ‘Lato’, sans-serif; font-size:14px; color:#7f8c8d; line-height:24px; font-weight: 300;”>We create responsive websites with modern designs and features for small businesses and organizations that are professionally developed and SEO optimized.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!– END WHAT WE DO –>

Секции – New Project и Cenovnik

За секцијата New Project нема да употребиме ниедна друга класа освен col-600, додека пак за табелата со цени col2.

<!– START READY FOR NEW PROJECT –>
<tr>
<td align=”center”>
<table align=”center” width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ style=” border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;”>
<tr>
<td height=”50″></td>
</tr>
<tr>
<td align=”center” bgcolor=”#34495e”>
<table class=”col-600″ width=”600″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”35″></td>
</tr>
<tr>
<td align=”center” style=”font-family: ‘Raleway’, sans-serif; font-size:20px; color:#f1c40f; line-height:24px; font-weight: bold;”>Ready for new project?</td>
</tr>
<tr>
<td height=”20″></td>
</tr>
<tr>
<td align=”center” style=”font-family: ‘Lato’, sans-serif; font-size:14px; color:#fff; line-height: 1px; font-weight: 300;”>Check out our price below.
</td>
</tr>
<tr>
<td height=”40″></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!– END READY FOR NEW PROJECT –>
<!– START PRICING TABLE –>
<tr>
<td align=”center”>
<table width=”600″ class=”col-600″ align=”center” border=”0″ cellspacing=”0″ cellpadding=”0″ style=” border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;”>
<tr>
<td height=”50″></td>
</tr>
<tr>
<td>
<table style=”border:1px solid #e2e2e2;” class=”col2″ width=”287″ border=”0″ align=”left” cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”40″ align=”center” bgcolor=”#2b3c4d” style=”font-family: ‘Raleway’, sans-serif; font-size:18px; color:#f1c40f; line-height:30px; font-weight: bold;”>Small Business Website</td>
</tr>
<tr>
<td align=”center”>
<table class=”insider” width=”237″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”20″></td>
</tr>

<tr align=”center” style=”line-height:0px;”>
<td style=”font-family: ‘Lato’, sans-serif; font-size:48px; color:#2b3c4d; font-weight: bold; line-height: 44px;”>$150</td>
</tr>
<tr>
<td height=”15″></td>
</tr>
<tr>
<td height=”15″></td>
</tr>
<tr>
<td align=”center”>
<table width=”100″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ style=”border: 2px solid #2b3c4d;”>
<tr>
<td width=”10″></td>
<td height=”30″ align=”center” style=”font-family: ‘Lato’, sans-serif; font-size:14px; font-weight: 300; color:#2b3c4d;”>
<a href=”#” style=”color: #2b3c4d;”>Learn More</a>
</td>
<td width=”10″></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=”30″></td>
</tr>
</table>
<table width=”1″ height=”20″ border=”0″ cellpadding=”0″ cellspacing=”0″ align=”left”>
<tr>
<td height=”20″ style=”font-size: 0;line-height: 0;border-collapse: collapse;”>
<p style=”padding-left: 24px;”> </p>
</td>
</tr>
</table>
<table style=”border:1px solid #e2e2e2;” class=”col2″ width=”287″ border=”0″ align=”right” cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”40″ align=”center” bgcolor=”#2b3c4d” style=”font-family: ‘Raleway’, sans-serif; font-size:18px; color:#f1c40f; line-height:30px; font-weight: bold;”>E-commerce Website</td>
</tr>
<tr>
<td align=”center”>
<table class=”insider” width=”237″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”20″></td>
</tr>
<tr align=”center” style=”line-height:0px;”><td style=”font-family: ‘Lato’, sans-serif; font-size:48px; color:#2b3c4d; font-weight: bold; line-height: 44px;”>$289</td>
</tr>
<tr>
<td height=”30″></td>
</tr>
<tr align=”center”>
<td>
<table width=”100″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ style=” border: 2px solid #2b3c4d;”>
<tr>
<td width=”10″></td>
<td height=”30″ align=”center” style=”font-family: ‘Lato’, sans-serif; font-size:14px; font-weight: 300; color:#2b3c4d;”>
<a href=”#” style=”color: #2b3c4d;”>Learn More</a>
</td>
<td width=”10″></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=”20″ ></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!– END PRICING TABLE –>

Подножје

За секцијата-Подножје ќе ја употребиме истата col-600, а потоа ќе креираме табели со 3 ќелии и ќе и дадеме проценти широчина за иконите за социјални медиуми.

<!– START FOOTER –>
<tr>
<td align=”center”>
<table align=”center” width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ style=” border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;”>
<tr>
<td height=”50″></td>
</tr>
<tr>
<td align=”center” bgcolor=”#34495e” background=”images/footer.jpg” height=”185″>
<table class=”col-600″ width=”600″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td height=”25″></td>
</tr>
<tr>
<td align=”center” style=”font-family: ‘Raleway’, sans-serif; font-size:26px; font-weight: 500; color:#f1c40f;”>Follow us for some cool stuffs</td>
</tr>
<tr>
<td height=”25″></td>
</tr>
<table align=”center” width=”35%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td align=”center” width=”30%” style=”vertical-align: top;”>
<a href=”https://www.facebook.com/designmodo” target=”_blank”> <img src=”images/icon-fb.png”> </a>
</td>
<td align=”center” class=”margin” width=”30%” style=”vertical-align: top;”>
<a href=”https://twitter.com/designmodo” target=”_blank”> <img src=”images/icon-twitter.png”> </a>
</td>
<td align=”center” width=”30%” style=”vertical-align: top;”>
<a href=”https://plus.google.com/+Designmodo/posts” target=”_blank”> <img src=”images/icon-googleplus.png”> </a>
</td>
</tr>
</table>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!– END FOOTER –>
</td>
</tr>
</table>

CSS

Сега, кога се ни е прилагодено, да додадеме стилови на секцијата – Заглавје. Прво, треба да ги додадеме општите стилови за ознаки. Ќе импортираме Google Web фонтови, а остатокот ќе ги содржи нашите стилови за телото, html, табели, итн.

Неколку забелешки за веб фонтовите: Според Campaign Monitor, поддршката за веб фонтови кај клиентите од е-пошта е ограничен. Ова значи дека не сите достапни клиенти имаат поддршка за нив. Проверете за клиентите кои поддржуваа интеграција на веб фонтови овде.

@import “http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,500,600,700,800,900′ rel=’stylesheet’ type=’text/css”;

html,body {
background-color:#fff;
margin:0;
padding:0
}

html {
width:100%
}

body {
margin:0;
padding:0;
-webkit-text-size-adjust:none;
-ms-text-size-adjust:none
}

table {
border-spacing:0;
border-collapse:collapse
}

table td {
border-collapse:collapse
}

table tr {
border-collapse:collapse
}

img {
display:block!important
}

br,strong br,b br,em br,i br {
line-height:100%
}

a {
text-decoration:none
}

.button a {
font-size:14px;
font-family:’Lato’,sans-serif;
color:#fff;
font-weight:300;
background:transparent
}

Следно, да додадеме стилови за специфичните класи. На овој начин сигурно секоја класа ќе ги имплементира стиловите кои ги сакаме.

Медиа кверија (прашалници)

Овде, употребувајќи проценти, ќе почнеме со додавање и манипулирање на големината на секој елемент и секција на 640 пиксели врамена површина за прикажување на информации.

@media only screen and (max-width: 640px) {
body {
width:auto!important
}

table[class=”col1″] {
width:29%;
}

table[class=”col2″] {
width:47%;
text-align:left
}

table[class=”col3_one”] {
width:64%;
text-align:left;
}

table[class=”col3″] {
width:100%;
text-align:center;
}

table[class=”col-600″] {
width:450px
}

table[class=”insider”] {
width:90%
}

img[class=”images_style”] {
width:60%;
height:auto
}

.margin{
margin-left: 25px;
margin-right: 25px;
}
}

За финалниот CSS ќе почнеме со додавање на прашалници за нашата површина за информации од 480 пиксели. Повеќето од нашите елементи и секцијара ќе бидат поставени на 100 проценти.

@media only screen and (max-width: 480px) {
body {
width:auto!important
}

table[class=”col1″] {
width:100%;
}

table[class=”col2″] {
width:100%;
text-align:left
}

table[class=”col3″] {
width:100%;
text-align:center
}

table[class=”col3_one”] {
width:80%;
text-align:center;
margin: 0 20px 0 0;
}

table[class=”col-600″] {
width:290px
}

table[class=”insider”] {
width:82%!important
}

img[class=”images-style”] {
width:60%
}

.button { width: 40%; display: block; }
a.read-more { text-align: center; display: block;}

}

Заклучок

Честитки! Токму вака може да креирате responsive образец за електронска пошта. Како и што видовте, повеќето од нашите стилови употребуваа inline CSS.

Иако може да треба ова да се подобрува во иднина, сепак имаме добра основа за креирање на образец за е-пошта. Немојте да заборавите да ги отстраните сите коментари на HTML датотеката пред да ја употребите, затоа што некои клиенти за електронска пошта може да имаат проблеми со тоа.

Премногу комплицирано?

Прилагодливиот (responsive) веб дизајн е пристап во веб дизајнот насочен кон овозможување приказ на веб страните во зависност од големината на екранот или веб пребарувачот со кој се гледа страната.

Ако имате основни знаења од HTML и CSS а сакате систематски да го совладате прилагодливиот дизајн со помош на искусни ментори, запишете се на некој од нашите курсеви и додадете важна компетенција во вашето портфолио.