Come pubblicare video Responsive su Blogger

I codici per incorporare i filmati in una pagina web che vengono ricavati dai siti di video-sharing contengono il parametro width con l'indicazione della larghezza in pixel che può essere impostata direttamente dall'utente.

Nel momento in cui si incolla tale codice in Modalità HTML la larghezza del player del video rimane la stessa anche quando la pagina viene aperta da un dispositivo mobile. Se si sceglie una larghezza per esempio di 560 pixel questa va molto bene se il post viene aperto con un computer ma è eccessiva se invece si apre con uno smartphone.

Per chi utilizza un Tema Responsive di Blogger non è richiesta alcuna azione per rendere il video di Youtube Responsive cioè adattato automaticamente a tutte le risoluzioni. La larghezza del player verrà ridotta automaticamente in funzione della risoluzione del dispositivo con cui viene aperta la pagina.

Anche i video di Vimeo vengono resi Responsive dai nuovi Temi di Blogger così come tutti i video incorporati attraverso un codice di un iframe. Il discorso diventa più complicato se si sta utilizzando un Tema di Blogger classico cioè Non Responsive che ha una versione per il desktop e una per il mobile che si ottiene aggiungendo la stringa ?m=1 a tutti gli URL dei post e delle pagine.

Come pubblicare immagini Responsive in Blogger.

A seguito di un commento ricevuto ieri sulla possibilità o meno di pubblicare immagini Responsive su Blogger ritengo sia opportuno fare delle considerazioni più approfondite.

In linea di massima Blogger riduce automaticamente le dimensioni delle immagini quando la pagina viene aperta con dispositivi mobili quindi le foto che si pubblicano non escono dal layout del telefonino e quindi non comportano il disagio di dover fare uno scroll laterale.

Ricordo che un elemento o un design si definisce Responsive quando si adatta automaticamente alla risoluzione del dispositivo con cui viene aperta la pagina web.

Come adattare automaticamente i video alle risoluzioni dei dispositivi desktop e mobile (Responsive).

Quando si vuole incorporare un video di Youtube si va sotto il Player e si clicca su Condividi -> Codice da incorporare per poi copiare il codice dell'iframe da incollare in Modalità HTML.

L'iframe ha per sua natura i parametri della larghezza e dell'altezza che poi ne fisserà le dimensioni del player da visualizzare nella pagina web. La larghezza, e di conseguenza l'altezza per mantenere inalterate le proporzioni, potrà essere personalizzata al pixel andando su Mostra Altro per poi scegliere le dimensioni personalizzate. Il codice da incollare muterà in tempo reale.

Una dimensione giusta del player video per un post su un blog può essere quella con larghezza che va da 560 a 640 pixel. Il problema si palesa quando questo stesso post si apre con uno smartphone visto che il player del video risulterà tagliato inesorabilmente.

Come pubblicare un video Responsive con i CSS elastici.

Nel post precedente abbiamo visto un escamotage per pubblicare un video che prenda dimensioni diverse quando viene aperto da desktop o tablet rispetto a quelle che prende se la pagina è aperta da cellulare.

In questo post vedremo invece un secondo metodo anche migliore di quello precedente che permette la stessa personalizzazione ma lo fa con continuità. Con il sistema già presentato il video rimane della stessa larghezza fino a un breakpoint per poi diventare di un'altra larghezza. Ho proposto per il player del video una larghezza di 560 pixel da essere mostrata nei dispositivi desktop e tablet e una larghezza di 320 pixel per i cellulari. 

Come rendere responsive i video di Youtube su Blogger.

Il Responsive Design o Disegno Responsivo è quella tecnica applicata al linguaggio di programmazione che modifica in modo automatico il layout di una pagina web per poterla visualizzare correttamente quando aperta da dispositivi desktop o dispositivi mobili.

Esistono dei Modelli per Blogger e dei Temi per Wordpress che sono già stati creati con questa funzionalità.  Si può creare un modello responsive di Blogger anche da soli con un po' di pazienza. L'utilizzo del modelli di questo genere oppure utilizzando la versione mobile di un sito come nel caso di Blogger, non mette al riparo da problemi di visualizzazione da mobile. Ci sono infatti degli elementi che avendo una larghezza intrinseca non si adattano facilmente a tutti i dispositivi.

Menù Responsive di Blogger per desktop e per mobile.

A partire dal prossimo 31 Agosto verrà presumibilmente disabilitato il servizio hosting di Google Drive e questo avrà come effetto che i widget e i menù che utilizzano dei file javascript caricati su Google Drive smetteranno di funzionare. Ho quindi pensato di riproporre alcune personalizzazioni importanti che escludano hosting esterni e che caricano i CSS e i javascript direttamente nel modello.

In questo post presenterò un menù Responsive. Ricordo che la Grafica Responsive altrimenti chiamata anche Responsiva permette al layout degli elementi di adattarsi alla risoluzione del dispositivo con cui viene aperta la pagina. Ricordo che si possono scaricare da internet Modelli Responsive per Blogger e Temi Responsive per Wordpress.

Generatore automatico di Immagini Responsive che si adattano alle risoluzioni dei dispositivi.

Il grande sviluppo dei dispositivi mobili ha dato un grande impulso al traffico web. Se prima per navigare dovevamo avere un computer e una connessione internet adesso basta un cellulare. Questa grande opportunità crea però grandi problematiche agli webmaster che devono adattare il layout dei loro siti alle risoluzioni dei dispositivi con cui vengono aperti.

La questione di base viene spesso risolta adottando un Modello Responsive per Blogger o un Tema Responsive per Wordpress. Gli utenti della piattaforma Blogger hanno anche la possibilità di crearsi un modello responsive da soli oppure utilizzare la versione mobile di Blogger attivabile dalla Bacheca > Modello > Cellulare.  

I problemi però rimangono pressoché immutati per alcuni oggetti HTML presenti nelle pagine. Una particolare importanza le hanno naturalmente le immagini. Il sistema utilizzato è quello di creare dei breakpoint vale a dire dei punti in cui il dispositivo carica una immagine più piccola rispetto a una più grande o viceversa. Ho già illustrato la metodologia da seguire per Blogger.

Come pubblicare immagini Responsive con Blogger.

Quando si apre un post di Blogger con un tablet o con uno smartphone le immagini che vi sono pubblicate in linea di massima si adattano alla larghezza del layout del dispositivo con cui vengono visualizzate. Questo non accade sempre con tutte le immagini e con tutti i modelli.

Ricordo a quei pochi che ancora non lo sapessero che il Responsive Design è una tecnica per adattare la grafica di una pagina web alla larghezza del dispositivo con cui viene visualizzata. Si possono installare Modelli Responsive per Blogger oppure scegliere tra i tanti Temi Responsive per Wordpress.

I migliori 170+ Modelli Responsive Gratis per Blogger.

Ho già scritto più volte come preferisca di gran lunga lavorare su template ufficiali di Blogger piuttosto che scaricare modelli da internet e ho anche motivato questa preferenza. Il codice dei modelli scaricati non sempre segue la nomenclatura dei CSS di Blogger e il suo autore crea dei fogli di stile a suo piacere. Per questa ragione quando si va a modificarli i tutorial testati nei modelli ufficiali spesso non funzionano. Certo che si può sempre risalire ai Selettori Univoci con strumenti tipo Analizza Elemento ma solo i più esperti sono in grado di farlo e inoltre è sempre una gran perdita di tempo.

In seconda battuta quando vengono introdotte delle novità dal team di Blogger queste vengono immediatamente recepite dai modelli ufficiali mentre spesso non funzionano nei modelli scaricati. Da qualche tempo però diventa sempre più irrinunciabile avere un modello Responsive che possa essere mobile friendly e quindi catturare traffico anche da dispositivi mobili. Da tempo gli utenti di Blogger hanno a disposizione la versione mobile del template che risolve molti problemi ma che ai più esigenti non basta in quanto la grafica per tablet e smartphone è completamente diversa da quella per desktop. In questo post elenco tutta una serie di template Responsive per Blogger. In calce a ciascun modello ci sarà un link per visualizzare la demo. Se siete davanti a un computer per visualizzare come si vede il template da mobile usate lo strumento Screenfly in questo modo. 

Come creare un Menù Responsive per Blogger.

Ricordo che il Responsive Design o Disegno Responsivo è quel tipo di grafica che si adatta automaticamente alla risoluzione del dispositivo con cui viene aperta la pagina. Ci sono a disposizione degli webmaster dei Temi Responsive per Wordpress per creare un blog che sia visibile in modo adeguato da desktop come da smartphone o tablet. Inoltre una buona visualizzazione mobile friendly viene premiata da Google mentre vengono penalizzati i siti che non la abbiano.

Anche gli utenti di Blogger possono scaricare dalla rete modelli con il Responsive Design ma possono anche modificare un template ufficiale di Blogger per farlo diventare Responsive. Uno degli elementi più difficili da adattare è certamente il menù. Gli utenti della piattaforma Blogger possono risolvere con i tag condizionali e mostrare un dato menù per il mobile e un altro menù per il desktop.

Come rendere fluida la larghezza dei video per visualizzarli anche da mobile nei siti Responsive.

A seguito di una conversazione avuta via email e dopo una ricerca su internet sono riuscito a trovare il bandolo della matassa per pubblicare video di Youtube e Vimeo con il player visibile nelle dimensioni appropriate da tutti i dispositivi. Come certo saprete ora vanno molto di moda i template e i temi Responsive che adattano la loro grafica automaticamente alla risoluzione del dispositivo con i quali sono visualizzati.

La difficoltà per i video è che in qualunque modo si posti il loro codice dovremo sempre inserire il valore della larghezza (width). Un valore di 560 pixel per la larghezza del player è ottimale se il video viene visualizzato tramite computer ma se si apre con un cellulare il risultato potrebbe essere pessimo. 

Come creare un modello Responsive Design da un template ufficiale di Blogger.

Nell'articolo precedente abbiamo visto come testare la visualizzazione del nostro sito con i vari dispositivi tramite lo strumento Screenfly. Gli utenti di Blogger possono usare la funzionalità della piattaforma che in automatico, se la pagina viene aperta da un dispositivo mobile, ne modifica l'URL aggiungendogli ?m=1 e mostrando un nuovo aspetto nei tablet e negli smartphone. Questa opzione è presente di default ma può essere abilitata o disabilitata andando su Modello > Cellulare. 

Questa soluzione però non soddisfa appieno tutte le esigenze. Su internet ci sono siti che offrono modelli gratuiti per Blogger con Responsive Design. Basta fare una ricerca con Google e se ne trovano quanti se ne vuole. Saprete però che la scelta di un template scaricato da internet è sconsigliata a meno che il modello scelto non sia perfetto per le nostre esigenze. Per tali template ci sono infatti un sacco di controindicazioni che vanno dai link di attribuzione al sito dell'autore che potrebbe essere malvisto da Google alla difficoltà o addirittura alla impossibilità di personalizzarlo ulteriormente.

Come testare la visualizzazione di un sito con varie risoluzioni e con diversi dispositivi mobili.

Fino a un paio di anni fa la preoccupazione principale degli amministratori di un blog era quello di testare come veniva visualizzato con i diversi browser. Una attenzione particolare veniva riservata a Internet Explorer che spesso mostrava il blog con un aspetto molto diverso da come si vedeva con Firefox o Chrome.  Per molti widget o menù che utilizzavano il javascript dopo averli perfettamente configurati per Chrome e Firefox ci accorgevamo che non funzionavano con IE e questo era causa di forti arrabbiature. Per fortuna con le nuove versioni queste problematiche sono state quasi completamente eliminate inoltre insieme al nuovo OS Windows 10 verrà distribuito il nuovo browser della Microsoft per il momento denominato  Spartan e  IE andrà definitivamente in pensione.  

Adesso le attenzioni riguardo alla visualizzazione si sono invece focalizzate sui dispositivi mobili nel senso che il problema non sono più i browser desktop ma i moltissimi dispositivi mobili con cui sempre più spesso vengono aperte le pagine del nostro sito. Online ci sono diversi tool per testare un determinato sito con un dato dispositivo o con una data risoluzione. In un post precedente ho parlato di Viewlike.us e adesso voglio illustrare un tool alternativo che userò prossimamente.