Share
In deze zelfstudie laat ik u zien hoe u een eenvoudige responsieve HTML-e-mail kunt maken die in elke e-mailclient werkt, inclusief alle nieuwe e-mailclients en -apps voor smartphones. Het gebruikt minimale mediaquery's en een benadering met een vloeiende breedte om maximale compatibiliteit te garanderen.
Als u op zoek bent naar een kant-en-klare professionele oplossing, neem dan een van onze bestverkopende responsieve e-mailsjablonen op Envato Market. We hebben honderden responsieve opties vanaf slechts $ 5, met eenvoudig aan te passen functies om u op weg te helpen.
Best verkopende responsieve e-mailsjablonen op Envato MarketNiet wat je zoekt? Geen probleem, deze tutorial leert je hoe je je eigen kunt bouwen.
Er was een tijd dat mediaquery's voldoende waren om responsieve e-mails te laten werken in iOS- en Android-mailtoepassingen, die beide mediaquery's ondersteunen.
Sindsdien is er een wildgroei aan mailtoepassingen ontstaan voor zowel iOS- als Android-platforms, met een verschillende mate van ondersteuning voor responsieve e-mailontwikkelingsmethoden.
Het meest opvallend is de nieuwste update van de Gmail-app voor Android, die twee keer zo populair is als de standaard e-mail-app voor Android-gebruikers (die nu 11% van het totale aantal bevat). Het heeft nog nooit mediaquery's ondersteund, en nog steeds niet, maar het schaalt nu uw e-mails door het formaat van de buitenste tabel te comprimeren om binnen het zichtbare gedeelte van het scherm te passen. Het is moeilijk te controleren en, wanneer uw gehele e-mail vertrouwt op mediaquery's om correct weer te geven op mobiele apparaten, genereert dit enkele zeer onaangename resultaten.
Het goede nieuws is dat jij kan ontwerp en bouw een e-mail die er uitstekend uitziet in elke e-mail-app, inclusief apps die geen mediaquery's ondersteunen. U kunt dit doen door een vloeiende opmaak te gebruiken.
Er zijn echter een paar compromissen die je moet maken. Die mooie gelijke kolomlay-outs die naar een enkele kolom stapelen, werken niet zo goed met deze methode. Als je zonder hen kunt leren leven, zijn er enkele zeer functionele ontwerpen die buitengewoon goed kunnen werken.
Dit is wat we vandaag gaan creëren:
Oké, laten we beginnen met ons lege canvas.
Een eenvoudige responsieve HTML-e-mail
|
Wat we hier creëren is onze basispagina met zijn hoofd, doctype en containertabel met een achtergrondkleur toegepast (zowel op het lichaam als op een grote wrapper-tabel, aangezien het stylen van de body-tag niet volledig wordt ondersteund). Zie Een HTML-e-mailsjabloon maken met Scratch voor meer informatie over deze basisconfiguratie.
Ik heb vervolgens onze inhoudstabel aan het centrum toegevoegd met een categorie 'inhoud'.
Notitie: Je zult merken dat ik in deze tutorial CSS in het hoofd van ons document zal plaatsen. Ik plaats over het algemeen stijlen in het hoofd wanneer ik ze opnieuw ga gebruiken en houd eenmalige stijlen inline.
Belangrijk: Wanneer u CSS-regels in de kop van uw document gebruikt, u moet gebruik een tool om het allemaal inline in te voegen aan het einde van het proces. Als u een service zoals MailChimp of Campaign Monitor gebruikt, bieden deze automatisch aan om uw stijlen inline in te voeren wanneer u uw ontwerp importeert. U moet dit doen omdat sommige clients, zoals Gmail, uw account negeren of verwijderen Nu voegen we de eerste rij van onze tabel toe: de kop. Voeg het volgende toe aan de stijl van de rij die we al hebben gemaakt: En voeg vervolgens in je CSS de opvulling voor de kop toe: Nu gaan we onze allereerste responsieve rij maken. De manier waarop we dit doen, is om twee tabellen te maken die naast elkaar 'zweven' door de HTML-eigenschap 'align' te gebruiken. Vervang onze kleine "Hallo!" Groet met het volgende: We maken onze 70px-tabel en voegen ook wat opvulling toe die als onze goot tussen de twee kolommen zal fungeren. De opvulling aan de onderkant zal verticale ademruimte toevoegen wanneer de twee kolommen op mobiel worden gestapeld. We maken de rechterkolom door opnieuw een tabel aan de linkerkant uit te lijnen. Deze tafel zal 445px breed zijn, wat ons 25px aan de rechterkant zal overlaten. Dit is erg belangrijk omdat Outlook automatisch uw tabellen zal stapelen als er op geen enkele rij minstens 25 px over is. Zolang u minstens 25px ademruimte toelaat, gedragen uw tabellen zich zoals verwacht. Om deze gril te omzeilen, zou je ook voorwaardelijke code kunnen gebruiken om Outlook te misleiden door te denken dat je een cel hebt gesloten en een nieuwe hebt geopend. Na de afsluitende tag van uw eerste tafel en vóór de openingstablet voor uw tweede, voegt u gewoon toe: In de bredere, rechtse tabel gaan we dezelfde benadering gebruiken die we hebben gebruikt in onze containertabel, waarbij we ook een klasse maken en de voorwaardelijke wrappercode toevoegen. We willen dat deze tabel 100% breed is op mobiel, waar deze onder de tabel links wordt weergegeven. Hier kun je zien dat ik een klasse genaamd 'col425' heb gemaakt voor deze tabel, onze 425px brede kolom. Ik heb de tabel ingepakt in de voorwaardelijke code die deze in een 425px brede tabel zal omsluiten. Vervolgens voegen we onze klas toe aan de mediaquery die we ook voor Apple Mail hebben gemaakt. Nu in onze cel voegen we de gestileerde kop toe. Ik heb een aantal klassen aan elke cel toegevoegd voor styling, evenals enkele stijlen die ik later voor andere teksttypen ga gebruiken: Onze header is nu voltooid en u kunt hieronder zien hoe de twee kolommen op mobiel zullen worden gestapeld. (Om een voorbeeld hiervan te bekijken terwijl u werkt, moet u tijdelijk commentaar plaatsen op de mediaquery's met mediabestanden op mediumniveau, omdat ze een vaste breedte afdwingen op het bureaublad). Om een rij met één kolom tekst te maken, voegen we eenvoudig een nieuwe rij toe aan onze '.content' tabel. We voegen een klasse 'innerpadding' toe aan deze rijen met enkele herbruikbare opvullingswaarden. We voegen ook een klasse 'borderbottom' toe om een rand op elke rij toe te passen. Onze CSS voor deze sectie: Nu zullen we een responsieve rij maken die precies op onze header lijkt, maar met enigszins verschillende dimensies, zodat we een grotere afbeelding kunnen hebben. We hebben hier een knop toegevoegd met de klasse 'buttonwrapper'. Het bevat een opgevulde cel met een achtergrondkleurenset en vervolgens een tekstlink erin. Ik geef er de voorkeur aan deze methode te gebruiken, omdat je hierdoor knoppen voor de materiaalbreedte kunt gebruiken, wat erg handig is bij het maken van een herbruikbare sjabloon, waarbij de breedte van elke knop anders zal zijn elke keer dat deze wordt gebruikt. Als je een vaste breedte voor je knoppen hebt, gebruik je de Bulletproof Button Generator misschien liever via de campagnemonitor. Onze stijlen voor de knop: Naast onze ingestelde breedte voor deze nieuwe klasse 'col380', voegen we onze grootte toe aan onze lijst met stijlen om voor Apple Mail te zorgen. Het ziet er nu als volgt uit: Dit is een heel eenvoudige rij; we stellen eenvoudig een afbeelding in op 100% van de breedte van de e-mail en zorgen ervoor dat de hoogte automatisch wordt ingesteld met behulp van CSS. In onze CSS: Eindelijk voegen we een rij tekst toe zonder de rand onderaan: Als u een voettekst wilt maken, voegen we een nieuwe rij toe met een tabel erin. Een van de rijen bevat een andere tabel voor onze social media-pictogrammen. We voegen de vereiste stijlen voor onze voettekst toe aan de CSS: Op mobiele apparaten is het ideaal als de hele knop een koppeling is, niet alleen de tekst, omdat het veel moeilijker is om een kleine tekstlink met uw vinger te targeten. Omdat het niet mogelijk is om dit te laten werken op alle desktopclients (padding wordt niet volledig ondersteund We zullen de kleur moeten verwijderen van de Ik zal beide gebruiken Wanneer u nu ergens op de gekleurde knop op mobiel tikt, is dit een link! Als u dat wilt, kunt u nu verbeteringen aan uw lay-out aanbrengen door klassennamen toe te passen op elementen die u wilt beheren en vervolgens de nieuwe regels te maken in de mediaquery die we zojuist hierboven hebben gemaakt. We zullen bijvoorbeeld onze afmeldlink in een knop veranderen door een klas aan de link toe te voegen: en het toevoegen van de volgende CSS aan de media-query: U kunt ook de .innerpadding-, .header- en .footer-klassen targeten om de hoeveelheid opvulling te verminderen op clients die mediaquery's ondersteunen. Ten slotte, zoals altijd, zorg ervoor dat je valideert (met behulp van de W3C-validator - je zou maar één fout moeten krijgen voor het eigen 'yahoo'-attribuut op de body-tag) en heel goed testen met behulp van live-apparaten en een web preview-service zoals Litmus of e-mail Zuur. Geniet van het maken van responsieve e-mails die er geweldig uitzien in elke e-mailclient! Als u een professionele, kant-en-klare oplossing nodig hebt, dan is een responsieve e-mailsjabloon misschien wel de juiste optie voor u. Om de dingen die je hebt geleerd naar het volgende niveau te brengen, bekijk je de volgende tutorials: De kop maken
Hallo! .header opvulling: 40px 30px 20px 30px;
De eerste responsieve rij toevoegen
Linker kolom
Rechterkolom
Sta minstens 25px ademruimte toe om te voorkomen dat Outlook uw tabellen zou stapelen Hou op! Alternatieve tip voor Tricking Outlook
Ga verder…
style = "width: 100%; max-width: 425px;">
.col425 width: 425px! important;
MAKEN Responsieve e-mailmagie .subhead font-size: 15px; kleur: #ffffff; font-family: sans-serif; letter-spacing: 10px; .h1 font-size: 33px; regelhoogte: 38px; font-weight: bold; .h1, .h2, .bodycopy color: # 153643; font-family: sans-serif;
De rij met één kolom tekst maken
Welkom bij onze responsieve e-mail! Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, zit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. .innerpadding opvulling: 30px 30px 30px 30px; .borderbottom border-bottom: 1px solid # f2eeed; .h2 padding: 0 0 15px 0; tekengrootte: 24 px; regelhoogte: 28 px; font-weight: bold; .bodycopy font-size: 16px; regelhoogte: 22px;
Het dubbele kolomartikel maken
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, zit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
Claim de jouwe! .knop text-align: center; lettergrootte: 18px; font-family: sans-serif; lettertype: vet; opvulling: 0 30px 0 30px; .knop a kleur: #ffffff; tekstdecoratie: geen;
@media only-scherm en (min-device-width: 601px) .content width: 600px! important; .col425 width: 425px! important; .col380 width: 380px! important;
De enkele kolomafbeelding maken
img height: auto;
De laatste rij met platte tekst maken
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, zit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. De voettekst maken
® Iemand, ergens in 2013
Afmelden uit deze nieuwsbrief direct
.footer opvulling: 20px 30px 15px 30px; .footercopy font-family: sans-serif; lettergrootte: 14 px; kleur: #ffffff; .voetafdruk a color: #ffffff; tekstdecoratie: onderstrepen;
Knoppen optimaliseren voor mobiel
tags), het is iets dat ik met behulp van mediaquery's aan de mobiele versie toevoeg. waarop het momenteel wordt toegepast en pas het vervolgens weer toe op de tag samen met veel padding. Maximale wijdte en max device width in deze mediaquery in een poging om een bug in Outlook.com op IE9 te voorkomen.@media only-scherm en (max-width: 550px), scherm en (max-device-width: 550px) body [yahoo] .buttonwrapper background-color: transparent! important; body [yahoo] .button a background -kleur: # e05443; opvulling: 15px 15px 13px! belangrijk; display: block! important;
Verdere verbeteringen met mediaquery's
Afmelden uit deze nieuwsbrief direct body [yahoo] .unsubscribe display: block; margin-top: 20px; opvulling: 10px 50px; achtergrond: # 2f3942; grensradius: 5px; tekstdecoratie: geen! belangrijk; lettertype: vet;
body [yahoo] .hide display: none! important;
Test en ga!
Accentsconagua