Navigare in incognito da mobile con Chrome, Firefox, Opera e Dolphin.

La navigazione privata è consigliata quando non si voglia lasciare troppe tracce del nostro passaggio. La privacy assoluta non esiste perché il nostro provider internet e le forze di polizia saranno sempre in grado di tracciarci e di ricostruire la cronologia delle pagine visitate.

La navigazione con una scheda in incognito (definizione usata da Chrome) serve per non mostrare le pagine che abbiamo visitato ad altre persone che useranno in futuro lo stesso browser, per non archiviare i cookie e i dati dei siti e per non salvare i dati digitati nei moduli.

Aprire delle schede private è possibile non solo da desktop ma anche da mobile. Ricordo che per una navigazione ancora più privata si può usare TOR da desktop e da mobile oppure una connessione VPN.

Perché sono diminuiti i visitatori del blog da cellulare e tablet?

Avete notato una diminuzione delle pagine viste da dispositivi mobili per il vostro sito a partire da ieri? Da oggi e per le prossime settimane è opportuno monitorare le statistiche di Google Analytics perché proprio il 10 Gennaio 2017 è avvenuto un aggiornamento nell'algoritmo di Google riguardo specificatamente alla versione mobile delle pagine web.

Forse qualcuno di voi si ricorderà che Google annunciò questa modifica alla fine dello scorso Agosto. L'obiettivo di questo update è quello di penalizzare i siti che utilizzano intrusive interstitials cioè dei popup o dei banner posizionati in modo particolarmente intrusivo che limitano la fruizione del contenuto da parte dell'utente. Google aveva anche fatto degli esempi grafici di quello che sarebbe stato considerato lecito e di quello che invece sarebbe stato penalizzato.

Testare come si visualizza un sito o una pagina con i vari modelli di PC, Tablet, Smartphone e Smart TV.

Mentre nel recente passato gli webmaster di tutto il mondo avevano il problema di armonizzare il layout dei siti se aperti con i diversi browser adesso le cose sono sensibilmente cambiate. Il browser più difficile da supportare per i siti delle varie piattaforme era senza ombra di dubbio Internet Explorer che adesso pur essendo ancora presente su Windows 10 cliccando su Start -> Accessori Windows è stato sostanzialmente abbandonato dalla Microsoft a vantaggio di Microsoft Edge. 

La sfida fondamentale per i possessori di un sito è quindi diventata quella di mostrare un layout efficace e friendly in tutti i dispositivi con cui può essere aperto. La navigazione in internet non si fa più esclusivamente con il computer ma si utilizzano altri dispositivi che diventano sempre più importanti per attrarre traffico.

Come nascondere l'Header di Blogger quando il blog viene aperto con un cellulare.

I più grandi nemici dei blogger sono il tempo e lo spazio. Il tempo che dedichiamo alla nostra passione non è mai abbastanza. Se privilegiamo il curare l'aspetto e l'ottimizzazione per i siti di ricerca ci manca il tempo per scrivere post di livello e viceversa se impieghiamo quel poco o tanto che abbiamo a disposizione per pubblicare gli articoli non riusciamo a tenere il passo con tutte le novità apportate ai motori di ricerca.

Un discorso simile vale anche per lo spazio disponibile nel layout. Vorremmo mostrare più contenuti possibili insieme a widget eleganti e utili ma è inevitabile fare delle scelte e eliminare tutto quello che non è strettamente necessario. Nella versione desktop di Blogger si può ottimizzare lo spazio con l'introduzione dei cursori nei widget delle sidebar. Nella versione mobile i problemi vengono acuiti dal fatto che la risoluzione è più bassa. Il primo scroll della pagina viene di solito indicato con l'espressione inglese "above the fold".

Come personalizzare la data di Blogger per desktop e mobile.

In calce a un post su come sostituire la data di Blogger con un calendario mi si chiede semplicemente di come spostarla sulla destra. Non è semplice spiegarlo in un commento quindi ho pensato di scrivere un post non solo su questa specifica modifica ma sulle altre principali personalizzazioni che si possono fare per la data operando sul modello di Blogger.

Prima di qualsiasi modifica al template di Blogger bisogna fare in modo di mettere in sicurezza le modifiche per un eventuale ripristino. Si va quindi in Bacheca -> Modello e si clicca su Backup/Ripristino in alto a destra quindi si clicca su Scarica Modello completo per scaricare il file del template in formato XML. Per un eventuale ripristino si clicca sempre su Modello -> Backup/Ripristino ma poi si va su Sceglie file e si seleziona il file .XML precedentemente scaricato per poi andare su Carica per ripristinarlo.

COME SPOSTARE LA DATA DI BLOGGER A DESTRA O AL CENTRO

La data di Blogger di default è mostrata sulla sinistra. Vediamo come si possa spostarla a destra o al centro. L'obiettivo è quello di ottenere un risultato come questo

Come mostrare un contenuto di blogger solo su smartphone, solo su tablet o solo su desktop.

Partiamo dal problema per poi mostrare una possibile soluzione dello stesso. Molto spesso vengono pubblicati elementi in un post che vengono visualizzati correttamente se la pagina viene aperta con un computer ma che invece non lo sono quando sono visualizzati con dispositivi mobili.

Ci potrebbero essere delle immagini particolarmente larghe che debordano dal layout della pagina da mobile oppure dei video postati con larghezza di 560 pixel che sono troppi se il post viene aperto da smartphone. Il trucco che voglio proporre parte dalla possibilità che hanno tutti gli webmaster (anche quelli su piattaforma Wordpress) di inserire delle condizioni per mostrare i contenuti a seconda della risoluzioni del dispositivo con cui viene aperta la pagina.

Come salvare pagine e URL da cellulare per aprirli poi da PC.

Una gran parte della navigazione oggigiorno si effettua da smartphone e avviene spesso nei ritagli di tempo. Può capitare di sfogliare pagine quando siamo in coda in Banca o alle Poste, quando siamo in una sala di attesa o addirittura comodamente sdraiati in spiaggia sotto l'ombrellone.

Capita spesso di imbattersi in pagine interessanti che vorremmo leggere in un secondo tempo più attentamente e comodamente seduti davanti al PC. C'è quindi l'esigenza di salvare le pagine web interessanti. Tale salvataggio può essere fatto in diversi modi e dipende ovviamente dalla applicazione con cui stiamo navigando il quel momento.

Pulsanti di Facebook (Like, Share, Send e Save) alla fine dei post nella versione mobile di Blogger.

Nell'articolo precedente abbiamo visto come mostrare alla fine dei post di Blogger i bottoni dei plugin di Facebook Mi Piace, Condividi, Segui, Salva e Invia. Con questo articolo terminerò il tema illustrando come visualizzare questi plugin anche alla fine dei post nella versione mobile di Blogger.

Come già scritto nell'articolo linkato bisogna innanzitutto installare il javascript SDK di Facebook nel modello di Blogger. Questa operazione va fatta una volta per tutte e servirà per installare tutti i plugin di Facebook. La soluzione ottimale sarebbe quella di creare una applicazione Facebook specifica per il sito e quindi incollare il javascript SDK con l'ID della applicazione.

Test di Ottimizzazione per il Mobile di Search Console per rendere mobile friendly le pagine del blog.

Google ha introdotto un nuovo strumento per verificare la ottimizzazione per il mobile dei siti web. Ricordo che è da più di un anno che Google penalizza nei risultati di ricerca i siti che non siano mobile friendly e che per verificare la compatibilità di una pagina web con i dispositivi mobili aveva messo a disposizione degli webmaster un apposito Test di Compatibilità integrato in Google Developers.

Da qualche tempo è disponibile un altro strumento sempre di Google utile per controllare la usabilità da mobile di un sito o di una singola pagina web. Tale strumento si chiama Test di Ottimizzazione Mobile e fa parte di Search Console ex Strumenti per Webmaster.

Google privilegerà sempre più i siti mobile friendly. Cosa fare con i blog su Blogger.

Giusto un anno fa in questo sito commentai la decisione di Google di penalizzare i siti non mobile friendly nell'algoritmo che determina il posizionamento nei risultati di ricerca e che considera più di 200 Fattori di Ranking. La modifica dell'algoritmo iniziò a partire dal 21 Aprile 2015.

Con un post pubblicato su Google Webmaster Central Blog gli webmaster di tutto il mondo vengono adesso informati che a partire dal prossimo maggio ci sarà un ulteriore aggiornamento dei parametri che riguardano l'aspetto della visibilità e usabilità di un sito anche da mobile. In sostanza verranno ulteriormente penalizzati i siti non mobile friendly e di conseguenza favoriti i siti che invece siano facilmente usabili anche da smartphone e tablet.

Come modificare il modello di Blogger per mostrare molto grande il primo carattere del post.

Nelle antiche pubblicazioni magari elaborate a mano dagli amanuensi la prima lettera di un libro o anche di una pagina era spesso un capolavoro artistico. Questa tradizione si è protratta nei secoli anche dopo la diffusione della stampa. Si possono trovare moltissimi esempi di libri con il primo carattere molto più grande di tutti gli altri.

Anche la stampa quotidiana è rimasta influenzata da questo gusto tipografico e non sono pochi i giornali che utilizzano tuttora questa scelta grafica. Abbiamo già visto come si possa fare lo stesso per un post su Blogger o su Wordpress. Si tratta semplicemente di inserire un CSS inline con una differente regola per la prima lettera. Questa operazione andrebbe però fatta per tutti gli articoli.

Se per esempio l'articolo iniziasse con le stesse parole di questo post si dovrebbe andare in Modalità HTML e incollare questo codice prima di digitare tutto il resto del testo

Come allineare o centrare l'Header in modo diverso nelle versioni desktop e mobile di Blogger.

Riprendo il discorso iniziato con il precedente articolo sulla personalizzazione della versione mobile del nostro blog su Blogger in cui ho trattato la modifica della linea di divisone dei post nella homepage vista da dispositivo mobile. In questo articolo faremo un altro esempio di come allineare in modo diverso l'Intestazione o Header del blog nelle versioni mobile e desktop.

Mi è stata fatta questa richiesta in un commento a cui non ho potuto rispondere in modo adeguato perché il tema ha bisogno di una trattazione più complessa.  Premetto che i codici che pubblicherò sono relativi al blog che ho preso come esempio e che non è detto che vadano bene per tutti i modelli specie se scaricati da internet. Cercherò però di essere molto chiaro con la procedura in modo che possa essere replicata da tutti i lettori interessati a modifiche di questo genere.

Come modificare le linee di divisione dei post nella home della versione mobile di Blogger.

Spesso nei commenti ai miei articoli mi si pongono delle domande a cui non posso rispondere in un altro commento perché la trattazione sarebbe troppo complessa. È il caso di questa domanda in cui il lettore mi chiede come modificare la riga di divisione degli articoli quando si visualizza la homepage con un dispositivo mobile. Se però ritengo che il quesito possa avere un interesse generale allora ci faccio un articolo in modo che possa essere utile anche ad altri frequentatori del sito.

Per procedere alla personalizzazione della versione mobile bisogna averla abilitata.Bisogna quindi andare su Modello > Cellulare e cliccare sulla ruota dentata.  Successivamente si mette la spunta a Sì. Mostra il modello per cellulari nei dispositivi mobili e, tra i modelli disponibili, si sceglie Personalizza. Si va quindi su Salva per rendere le modifiche effettive.

Come mostrare un widget della sidebar di Blogger anche nella versione mobile.

La versione mobile dei blog su Blogger per ragioni di spazio non mostra la sidebar o le sidebar nel modello desktop.  In un commento mi è stato chiesto se fosse possibile mostrare un widget posizionato nella sidebar anche nella versione mobile. Visto che si tratta di una personalizzazione che penso possa essere utile anche ad altri lettori ho pensato di pubblicare un post sul tema prendendo come esempio il widget delle Etichette. Tale widget come noto si installa andando su Layout > Aggiungi un gadget > Base > Etichette.

La procedura però è assolutamente identica per qualsiasi altro widget come potrebbe essere quello dell'Archivio, quello del Profilo o Informazioni Personali, quello dei Post Popolari, un qualsiasi widget generico HTML/Javascript e addirittura anche quello della Casella di Ricerca.

 

Come mostrare un widget di Blogger solo quando viene aperto da mobile con una risoluzione minima.

La risoluzione dei dispositivi mobili è già una discriminante per il layout di una pagina. Sotto una certa risoluzione nei siti su piattaforma Blogger viene di default mostrato il modello per la versione mobile. Tale modello può essere scelto tra quelli disponibili oppure si può optare per Personalizza in modo da riproporre anche da mobile alcuni aspetti della grafica desktop.

Bisogna andare su Modello > Cellulare > Icona della ruota dentata per poi mettere la spunta su Sì. Mostra il modello per cellulari nei dispositivi mobili. Nel menù verticale si sceglie Personalizza quindi si va su Salva per rendere le modifiche effettive.

Nella versione per dispositivi mobili vengono mostrati solo i widget presenti nella colonna principale del layout mentre quelli della sidebar verranno nascosti. Anche quelli inseriti nell'area denominata "main" non sempre vengono però correttamente visualizzati. Se uno di questi widget non si visualizzasse da mobile bisognerà andare su Modello > Modifica HTML e cercare, con Ctrl+F, il nome del widget per individuarne il codice

Come mostrare un contenuto in funzione della risoluzione del dispositivo con cui si apre la pagina.

Fino a due o tre anni fa la preoccupazione principale degli webmaster era quella di mostrare correttamente il proprio sito con tutti i browser. Soprattutto Internet Explorer era quello che dava le maggiori preoccupazioni. Tra non molto IE verrà ritirato e queste problematiche sono ormai secondarie rispetto alla gestione del layout dei siti in funzione delle risoluzioni dei dispositivi con cui vengono aperti.

Esistono raccolte di Temi per Wordpress e di Modelli per Blogger definiti Responsive che adattano l'aspetto al dispositivo in modo automatico e, per quanto riguarda la piattaforma Blogger, viene creata di default la versione mobile di tutti i blog che può anche essere personalizzata. Si possono però venire a creare delle situazioni particolari con elementi che non si adattano in modo naturale alle diverse risoluzioni. Se si incorpora un video di Youtube e se si scelgono 560 pixel di larghezza è evidente che se si apre il sito con un cellulare verranno a crearsi delle bande di scorrimento orizzontali perché il video avrà una larghezza superiore.

Come mostrare un QR Code nei post di Blogger per far copiare o scannerizzare l'URL da cellulare.

La navigazione da dispositivi mobili è sempre più importante ai fini del traffico anche per siti che fino a qualche tempo fa erano improbabili da consultare con il cellulare. Per questa ragione è imperativo avere un sito mobile friendly per sfruttare a pieno tutte le possibilità.

Gli utenti di Blogger possono usare la versione mobile già predisposta e eventualmente personalizzarla. Sono anche disponibili moltissimi modelli gratuiti Responsive che si adattano automaticamente alle diverse risoluzioni. Anche se nei cellulari più moderni si è fatto molto in tal senso è ancora piuttosto disagevole fare il copia e incolla di un indirizzo web per condividerlo in un post o in una email.

Personalizzare le Intestazioni dentro il post nella versione mobile di Blogger.

Riprendo brevemente il tema che ho affrontato nel post precedente riguardo alla Personalizzazione delle Intestazioni inserite all'interno dell'articolo. Come ho già evidenziato le Intestazioni che si inseriscono tramite l'Editor di Blogger spesso non hanno un aspetto coerente con il loro nome.

Capita infatti che l'Intestazione Principale abbia dei caratteri più piccoli di quella Secondaria e Minore. Le Intestazioni native di Blogger vengono inserite tramite i tag <h2>, <h3> e <h4> considerato che <h1> è il tag del titolo del post. Questi tag però sono presenti nel template e servono anche per altri elementi del blog quali la data del post (h2), il titolo dei widget (h2), l'inizio della sezione commenti (h3) e la scritta Posta un commento (h4).

Come adattare i blog su Blogger a smartphone e tablet.

Nel precedente post abbiamo visto come si possa rendere Responsive un elemento di un sito quando se ne conosca il suo selettore univoco e si abbia la consapevolezza degli attributi che debbono essere adattati alle diverse risoluzioni.  Ricordo che il Disegno Responsive è quella tecnica per adattare il layout di una pagina web alla risoluzione del dispositivo con cui si è aperta. Si tratta di un tema molto importante anche dal punto di vista SEO visto che Google da Aprile sta penalizzando i siti non mobile-friendly.

Se si prova a implementare su Blogger la tecnica della media query che abbiamo visto nel precedente articolo avremo dei buoni risultati quando i selettori siano estranei a Blogger come potrebbe essere quelli di un menù, un widget o un altro elemento che non dipenda dal codice nativo di Blogger. Se però proviamo con i CSS media query a adattare le dimensioni per esempio del nome del blog non si noteranno cambiamenti nelle varie risoluzioni dei dispositivi. La ragione dipende dal fatto che Blogger ha già nel codice i tag per adattare i vari elementi del layout alla versione mobile.

Come pubblicare un elemento Responsive in una pagina web.

Fino a qualche anno fa il problema più snervante per gli webmaster era quello di riuscire a visualizzare il sito in modo omogeneo con tutti i browser. Soprattutto con Internet Explorer si avevano le maggiori difficoltà. Per fortuna le ultime versioni di IE hanno delle rese del codice delle pagine web molto più in sintonia con gli altri browser inoltre si può sempre implementare un codice nel Modello o nel Tema per rendere il sito compatibile con tutti i browser.

Attualmente invece le maggiori problematiche si riscontrano quando il nostro sito viene visualizzato con dispositivi mobili. Alcuni elementi che vengono visualizzati in modo corretto con la versione desktop non sono altrettanto ben mostrati nella versione mobile. L'aspetto del sito visto da mobile è importante anche dal punto di vista SEO dopo che Google ha annunciato di penalizzare i siti non mobile-friendly.

In questo articolo prenderemo in esame una situazione generale mentre nel prossimo mi occuperò più specificatamente del modello di Blogger.