Хабр, давай пофиксим письма?

АБРАКАДАБРА (Тоже самое но в читаемом виде)

Xabr, davay pofiksim pis'ma?

Privet.

V o4erednoy raz polu4iv pis'mo ot xabra, a rasstroilsa. A delo vot v 4em. Na skrin6ote sleva mi vidim normal'noe adaptirovannoe pis'mo. Tak ono otobrajaetsa vo vsex vmenaemix mobil'nix po4tovix klientax, kotorie podderjivaut media queries. Teper' davayte vzglanem na skrin sprava. Takim pis'mo mi vidim v mobil'nix Gmail, Yandex, Mail.ru klientax kak na androide, tak i na ablo4ke. Kak vi uje vozmojno dogadalis', eti klienti media queries ne podderjivaut.

Budem le4it'?

Standartniy

19.05.2015 admin 0

Ispol'zovanie media queries v vёrstke email-pisem: za i protiv

Dizayneri, rabotau6ie nad sozdaniem privlekatel'nix 6ablonov pisem dla email-rassilok, mnogo vremeni tratat na to, 4tobi dobit'sa adekvatnogo otobrajenia na raznix ustroystvax. V na6i dni po4ti polovina vsex pisem prosmatrivaetsa so smartfonov i plan6etov, a zna4it, neobxodimo pozabotit'sa o tom, 4tobi pis'mo xoro6o vigladelo na raznix form-faktorax. Imenno dla etogo v vёrstke i na4ali ispol'zovat' media queries.

Odnako, prejde 4em pogruzit'sa v mir veb-dizayna i vёrstki unikal'nix email-kampaniy, sleduet popodrobnee vzglanut' na media queries, kak na instrument, kotoriy imeet svoi plusi i minusi.
4itat' dal'6e →

Standartniy

14.05.2015 admin 0

[Perevod] Kak ispol'zovat' progressivnoe ulu46enie dla vёrstki pisem

Pri verstke email-rassilok vajno sdelat' razmetku prigodnoy dla parsinga i dobit'sa togo, 4tobi «ru6e4ki» ne me6ali 4teniu kontenta. A glavnim kontentom v pis'me po4ti vsegda avlaetsa tekst.

Segodna mi pogovorim o tom, kak ispol'zovat' texniku progressirovnogo ulu46enia pri razrabotke HTML-6ablonov pisem.

Pogovorim o tekste

Vrad li mojno nayti sredu bolee podxoda6uu dla progressivnogo ulu46enia, 4em email. To, kak pis'ma parsatsa i otobrajautsa (a tut ni4ego v blijay6ie godi ne izmenitsa), pramo diktuet neobxodimost' sna4ala dumat' o kontente, ne stremas' vsemi silami sdelat' sam 6ablon vizual'no o4en' krasivim.

Obi4no dizayneri i verstal'6iki, zanimau6iesa podgotovkoy pisem, iz koji von lezut, 4tobi sdelat' tekst «primerno odinakovo viglada6im» v raznix po4tovix klientax. Pol'zovatel', otkriv6iy pis'mo v Gmail, doljen videt' to je, 4to i 4elovek, pol'zuu6iysa na rabote Outlook.

Tot samiy «primerno odinakoviy» vne6niy vid — vajney6aa ve6', no dla tex sred, kotorie podderjivaut vizual'nie «krasivosti», mojno sozdat' bolee interesno oformlennie 6abloni.

Vёrstka so stilem

Prinimaa vo vnimanie vajnost' togo, kak vigladit tekst, mojno vspomnit' mnojestvo oformitel'skix priemov, kotorie pozvolaut privle4' vnimanie k konkretnim u4astkam etogo teksta — naprimer, citati.

Xoro6o vigladit videlenie teksta gorizontal'nimi liniami pod4erkivania, i esli ix ne vitagivat' na vsu dlinu teksta citati, to on vigladit e6e lu46e:

4tobi zaverstat' eto bez dobavlenia li6nix tegov <hr />, mojno ispol'zovat' neskol'ko interesnix texnik, redko primenaemix v po4tovix rassilkax.

TL;DR — eto illuzia

6ablon pis'ma doljen bit' maksimal'no prostim, poetomu dobavlat' li6niy HTML-kod ne nujno. Pervona4al'no kod teksta s citatoy vigladel tak:

<blockquote>
  <p>Hey Bonita, nice to meet ya</p>
</blockquote>

Esli poeksperimentirovat' s otstupami dla citati (<blockquote>), to vskore viasnitsa, 4to nekotorie po4tovie klienti otricatel'nie otstupi dla vnutrennix elementov prosto ignoriruut — v itoge 6irina teksta viravnivaetsa po granicam 6ablona.

Dalee mojno ispol'zovat' psevdoelementi ::before i ::after — ix primenaut v CSS dla togo, 4tobi vstavit' na stranicu stilizovannie elementi, ne avlau6iesa HTML-kodom (podrobnee eta texnika opisana v rukovodstve Smashing Magazine).

Dla sozdania iskusstvennoy granici v verxney 4asti citati dalee bil ispol'zovan element ::before, a dla analogi4nogo oformlenia ego nijney 4asti — element ::after. Dla togo, 4tobi dobit'sa pravil'nogo raspolojenia i razmera, bil sozdan sleduu6iy CSS:

blockquote {
  position: relative;
}
blockquote:before,
blockquote:after {
  content: ';
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
}
blockquote:before {
  top: -2px;
}
blockquote:after {
  bottom: -2px;
}

Teper' psevdoelementi naxodatsa v tekste, no problema v tom, 4to oni do six por prozra4ni. Nujno kakim-to obrazom dobit'sa togo, 4tobi rovno polovina kajdoy iz dvux liniy poseredine bila seroy, a ostav6aasa 4ast' soxranila beliy fonoviy cvet.

Etogo udalos' dobit'sa, sdelav fonom kajdogo psevdoelementa,CSS3-gradient. No kuda lu46e vigladit ne plavnoe peretekanie cveta gradienta, a 4etkaa granica mejdu belim i serim cvetom.

4tobi polu4it' nujniy rezul'tat, 4ast' gradienta bila zakra6ena belim cvetom — na4alo na 25% ot vsey linii psevdoelementa i zatem v konce na4inaa s 75% dlini linii. V itoge polu4ilsa jestkiy perexod ot belogo k seromu cvetu.

blockquote:before,
blockquote:after {
  background: linear-gradient(to right, #ffffff 25%, #e9e9e9 25%, #e9e9e9 75%, #ffffff 75%);
}

Poskol'ku raznie brauzeri i po4tovie klienti podderjivaut razli4niy sintaksis gradientov, to bili ispol'zovani razli4nie formulirovki.

Vse prodvigaetsa prosto otli4no, no est' odna nebol'6aa problema — ispol'zovanniy ranee kod budet rabotat' v o4en' ograni4ennom koli4estve po4tovix programm.

Obespe4enie otkazoustoy4ivosti*

* Na Xabre bilo neskol'ko xoro6ix statey po progressive enhancement i graceful degradation i vtoroe ponatie tam perevodilos', kak _otkazoustoy4ivost'_ — budem priderjivat'sa prinatoy terminologii.

Xoro6aa novost' zaklu4aetsa v tom, 4to nekotorie popularnie po4tovie klienti vrode Apple Mail, iPhone Mail i «defoltnogo» klienta Android. Nesmotra na eto, ob ispol'zovanii psevdoelementov mojno zabit' v Gmail ili Outlook.

I zdes' na scenu vixodit texnika progressive degradation (ili otkazoustoy4ivost'). Dla vsex menee osna6ennix texni4eski po4tovix klientov nujno dobavit' paru prostix granic na CSS:

blockquote {
  border-top: 2px solid #d9d9d9;
  border-bottom: 2px solid #d9d9d9;
}

Eti granici pokajut voob6e prakti4eski vse po4tovie programmi, a esli uspe6no «otrenderatsa» elementi ::before i ::after, to oni zakrout soboy serie linii novimi belo-serimi polosami.

Vot kak vigladat oba varianta otobrajenia v dinamike:

Tak stoit li pisat' dopolnitel'niy CSS-kod, tol'ko 4tobi dobavit' neskol'ko «ru6e4ek», kotorie e6e ne fakt, 4to uvidat vse polu4ateli pis'ma? Kajdiy slu4ay, kajdaa rassilka unikal'ni, i net odnozna4nogo otveta — dla togo, 4tobi prinat' takoe re6enie, kak minimum, nujno oznakomit'sa so statistikoy ispol'zovania po4tovix klientov u4astnikami (ranee mi publikovali podrobniy material po statistike dla sozdania uspe6noy rassilki).

Vpolne opravdan podxod, pri kotorom sozdautsa 6abloni pisem, kotorie vigladat maksimal'no xoro6o v kajdoy srede ispol'zovania, a ne prosto identi4no vo vsex vozmojnix po4tovix klientax.

Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин

Контактная информация :
тел. +7(98I) 7608865

Полная карта сайта