Grafica! Avete notato qualche differenza su robertobonfa.it?

In un momento di iper produttività e di ispirazione grafica (probabilmente una recente botta in testa mi ha causato qualche trauma nascosto), ho deciso di modificare interamente la grafica del sito, per affrontare meglio le preferenze grafiche che riscontro spesso in giro e per migliorare diverse cose. Ho provato due versioni totalmente differenti di grafica (per qualche giorno è stata online la precedente) e – alla fine – ho scelto di utilizzare quella che state guardando.

Premetto che NON sono un grafico e neppure un web designer, ma provo sempre ad applicarmi e la mia curiosità fa sempre la maggior parte del lavoro.

Non si vedono, ma vi assicuro che ci sono diverse modifiche grafiche che ho applicato. Giocare con CSS per chi lo conosce poco e gli da “del lei”… non è affatto facile, fortunatamente Google e le imprecazioni aiutano moltissimo!

Perché ho cambiato la grafica?

La vecchia grafica mi appariva… vecchia appunto e ho voluto provare questa rivoluzione. Ok, è un po’ spaesante, perché è qualcosa di totalmente diverso dalla precedente. Il template grafico che vedete ora è qualcosa su cui sto lavorando da un paio di anni (insieme ad altri!), ma vuoi la mancanza di tempo, vuoi l’assenza di ispirazione, gli impegni lavorativi e altro… ho sempre temporeggiato e rimandato.

In queste due settimane ho provato due diverse grafiche. La prima mi piaceva maggiormente, ma questa attuale ha più opzioni di personalizzazione e – soprattutto – rende molto più veloce il sito, che sto ulteriormente tentando di rendere ancora più rapido.

Questa nuova grafica ha molte peculiarità che tento di riepilogare una per una (sperando di non dimenticare nulla) e dividendo tutto in sezioni.

Per chiunque fosse interessato, a fondo articolo troverete i badge/card dei vari template sui quali ho lavorato o sto lavorando e che erano papabili successori del precedente…

Ma basta introduzione, arriviamo al sodo. Tutte le peculiarità della nuova grafica:

Grafica Homepage

  • Ho fissato il numero di colonne a 2, ampie e spaziose, in modo che ogni articolo sia chiaro da subito. Presente una sidebar laterale, sulla destra, con alcuni link e altre info meno importanti.
  • Tutto il sito è responsive, cioè si adatta automaticamente al display del dispositivo dal quale lo state visitando.
  • Per i colori ho deciso di optare per un classico bianco. Il sito, però, riprende – in parte – i colori del vecchio template (azzurro/grigio e arancione, come il logo).
  • Ho ridotto al massimo il numero di Widget nella barra laterale destra (sidebar), in modo da offrire una navigazione semplice e non troppe informazioni, così da non appesantire la visita (ho scritto giusto). La sidebar NON è presente su mobile, per rendere la navigazione più veloce e leggera.
  • Il menu ho deciso di tenerlo in alto (versione PC), perché in una ulteriore barra laterale… non mi piaceva.
  • Per la versione mobile, il menu è dietro ad una icona che si trova sulla sinistra.
  • In alto, nella parte più superiore della pagina, sono presenti alcune cose di base:
    • I due link alle pagine “Chi sono” e “Contattami”. Ovviamente la prima è una mia “presentazione” e la seconda non è altro che un modulo per contattarmi.
    • I link ai miei social network.
    • Un tasto di login per me e chi mi aiuta ogni tanto.
    • La data di oggi.
  • Subito sotto troviamo la barra principale (header), dove sono presenti:
    • Il logo nella parte più sinistra.
    • Il menu di navigazione.
    • Tre icone che servono ad una maggiore interazione con i visitatori:
      • La prima a sinistra apre una barra laterale nascosta (contiene i link alla mia playlist) – 1
      • L’icona per effettuare una ricerca sul sito. – 2
      • L’icona che apre i link ai miei profili social. – 3

Slide – Le mie guide

Presente in homepage (e solo in homepage) uno slide con gli articoli categorizzati sotto “Guide”, i quali – a giudicare dal numero di visualizzazioni – sono quelli più apprezzati.

Articoli – Tutti gli articoli

In homepage, per ogni articolo, sono presenti alcune info di base; le minime per rendere comprensibili subito alcune cose:

  • Immagine principale dell’articolo *
  • Titolo (eh, grazie…! che notiziona!)
  • Sopra il titolo è presente la categoria (o categorie) nella quale è archiviato l’articolo.
  • Dopo un brevissimo estratto dell’articolo, subito sotto, troviamo in ordine
    • Nome di chi ha scritto l’articolo (???)
    • Numero di commenti
    • Tempo stimato di lettura
    • * Qualora per l’articolo fosse presente una mia valutazione del prodotto (recensione mi sembra troppo impegnativo) allora comparirà anche una votazione in alto a destro sull’immagine.
  • Alla fine di un numero di articoli (6 o 8) sarà presente il bottone “LOAD MORE” per continuare a visualizzare altri articoli, che compariranno dopo averlo premuto.

Link

Sotto la sezione degli articoli è presente un raggruppamento di 3/4 link diretti allo store di Amazon. I prodotti che sono linkati sono prodotti che ho provato e riprovato a fondo. Potete stare certi che sono perfetti e super consigliati.

La canzone del mese

Per ora questo spazio è dedicato ad una canzone che cambierà di mese in mese, in futuro vedrò di modificarla con una frequenza maggiore. Ovviamente la canzone è presa dalla mia playlist.

Le mie valutazioni

In questo piccolo spazio sono presenti le mie valutazioni di prodotti che posso consigliarvi o meno. Pareri personali, potete decidere di fidarvi oppure no.

I miei InstaMomenti

Questa penso sia la parte più facile da interpretare: sono semplicemente le ultime foto che ho pubblicato su Instagram e che, automaticamente, appaiono sul sito. Una parte tutto sommato semplice nella modifica della grafica. Tutto qui.

Grafica Articoli Singoli

Passando alla parte relativa ai singoli articoli, si possono apprezzare (spero) alcune migliorie, rispetto al precedente template. Vi spiego di cosa parlo:

  • Alcuni articoli (ad esempio questo) possono godere di un template full page (una grafica a piena pagina, per chi non mastica… :D).
  • Grafica di WordPressQuesta scelta è dettata principalmente dal fatto che in alcune pagine (come ad esempio quella che potreste visualizzare cliccando il link che vi ho segnalato poco fa) saranno presenti i banner per acquistare prodotti dei quali parlo oppure per gallerie e foto. Nel caso specifico dell’articolo a cui faccio riferimento è presente il banner per Amazon e Ebay e anche una galleria, oltre ad una immagine di copertina. (NOTA 1)
  • Sulla parte sinistra di ogni articolo è presente un menu veloce per condividere un articolo. La condivisione è possibile in vari modi:
    • Mail;
    • Twitter;
    • Facebook;
    • LinkedIN
    • Whatsapp
    • Messenger (Facebook);
    • Telegram
  • Qualora vogliate, è possibile anche condividere una selezione di testo, semplicemente selezionando una parola o frase e automaticamente comparirà un piccolo menu (sopra il testo selezionato) con le icone di Facebook, Twitter e LinkedIN.
  • Nel caso – come quello citato – si tratti di una mia valutazione di qualcosa, a fondo articolo troverete anche un “voto” e una lista di pro e contro.
  • Nella parte inferiore di ogni articolo troverete due link al post precedente e a quello successivo.
  • Ancora più in basso è presente una selezione di articoli simili o che, comunque, potrebbero interessare…
  • Infine, per ultimo, Disqus per commentare ogni articolo.

Dietro la grafica: la parte che non si vede…

Ovviamente, le modifiche non sono state solo di livello estetico, visibili a chiunque, ma ce ne sono state molte altre. Vado a riepilogarle giusto qualora qualcuno fosse interessato o curioso:

Dimezzato il numero dei plugin

La grafica di un sito è importante, è il primo approcio e i plugin sono una cosa comodissima per WordPress e ce ne sono veramente di ogni tipo, in grado di fare quasi ogni cosa. L’utilizzo dei plugin rende più “divertente” l’esperienza su un sito, ma a livello di amministrazione – a volte – complicano il lavoro e appesantiscono il sito. Alcuni plugin fanno sì che un sito carichi le pagine nel doppio del tempo necessario al caricamento senza quel plugin.

Per questo motivo ho eliminato gran parte dei plugin che utilizzavo poco oppure che non davano un valore aggiunto.

Ho tratto un bel beneficio: ora il sito carica più velocemente.

Grafica Ultimo appunto:

(NOTA 1) – Per quanto riguarda le offerte da Amazon, ho inserito due tipologie di banner:

  • la prima che troverete nella maggior parte delle Guide, dove sono presenti più prodotti;
  • la seconda è (come nell’articolo delle cuffie) un badge più grande per un prodotto singolo.

Altra due note fondamentali:

  • ho inserito anche le card per acquistare da eBay
  • e, soprattutto, la possibilità di tracciare un prezzo, nonché l’andamento del prezzo (negli ultimi 180gg / 6 mesi) di un prodotto. Dovrete solo inserire la vostra mail e il prezzo desiderato, raggiunto il quale volete essere avvisati.

In conclusione: ditemi cosa ne pensate, se vi piace la grafica e se avete consigli. Qui sotto i commenti sono aperti!

Come promesso: qui sotto trovate alcuni dei template con i quali mi sto “esercitando” nelle modifiche della loro grafica e funzioni.

 

X | The Theme

$59,00
Visualizza
Themeforest.net
al 13 Dicembre 2018 15:34

October, 2018: Version 6.3 Changelog | Latest Version: 6.3.8.

X – OverviewStacks – X includes multiple unique designs inside of one powerful WordPress theme, and we refer to these designs as “Stacks.” There are currently four Stacks available in X. It’s like buying one theme and constantly...

Pluto Clean Personal WordPress Masonry Blog Theme

$69,00
Visualizza
Themeforest.net
al 13 Dicembre 2018 15:34

Image Copy ProtectionNobody wants their hard work stolen. With a simple checkbox in admin you can enable a unique and smart Photo Protection from copying. You can even set a text you want to display if tries to save the image. Simple as that! Powerful admin...

Flex Mag - Responsive WordPress News Theme

$49,00
Visualizza
Themeforest.net
al 13 Dicembre 2018 15:34

Last update: Version 3.0.0 – July 19, 2018Flex Mag is the perfect combination of power and simplicity in a WordPress News & Magazine theme. Flex Mag does not require any coding knowledge and gives you the options and flexibility to put together the ultimate news site, but in a simple,...

Gillion | Multi-Concept Blog/Magazine & Shop WordPress Theme

$55,00
Visualizza
Themeforest.net
al 13 Dicembre 2018 15:34

15+ Pre-Built DemosGillion has been pre-made for you with 15+ high quality fully functioning website demos that are ready to be customized and published ASAP.With six all-purpose multi use demos that can be extended far beyond the...

HEAP - A Snappy Responsive WordPress Blog Theme

$75,00
Visualizza
Themeforest.net
al 13 Dicembre 2018 15:34

HEAP is a Personal Blogging Theme for WordPress and an effortlessly tool for publishers of all kind, cherished for its flexibility, clean layouts and speed. Whether you?re looking to share your own thoughts, write about your latest findings or just have a scrapbook of photos, videos, quotes or...

Jupiter - Multi-Purpose Responsive Theme

$59,00
Visualizza
Themeforest.net
al 13 Dicembre 2018 15:34

Unlimited Business Website Templates with Jupiter Wordpress Theme! Create a clean and beautiful website for your business with the fastest and lightest business wordpress theme in the market. Jupiter is a perfect solution for all kinds of businesses...

Newspaper

$59,00
Visualizza
Themeforest.net
al 13 Dicembre 2018 15:34

Newspaper is a WordPress theme that lets you write articles and blog posts with ease. We offer great support and friendly help!This is the best news and newspaper template available. This bestseller theme is perfect for blogging and excellent for a news, newspaper, magazine,...