Share
De e-mails van Tuts + (nieuwsbrieven, digestieven enz.) Hebben onlangs een grondige revisie ondergaan, inclusief nieuwe ontwerpen en een nieuw platform. Deze case study legt uit hoe ik ze heb gebouwd in HTML en CSS, gebaseerd op de ontwerpen uit het eerste deel van deze serie.
Toen het tijd was om te beginnen met het bouwen van de glimmende nieuwe Tuts + e-mailsjablonen, had ik het geluk dat ik goed bekend was met de ontwerpen. Tijdens de ontwerpfase had Ian me ingeluisd bij belangrijke beslissingen en me veel vragen gesteld om ervoor te zorgen dat we elke klassieke e-mail-oplossing vermeden. Dit proces was een uitstekende basis voor mij en ik was klaar om meteen door te duiken toen de ontwerpen compleet waren.
Ian stuurde me de ontwerpen, een overzicht van de lay-outs, een handleiding voor de rasterlay-out en een stijlgids met alle benodigde lettergroottes en kleuren. Ik was klaar om te beginnen.
Mijn eerste stap is altijd schetsen. Het doel hiervan is om alle afzonderlijke modules te identificeren, waarbij kleine cosmetische verschillen worden genegeerd. Dit proces geeft me een laatste set sleutelmodules om te bouwen die ik een voor een kan doorlopen om de primaire structuur op te bouwen.
Nadat ik deze heb geïdentificeerd, zou ik ze in veel gevallen allemaal samenvoegen tot een enkele pagina voordat ze in een later stadium worden gescheiden, maar lay-outs zijn nogal lastig om in die staat te beoordelen. In plaats daarvan heb ik elke lay-out volgens de ontwerpen ontwikkeld, zodat deze gemakkelijker kunnen worden gecontroleerd en goedgekeurd.
Verwijzend naar mijn geschetste samenvatting van de modules, kon ik in gedachten houden wanneer een module herbruikbaar moest zijn over meerdere sjablonen en dienovereenkomstig moest worden gebouwd. Later zou ik klassen op het lichaam van elke variant instellen, zoals var-admin en var-verteren, waardoor ik stijlen kan maken die specifiek zijn voor elke specifieke lay-out.
Ik begon met het instellen van enkele MINDER variabelen voor elementen waarvan ik wist dat ik ze steeds opnieuw zou gebruiken, zoals kleuren en metingen.
Een gids voor de meeste typografische stijlen Sommige van mijn variabelen (in de LESS-syntaxis) worden hieronder weergegeven.
// Variabelen @ bg-body: # f2f2f2; @ palet-text: # 58595a; @ palette-navy: # 212a34; @ palet-ontwerp: # c94e4b; @ palet-code: # 4cc1be; @ palette-web: # 49b293; @ palet-fotografie: # 8360a8; @ palet-game: # 72BF40; @ palet-computer: # 5d7dba; @ palette-business: # f38844; @ palette-3d: # f95858; @ palette-music: # 56a4ca; @ palette-footer: # 5a6e7a; @ palet-adres: # 999999; @ divider-color: #EAEAEA; @ link-color: # 136fd2; @ alt-color: @ palette-text; @breedte: 640 px; @ buitengoot: 53px; @ content-width: @width - (@ outer-gutter * 2); @ grid-unit: 16px; .rounded (@radius: 1px) border-radius: @radius; -webkit-border-radius: @radius;
Ik gebruik altijd mijn kleuren voor palet om ze bij elkaar te houden. Dit maakt het voor mij gemakkelijker om een kleur te kiezen uit de vervolgkeuzelijst met suggesties die in Sublime-tekst wordt weergegeven:
De volgende belangrijke stap was het instellen van de webfonts die in de ontwerpen werden gebruikt. Het lettertype is Roboto, verkrijgbaar bij Google Fonts, dus ik heb deze tag toegevoegd aan de van de sjabloon:
Dit wordt gegenereerd door Google Fonts en links naar hun CSS voor de vier verschillende gewichten van Roboto die we gebruiken.
Ik heb het lettertype toegepast op de body-tag en mijn main-wrapper-tabel voor die clients die de body-tag negeren of de opmaak verwijderen.
body, .wrapper font-family: 'Roboto', sans-serif;
Om vervolgens te voorkomen dat Outlook 2007-2016 op Windows Times New Roman weergeeft - zoals het meestal doet bij een onbekend lettertype - heb ik een voorwaardelijke alleen-Outlook-code ingesteld in de van de sjabloon:
Dit zorgt ervoor dat elk exemplaar van het webadres in Outlook wordt overschreven met een schreefloos lettertype. Ik pas het toe op tabellen en divs, de enige twee elementen die worden gebruikt om inhoud in de sjabloon te bevatten. Het is niet nodig om naar een lager niveau te gaan dan dit, omdat alle andere tags dit overnemen in Outlook.
Vervolgens was het op structurele codering. Ik begon met de eerste module die ik had geschetst: de masthead. Een uitdaging hierbij was het logo, omdat het voor sommige sjablonen op mobiel iets anders lijkt:
Om dit te bereiken, heb ik op mobiel het hoofdlogo en de tekst bovenaan verborgen. Ik heb het logo verborgen en het kleine blad als achtergrondafbeelding toegevoegd aan de masttop.
.logo img display: geen! belangrijk; .logo background-image: url (images/[email protected]); hoogte: 17px; achtergrond-positie: middelpunt; achtergrondformaat: 15px 17px; achtergrondherhaling: geen herhaling;
De volgende sectie die ik heb aangepakt, was het 'hero'-artikel in de Digest-e-mails; het eerste lastige deel hier zijn de labels. In de ontwerpen verschenen ze naast de koptekst op het bureaublad, maar bovenstaande de tekst op mobiel. Om dit in code te bereiken kunnen we een aantal display-eigenschappen gebruiken om ze te laten verschuiven.
Eerst heb ik de heading-tag gemaakt met de inhoud binnen in twee delen verdeeld, een voor de tekst en een voor het label.
Curves gebruiken in Adobe Photoshop AANBEVOLEN CURSUS
Stijlvol, de .tekst span neemt de h2-styling over en dan de .label span is apart opgemaakt om het kleiner te maken en geef het een gekleurde achtergrond:
.label display: inline-block; marge links: 5px; opvulling: 3px 8px; vertical-align: 4px; grensradius: 3px; -webkit-border-radius: 3px; kleur: #ffffff; lettertypegrootte: 8px; regelhoogte: 10px; lettertype: normaal; letter-spacing: 0,1em;
Vervolgens gebruiken we mediaquery's om de elementen in kleinere viewports om te wisselen:
@media-scherm en (max-breedte: 700px) h2 weergave: tabel! belangrijk; h2 .text display: tabel-voettekst-groep! belangrijk; h2 .label margin-bottom: 12px! important;
De h2 is onze container en we stellen hem zo in dat deze als een tabel wordt weergegeven, zodat we het kunnen vertellen .tekst span om op te werken als de voettekstgroep van die tabel en verplaats helemaal naar de onderkant van de lay-out. De .label overspanning wordt vervolgens bovenaan weergegeven en we voegen er een marge onder toe om het wat ademruimte te geven.
Zoals te verwachten, wilde Outlook on Windows (2007-2016) de labels niet correct weergeven, omdat het de randradius niet respecteert, en het ook niet oplegt aan het toevoegen van opvulling aan inline elementen. De resultaten waren echt niet goed, daarom heb ik een alternatieve styling voor Outlook ingesteld die ik in voorwaardelijke code in de sjabloon plaatste:
Dit betekende dat ze in Outlook als eenvoudig gekleurde tekst zouden verschijnen:
Het sjabloon Promotie heeft een zeer onderscheidende functie: een held van rand tot rand met een achtergrondafbeelding.
Met dank aan Marco Goran Romano voor het briljante beeld dat werd gebruikt als tijdelijke aanduiding Achtergrondafbeeldingen in e-mail worden niet overal ondersteund. De belangrijkste problemen bij het stellen van e-mailclients zijn Outlook 2007-2016 (Windows) en Gmail.
vooruitzicht toont helemaal geen gewone achtergronden, waarvoor een speciale Vector Markup Language vereist is om ze aan het werk te krijgen. (Stig at Campaign Monitor's backgrounds.cm is een geweldig hulpmiddel voor het genereren van deze code). Het probleem is echter dat je met twee codeblokken eindigt: één in HTML en één in VML. Dit is riskant als u weet dat anderen de achtergrondafbeelding eenvoudig moeten kunnen bijwerken: als iemand dit probeert te doen zonder de instructies goed door te lezen, is het waarschijnlijk verkeerd.
Gmail geeft achtergrondafbeeldingen weer, maar het respecteert de background-size of background-position eigenschappen, waardoor ze behoorlijk moeilijk kunnen worden gestyled.
We hebben de abonneenummers bekeken en de aanroep gedaan op Outlook: het zou goed zijn als Outlook-gebruikers een degelijke fallback-kleur zagen in plaats van de afbeelding.
Voor Gmail-gebruikers moeten we een aantal richtlijnen opstellen voor acceptabele afbeeldingen wanneer de sjablonen worden gebruikt. De achtergrond moet een naadloze herhalende achtergrond zijn, of zodanig worden ingesteld dat deze er altijd 100% goed uitziet, vastgezet in de linkerbovenhoek.
Interessant, Gmail doet ondersteuning verticaal background-position eigenschappen aan de linkerkant: linksboven , linksonder en midden links . Helaas kun je niet horizontaal plaatsen, wat meestal is wat je wilt doen door het te laten weergeven midden in het midden .
Op sommige van de advertentieblokken konden we achtergrondafbeeldingen in Gmail plaatsen, omdat ze links onderaan zijn vastgezet. Deze blokken keerden ook terug naar een vaste achtergrondkleur in Outlook.
Ik speelde met twee manieren om de negatieve bovenmarge op de top van de masthead te laten werken, waarbij het witte vak met inhoud op de masttop zelf wordt gelegd..
In webontwikkeling zou je een negatief toevoegen margin-top naar de inhoudskist, stof je handen en ga door met je dag.
Bij e-mailontwikkeling is dit echter niet mogelijk. Negatieve marges worden alleen ondersteund door een handvol e-mailclients, waardoor er veel veel voorkomende in het vuil achterblijven (zoals Gmail, Yahoo en Outlook.com).
Dat bleef echter onze eerste optie: gebruik een negatief top marge als een progressieve verbetering, die zou worden weergegeven met een marge van 0 in alle niet-ondersteunde clients (zie hieronder links). Het nadeel is dat heel wat klanten deze randloze versie zouden zien en de lay-out zeker iets verloren zonder.
Het andere alternatief was om de negatieve marge te vervalsen door een lege witte tabel te maken op de juiste hoogte en breedte. Het nadeel van deze aanpak is dat de Gmail-app vaak kleine haarlijnen laat zien wanneer inhoud op mobiele apparaten wordt verkleind wanneer er een lichtere inhoud is op een donkere achtergrond of andersom. Dit zijn geen echte lijnen of randen, maar minuscule glitches die niet met code kunnen worden opgelost. We besloten om met dit scenario te gaan, omdat het het grootste aantal lezers ten goede kwam en de haarlijnen over het algemeen onmerkbaar waren. We hebben ook besloten om het probleem in de gaten te houden en opnieuw te bekijken als we niet tevreden waren met de resultaten. (Helaas konden deze sjablonen niet worden gebouwd met behulp van de vloeistof-hybride methode, omdat zowel MailChimp als Campaign Monitor grote problemen opleveren.)
Geen overlapping
Overlap, met de smalle lijn tussen de secties van GmailIk wist dat ik de sjablonen aan Ian zou overhandigen voor integratie met meerdere e-mail verzendende platforms: MailChimp en Campagnemonitor. Omdat mijn code goed moest werken met beide sjabloontalen, heb ik een paar tips gevolgd om dit proces zo soepel mogelijk te laten verlopen.
Opmerking van de uitgever: sinds de ontwerp- en ontwikkelingsfase zijn we eigenlijk verhuisd van MailChimp, in plaats daarvan alleen met behulp van Campaign Monitor. Dat gezegd hebbende, de volgende tips zijn erg handig!
Bijvoorbeeld met tekststijlen paste ik het allemaal toe op de Campagnemonitor-sjablonen vereisen een Een van de sjablonen moest een set van de verschillende gekleurde titels bevatten voor elk onderwerp dat kon worden gekozen bij het maken van een nieuwsbrief in MailChimp. Ik heb een reeks kopstijlen ingesteld die kunnen worden geselecteerd in een vervolgkeuzelijst in MailChimp, met de juiste syntaxis voor het definiëren van hun Maar… Ik leverde dit aan Ian die ontdekte dat het helemaal niet werkte; geen van deze kopstijlen werd weergegeven in de vervolgkeuzelijst toen hij de tekst bewerkte. Hij ging ermee aan de slag en ontdekte dat MailChimp deze opties niet daadwerkelijk als selecteerbare kopstijlen toont, tenzij ze een soort lettertype-gerelateerde eigenschap hebben zoals Het werkte ook niet omdat ik het afzonderlijk leverde en elke speciale MailChimp-sjablooncode voor bewerkbare gebieden of aangepaste stijlen moet in de Nu al onze lay-outs waren bekeken en goedgekeurd, problemen hadden gesorteerd en compromissen waren besloten, was het tijd om het testen te voltooien en alle bestanden gereed te maken voor implementatie. Ik ben begonnen met het doen van veel slopende finale tests in Litmus en Email on Acid. Ik gebruik Trello om vereisten, taken en bugs bij te houden voor elk project waaraan ik werk. Ik heb mijn lijst met fouten en taken doorgenomen totdat er niets meer over was en de bestanden gereed waren voor implementatie. Het Envato-team wilde in de code kunnen duiken om verschillende lay-outs te mixen en matchen, dus moest ik duidelijke HTML- en CSS-opmerkingen geven, en ervoor zorgen dat het overbrengen van modules tussen sjablonen geen grote catastrofe zou veroorzaken. Ik heb elke sjabloon ingesteld met zijn eigen lichaamsklasse: En stel vervolgens een klasse in die kan worden toegevoegd om eenvoudig te schakelen tussen een witte en een grijze achtergrond: Ik heb lay-outspecifieke stijlen (zowel mobiel als desktop) ook gescheiden in afzonderlijke stylesheets om de bestandsgrootte op te slaan: Ik gaf instructies om een link toe te voegen aan elk stylesheet waar elementen uit die lay-out werden gebruikt. Als een Digest-module bijvoorbeeld wordt geporteerd naar de nieuwsbriefsjabloon, moet de link Digest CSS worden toegevoegd aan de Voor algemene elementen, zoals de advertentiebalk en advertentieblokken, heb ik ervoor gezorgd dat de vormgeving volledig onafhankelijk was van de lay-out, zodat ze vrij konden worden verplaatst. Ik heb al deze instructies in een README-bestand opgenomen en heb deze gecomprimeerd met alle HTML en afbeeldingen die moeten worden verzonden. En toen waren we klaar! Ik heb alles naar Ian overgebracht, die zelf de rest van de integratie ondernam. Het is nogal nagelbijten om sjabloonbestanden over te dragen zonder de mogelijkheid om obsessief te testen en opnieuw te testen tijdens de integratie, maar ik had het grootste vertrouwen in Ian, natuurlijk! Nadat zijn werk was voltooid en het tijd was om te beginnen met verzenden, stuurde Ian testexemplaren naar mijn Litmus en Email on Acid-accounts, zodat ik de rendering-voorbeelden kon bekijken en eventuele problemen kon signaleren. Een paar achtergrondafbeeldingen zijn hier en daar afgezet, die we hebben gerepareerd voordat de sjablonen eindelijk klaar waren om te worden verzonden. In het volgende en laatste deel van deze serie zullen we onze statische sjablonen naar een hoger niveau tillen, en laten zien hoe we ze hebben geïntegreerd in Campaign Monitor! , niet een van zijn kinderen, zodat als cellen of alinea's werden geconverteerd naar bewerkbare gebieden er geen risico was om ergens een stijl te verliezen. De inhoud van de tabel neemt de tekstopmaak over van de ouder in alle e-mailclients. De enige uitzondering is AOL mail, die er vaak niet in slaagt om het te erven
kleur eigendom, tenzij u dat op de individuele cel plaatst. Gebruik alinea's voor tekst
multiline element dat moet worden gedefinieerd wanneer u een bewerkbaar tekstblok wilt dat regeloverbrekend, vet / cursief / onderstreept, gekoppelde geselecteerde tekst, enzovoort mogelijk maakt. Het wikkelt ook automatisch alle tekst in de multiline met een p tag, die je lay-out echt kan doorbreken als je geen paragrafen hebt toegestaan. Wanneer u een regeleinde in Campagnemonitor gebruikt, wordt de huidige alinea beëindigd en wordt een nieuwe alinea gestart. MailChimp doet dit niet, en als u een regeleinde maakt, voegt het gewoon een Varianten maken door gebruiker instelbaar
@stijl blokken:/ ** * @style topic-design * / .topic-design color: # c94e4b; .topic-design a color: # c94e4b; / ** * @style topic-code * / .topic-code color: # 4cc1be; .topic-code a color: # 4cc1be; / ** * @style topic-web * / .topic-web color: # 49b293; .topic-web a color: # 49b293; / ** * @style onderwerp-fotografie * / .topic-fotografie color: # 8360a8; .topic-photography a color: # 8360a8; / ** * @style topic-game * / .topic-game color: # 72BF40; .topic-game a color: # 72BF40; / ** * @style topic-computer * / .topic-computer color: # 5d7dba; .topic-computer a color: # 5d7dba; / ** * @style topic-business * / .topic-business color: # f38844; .topic-business a color: # f38844; / ** * @style topic-3d * / .topic-3d color: # f95858; .topic-3d a color: # f95858; / ** * @style topic-music * / .topic-music color: # 56a4ca; .topic-music a color: # 56a4ca;
font-family of lettertype dikte . van uw sjabloon; het kan geen extern bestand zijn. Dus we hebben er een toegevoegd lettertype: vet verklaring aan onze kopstijlen, knalde de CSS in het hoofd en liet alles werken.Laatste testen en inpakken
Moet Trello liefhebben voor taakbeheer Een set met sjablonen maken
hoofd van de nieuwsbriefsjabloon voordat de module HTML wordt gekopieerd.
E-mail deliverables Verzenden
Gerelateerde Links
Accentsconagua