• Articles
• admin

Come lanciamo progetti più recenti, è facile dimenticare l’aggiornamento vecchi blog e siti web. In questo articolo voglio presentare 30 idee solide è possibile implementare rapidamente per rendere il vostro sito web solo che molto più user-friendly. Non tutti sono basati esclusivamente sul design front-end. Discuterò anche le popolari tecniche di codifica HTML5 che possono aiutare i web parser e gli spider a classificare i tuoi dati in modo appropriato.

Non tutti i siti web dovranno essere aggiornati e non con tutte le tecniche disponibili in questo post. Queste idee sono qui per convincere gli sviluppatori a pensare in termini di design e come rendere i siti web più belli. Ora è più facile che mai creare layout di siti Web responsive scalabili che abbiano un bell’aspetto su qualsiasi schermo digitale, quindi andiamo a perfezionare i nostri siti.

1. UX Testing

Sono colpevole di non eseguire sempre test sui lanci del mio sito web, ma quando possibile questa è una delle mie attività preferite. Puoi imparare così tanto sulle interazioni tipiche degli utenti studiando come giocano con il tuo sito web. Gli studi sull’esperienza utente possono essere condotti esclusivamente tramite strumenti come Google Analytics o utilizzando altre risorse di terze parti.

I potenziali benefici che si possono trovare sono enormi. Il test dell’esperienza utente è utile per gli sviluppatori Web per imparare quali aree del loro sito Web sono fastidiose, rotte o potrebbero essere migliorate. Considera di utilizzare non solo strumenti digitali ma anche i tuoi amici e colleghi. L’ascolto di un feedback umano reale sul tuo sito Web può fornire risultati che non è possibile ottenere attraverso lo schermo di un computer.

2. Spazi bianchi

Possiamo pensare agli spazi bianchi come alla quantità di spazio tra gli elementi nella tua pagina. Ad alcuni utenti non dispiacerà un layout angusto se sono già abituati a questo. Ma considera il tuo pubblico di destinazione e considera quanti di loro non sono alfabetizzati al computer come le nuove generazioni.

È possibile determinare le aree che necessitano di spaziatura extra attraverso split A / B Test e mantenendo il feedback degli utenti. O semplicemente ala e vedere che cosa si può venire con!

3. Font Web

I font Web dinamici consentono ai progettisti di creare pagine Web senza essere limitati alle famiglie di font tipiche. Questa tendenza è diventata sempre più popolare ora che la maggior parte degli utenti medi di Internet sono su una connessione DSL/T1/fibra ottica decente. Compresi i riferimenti ai fogli di stile dei font 3rd party non produrranno più ritardi importanti nelle velocità DL.

Molto probabilmente il miglior fornitore di font è attraverso Google Webfonts. È possibile accedere all’applicazione anche se non si dispone di un account Google, anche se ci sono vantaggi per la registrazione. Il processo di installazione completa richiede solo 3 passaggi e puoi avere font Google personalizzati in esecuzione sul tuo sito Web in pochi minuti.

4. CSS3 Shadows

Quando sto parlando di usare le ombre per migliorare il tuo layout, in realtà sto facendo riferimento a due proprietà distinte. Il sempre popolare box-ombra è davvero cool per div e scatole all’interno del layout. Aggiungendo questo effetto sul vostro contenitore, involucro, o scatole pagina interna fornirà un effetto dimagrante 3-D alla tua pagina web.

Ma vale anche la pena considerare la proprietà CSS3 text-shadow per la tipografia che salta fuori dalla pagina. Apple è una delle prime aziende a implementare pesantemente le ombre di testo in tutto il loro layout. È possibile creare un effetto scoraggiante aggiungendo ombre di testo opposte al colore dei font (ombre bianche per il testo scuro, ombre nere per il testo chiaro).

5. Textures & Ripetendo modelli

Ci sono un sacco di siti web che possono ottenere semplicemente utilizzando combinazioni di colori standard. Ma per avere il tuo sito web davvero distinguersi dalla folla si può considerare l’aggiunta di texture e ripetendo piastrelle in background. Una delle webapp gratuite più cool è Noise Texture Generator che può essere eseguita su qualsiasi browser.

Basta scegliere il colore BG e la quantità di rumore che si desidera utilizzare, allora questa applicazione creerà un’immagine di sfondo piastrellata in modo dinamico. Se stai cercando modelli e piastrelle, ti consiglio Modelli sottili. Hanno una vasta collezione di texture utilizzabili che è possibile scaricare gratuitamente.

6. CSS3 Gradient Backgrounds

Mentre stiamo discutendo gli sfondi, dovrei far apparire i gradienti CSS3 sempre più popolari. Questi forniscono agli sviluppatori web un enorme vantaggio tenendoli fuori di Adobe Photoshop per sfondi web. E questi gradienti possono funzionare su più di un semplice corpo, applicato su barre di navigazione e piè di pagina e altre aree importanti nel layout.

7. Boostrap

Bootstrap di Twitter è probabilmente il più grande framework di interfaccia utente frontend per gli sviluppatori web. Ciò include pulsanti, input di moduli, collegamenti, colonne e tonnellate di altri oggetti di pagina preformattati. L’uso più comune per Bootstrap è all’interno di pagine di destinazione per le nuove applicazioni.

Ma gli sviluppatori open source utilizzano anche Bootstrap quando creano pagine demo per le librerie, i plugin o i mini script che pubblicano.

Sento che Bootstrap è cresciuto in misura così massiccia che può essere applicato in qualsiasi sito web in questi giorni. Tuttavia, gli sviluppatori che trovano il massimo vantaggio utilizzano Bootstrap come sostituzione rapida per implementare i propri progetti di interfaccia utente. Considera questa libreria frontend la prossima volta che avvii una pagina Web con un unico scopo concreto: pagina di destinazione, demo del prodotto, sito Web dell’app mobile, ecc.

Correlati:

• Per iniziare con Twitter Bootstrap
• Bootstrap 201: Modal Window Plugin

8. HTML5 Kickstart

La maggior parte degli sviluppatori web non hanno ancora sentito parlare di HTML5 Kickstart creato da 99Lime. Questa è un’altra libreria UI frontend che si concentra più sull’estetica del design piacevole rispetto ai comuni layout HTML5. Ma ci sono esempi di codice per generare entrambi in picche. È possibile scegliere tra set di elementi predeterminati come pulsanti gradiente e menu a discesa. Non direi che questo ha la stessa popolarità di Bootstrap, ma poi di nuovo cosa fa?

Se avete il tempo e la pazienza vorrei raccomandare solo dando questa libreria una rapida esecuzione di test. Costruisci un piccolo layout sandbox e vedi se ti piace la sensazione predefinita di ogni elemento dell’interfaccia utente. Kickstart non è certamente per ogni progetto, ma può essere un importante risparmio di tempo quando preso in un vicolo cieco.

9. jQuery UI

Animazioni e cursori e elementi di dissolvenza sono di solito in esecuzione fuori dalla libreria jQuery. Questa è la libreria JavaScript open source più comune per gli sviluppatori frontend, ma ha anche una libreria compagna jQuery UI. Gli sviluppatori trascurano questo, pensando che non possa fornire molto in cambio del KB extra.

Ma includere la libreria UI significa che è possibile aggiornare la chiamata easing per qualsiasi animazione di pagina dinamica. Ciò significa che è possibile personalizzare il tipo di animazione jQuery per qualsiasi menu a discesa, elementi dissolvenza, presentazioni a scorrimento, e tutto il resto dinamico.

Il sito web di jQueryUI ha una pagina demo di easing in cui puoi testare le molte varianti e vedere se ti piacciono i tipi di animazione specifici.

Correlati:

• Come stile jQuery UI Fisarmonica
• Regolatore di volume con jQuery UI Slider
• Personalizzazione e tematizzazione jQuery UI Datepicker
• Drag and Drop con jQuery UI Ordinabile

10. Stravagante BG Foto

Ci sono innumerevoli siti web al giorno d’oggi che hanno utilizzato l’effetto immagine di sfondo a schermo intero. Se riesci a trovare un campione di foto ad alta risoluzione che starebbe bene come immagine di sfondo, allora questa tecnica potrebbe valere la pena aggiungere al tuo layout. Grandi sfondi fare un ottimo lavoro di catturare l’attenzione dell’utente, mentre anche implicando il genere del tuo sito web.

Se siete alla ricerca di una soluzione rapida controllare il plugin jQuery Backstretch. Ciò richiede solo una singola riga di codice per i nuovi sfondi per scalare correttamente e responsivamente utilizzando qualsiasi risoluzione. Ma per gli sviluppatori che sono contrari ai metodi JavaScript, raccomando la tecnica di immagine a pagina intera CSS3 pubblicata su CSS-Tricks.

11. Icone del menu

Per attirare più attenzione dai visitatori potrebbe essere utile includere una piccola icona nella tua pagina web. I collegamenti di menu standard sono spesso sufficienti per funzionare correttamente e aiutare gli utenti a navigare tra le pagine.

Tuttavia sono spesso impressionato nel vedere icone personalizzate progettate per ogni collegamento al menu. Puoi trovare tonnellate di set di icone gratuiti che sarebbero perfetti nella tua area di navigazione, barra laterale o piè di pagina.

12. Combinazione di colori aggiornata

In realtà non intendo cambiare il design generale della combinazione di colori, ma più come aggiungere nuovi colori. Dopo aver eseguito lo stesso layout per mesi dopo mesi è bello aggiornare aree più piccole e catturare i visitatori ripetuti di sorpresa.

Alcuni elementi di interesse possono includere collegamenti di ancoraggio, intestazioni, sfondi e barre degli strumenti. Considera l’utilizzo di strumenti online come il designer di combinazioni di colori per migliorare la tua traiettoria.

13. Enhanced Browser Support

E ‘ difficile costruire un sito web che è pienamente supportato da tutti i principali browser legacy. Anche se pochissime persone sono in esecuzione Internet Explorer 6 si presenta ancora in alcuni dei miei rapporti di Google Analytics. Gli sviluppatori che sono alla ricerca di idee possono considerare di fare una piccola prova di test del browser.

I browser mainstream più importanti includono l’ultima versione di IE9, Mozilla Firefox, Opera, Chrome, Safari e possibilmente Camino/SeaMonkey. Ma Internet Explorer 6-8 sono anche ancora ampiamente utilizzati tra le imprese e laboratori informatici più anziani. È possibile eseguire test di rendering rapidi utilizzando il software Iester. Allo stesso modo IE8 ha una modalità strumento sviluppatori in cui è possibile passare a motori di rendering più vecchi per il debug.

14. Tipografia montata

Potresti scoprire che i tuoi vecchi layout utilizzano ancora gli stili di testo in modo efficiente, ma questo non è sempre il caso. Sento che la grande tipografia si adatta molto più facilmente ai layout. Per non parlare che è più facile da leggere e occuperà più spazio su risoluzioni dello schermo più grandi.

L’idea di “tipografia montata” è lo styling del testo in modo che si adatti perfettamente al tuo sito web. Puoi passare attraverso alcune pagine e aggiornare questi stili in 10-15 minuti.

15. Condivisione dei social media

Ormai sono sicuro che la maggior parte degli sviluppatori abbia familiarità con i badge di condivisione utilizzati nei popolari siti di social networking. Facebook, Twitter, Reddit, Pinterest, Dzone e molte altre reti esterne forniscono codici che puoi incorporare nel tuo sito web. Quindi i visitatori possono condividere il tuo link su queste reti senza dover lasciare il tuo sito web.

Su alcuni blog o riviste web noterai che questi badge ti seguiranno scorrendo la pagina. Questa è una tecnica eccellente dal momento che spesso è possibile farli librarsi appena fuori dall’area del corpo dove non bloccano alcun contenuto importante. Raccomando anche di sfogliare il nostro post sulle barre degli strumenti dei social media che possono avere un effetto simile.

16. Discussione utente

Se si esegue un CMS come WordPress o Drupal, si ha la possibilità di includere moduli di commento per impostazione predefinita. Tuttavia, quando si creano pagine Web statiche, è necessario configurare il proprio sistema di database per imitare questa funzionalità. Ma con l’aumento della tecnologia open source gli sviluppatori possono ora implementare soluzioni migliori come Disqus.

Utilizzando questo metodo non si ha a che fare costantemente con la pulizia di spam e spazzatura dall’area di discussione. Gli utenti che non hanno già un account Disqus possono connettersi rapidamente utilizzando i profili di social networking popolari, o iscriversi direttamente dalla tua pagina. Anche gli utenti di WordPress che sono malati di Akismet possono passare utilizzando il plugin Disqus Comment System.

17. Allargare l’area Piè di pagina

La maggior parte dei layout di siti Web più piccoli sarà molto conservativa con la sezione piè di pagina inferiore. Questo può includere alcune informazioni di base sul copyright e alcuni link alla pagina principale. Ma le moderne tendenze di web design supportano l’idea di grandi piè di pagina con un sacco di meta link.

Questi sono comunemente visti nelle startup e nei siti Web delle grandi aziende con molte informazioni aggiuntive. Certamente non provare a forzare questo in un layout in cui non appartiene, tuttavia vale la pena contemplare se l’apertura di un’area piè di pagina più grande può migliorare la tua esperienza sul sito web.

18. Responsify Images

Dynamic fluid and responsive webpage images have become a trend in themselves. Ora è quasi ridicolo avere ancora le immagini impostate a larghezze fisse, uscendo dall’involucro del contenitore mentre le finestre vengono ridimensionate. La tecnica più comune è applicare width: 100% usando CSS su tutti gli elementi img.

Ma si può anche prendere in considerazione alcuni altri metodi open source che possono rivelarsi utili in un bind. ResponsiveImg è uno di questi plugin jQuery con una dimensione del file molto piccola. Basta includere questo nella tua pagina ed eseguire il codice a riga singola che mira a tutte le immagini sulla pagina. Questa è un’aggiunta eccellente ai layout mobili che utilizzano ancora contenuti basati su desktop.

19. Accessibilità del menu

Non direi che questo è qualcosa che dovresti costantemente cercare di aggiornare nei tuoi layout, ma è qualcosa che gli sviluppatori e i designer non ottengono bene la prima volta. Sento che vale la pena guardare indietro ai tuoi sistemi di navigazione e al brainstorming se ci sono modi migliori per implementare i collegamenti dei sottomenu.

Le barre laterali e le aree di contenuto spesso contengono menu a fisarmonica poiché c’è abbastanza spazio verticalmente. Ma pensa alle barre di navigazione orizzontali con menu a discesa o sottomenu scorrevoli. Fintanto che i collegamenti dei menu sono veloci e facili da accedere, non ci dovrebbero essere problemi tra la tua base di utenti.

20. Microformati semantici / Microdati

I microformati e le nuove specifiche Microdati vengono utilizzati per estendere i metadati all’interno del codice HTML. Questi attributi forniscono informazioni aggiuntive sui tuoi contenuti e su come si relazionano ad altri contenuti della pagina. E alla fine questi risultati aiutano Google a determinare il rango del tuo sito Web per singole parole chiave e all’interno di altri motori come la ricerca di immagini e video.

La versione documentata più supportata di Microdata è chiamata Schema.org. Il loro sito web fornisce tutte le informazioni necessarie per tornare indietro e modificare il contenuto HTML con il markup dello schema semantico. Questa sintassi dello schema è supportata e supportata da tutti i principali motori di ricerca e probabilmente si evolverà nel futuro della progettazione dei metadati semantici.

21. Riorganizzare i collegamenti Nav

Per alcuni siti Web, l’esecuzione su navigazione a contenuto fisso potrebbe non essere un problema reale. Ma ho trovato in alcuni siti Web o portafogli aziendali più grandi che alcuni collegamenti di navigazione hanno troppa precedenza. E allo stesso modo ci sono alcuni elementi che raramente possono essere trovati! Prendetevi il tempo per navigare il tuo sito web e si comportano come se foste qualsiasi altro visitatore.

Considera quali link ti interessano di più e possibilmente tutti i link che vorresti vedere aggiunti. Questi possono includere una breve cronologia del tuo sito web, informazioni sul team, dettagli di contatto, problemi di privacy, comunicati stampa, ecc. Può anche aiutare a raccogliere il feedback degli utenti e vedere se ci sono correlazioni tra i loro desideri e la domanda di pagine nuove o aggiornate.

22. Torna all’inizio Link

Se il tuo sito web pubblica pagine molto lunghe di contenuti, questo è un elemento indispensabile nel tuo layout. Lo scorrimento Torna all’inizio link possono essere trovati quasi ovunque in questi giorni. Gli utenti non pensano di premere il tasto Home e può essere fastidioso scorrere fino in fondo. La posizione migliore per questo link è fluttuante accanto al tuo contenitore, o seduto proprio nel piè di pagina come abbiamo implementato su Hongkiat.

23. Personalizza tag code/pre

Quando crei per la prima volta un foglio di stile del sito Web, molti sviluppatori trascureranno gli elementi tipici della pagina. Intestazioni e paragrafi sono molto comuni, ma per quanto riguarda i tag pre o i tag di codice in linea? Questi sono usati per incapsulare la sintassi del codice sorgente preformattato come si vedrebbe in un file di testo/NFO. Alcuni siti web non hanno bisogno di questi elementi, ma è ancora considerato una buona pratica per averli in stile per ogni evenienza.

24. Aggiunta di attributi Larghezza/altezza immagine

Ora questa attività potrebbe richiedere facilmente un po’, a seconda di quante immagini dovresti passare. Ma se trovi immagini nel tuo sito web senza una larghezza/altezza definita, potrebbe valere la pena aggiornarle.

In genere le immagini prive di questi attributi verranno visualizzate come un quadrato px 1×1 prima di caricarle per intero. Ciò farà sì che le pagine Web e la barra di scorrimento saltino man mano che vengono caricate nuove immagini. Anche in questo caso questo non sarà utile per tutti, ma vale la pena notare come un fissatore rapido in alcuni casi. E ci sono ancora tecniche CSS per le immagini reattive che utilizzano attributi fissi.

25. Notifiche JavaScript

Qualsiasi sviluppatore che ha lavorato in JavaScript conosce le tipiche finestre di dialogo. È possibile impostare una casella di avviso che offre all’utente un pulsante OK, solo la visualizzazione delle informazioni. Ma ci sono anche avvisi di conferma con pulsanti sì/no insieme alla casella di prompt che richiede l’input dell’utente.

Tutti questi possono essere personalizzati utilizzando alertify.js. Questa è una libreria open source molto piccola per progettare le tue caselle di avviso frontend. È molto veloce da configurare e facile da personalizzare se è necessario abbinare i propri stili CSS.

26. Responsive Media Query

Questo potrebbe non sembrare un po ‘ di codice da aggiungere, tuttavia in realtà non ci vuole molto tempo. Le query reattive possono essere aggiunte al foglio di stile esistente o aggiunte a un nuovo reattivo.documento css. In entrambi i casi è possibile impostare rapidamente stili ricorrenti per gestire varie dimensioni di visualizzazione da monitor, tablet e smartphone.

Le query responsive non sempre devono rispondere completamente al layout. A volte questi possono solo nascondere bit di contenuto, come la barra laterale allungata o piè di pagina più grande. È quindi possibile visualizzare un mini piè di pagina completamente reattivo che è originariamente nascosto nel layout del desktop. Puoi saperne di più sulle query multimediali nella nostra raccolta di tutorial Web reattivi.

27. Link di affiliazione

Ci saranno sempre siti web simili contenuti di costruzione online relativi al tuo campo. Molto raramente vengono create nuove idee; la maggior parte di esse sono propaggini e parodie da contenuti esistenti. Ma invece di trasformare il web in una competizione perché non creare un’atmosfera amichevole? Se hai lo spazio extra nel tuo layout invia alcune e-mail a siti Web correlati nella tua nicchia (cerca Google) chiedendo di affiliarti.

È possibile scambiare link e contribuire a portare ogni altro traffico. Questo apre le porte per i nuovi utenti di trovare il tuo sito web molto più veloce, e per vedere che si sono inclusi all’interno della comunità di altri siti web pure. Inoltre, ottenere collegamenti a ritroso da siti Web con autorità in Google può solo aiutare la credibilità del tuo dominio.

28. Font basati su icone

Recentemente stavo leggendo un articolo su 24ways che ha discusso i font delle icone e gli attributi dei dati. Questo mi ha fatto pensare al futuro del web design e a come HTML/CSS abbia influenzato drammaticamente la codifica frontend. I font basati su icone sono perfetti per una serie di motivi, tra cui menu di navigazione, elenchi ordinati/non ordinati e persino contenuti di base della pagina.

Molti di questi font possono essere aggiunti rapidamente al tuo sito web utilizzando @font-face. Ciò significa che non è necessario fare affidamento su un servizio di terze parti come Typekit per ospitare i font. Significa anche uno stile di design più semantico piuttosto che usare solo icone PNG.

29. Image Box Shadows

Se vuoi mantenere i visitatori sulla tua pagina più a lungo, devi offrire contenuti di qualità reale. Questo potrebbe già essere il caso per il tuo sito web, tuttavia se i tuoi stili sono blandi, le persone guarderanno altrove. L’atmosfera e l’estetica sono enormi nel buon web design.

Consiglio di creare una classe quick image che avvolga un bordo attorno alle immagini della pagina. Questo può includere una piccola ombra scatola insieme a bordi e imbottitura, troppo. Qualsiasi cosa per aiutare le immagini saltare fuori dallo schermo e si distinguono nei paragrafi di testo.

30. Fogli di stile alternativi

Considera tutti i vari stili multimediali che devi includere quando costruisci un singolo layout di sito web. Questo avrebbe dovuto guardare bene su monitor desktop, computer portatili, tablet e forse anche smartphone. E non dimenticate di proiezione e supporti di stampa, che non è sempre supportato.

Se hai un vasto pubblico che usa questi oscuri tipi di media, ti consiglio di disegnare i tuoi fogli di stile alternativi. Questi possono essere etichettati in base al tipo di supporto come la stampa.css, o aggiunto nei fogli di stile esistenti. Se c’è abbastanza domanda, i tuoi visitatori saranno eternamente grati. E onestamente non ci vuole un sacco di tempo per modificare il layout del sito web predefinito per le stampanti comuni.

Considerazioni finali

I designer creativi e soprattutto gli sviluppatori web di frontend troveranno, si spera, alcune tecniche utili tra questa lista. La maggior parte di queste idee non dovrebbe richiedere più di 1-2 ore per l’implementazione, mentre molte possono essere realizzate in soli 15-30 minuti.

Rivalutare il layout del tuo sito Web e aggiornarlo di volta in volta con le nuove tendenze è spesso una buona idea, specialmente con le versioni più recenti delle proprietà CSS3 che consentono ombre, animazioni e angoli arrotondati nativi del browser. Questa è un’eccellente raccolta di idee che vale la pena dare un’occhiata se hai bisogno di alcuni aggiornamenti rapidi.

Inoltre, se hai domande o idee sull’articolo, sentiti libero di condividere con noi nell’area di discussione post.