La newsletter di TurboLab.it si vede male su mobile

[Zane]

Venerdì ho notato che la nostra newsletter si vede piuttosto male su telefonino:





La soluzione sarà di creare un nuovo disegno, magari sfruttando l'occasione per usare un HTML più essenziale (il mio sogno sarebbe farlo senza tabelle, ma temo non sarà possibile per motivi di compatibilità ).

Nel frattempo, se qualcuno vuole dare un'occhiata al codice attuale e proporre qualche modifica, il template utilizzato è qui (occhio a conservare i $egnaposti).

#Bug 143

[developerwinme]

Venerdì ho notato che la nostra newsletter si vede piuttosto male su telefonino:

Su Windows Phone 8.1 (con Internet Explorer 11 Mobile) si vede perfettamente ( https://onedrive.live.com/redir?resid=5 ... lder%2cpng ): capisco che Android è ovviamente la priorità, ma, se possibile, sarebbe ottimo se continuasse a funzionare anche sull'ultima versione di WP. Sono ovviamente disponibile per fare testing.

[ninja]

Nemmeno su Android 4.2.2 usando l'app Gmail o il browser Firefox non vedo nessun difetto di visualizzazione...

... con quale applicazione su Android riscontri il problema?

[Andy94]

Su Android 4.4.4 e su lollipop c'è il problema del footer come in foto quando vista su Gmail. GZZ, hai provato a mettere no repeat e cover sul background in uso?

[PippoDJ]

Ciao Zane,
sembra che GMail faccia un po' quello che gli pare con il markup dei messaggi di posta HTML: il nobile intento ufficiale è quello di rendere i testi più leggibili anche su dispostivi mobili, ma al prezzo di rendere inconsistente l'impaginazione.Tra l'altro GMail non riconosce le "media queries", rendendo impensabile anche una soluzione "responsive".
Forse l'unica sarebbe di sperimentare un layout "fluido", senza dimensioni fisse per gli oggetti, ma poi andrebbe verificato su tutte le altre piattaforme.

Per adesso ho trovato una "fix" veloce che dovrebbe risolvere il problema senza impattare sugli altri client: in pratica si tratta di aggiungere un attributo di stile min-width per fissare le dimensioni della tabella più interna. Stranamente GMail lo prende più seriamente di un normale width (che invece ignora di brutto)... non chiedermi perché.


Linea 23 di la-settimana_mail.html:

<table cellspacing="0" border="0" style="min-width: 805px; padding: 0; border: 0; margin: 0; background: url({$SiteURL}images/newsletter_fisher/bg.jpg);"
bgcolor="#797979" width="805" cellpadding="0">

Sul mio GMail 5.0.1 per Android (e anche GMail web su desktop) sembra funzionare bene, ma per ora non ho provato altri client.

Ciao, Pippo.

[Zane]

@developerwinme: grazie per lo screenshot e la conferma che su WP si vede bene! farò il possibile per mantenerlo compatibile.

@ninja: io vedo male con Gmail 5.0.1. Mi sembra strano che non riscontri il problema. Puoi postarmi i tuoi screenshot equivalenti a quelli che ho proposto io poco sopra per favore (è importante che si vedano proprio le stesse parti)?

@Andy94: il no-repeat c'è già:

Codice: Seleziona tutto

<td style="border: 0; padding: 0; color: #f9f9f9; margin: 0; background: #B9B9B9 url({$SiteURL}images/newsletter_fisher/header.jpg) no-repeat;" bgcolor="#B9B9B9" width="601">

Ho provato anche a sostituire con la forma estesa e aggiungere il "cover":

Codice: Seleziona tutto

<td style="border: 0; padding: 0; color: #f9f9f9; margin: 0; background-color: #B9B9B9; background-image: url(http://turbolab.it/images/newsletter_fisher/header.jpg); background-repeat: no-repeat; background-size: cover;" bgcolor="#B9B9B9" width="601">

Non cambia di una virgola

@PippoDJ: ho provato il tuo graditissimo suggerimento. Il risultato, sempre con Gmail 5.0.1 è questo:

-su HTC One S (540×960) non cambia di una virgola
-su OnePlus One (1920×1080), con la tua modifica attiva, la schermata viene "zoomata" e diventa difficile da leggere



Hai assolutamente ragione se obietti che la soluzione che hai proposto fa semplicemente rispettare quel width="805" che già c'era... ma, evidentemente, è sbagliato pure quello!!