Oggi è importante avere un sito amichevole per i dispositivi mobili

Alla fine dello scorso mese il web è stato scosso da un importante cambiamento negli algoritmi di ricerca e “valorizzazione” utilizzati da Google per mostrare i risultati di una ricerca. Si è parlato addirittura di MobileGeddon

In questo articolo ci occuperemo di vedere cosa comporta, e come può organizzarsi, un utente della piattaforma WordPress.com.

1. Come posso verificare che il mio sito sia mobile-friendly?

Rispondere a questo quesito è semplicissimo. Google ha messo a disposizione un’apposita pagina di test per verificare l’amichevolezza per dispositivi mobili del tuo sito. Qui basterà inserire l’URL completa del tuo sito web (ad esempio https://usare.wordpress.com nel nostro caso), premere invio ed attendere il responso di Google.

Hai superato il test? Grande, complimenti !!!

Google-mobilefriendly-test

2. Cosa posso fare se il mio sito NON è mobile-friendly?

Se il test preparato da Google ha dato risultato negativo molto probabilmente starai utilizzando un vecchio tema grafico, predisposto quando i temi adattivi erano ancora di la a venire o non così importanti. Un tema adattivo (responsive come si dice in gergo tecnico) è un sito che risponde alle diverse dimensioni dello schermo dichiarate dal browser che stai utilizzando per visitare un sito. Gli elementi grafici che lo compongono si riposizionano e/o modificano graficamente in maniera automatica adattandosi alla larghezza del display… per fare un esperimento prova a stringere in larghezza la dimensione del browser che stai usando per leggere questo articolo…

Goran è un esempio di tema responsive disponibile su WordPress.com … l’immagine qui sotto riporta come un sito equipaggiato con esso si comporta a seconda che sia visitato da un normale browser su dektop, su tablet o smartphone:

Goran's layout changes slightly to make sure important content comes first, regardless of the type of device you use to view the site.

Come utenti di WordPress.com abbiamo due importantissime armi nel nostro “arsenale” per fronteggiare questa nuova esigenza:

  1. Modificare il template scelto, selezionando un tema adattivo. Farlo è semplice, basterà eseguire una ricerca nella pagina dei temi selezionando tra i criteri di ricerca quello di essere un tema responsive e qui scegliere quello che più ci piace (a pagamento o meno);
  2. Se nessun tema responsive è di vostro gradimento, si può scegliere l’opzione di visualizzare il nostro sito in maniera diversa a chi ci viene a visitare con un tablet o uno smartphone. In passato ne abbiamo parlato ampiamente (fanno fede tutti i post dedicati al mondo mobile) … dovremo attivare un apposita funzione all’interno della nostra bacheca seguendo il percorso  My Site(s) → WP Admin → Appearance (Aspetto) → Mobile. Qui dovremo cliccare su Yes (Si) nel bottone di scelta per abilitare il template mobile-friendly (unico per tutti i siti che lo adottano) e quindi cliccare sul tasto Update (Aggiorna) per completarne l’attivazione.

Spero sia tutto chiaro, in caso contrario i commenti sono sempre aperti!

Snap, nuovo tema premium su WordPress.com

Nella tradizione Automattic, il giovedì viene utilizzato per il rilascio di un nuovo tema. L’ultimo arrivato è un tema premium (al costro di 68$) realizzato dal team di The Theme Foundry.

Snap – questo il nome del nuovo nato – è un tema reattivo, molto leggero negli elementi grafici, che ricalca in pieno gli stilemi minimalistici degli ultimi trend del web design. Il tutto per valorizzare al massimo i contenuti proposti.

Snap

Valorizza i tuoi lavori

Andiamo ora ad esaminarne le peculiarità, oltre all’evidente realizzazione in griglia degli elementi della pagina. Già da questi primi screenshot si vede come, indipendentemente dal dispositivo utilizzato per la visualizzazione di un sito che utilizza questo tema, quello che salta all’occhio è il contenuto che ci andiamo a mettere.

wp-snap-single

Snap è quindi un perfetto template per l’uso come portfolio personale

wp-home

La homepage di Snap (come puoi vedere cliccando qui) è pensata per riassumere in breve i punti focali del tuo business. Possiamo inserire uno slider o un’immagine statica nella zona principale della pagine, affiancato poi da una griglia contenente i tuoi progetti più recenti o le ultime novità.

Un portfolio sempre in ordine

wp-portfolio

Snap, come dicevamo, è realizzato specificatamente pensando alla realizzazione di un portfolio personale. Infatti è presente un template di pagina chiamato appunto Portfolio (qui una demo) che assieme all’ordinamento delle stesse, e dei loro contenuti, assicura un risultato molto accattivante. Questo è possibile anche grazie ad alcune modifiche effettuabili attraverso una comoda interfaccia drag-and-drop.

Conoscere l’autore

wp-profile

Oltre ai tuoi lavori, Snap è realizzato anche per mettere in evidenza l’autore delle opere mostrate. Il template di pagina profilo è perfetto per raccontare la tua storia, il tuo business. Puoi completare il tuo profilo inserendo un tuo ritratto, con un testo descrittivo, che appariranno nella colonna sinistra, assieme agli altri contenuto della pagina.

Aggiungi il tuo stile

snap-custom-bg-01

snap-custom-bg-03

snap-custom-bg-02

Grazie all’utilizzo di un’immagine, o un colore, di sfondo è molto facile personalizzare il look-n-feel del tuo sito usando Snap. Come sempre è a disposizione l’upgrade a pagamento  Custom Design per modificare lo schema colori e le font utilizzate.upgrade, you can also quickly personalize Snap’s color scheme and fonts.

Le speficiche in breve (tutte le misure sono espresse in pixel):

  1. Snap è un tema a larghezza variabile e responsive.
  2. Immagini e video vengono scalati a seconda della dimensione dello schermo.
  3. Lo slider per i contenuti in evidenza deve essere grande almeno 994 per 650.
  4. Il signolo post e la pagina di default hanno una larghezza massima della colonna del contenuto pari a 651.
  5. Nella pagina a piena larghezza la colonna principale ha una larghezza massima di 994.

Raffinare il nostro sito utilizzando i Post Formats

Nel campo del blogging una delle novità stilistiche più interessanti è stata quella di differenziare tipo-graficamente i contenuti pubblicati nel proprio spazio personale a seconda della loro natura. Citazioni, file audio, video, fotografie, gallerie e articoli in senso classico, ciascuno pubblicato enfatizzando la propria diversità rispetto agli altri, cercando di mantenere un trait d’union nel tutto.

A (mia) memoria si deve a Tumblr l’aver sdoganato questo metodo di pubblicazione, ed al mercato professionale quello di far pubblicare su WordPress qualcosa di diverso dal classico concetto di “post”.

Mentre per la pubblicazione avanzata di contenuti particolari lo sviluppatore WordPress deve dare un forte rimaneggiamento al codice del nostro CMS preferito, su un “classico” blog self-hosted e qui su WordPress.com possiamo far uso di template che utilizzino i cosidetti Post Formats. Al momento in cui scrivo questo articolo sulla nostra piattaforma d’elezione abbiamo oltre 50 temi che supportano questa funzionalità, mostrando i nostri contenuti, come detto, secondo una formattazione propria del contenuto pubblicato.

Al momento ciascun tema può supportare tutti o un sotto-insieme di Formati, tra cui: immagini, video, citazioni, link, file audo, piccole porzioni di testo chiamate ‘digressioni’ (“asides” per chi usa l’interfaccia in lingua inglese). Per vedere quali formati supporta il tema che si sta utilizzando basterà andare in Bacheca, Articoli e provare ad aggingere un nuovo articolo, nella colonna a sinistra apparirà un modulo che elencherà i tipi di Formato a disposizione:

Format Module

L’uso degli “Articoli Formattati” è del tutto opzionale, se il tema che stiamo usando li supporta, infatti, potremo ignorare le varianti e continuare ad usare il formato Standard. Ancora, il loro utilizzo è del tutto gratuito, non sarà infatti necessario dover disporre del  custom CSS upgrade per abilitarli nel tema che vogliamo usare.

I temi più popolari su WordPress.com ora supportano i Post Formats

Tra i lavori dietro le quinte svolti quotidianamente da Automattic vi è stato, infatti, la riscrittura dei venticinque (25) temi più popolari usati nella piattaforma per far si che beneficiassero di questa funzionalità. Tra questi temi possono essere menzionati temi gratuiti quali Pilcrow,Manifest e Bueno o premium come Elemin. Proprio usando quest’ultimo ci piace riportare una schermata dove possiamo vedere all’opera questa funzionalità:

Formato Immagine:

Image Format

Formato Video:

Video Format

Formato Citazione:

Quote Format

Formato Link:

Link Format

Formato Audio:

Audio Format

Formato Digressione:

Aside Format

L’uso di icone stilizzate correda ciascuna tipologia di articolo in questo template, mentre ciascun tema fa uso delle proprie tecniche ed escamotage per la loro rappresentazione. Possiamo visualizzare qui tutti i temi che supportano i Post Formats nella sezione Showcase dei temi e scoprirne, di ciascuno, aspetto e funzionalità.

Buon lavoro!

Cheers, un nuovo tema natalizio

Il periodo natalizio è da sempre tra i più amati del team Automattic e giusto per rimarcare la cosa lo scorso mercoledì sono stati rilasciati un nuovo tema ed un nuovo wallpaper con questo tema.

Un gruppo di coder e designer della famiglia WordPress.com si è quindi riunita ed ha prodotto un bellissimo wallpaper nataliazio con un piccolo tocco d’amore verso WordPress. L’autore di quest’anno è l’illustratore australiano Glenn Thomas, conosciuto per il suo The Fox and King.

wpholiday-blue-desktopsmall

Partendoda questa illustrazione sono stati preparati wallpaper per desktop e dispositivi mobili e, grazie al contributo di Caroline Moore ci si è spinti a creare un tema natalizio, disponibile tra gli oltri 200 della piattaforma. Il nome di questo tema è Cheers.

Cheer Traditional

Cheer è un tema festosto, disponibile in due varianti di colore (rosso od azzurro) perfetto per quegli spazi a carattere personale. Lo scopo degli autori è dare un’aura ancor più natalizia a racconti, foto e video che si fanno in famiglia e con gli amici in questo periodo.

Cheer Modern

Nella classica pagina showcase del tema potremo conoscerne ulteriori dettagli, mentre – come sempre – per vederne un’anteprima sui nostri contenuti ci basterà andare nella sezione Aspetto -> Temi della Bacheca.

Wallpapers

Come detto poc’anzi il wallpaper è stato già preparato per le più diffuse piattaforme, ecco quindi i rispettivi link:

versione Blue

versione Rossa

In caso vogliate modificare il wallpaper e non sappiate come farlo qui sono disponibili le istruzioni per iOSAndroidOS XWindows 7 and Windows 8.

Un consiglio: Scegli un’immagine più grande delle dimensioni del tuo schermio ed imposta la posizione “al centro” e “riempi lo schermo” (e non “adatta”).

… ricordi

Se ne aveste voglia, potrete andare a vedere le illustrazioni preparate negli ultimi tra anni precedenti. Ecco quelli del 20112010 e 2009.