Come imparare il web design dai tuoi errori

Il web non è costituito da un unico framework monolitico. È molto più difficile imparare tutti i pezzi che compongono tutto ciò che vediamo su Internet a causa della sua modularità.

Chiunque è destinato a commettere errori che rallentano i tempi di sviluppo, il tuo programma o introducono bug nel tuo programma. Non solo, ma alcuni tipi di errori ti mettono in svantaggio quando stai cercando un lavoro.

Esistono buone pratiche per garantire che si verifichino il minor numero possibile di problemi durante la progettazione del sito Web o l'avvio in produzione. Ecco i cinque errori più comuni commessi dagli sviluppatori web junior e come evitarli.

Affidarsi eccessivamente a jQuery

jQuery è di gran lunga il framework JavaScript più popolare al mondo. Adottarlo nel tuo progetto non appena lo hai creato può sembrare allettante, ma non avere tanta fretta.

Sebbene jQuery fornisca molti metodi convenienti per accelerare lo sviluppo web, è importante non usarlo troppo. I nuovi sviluppatori web commettono quasi sempre l'errore di comprendere i metodi API di jQuery piuttosto che come funzionano sotto.

Molti datori di lavoro considerano jQuery una responsabilità piuttosto che un piacevole da avere perché alcuni sviluppatori non riescono a capire come funziona JavaScript del tutto.

Non c'è niente di sbagliato nell'usare jQuery. Se puoi, abituati a usare i metodi JavaScript da solo. Affidati a jQuery solo per metodi di convenienza che altrimenti richiederebbero del tempo per essere implementati.

Affidarsi eccessivamente ai framework CSS

Framework CSS come Semantic UI e Bootstrap possono far risparmiare molto tempo. Eliminano la necessità di uno stile manuale e incorporano un design reattivo all'interno della tua app.

Proprio come jQuery, tuttavia, è facile essere risucchiati nel ciclo di non scrivere mai il proprio codice CSS. Alla fine della giornata, il tuo sito apparirà generico e a metà. All'estremo delle cose, potrebbe anche sembrare una dozzina di altri siti Web che hanno avuto la tua stessa idea.

Se non sei un esperto nella scrittura di un codice CSS, avrai la possibilità di leggere i manuali, di trovare un mentore, che ti fornirà le informazioni di cui hai bisogno, come una guida alla ricerca scriverà un documento di ricerca per me e fornirà con un aiuto buono e qualitativo. Esistono diversi framework che potrebbero essere più intuitivi per la scrittura del codice.

Framework come Bootstrap esistono per semplificarti la vita . Per evitare un'eccessiva dipendenza, impara lo stile CSS da solo, impara come utilizzare i preprocessori per accelerare lo sviluppo e studia la teoria dei colori per sapere quali colori vanno insieme e quali no. Una volta compresi correttamente i concetti, potresti renderti conto che non hai nemmeno più bisogno dei framework.

Non avere uno strumento di ripristino

Non avere uno strumento di ripristino quando ne hai più bisogno può causare il crash del tuo sito Web e la sua possibile scomparsa. Ogni volta che apporti una modifica al tuo sito web, rischi che non vada bene. Per assicurarti di avere una rete di sicurezza in cui puoi cadere, pensa all'utilizzo di uno strumento di ripristino, come WP Reset.

WP Reset è la tua migliore soluzione quando sorgono problemi sul tuo sito web. Forse il problema è non riuscire ad accedere al tuo amministratore WP o l'incontro con la schermata bianca della morte. Qualunque cosa sia, WP Reset ti copre le spalle. È dotato di utili strumenti di pulizia che ti permetteranno di ripristinare il tuo sito web in modo rapido e semplice.

Inoltre, puoi usarlo per installare rapidamente eventuali plugin e temi o disabilitarli se sono difettosi. Inoltre, la funzione Snapshots di WP Reset acquisisce automaticamente un'istantanea del tuo sito Web prima di apportare qualsiasi modifica, consentendoti di recuperare quell'istantanea se le cose non vanno come previsto.

L'opzione più potente fornita da questo plugin è l'opzione Nuclear Reset, che ti consente di cancellare completamente l'installazione, rimuovere tutti i plugin, i temi e le voci del database. Tuttavia, usalo solo quando ne hai davvero bisogno.

Dimenticando di ottimizzare il tuo sito per la velocità

Un effetto dell'eccessivo affidamento su jQuery è la tendenza a cadere nell'abitudine degli anti-pattern. Quando il browser viene caricato per la prima volta, il codice JavaScript e CSS deve essere eseguito prima del caricamento della pagina, a seconda di dove si posizionano gli script.

Come puoi immaginare, avere troppi script rallenterà il tuo sito web. Avere classi CSS inutilizzate aumenterà la dimensione del pacchetto del tuo sito Web e allo stesso modo lo rallenterà.

Molto va nell'ottimizzazione della velocità. Per citare alcuni fattori: font, immagini, file JavaScript e CSS aggiuntivi e compressione dei file svolgono tutti il ​​loro ruolo. Una volta che li hai padroneggiati, esamina i bundler di pacchetti come Webpack e Rollup che possono rimuovere le classi CSS inutilizzate e i metodi JavaScript dai tuoi file.

Convalida dell'input incompleta

Alcune delle parti più importanti di qualsiasi sito Web che tu abbia mai creato sono i moduli. Poiché è l'unico modo in cui una persona può passare informazioni al tuo server, è sempre necessario eseguire alcuni controlli di integrità su di loro.

Alcuni dei vettori di attacco più comuni su Internet sono ancora attacchi XSS e SQL injection. L'errore che gli sviluppatori junior tendono a fare è avere solo la convalida dell'input sul frontend.

Tutta la convalida dell'input viene eseguita tramite JavaScript, che è banale da disabilitare. Detto questo, Kenneth Sytian di Sytian Web Developer Filippine consiglia di eseguire sempre la convalida dell'input sia sul backend che sul frontend. Inoltre, tutti i caratteri non alfanumerici dovrebbero essere sottoposti a escape per rendere impossibili gli attacchi di iniezione.

Ignorando l'importanza della SEO

Non è sufficiente creare bellissimi siti Web e spedirli. È altrettanto importante che le persone vedano e apprezzino i contenuti che offri. Il modo migliore per farlo è migliorare le tue conoscenze SEO e implementarle.

La SEO è un processo lungo e complicato che necessita di una ricerca costante per rimanere nel circuito delle regole del gioco in continua evoluzione. Con la sua portata arcuata, non dovrebbe essere respinto per essere fatto alla fine del processo di sviluppo.

Alcune pratiche, come avere sempre tag descrittivi "alt" sulle immagini, devono essere elaborate attivamente. Immagina di scansionare tutti i tuoi file per cercare alt e meta tag quando hai già finito con il progetto.

Non avere una favicon

È facile liquidare la favicon come non necessaria a causa di quanto sia banale da configurare, ma la sua esistenza è piuttosto importante. Sul Web moderno, è normale che gli utenti abbiano più schede aperte in modo da poterle visitare di nuovo in un secondo momento. Le favicon fungono da una sorta di segnalibro in modo che il tuo sito sia visibile a colpo d'occhio. La mancanza di uno può significare che gli utenti perdono interesse lungo il percorso.

Invece di crearne uno tu stesso in Photoshop, la pluripremiata designer UX Michelle Dipp consiglia di utilizzare strumenti di progettazione grafica gratuiti che puoi trovare online. Puoi persino trovarne uno che offre modelli di favicon in modo da poterne creare uno tuo senza problemi.

Ignorando il design reattivo

Il design reattivo è una delle cose più importanti che un sito web dovrebbe avere. La maggior parte del traffico su Internet proviene da dispositivi mobili. Non avere un sito che mostra contenuti diversi a seconda delle dimensioni dello schermo ti mette in notevole svantaggio. Ciò è particolarmente vero se i tuoi concorrenti offrono lo stesso.

Un modo per migliorare l'esperienza dell'utente è implementare elementi permanenti sul tuo sito web. Gli elementi permanenti sono quelli che rimangono fissi sulla pagina mentre l'utente sta navigando. Quando gli elementi sono fissi, è più facile accedervi e sai che sono sempre in un posto, il che è essenziale quando sei su un telefono cellulare.

Detto questo, WP Sticky è il plugin perfetto che puoi usare per creare i tuoi elementi appiccicosi. WP Sticky ti consente di rendere appiccicosi tutti gli elementi che desideri, senza scrivere una sola riga di codice; devi solo scegliere il tuo elemento direttamente dallo schermo.

Con WP Sticky, puoi rendere appiccicosi menu, intestazione, piè di pagina e molto altro. Inoltre, puoi regolare la posizione e l'opacità dell'elemento e aggiungerlo o rimuoverlo da un post specifico.

Inoltre, è uno dei fattori che Google tiene in considerazione quando classifica le pagine. Se la tua pagina non è reattiva sui dispositivi mobili, probabilmente riceverai alcune email dalla console del webmaster che ti avvertono di aggiornare il tuo sito.

Conclusione

Una corretta progettazione web richiede tempo. Tempo per la ricerca, tempo per lavorare e ancora più tempo per abituarsi alle pratiche consigliate. Fare un errore durante il tempo di sviluppo non è la fine del mondo. Invece, prendi tutte le battute d'arresto che incontri come un'esperienza di apprendimento. Migliora la tua conoscenza e l'applicazione del corretto web design utilizzandoli.

–

SULL'AUTORE

Becky Holton è giornalista e blogger di Bestdissertation.com, il miglior servizio di saggistica. È interessata alle tecnologie dell'istruzione, alla scrittura esperta ed è sempre pronta a supportare il discorso informativo presso AustralianWritings. Seguila su Twitter.