Top Web Design Trends 2018

Top Web Design Trends 2018 Andres Hunger

L'emozione del Design tra ricerca e programmazione

Le nuove tendenze internazionali per quest'anno sono ricche d'innovazione e di minimalismo, con tanta creatività sopratutto, animazioni CSS3 al top molta originalità e tanta ricerca, ma sempre non trascurando la nostra amata SEO!

 

1. Minimalismo luminoso e audace e contenuti fotografici coinvolgenti.

Minimalismo luminoso e audace.
Semplice ma mai fuori moda e sopratutto mai noioso. Caratteri grandi, colori vivaci, il 2018 sarà un anno divertente per interfacce online facili da usare ma interessanti.
Contenuti fotografici coinvolgenti. Sono finiti i giorni dei noiosi tizi imbiancati in una corporativa fotografia d'archivio aziendale, ricerca e unicità saranno il puto fuocale.

 

2. Contenuto interattivo

2018 sarà l'anno dell'interattività.
I consumatori desiderano un'esperienza più personalizzata e divertente quando si tratta di contenuti, come sondaggi, quiz e giochi che  possono offrire esattamente questa esperienza.

 

3. Illustrazioni e animazioni

Sempre più media, aziende assumono illustratori per creare uno stile visivo unico e originale.
Le illustrazioni danno un tono alle aziende e hai brand ed aggiungono giocosità al loro contenuto.
La parte migliore dell'uso delle illustrazioni è pratica:
le illustrazioni possono essere di qualsiasi dimensione, stile, colore e possono essere incorporate in qualsiasi disegno senza soluzione di continuità.

L'animazione è una nuova moda nel web design del 2018 accantonata un po negli scorsi anni ora torna alla ribalta.
Le animazioni consentono di tradurre più informazioni in modo efficiente, attirare l'attenzione e aiutare a raccontare una storia in pochi secondi.
Loghi, sfondi e menu diventano animati, il che significa un coinvolgimento migliore.

 

4. Coerenza e attenzione alla comprensione degli utenti finali

Ci sarà molta più attenzione alla comprensione degli utenti finali, ovvero del pubblico di riferimento aziendale. Come designer, lo abbiamo sempre saputo, ma non tutte le aziende dedicano lo stesso sforzo alla ricerca degli utenti o alle interviste per capire a fondo chi è il loro target di riferimento.
C'è molto da imparare... per interagire con l'utenza finale, tra social e web site e molto altro ancora...
Inoltre serve dedicare molto più impegno alla coerenza,
come la coerenza del messaggio che l'azienda invia attraverso i canali che sta utilizzando.
Ad esempio, coerenza tra l'app mobile e i suoi social media.
Il tono, il messaggio dell'azienda, il linguaggio utilizzato, le immagini e così via devono rimanere gli stessi.

 

7. Più video, forme fluide e uso dei gradienti

I video non sono più solo qualcosa da guardare, stanno diventando parte della presentazione e della comunicazione di un breand.
Aspettati di vedere il contenuto del video in più aree di un sito web anziché il tipico video nella home page.
I video possono offrire una grande quantità di informazioni in modo rapido ed efficace.
Ad unire i viedo dobbiamo associare anche delle forme fluide, uso di gradienti, CSS animati e tanto font accattivante.
Mentre i tipi di forme e ombre materiali erano famosi nel 2017, le persone si stanno ora spostando verso forme più fluide con sfumature e un sacco di spazi di  bianco con ombre enormi ma lievi.
Anche il kit UI Bootstrap pronti all'uso hanno iniziato a utilizzare le ultime tendenze per attirare i clienti.

In conclusione, tanta ricerca, amore per il design e per la programmazione web saranno le armi vincenti!

Custom Post Type UI WordPress

undefined

Wordpress Developer

Prima di tutto dobbiamo parlare del progetto Pluginize lanciato nel 2016 da WebDevStudios per promuovere, sostenere e ospitare tutti i prodotti WordPress.
Pluginize non è solo creazione di nuovi prodotti per WordPress, come CPTUI e CPTUI Extended, ma fornisce anche supporto continuativo e sviluppo per CMB2 e altro.

Plugin CPTUI ovvero 'Custom Post Type UI'

Questo plugin e un ottimo struento per poter implementare "Custom Post Types" all'interno del propio tema.
Ottimo per lo sviluppo, la versione free e fatta molto bene, semplice ed intuitiva.

Link ufficiale WordPress.org

Link ufficiale GitHub

Questo strumento ci permette di guadagnare tempo prezioso nello sviluppo, inoltre ci permette di non commettere errori sopratutto a sviluppatori alle prime armi.
Il plugi fornisce un'interfaccia facile da usare per la registrazione e la gestione di Custom Post Types e tassonomie per il tuo tema.
CPTUI da solo non gestisce gli aspetti relativi alla visualizzazione del tipo di post o del contenuto di tassonomia.
Il suo obiettivo è semplicemente la registrazione di entrambi.
Per entrare più sul dettaglio dovremo usare CPTUI-Extended che fornisce più strumenti per aiutare a visualizzare il contenuto di tutti i tipi registrati nel tuo tema ma è a pagamento

 

 

Tornando al CPTUI Free la sezione più interessante a mio dire è la possibilità di visualizzare il codice generato per poi implementarlo all'interno del file function.php

undefined

Per poi sviluppare e gestire il vostro template senza il plugin.
Ovvimante subito dopo si devono creare le sezioni di riferimento all'interno del vostro tema.
(esempio archive-nome.php, single-nome.php)

 

Special Design Kudos 2018 CSSDA

Andres Hunger CSS DESIGN AWARDS

CSS DESIGN AWARDS Andres Hunger

Grazie a tutto il team CSSDA per il servizio che offrono.
La creatività ha bisognio di energia e di essere ricaricata,
mettersi in una sana competizione ci corregge, migliorando giorno per giorno.
Alla prossima avventura ;-)

Andres Hunger CSS DESIGN AWARDS

Andres Hunger CSS DESIGN AWARDS

undefined

Thanks to the whole CSSDA team for the service they offer.
Creativity needs energy and being recharged, putting ourselves in a healthy competition corrects us, improving day by day.
At the next adventure ;-)

andres hunger css design awards

Sviluppo del progetto:

  • Logo designe
  • php developer
  • SEO strategy
  • Cyber security

Altre Premiazioni Internazionali -

 

彼らが提供するサービスのCSSDAチーム全体に感謝します。
創造性はエネルギーを必要とし、再充電され、健全な競争に身を置き、日々改善しています。
次の冒険で;-)

Nuovo algoritmo SEO Google 2018

undefined

Le nuove disposizioni dei Meta tags

Nel nuovo anno 2018 Google ha già apportato diversi aggiornamenti al suo algoritmo e alle sue pagine dei risultati di ricerca - inclusi i meta tag.


Tra questi aggiornamenti vi sono le ricerche vocali e localizzate, che stanno cambiando il modo in cui viene implementata la SEO.
Google si aggiorna costantemente. Questo significa che la SEO si sta evolvendo, come sempre.

Nessuno sa per certo come si evolveranno esattamente i cambiamenti futuri, ma sappiamo che l'infrastruttura del sito web deve essere costruita correttamente.

Alcuni degli elementi più importanti del SEO sono i meta tag di un sito web.
Tecnicamente, molti elementi di una pagina web sono "meta tag": tag HTML che di solito non sono visibili alla maggior parte dei visitatori e che sono molto importanti per i robot dei motori di ricerca.

I tag su cui mi concentrerò in questo articolo sono i tag Meta Title e Meta Description, con alcune parole riguardanti le intestazioni e il tag meta Keywords ormai obsoleto.

I meta tag sono ciò che fa risaltare il tuo sito nei risultati di ricerca o, in alcuni casi, fa l'esatto opposto. Il meta titolo ideale aumenta l'attenzione degli utenti, e la meta description stuzzica un utente abbastanza da farli entrare nel sito.

2018 potrebbe vedere alcune ricerche più specifiche e personalizzate, ma al momento non è possibile creare meta tag specifici per ogni query mai posta (anche con l'aumento dell'IA).

Ecco una lista di controllo con gli elementi più importanti che un Meta Title dovrebbe includere:

1. GRAMMAR
Negli anni precedenti, i KW sarebbero stati i primi in questa lista, ma con l'algoritmo intelligente di Google in continua evoluzione, gli utenti non hanno bisogno di KW ingoiati, ma piuttosto di informazioni rilevanti che rispondono alle loro esigenze
L'attenzione di Google è sull'intento dell'utente e su UX , non su riempimento KW: mantenere il titolo grammaticalmente corretto
Il tuo sito si classificherà bene finché trasmetti un buon messaggio.


2. KW
Dopo aver fatto una ricerca KW ben pianificata , considera il KW più rilevante da attuare nel titolo; quel termine di ricerca dovrebbe essere usato il più vicino possibile all'inizio del titolo
o Il posizionamento errato di un semplice KW può portare a una diminuzione delle classifiche, o mantenere una pagina risalente.


3. BREVE E AL PUNTO
La lunghezza deve essere di circa 55-70 caratteri
Tieni presente che quel numero è solo una stima. Il motivo: Google taglia titoli che sono più lunghi di 600 pixel . Ciò significa che la lunghezza visiva di un titolo nei risultati di ricerca è più importante del numero effettivo di caratteri. Le cifre e le lettere strette occupano meno spazio di quelle ampie, ad esempio "1", "t" e "I", rispetto a "7", "M" e "W".


o SEOMofo ha pubblicato un caso di studio molto interessante su questo argomento qualche tempo fa, che è ancora rilevante (il sito Web aggiorna anche i test) e si è rivelato un risultato molto interessante: un meta titolo di 107 caratteri che viene mostrato in SERP (!)


4. NESSUNA PROMO
Rendilo NATURALE ! Nessuno stile promozionale per pagine informative indirizzate al traffico organico - altrimenti, Google lo considererà come spam e, molto probabilmente, con buone ragioni.


Tenete presente l'intento dei vostri visitatori e il vostro sito funzionerà meglio - non tutti i KW valgono questo immobile, e se gli utenti non troveranno quello che stanno cercando una volta sul vostro sito, lasceranno.


5. UNICITÀ
Proprio come i contenuti duplicati su una pagina, Google non è un fan dei titoli duplicati (e delle descrizioni, se è per questo) e verrà mostrato nelle prestazioni del tuo sito - assicurati che ogni pagina abbia il suo titolo unico.

INFO TAB
Un'altra cosa da tenere a mente è che il meta titolo apparirà nella scheda aperta quando si sfoglia una pagina.
Questo serve come elemento informativo per aiutare UX e la navigazione dell'utente.
Idealmente, vorrai che tutte le informazioni rilevanti siano mostrate il più possibile evidenti.

Come accennato in precedenza, il meta titolo ha molta influenza sulle classifiche di una pagina e sul suo CTR, e potrebbe benissimo essere il meta tag più forte nel 2018, ma non è affatto l'unico.

INSERISCI LA META DESCRIPTION

La meta description è, letteralmente, una descrizione di una pagina. Si trova appena sotto il meta titolo nei risultati di ricerca, e non può essere visto da un visitatore una volta che entrano nel sito. In passato, sembrava avere più potere in termini di classifiche di una pagina, in modo simile al meta titolo, ma in questo giorno ed età, dopo aver attraversato molti aggiornamenti e cambiamenti, il suo scopo è cambiato.

Il suo attuale obiettivo principale è quello di dire all'utente di che cosa tratta una pagina (un teaser o un blurb, di sorta), e di farlo in modo seducente. Questo è il motivo per cui la meta description è così importante: è uno dei principali fattori che aiutano il CTR di una pagina.

Ecco le ultime best practice e notizie sulle meta descrizioni:

1. META DESCRIZIONE LUNGHEZZA - AGGIORNAMENTI!
Solo fino a diversi giorni fa, la lunghezza raccomandata per una meta description era di circa 155-160 caratteri, come suggerito dai professionisti SEO di MOZ.

Negli ultimi giorni, Danny Sullivan stesso (da una delle divisioni di ricerca di Google) ha ammesso che le descrizioni sono ora più lunghe - il consenso generale online è che la lunghezza è attualmente di circa 230 caratteri. Questa è la risposta di Sullivan a Barry Schwartz di Search Engine Land su Twitter:
La risposta di Danny Sullivan a Search Engine Land su TwitterRisultati diversi mostrano lunghezze diverse e alcuni siti presentano anche descrizioni di oltre 300 (!) Caratteri

2. KW
Sì, dovresti includere anche il tuo KW nella meta description - è importante! Questo serve come un altro modo per dire agli utenti che hanno trovato le informazioni che stavano cercando - e ovviamente più informativo del meta title, badate bene:
meta description keywords

Non esagerare con il KW, tuttavia - il suo ricorrere nella descrizione non lo rinforza necessariamente; infatti, farlo potrebbe finire per fare il contrario.


3. FARE CLIC SU
Ricorda: lo scopo principale della meta descrizione è quello di aumentare l'interesse dell'utente, rimanendo comunque pertinenti ai contenuti della pagina.
Fai il conteggio delle copie - racconta ai visitatori di cosa tratta la pagina, senza rivelare immediatamente tutti i tuoi segreti.
Pensa a qualcosa che sia facile da leggere e avvincente.

4. UNICITÀ
Esattamente come Titoli Meta: dai a ciascuna pagina una descrizione fatta su misura per questo.

INTESTAZIONI

Non possono essere generalmente definiti "meta tag", ma le intestazioni (spesso definite anche "titoli" o più comunemente indirizzate come "titoli" confusi) sono quasi importanti quanto i meta-titoli e le descrizioni. Tag di intestazione, codificati in numeri, dimensioni e importanza a partire da 1 in poi (il tag <h1> è l'intestazione più grande e più importante, <h2> il secondo e così via), sono effettivamente visibili su una pagina quando un l'utente entra nel sito e non nei risultati di ricerca, al contrario di titoli e descrizioni.

In effetti, sono abbastanza importanti da essere i titoli principali di una pagina - tanto è vero che è la migliore pratica SEO per assicurarsi che la tua pagina abbia un'intestazione H1 (il tuo titolo principale) il più in alto possibile sulla tua pagina, e diversi Intestazioni H2 da seguire.

META KW
Il meta tag di KWs è uno di quelli che io stesso ho usato parecchio in passato e che, come detto sopra, è diventato obsoleto.
L'idea alla base di questo tag era piuttosto diretta e di base: utilizza le parole chiave per le quali desideri classificare e Google le terrà in considerazione nel suo algoritmo.

Tuttavia, molti webmaster hanno abusato di questo tag per posizionarsi il più in alto possibile (puoi biasimarli?), Il che ha portato a un altro aggiornamento di Google, un algoritmo più intelligente, che alla fine ignorava del tutto questo tag.

C'è ancora qualche discussione riguardo questo tag e se ha o meno alcun tipo di effetto su una pagina.
La nostra raccomandazione è di rimuovere completamente i meta KW, ovunque essi compaiano.

Riteniamo che potrebbero essere considerati un fattore di spam negli occhi di Google (sappiamo che è in Bing ).

Inoltre, i meta KW consentono ai tuoi concorrenti di capire ancora meglio quali KW stai bersagliando e su quali pagine...

 

Fonte

Activate WordPress Maintenance Mode

Maintenance Mode no plugin

Maintenance Mode no plugin

Come aggiungere la funzionalità di Maintenance nel vostro WP ovvero sito in manutenzione.
Possiamo sia installare vari plugin, oppure inserire questa funzione all'interno del nostro file function.php:

/*************************
// Activate WordPress Maintenance Mode
function wp_maintenance_mode(){
if(!current_user_can('edit_themes') || !is_user_logged_in()){
wp_die('<h1 style="color:red">Website under Maintenance</h1><br />We are performing scheduled maintenance. We will be back online shortly!');
}
}
add_action('get_header', 'wp_maintenance_mode');
//***************************

Grazie a RoBerto Briceño per lo script ;-)

Animated SVG Slideshow Frame

Animated SVG Frame Slideshow

SVG animato durante lo Slide by Sencha

Questa demo è stata realizzata da Sencha (crea applicazioni web e mobile // Sencha Extjs.)

Una presentazione sperimentale che mostra un frame SVG animato durante la transizione dello Slide.
Possono essere utilizzate diverse forme per creare una varietà di stili creativi e molto emozionanti.

L'idea è di animare un frame SVG mentre passiamo da uno slide ad un altro.
Usando diverse forme possiamo creare una varietà di stili e di frame trasformando l'SVG.

Una delle cose molto importanti per usare bene questo plugin ehavere il Browser aggiornato visto sono stati usati delle nuove proprietà CSS moderne come CSS Flexbox e variabili varie.

Qui Trovate la Demo live
Qui Trovate il Download Source

Qui stiamo animando una semplice forma a scatola:

Animated SVG Frame Slideshow

In questa demo è stato usato un modello per il riempimento a forma di rettangolo leggermente inclinato.
Il pattern è tratto da Hero Patterns:

Animated SVG Frame Slideshow

In questo esempio possiamo usare qualsiasi tipo di forma, anche molto piccola.
Nota come i titoli sopra l'SVG in questa demo:

undefined

 

Non resta che testare e ancora una volta ringraziere Shota e Codrops! Grazie! Thank you! 感謝

Firebug Goodbye

Firebug Goodbye 2017

Addio Firebug

Gli sviluppatori di Firebug abbandonano il supporto per l'estensione più famosa dagli sviluppatori e web designer.
Già dal 2016 si era intuito che sarebbe stato il declino inevitabile, implementando
Firefox Developer Tool.
Ma la vera rottura si avverte ora con gli aggiornamenti di Fire Fox che non rende più compatibile la bellissima e amata estensione Fire Bug.

Ovviamente tutto ha un lieto fine, Fire Fox implementa un secondo Browser Firefox Developer Edition ultra veloce con funzioni all'avanguardia per lo sviluppo web e nello supporto delle ultime tecnologie come le griglie CSS.

Browser Firefox Developer Edition I nuovi strumenti di sviluppo di Firefox sono molto avanzati, flessibili e, soprattutto, ai tuoi ordini. Tra gli altri, il miglior debugger JavaScript in circolazione, realizzato utilizzando le librerie React ed Redux, in grado di gestire più browser contemporaneamente.



undefined

 

Questo strumento è molto valido, già testato da un mese.
Ottimo browser molto veloce e le funzioni di sviluppo sono ben articolate e funzionali, certo ci si deve un po abituare che il buon vecchio FireBug non ce più... ma come sappiamo nulla è eterno.


Scarica la versione di Firefox dedicata agli sviluppatori

 

Marketing Conference

Marketing Conference

TRASFORMIAMO IL MARKETING IN PURA ENERGIA

Marketing Conference  MailUp

12 dicembre 2017 / 8.30 - 18.00

Palazzo Mezzanotte Piazza degli Affari, 20123 Milano
La storica sede della Borsa di Milano, in Piazza Affari: un luogo iconico, facile da raggiungere e impossibile da dimenticare.

Speaker italiani e internazionali, approfondimenti di scenario, casi studio. Analizziamo trend, dati e strategie per capire dai protagonisti il presente e il futuro del Marketing.

Vedi tutto nel sito istituzionale

 

 MailUp

 

CSS winner Andres Hunger
CSSRELL Andres Hunger
BESTcss Andres Hunger