La newsletter di TurboLab.it si vede male su mobile

Ti piacciono il sito e la community? Questo è il posto giusto per lasciare commenti, suggerimenti e... critiche.
Regole del forum
Rispondi
Avatar utente
Zane
Fondatore
Fondatore
Messaggi: 4537
Iscritto il: mer mag 01, 2013 11:20 am
Contatta:

La newsletter di TurboLab.it si vede male su mobile

Messaggio da Zane » dom dic 07, 2014 1:12 am

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

ImmagineImmagine

:acch:acch

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
Zane - TurboLab.it

System
System
Bot ufficiale TurboLab.it
Bot
Messaggi:
Iscritto il: sab dic 31, 2016 6:19 pm
Contatta: Contatta

Re: La newsletter di TurboLab.it si vede male su mobile

Messaggio da System » dom dic 07, 2014 1:12 am


Avatar utente
developerwinme
Livello: Workstation (10/15)
Livello: Workstation (10/15)
Messaggi: 1319
Iscritto il: mer mag 01, 2013 1:35 pm
Località: Como
Contatta:

Re: La newsletter di TurboLab.it si vede male su mobile

Messaggio da developerwinme » dom dic 07, 2014 3:58 pm

Zane ha scritto: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. :)
Marco Adriani
developerwinme.wordpress.com

Avatar utente
ninja
Livello: Chiavetta USB (8/15)
Livello: Chiavetta USB (8/15)
Messaggi: 487
Iscritto il: lun ago 26, 2013 8:52 pm

Re: La newsletter di TurboLab.it si vede male su mobile

Messaggio da ninja » dom dic 07, 2014 8:59 pm

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?

Avatar utente
Andy94
Livello: Workstation (10/15)
Livello: Workstation (10/15)
Messaggi: 1364
Iscritto il: mer mag 01, 2013 1:35 pm
Località: Villorba (TV)

Re: La newsletter di TurboLab.it si vede male su mobile

Messaggio da Andy94 » dom dic 07, 2014 9:23 pm

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?
Se la pazienza è una virtù, attendere è un'arte...
Stiamo tornando...

Avatar utente
PippoDJ
Livello: Storage Area Network (12/15)
Livello: Storage Area Network (12/15)
Messaggi: 1678
Iscritto il: sab nov 01, 2014 3:50 pm

Re: La newsletter di TurboLab.it si vede male su mobile

Messaggio da PippoDJ » mer dic 10, 2014 6:53 pm

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é.
:nono

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.

Avatar utente
Zane
Fondatore
Fondatore
Messaggi: 4537
Iscritto il: mer mag 01, 2013 11:20 am
Contatta:

Re: La newsletter di TurboLab.it si vede male su mobile

Messaggio da Zane » gio dic 25, 2014 6:58 pm

@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 :muro

@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

Immagine

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!!
Zane - TurboLab.it

System
System
Bot ufficiale TurboLab.it
Bot
Messaggi:
Iscritto il: sab dic 31, 2016 6:19 pm
Contatta: Contatta

Re: Re: La newsletter di TurboLab.it si vede male su mobile

Messaggio da System » gio dic 25, 2014 6:58 pm


Rispondi
  • Argomenti simili
    Risposte
    Visite
    Ultimo messaggio