La codifica di email HTML fa schifo. In un momento in cui siamo diventati così radicati con gli standard Web e il layout basato su CSS, tornare indietro nel tempo e codificare i layout basati su tabelle con lo stile in linea è decisamente icky. In effetti, ci sono un sacco di web designer che non sono nemmeno stati in giro abbastanza a lungo da avere familiarità con il modo di codificare in questo modo.
Oggi daremo un'occhiata a un nuovo strumento che promette di rendere la vita molto più semplice per i progettisti di email HTML. Con Mailrox, carichi il tuo disegno, lo affili e lo trasformi facilmente in un email HTML funzionante.
Ti presentiamo Mailrox
Mailrox promette un flusso di lavoro semplice: carica un disegno (jpg, gif o png), definisci il layout, aggiungi testo e HTML personalizzato ed esporta. Sembra facile, vero? Ma la creazione di e-mail in HTML può essere davvero un processo facile?
Sono scettico, quindi oggi daremo a questa ventosa un giro di prova. Ti guiderò attraverso l'intero processo di iniziare con un disegno, caricarlo sul sito e convertirlo in una e-mail in diretta.
Il template
Per testare Mailrox, avremo bisogno di un design di email HTML. Potrei smettere di scrivere e prendermi il tempo per costruire il mio, ma sono pigro e ci sono un sacco di fantastici modelli gratuiti online, quindi potremmo anche solo prendere uno di quelli. Ecco uno di questi modelli da PSD Freebies.
Passo 1. Crea una nuova email
Mailrox è attualmente in beta, quindi è gratuito, per ora. Ti lanci dentro la tua email per segnare un invito, ho preso il mio entro dieci minuti, quindi non dovresti impiegare troppo tempo per entrare.
Una volta effettuato l'accesso, verrai indirizzato a questa pagina:
Ti hanno già fornito un modello con cui giocare, ma vogliamo iniziare da zero, quindi premiamo il pulsante che dice? Crea una nuova email ,? che ci dà un semplice dialogo in cui possiamo caricare il nostro jpg piatto.
Monitoraggio dei progressi
Durante l'intero processo, Mailrox ti aiuta a tenere d'occhio dove sei nel processo con un piccolo grafico utile in alto a sinistra sullo schermo. Mi piace quando le app lo fanno, mi dà un'idea chiara di dove sono stato e di dove sto andando, oltre a permettermi di fare rapidamente clic e saltare a diversi passaggi.
Passo 2. Fare a pezzi
Una volta caricata la nostra immagine, siamo portati allo schermo sottostante. Qui vediamo il jpg caricato insieme a una semplice striscia di strumenti e alcuni piccoli suggerimenti e suggerimenti su come iniziare.
Fondamentalmente, il set di strumenti e il flusso di lavoro sono completamente centrati attorno agli strumenti di slicing. Esistono due strumenti di taglio verticale, due strumenti di taglio orizzontale, uno strumento di spostamento delle sezioni e uno strumento di eliminazione delle sezioni.
Come puoi vedere, gli strumenti per il taglio del blu sono semplici? e il verde sono strumenti? complesso.? Sembra carino, ma cosa diavolo vuol dire? Non c'è davvero nulla che ti dica di più su come funzionano. Dopo alcuni esperimenti, si scopre che le sezioni blu attraverseranno la pagina e quelle verdi saranno a conoscenza e vincolate da altre sezioni nella pagina.
? Le fette blu andranno completamente attraverso la pagina e quelle verdi sono a conoscenza e vincolate da altre sezioni nella pagina.?Per fare una fetta, basta prendere uno strumento e passare il mouse sopra la tela. Viene visualizzata un'anteprima della sezione, che consente di posizionarla esattamente dove si desidera. Puoi attaccarlo con un clic.
Fare clic Fare clic Fare clic
Hai l'idea qui. Basta andare avanti e tagliare il file, facendo attenzione a tagliare intorno ad ogni oggetto che sarà necessario personalizzare in qualsiasi modo, sia scambiando un grafico, aggiungendo un testo o semplicemente aggiungendo un collegamento.
Nel complesso, è in realtà un processo abbastanza semplice e veloce. Se hai mai affettato un PSD in Photoshop, ti sentirai come a casa.
Passaggio 3. Personalizza il contenuto
Mentre stavi tagliando il tuo disegno, ciò che stavi effettivamente facendo è definire aree di contenuto differenti da personalizzare. Mentre progrediamo verso il? Contenuto? passo, ognuna di queste aree sarà qualcosa su cui puoi passare il mouse e fare clic su per cambiare.
Ad esempio, diciamo che vogliamo mantenere l'immagine principale, ma aggiungiamo un link in modo che quando fai clic sull'immagine, ti porti a un URL specifico. Per fare ciò, fai clic su quella sezione, quindi usa il piccolo modulo per aggiungere il tuo link.
Abbastanza facile vero? Passiamo a qualcosa di un po 'più complicato in cui dobbiamo aggiungere codice personalizzato.
Aggiunta di codice personalizzato
Nella parte superiore del nostro modello di posta elettronica c'è una barra che informa il lettore del motivo per cui sta ricevendo l'e-mail e li collega a un sito. Ovviamente, vorremmo inserire il nostro testo qui.
Il processo per questo è dove l'idea WYSIWYG si rompe. Vedete, Mailrox non è progettato per i non-programmatori. Se non conosci HTML e CSS di base, non andrai molto lontano.
? Mailrox non è progettato per i non-programmatori. Se non conosci HTML e CSS di base, non andrai molto lontano.Invece, è stato creato per i progettisti con una buona conoscenza del codice web di base che semplicemente non vogliono passare attraverso il fastidio di codificare un'e-mail, che è una bestia molto specifica che deve essere codificata giusto per funzionare correttamente. Può sembrare una piccola nicchia, ma scommetto che questo descrive parecchi web designer. Compreso me stesso!
Mentre clicco sulla parte superiore e scelgo di inserire HTML personalizzato, mi viene data la schermata mostrata sotto. Il campo di testo è automaticamente circondato dal codice per le tabelle e le celle, quindi per fortuna non dobbiamo mai scherzarci. Invece, abbiamo bisogno di inserire un paragrafo di testo e qualunque sia lo stile in linea è necessario per far sembrare tutto bello. Sei completamente autonomo per questo, quindi spero che tu ti senta a tuo agio con i CSS.
Una volta che hai finito qui, in pratica ripeti semplicemente questo processo in tutto il tuo modello fino a quando tutte le aree del contenuto non sono state personalizzate a tuo piacimento.
Passaggio 4. extra
Prima di concludere, vale la pena dare un'occhiata ai vari extra e gadget disponibili nel "Contenuto"? sezione. Nella parte in alto a destra della finestra, dovresti vedere il seguente set di pulsanti:
Qui è possibile visualizzare un'anteprima dal vivo del modello finito, codificato nel browser o anche inviare una e-mail di prova per vedere come appare in vari client. C'è anche un pulsante per il download, di cui parleremo nel prossimo passaggio.
Di fronte a questi pulsanti, nella parte in alto a sinistra dello schermo, c'è la seguente striscia di strumenti:
Questi ti consentono di personalizzare le caratteristiche di base della pagina: colore di sfondo, margine superiore e titolo. C'è anche un link a un? Rapporto di compatibilità.? Questo è un piccolo strumento fantastico che ti consente di garantire che il tuo progetto funzioni in vari client di posta elettronica.
Come potete vedere, il nostro design ha superato il test di 19 client di posta elettronica, inclusi Apple Mail, Gmail e Yahoo. Abbiamo fallito in una zona però: Lotus Notes 6.5-7. Al di fuori, non sono nemmeno sicuro di cosa sia o se sia importante, ma Mailrox è proprio lì per tenermi la mano e aiutarmi a prendere una decisione.
L'app mi informa che ho delle minuscole celle di tabella che a Lotus Notes non piaceranno, ma anche che questo avrà probabilmente meno dell'1% dei potenziali utenti di posta elettronica. Mi sembra accettabile, ma nel caso volessi risolvere il problema, mi hanno anche dato le istruzioni su come correggere l'errore.
Passaggio 5. Scaricare
Una volta che hai finito, fai clic sul pulsante di download che abbiamo visto prima per essere portato sullo schermo sottostante. Apprezzo gli sviluppatori per queste tre opzioni, perché penso che siano perfette:
Qui possiamo scaricare il nostro modello in modo che sia ottimizzato specificamente per Mailchimp o Campaign Monitor. Questo è fantastico perché entrambi questi servizi sono estremamente popolari ed entrambi hanno snippet di codice personalizzato molto specifici che sono richiesti per preparare un modello per il loro servizio.
La terza opzione è altrettanto interessante. Se vuoi solo scaricare il semplice codice HTML e le immagini da caricare sul tuo server, l'app entrerà e farà precedere tutti i link delle immagini con il percorso della directory in cui inserirai le immagini. Questa è un'opzione davvero ben pensata e apprezzo lo sforzo qui.
Cosa penso?
All'inizio ero scettico riguardo a questo strumento, semplicemente perché sono un programmatore che di solito preferisce costruire le cose a mano ed evita i WYSIWYG come la peste. Detto questo, odio codificare email HTML. Sono davvero dolorosi e tutto ciò che riguarda il processo di layout è semplicemente goffo e sbagliato se ami il layout CSS tanto quanto me.
? Mailrox sembra sapere esattamente chi sono e cosa voglio da esso.?Mailrox sembra sapere esattamente chi sono e cosa voglio da esso. Sa che posso tagliare un disegno con pochissime istruzioni e che sono più che abbastanza competente per scrivere il mio codice per i vari pezzi di contenuto. Soprattutto, sa che, mentre posso fare tutto ciò, non voglio preoccuparmi del layout basato su tabella e della complessità della compatibilità dell'email HTML.
Si concentra in particolare su quelle parti del processo di costruzione di email HTML che sono le più fastidiose e le gestiscono per me. Mi piace il fatto che gli sviluppatori siano abbastanza perspicaci da dare il via ad una tale impresa e mi è davvero piaciuto usare l'app.
Non sono sicuro di cosa faranno pagare dopo la beta, ma fintanto che è ragionevole, posso sicuramente vedere me stesso rivolgermi a Mailrox la prossima volta che ho bisogno di programmare un'e-mail.
? Si concentra in particolare su quelle parti del processo di costruzione di e-mail HTML che sono le più fastidiose e le gestisce per me.?Come renderlo migliore
Ovviamente, ho un grande elogio per questo strumento. È semplice, facile da usare e sembra essere mirato precisamente ai miei talenti e ai miei bisogni. Detto questo, ho un paio di lamentele che mi piacerebbe vedere affrontate nelle versioni future.
Give Me a Zoom Tool
La prima lamentela riguarda l'inclusione di uno strumento di zoom nel flusso di lavoro di slicing (o se ce n'è già uno che ho perso, renderlo più ovvio). Stai provando a posizionare tali sezioni in punti molto precisi del layout e spesso mi sono ritrovato con la mia faccia sullo schermo cercando di farlo correttamente.
Give Me a Zoom Tool
La mia seconda lamentela è che devo usare Mailrox per tagliare a tutti. Gli strumenti di slicing di Photoshop sono più robusti e i designer hanno più familiarità con essi, quindi perché non permetterci di suddividere il documento in Photoshop e quindi di caricare il nostro PSD per saltare direttamente al passaggio del contenuto.
"Gli strumenti per affettare Photoshop sono più robusti e i designer hanno più familiarità con essi, quindi perché non permetterci di suddividere il documento in Photoshop ??Una funzionalità di caricamento PSD pre-affettata renderebbe sicuramente questa app killer in quanto renderebbe la conversione del mio disegno in un'e-mail codificata un processo quasi indolore che potrebbe essere eseguito molto rapidamente. Gli strumenti di slicing su Mailrox vanno bene e dovrebbero rimanere, ma a quelli che preferiscono Photoshop dovrebbe essere data questa opzione.
Cosa pensi?
Ora che hai visto la mia soluzione e le opinioni su Mailrox, è giunto il momento per te di entrare e di farmi sapere cosa ne pensi. Odiate codificare le email HTML quanto me? Prenderesti in considerazione l'idea di utilizzare uno strumento come Mailrox per aiutare con il processo?
Se sei entrato nella beta e hai avuto la possibilità di provare Driverox, lascia un commento qui sotto e fammi sapere cosa ami e cosa cambieresti.