Categoria: Web design

Ci troviamo oggi ad affrontare e a suggerire una soluzione per una delle problematiche tipiche in cui si potrebbe trovare un web designer che realizza un sito con WordPress: inserire un widget direttamente all’interno di un articolo o di una pagina.

Può essere infatti necessario che un certo widget operi esclusivamente in una certa pagina.

Per questa operazione ci vengono incontro gli shortcodes generati dal plugin amr shortcode any widget.

Come fare?

Per prima cosa installate il plugin amr shortcode any widget (potete scaricarlo da qui).

Attivando il plugin nella sezione widget di WordPress vi apparirà una nuova zona chiamata Widgets for Shortcodes. 

Inserite in questa zona il widget che volete aggiungere alla pagina, personalizzatene eventualmente le impostazioni e poi cliccate su “Salva”.

In calce al widget salvato apparirà magicamente il shortcode da copiare e incollare nell’articolo o nella pagina desiderata.

Facciamo un test passo passo

Ecco un esempio concreto di come faccio ad inserire un certo widget proprio sotto questo articolo.

Per prima cosa installo il plugin amr shortcode any widget tramite la funzione aggiungi plugin di WordPress.

Una volta attivato vedrò apparire la nuova zona nella sezione “Widget” come nella figura di seguito:

Diciamo che voglio inserire all’interno di questo articolo la situazione meteo di Roma. Ho ovviamente un plugin meteo installato che mi permette di aggiungere widget.

Inserisco il widget relativo all’interno della nuova zona, ne personalizzo eventualmente le impostazioni e poi clicco su “Salva“.

Apparirà dunque lo shortcode da utilizzare nella pagina o nell’articolo.

Inserite lo shortcode all’interno della pagina o dell’articolo con il formato proposto ed ecco in widget in azione.

[do_widget id=td_block_weather_widget-2] 

Per altre informazioni e faq sul plugin cliccate qui.

Perché Ottimizzare WordPress

Ottimizzare WordPress significa rendere l’esperienza utente migliore.

WordPress è certamente tra i cms più utilizzati al mondo. Secondo il sito ufficiale il 27% di Internet utilizza wordpress.

Anche noi utilizziamo questo content management system quando realizziamo un sito web e provvediamo ad ottimizzarlo per rendere il prodotto finale migliore.

Un wordpress ottimizzato significa sito più veloce e maggiore fruibilità dello stesso da ogni tipo di device.

In questo articolo riprendiamo quanto scritto nella guida GT Metrix sull’ottimizzazione di un sito web in WordPress.

GT Metrix è un celebre sistema on line di analisi delle performances di un sito web secondo i parametri di Google PageSpeed e YSlow.

Testiamo quanto consigliato direttamente sul sito web della nostra web agency e vediamone i risultati.

1- Analizziamo il sito web con GT Metrix

Vediamo cosa e quanto c’è da ottimizzare di un sito web facendo un’analisi iniziale.
E’ possibile operare l’analisi in due modi:

Installando nel proprio cms WordPress il plugin GTMetrix for WordPress
Operando l’analisi sul tool on line direttamente su https://gtmetrix.com/

Nel primo caso è necessario inserire l’API key disponibile a questo link. Sarà necessario registrarsi e loggarsi per accedere alle informazioni della propria chiave API.

Il responso dell’analisi GTMetrix per dopstart è il seguente:

Insomma una situazione non proprio rosea. Dobbiamo dunque assolutamente migliorare. Continuiamo con i prossimi passaggi e vedremo se e quanto riusciremo ad ottimizzare wordpress.

2- Installiamo ed attiviamo UpdraftPlus

Prima di mettere mano all’ottimizzazione di WordPress per le modifiche necessarie è sempre importante eseguire un backup completo del sito.

Per questo installiamo il plugin UpdraftPlus e facciamo un backup.

3- Ottimizziamo le immagini in automatico

La grandezza delle immagini incide non poco sulla velocità di caricamento delle pagine web.
Ottimizzare e comprimere le immagini è possibile farlo in automatico installando e utilizzando il plugin WP Smush (Smush Image Compression and Optimization)  

Con questo plugin provvediamo ad ottimizzare le immagini già presenti sul sito. Le prossime che inseriremo saranno già automaticamente ottimizzate

4-Installiamo e attiviamo WP fastest cache

Un plugin completo di cache è WP Fastest Cache.

Con questo plugin è possibile :

[su_list icon=”icon:thumbs-o-up” icon_color=”#d45500″ class=””]

• Abilitare la memorizzazione delle pagine nella cache per un caricamento più veloce delle stesse;
• Impostare il preload
• Il bypass della cache per gli utenti registrati
• Minify HTML, cioè la riduzione delle dimensioni dei file html
• Minify CSS, cioè la riduzione delle dimensioni dei file CSS
• Combine CSS, cioè la possibilità di riunire tutti i file css in un unica risorsa riducendo le richieste http
• Combine JS riunendo tutti i file js in un unica risorsa
• GZIP per l’ulteriore compressione delle pagine acquisendo ancora più velocità
• Impostare il caching del Browser

[/su_list]

[su_note note_color=”#FFFF66″ text_color=”#333333″ radius=”3″ class=””]Nota: E’ importante controllare sempre le funzionalità del sito web dopo le minimizzazioni e combinazioni di file in quanto potrebbero verificarsi errori o problemi di funzionalità.[/su_note]

5- Rianalizziamo il sito web con GTMetrix

Con i passaggi precedenti abbiamo migliorato molto soprattutto in termini di caricamento della pagina e ridotto di molto le richieste http. C’è ovviamente ancora qualcosa da fare ma per ora va bene così.

Indice

• Il nostro web designer
• Definizione di web designer
• Chi è il web designer
• Cosa fa il web designer
• I compiti principali del web designer

Il nostro web designer

Sovente affianchiamo agenzie non solo di Torino che richiedono le competenze dei nostri web designer.

Sono diversi i web designer specializzati che collaborano da tempo con noi e di volta in volta inseriti nel team da project manager.

Di seguito spieghiamo cos’è e cosa fa il web designer e quali sono i nostri prezzi e le nostre attività di web design.

Definizione di web designer

Il web designer viene definito da Wikipedia come “colui che progetta la comunicazione visiva di un sito e crea le singole pagine web: in generale è il responsabile dell’aspetto grafico di un sito, della sua riuscita comunicativa e del coinvolgimento emotivo degli utenti che lo visitano (user experience).

Il web designer è anche il responsabile finale della qualità di un sito web e garantisce che i siti che siano accattivanti dal punto di vista grafico, abbiano un buon impatto visivo, siano semplici da navigare, compatibili con le esigenze dei visitatori e accessibili utilizzando browser e componenti diversi.

A lui spetta il compito di coniugare design e navigazione mediante l’utilizzo delle tecnologie digitali disponibili.”

Questa la definizione ufficiale del web. Il web designer progetta il sito web.

Chi è il web designer

Pianifica le attività di creazione di un sito web, ha un’ottima conoscenza di tutti i fattori che ne concorrono alla realizzazione, al mantenimento e alla promozione on line demandando spesso i compiti a specifiche figure di supporto.

Si tratta di una figura progettuale specifica che va oltre il graphic designer.

A quest’ultimo compete sviluppare l’aspetto grafico indicato dal web designer.

Un web developer traduce in codice e struttura capace di adempiere alla sua funzione in internet.

Le competenze del webdesigner investono l’usabilità del sito e la sua accessibilità ed è colui che “progetta” la “user experience” che dovranno avere gli utenti.

Nei team che andiamo a costituire per ogni singolo progetto oltre alla figura del web designer possiamo includere altre specifiche figure progettuali come il Web Architect e il Web Project manager.

Il nostro Web account manager è sempre disponibile a dare ogni supporto nella fase commerciale.

Web Marketers, SEO Copywriters, Community e reputation manager, provvederanno a far diventare il tuo sito un sito web di successo con il supporto di Web Master, On-line store manager, Database administrator e Web security expert.

Per la visibilità e il successo del sito, altre figure di supporto specifiche come il consulente SEO e Social Media Expert (solo per citarne alcuni ma l’elenco col passare degli anni diventa sempre più lungo) vengono in supporto del progetto del web designer.

Cosa fa il web designer

Le competenze minime che dovrebbe avere un buon webdesigner sono:

• conoscenza delle regole della comunicazione e brand identity
• capacità di analisi del comportamento degli utenti del sito web
• conoscenza delle strategie web di promozione on line
• conoscenza degli elementi di design e di interfacce software e grafiche

I compiti principali del web designer

Il web designer progetta la comunicazione visiva di un sito web e del coinvolgimento emotivo che deve provocare negli utenti mediante una buona interfaccia utente.

In qualità di comunicatore il webdesigner Interpreta le esigenze del cliente e dei visitatori che dovrà avere il sito web immaginandone da subito:

• la tecnologia da utilizzare,
• le soluzioni funzionali per la migliore navigazione e fruizione del sito su ogni tipo di device (responsività),
• il percorso di comunicazione visiva

Tanto migliore sarà l’esperienza utente orientata agli obiettivi delle pagine web, migliore sarà il risultato del lavoro di web design.

Inoltre il web designer codifica il sito che si vedrà sui desktop, sui tablet e sugli smartphone in linguaggio web (css, javascript ecc.) creando le singole pagine del sito.

Programma le attività di aggiornamento e mantenimento del sito web.

Con l’aiuto di un copywriter e di un grafico disegna il percorso di comunicazione del sito riempendolo di contenuti (immagini e testi) idonei.