Sviluppo mobile Gli sviluppatori mobili creano applicazioni per dispositivi mobili come smartphone o tablet. Le app mobili funzionano in modo molto diverso rispetto ad altri siti Web e programmi software e richiedono quindi competenze di sviluppo separate e conoscenza di linguaggi di programmazione speciali. Sviluppo di giochi Gli sviluppatori di giochi sono specializzati nella scrittura di codice per videogiochi, inclusi giochi per console (Xbox, PlayStation, ecc.), giochi per PC e giochi per dispositivi mobili, il che significa che questa specialità si sovrappone in qualche modo allo sviluppo per dispositivi mobili. Sviluppo integrato Gli sviluppatori integrati lavorano con qualsiasi hardware che non sia un computer (o almeno quello che la maggior parte di noi considera un "computer", con tastiera e schermo). Ciò include interfacce elettroniche, dispositivi di consumo, dispositivi IoT, sistemi in tempo reale e altro ancora. Con il recente aumento dei dispositivi connessi, come si vede nei dispositivi intelligenti, nelle tecnologie Bluetooth e negli assistenti virtuali, lo sviluppo integrato sta diventando una pratica molto richiesta.
Sviluppo della sicurezza Gli sviluppatori della sicurezza determinano metodi e procedure per proteggere un programma software o un sito web. Questi sviluppatori in genere lavorano come hacker etici e tentano di “rompere” i siti Web per esporre le vulnerabilità senza l’intenzione di causare danni. Costruiscono inoltre sistemi che rilevano ed eliminano i rischi per la sicurezza. Ora tuffiamoci nel processo di sviluppo web. Il processo di sviluppo del sito web Il processo di creazione di un sito web non è così semplice come 1-2. Ogni percorso di sviluppo è diverso a seconda della tipologia di sito web, dei linguaggi di programmazione e delle risorse. La sezione seguente serve come una breve panoramica del processo di sviluppo web e una breve introduzione ai linguaggi e alle opzioni CMS più comuni.
Fare un piano. Prima di mettere la penna sulla carta o le mani sulla tastiera, è importante entrare in contatto con i team e i dipendenti della tua organizzazione per sviluppare un piano per il tuo sito web. Ecco alcune domande da considerare prima di creare il design del tuo primo sito web: Qual è lo scopo del tuo sito web? Chi è il tuo pubblico e cosa vuoi che faccia sul tuo sito web? Che tipo di sito web stai costruendo? (ad es. informazioni di base, abbonamento, negozio online) Quali contenuti desideri pubblicare e in che misura? Qual è lo scopo di questo contenuto?
Come strutturi il tuo sito web per la migliore esperienza di navigazione? Qual è il tuo badget? Per rispondere alle domande, devi collaborare con i team di sviluppo web, marketing e finanza per determinare le tue priorità e prendere decisioni informate. Facile detto? È molto più semplice creare una tabella di marcia all'inizio del processo piuttosto che invertire i progressi di fronte a un ostacolo. Crea un wireframe. Ogni buon sito web inizia con un design. Gli sviluppatori lo chiamano wireframe. Non deve essere un documento ufficiale; È semplicemente una visione per il tuo sito web che offre a te e ai tuoi sviluppatori una direzione e un punto di partenza. Puoi disegnarlo su una lavagna o utilizzare uno strumento come Invision, Slickplan o Mindnode. Sviluppo di siti web: Wireframe I wireframe sono ausili puramente visivi che ti aiutano a capire dove sono posizionati testo e immagini sulle singole pagine web. Puoi utilizzare campi vuoti e “testo fittizio” per avere un’idea di come appariranno i tuoi contenuti sul frontend. Collabora con il tuo sviluppatore per creare wireframe in modo che possano farsi un'idea di ciò che hai in mente.
Crea una mappa del sito. Successivamente, è il momento di creare una mappa del sito (da non confondere con sitemap.XML, un file XML che aiuta i motori di ricerca a scansionare e trovare il tuo sito web). Proprio come un business plan fornisce a un potenziale investitore informazioni dettagliate sui tuoi obiettivi e risultati, una mappa del sito fornisce allo sviluppatore le informazioni di cui ha bisogno per realizzare la tua visione. Puoi creare tu stesso la mappa del sito o collaborare con i tuoi sviluppatori. Ecco alcune domande da porsi quando si pianifica il proprio sito web: quali singole pagine desideri? Quali contenuti saranno inclusi in queste pagine? Come puoi organizzare queste pagine in categorie? Qual è la gerarchia delle pagine sul tuo sito web? Come sono collegate tra loro le pagine?
Quali pagine e categorie sono essenziali per il tuo sito web e per l'esperienza utente? Quali pagine o categorie possono essere cancellate o combinate? Ancora una volta, è una buona idea consultare altri team della tua organizzazione. Se disponi di un team SEO e/o di strategia dei contenuti, il loro contributo è fondamentale per la struttura dei collegamenti e la categorizzazione delle tue pagine. Scrivi il codice del tuo sito web. Il passo successivo nel processo di sviluppo web è scrivere il codice. Gli sviluppatori utilizzeranno diversi linguaggi di programmazione per il front-end e il back-end dei siti Web, nonché per le diverse funzionalità del sito Web (come design, interattività, ecc.). Queste diverse lingue lavorano insieme per creare e gestire il tuo sito web. Cominciamo con le lingue più comunemente usate. HTML
L'HyperText Markup Language (HTML) è stato utilizzato dagli anni '90. È il fondamento di tutti i siti Web e rappresenta il minimo indispensabile di ciò che è richiesto per creare un sito Web. Sebbene sia possibile creare un sito Web utilizzando solo HTML, non sembra particolarmente attraente. Di seguito è riportato il codice HTML per un semplice pulsante Bootstrap. Cliccami Linguaggi come CSS e JavaScript migliorano e modificano la struttura di base del sito web creato con codici HTML. HTML5 è la versione più recente e supporta funzionalità del browser multipiattaforma, rendendolo popolare nello sviluppo di applicazioni mobili. CSS
I Cascading Style Sheets (CSS) sono stati sviluppati alla fine degli anni '90. Aggiunge elementi di design come tipografia, colori e layout ai siti Web per migliorare l'aspetto generale dei siti Web. I CSS consentono agli sviluppatori di trasformare il tuo sito Web in modo che corrisponda all'estetica che avevi immaginato per il tuo sito Web e, come HTML5, CSS è compatibile con tutti i browser. Ecco uno snippet di codice per personalizzare l'elemento Jumbotron in Bootstrap CSS. .jumbotron { sfondo: #27a967; Colore bianco; allineare il testo: centrato; } .jumbotron p { colore: bianco; dimensione carattere: 26px; } JavaScript JavaScript è la ciliegina sulla torta tra i linguaggi di programmazione. JavaScript è stato sviluppato a metà degli anni '90 e viene utilizzato per aggiungere funzionalità ai siti Web. Gli sviluppatori lo utilizzano per aggiungere animazioni, automatizzare le attività su determinate pagine e aggiungere funzionalità interattive che migliorano l'esperienza dell'utente.
JavaScript si sta evolvendo rapidamente. Un tempo considerato un “linguaggio giocattolo”, JavaScript è oggi il linguaggio di programmazione più utilizzato al mondo. Con l'aiuto di Node.Js, ora è un linguaggio di codifica back-end. È il primo linguaggio compreso dai browser e alcuni hanno addirittura parlato di applicare anche ad esso il machine learning. Di seguito è riportato uno snippet di codice JavaScript per aprire automaticamente i collegamenti in una nuova finestra in WordPress. Esempio di snippet di codice JavaScript HTML, CSS e JavaScript sono i "tre grandi" dello sviluppo web. Quasi tutti i siti Web li utilizzano in qualche forma. Ce ne sono molti altri, come i linguaggi lato server come Java, C++, Python e SQL, ma comprendere questi tre è essenziale per la tua conoscenza dello sviluppo di siti web. Costruisci il backend del tuo sito web. Scrivere codice può essere una delle parti più complicate dello sviluppo web, ma non è l'unica. È inoltre necessario creare le strutture e il design del sito back-end e front-end.
Cominciamo con la parte posteriore. Il backend elabora i dati che abilitano la funzionalità sul frontend. Ad esempio, il backend di Facebook memorizza le mie foto in modo che il frontend possa poi essere visualizzato da altri. È costituito da due componenti principali: i database, che sono responsabili della memorizzazione, dell'organizzazione e dell'elaborazione dei dati in modo che possano essere recuperati dalle richieste del server. Server, l'hardware e il software che compongono il tuo computer. I server sono responsabili dell'invio, dell'elaborazione e della ricezione delle richieste di dati. Sono l'intermediario tra il database e il client/browser. Il browser essenzialmente dice al server: "Ho bisogno di queste informazioni" e il server sa come ottenere tali informazioni dal database e inviarle al client. Insieme, questi componenti costituiscono le fondamenta di qualsiasi sito web. Quando si tratta di costruire il tuo sito web, gli sviluppatori backend riconosceranno tre cose.
Il tuo codice logico, un insieme di regole su come il tuo sito web risponde a richieste specifiche e su come interagiscono gli oggetti sul tuo sito web. La gestione del tuo database, ovvero il modo in cui il tuo sito web organizza, gestisce e recupera i suoi dati. La tua infrastruttura, ecco come è ospitato il tuo sito web. Ospitare il tuo sito web ti dà maggiore controllo, ma è molto più costoso e richiede di garantire l'integrità e la sicurezza del tuo server. Con questi componenti e decisioni, il tuo sito web è pronto per lo sviluppo front-end. Nota: il backend è in qualche modo tangenziale allo sviluppo web in quanto non è sempre necessario un backend se non si archiviano dati. In questo contesto, per “dati” si intendono tutte le informazioni inserite dall'utente che è necessario salvare e conservare. Pensa ad accedere a un sito web. Come possono ricordare i tuoi dati di accesso se non hanno un backend? Oppure quali sono le impostazioni del tuo profilo? Per ottenere queste informazioni è necessario un backend. Ad esempio, Facebook ha bisogno di sapere chi è nella tua lista di amici, a quali eventi hai partecipato, quali post hai pubblicato e altro ancora. Si tratta di tutti i "dati" archiviati in un database. Se non avessero un database backend, questi dati non sarebbero accessibili a loro. D'altra parte, un sito Web puramente informativo e che non richiede l'immissione di dati da parte dell'utente non necessita di un backend.
Quindi, se non disponi di dati, non hai necessariamente bisogno dello sviluppo backend. Ma ciò non significa che non dovresti imparare le basi. Non sai mai quando potresti averne bisogno. Crea il frontend del tuo sito web. Se ti sei mai dilettato nel web design o hai giocato con un sito web in WordPress, Squarespace o Google Sites, hai toccato lo sviluppo web front-end. Il front-end è importante: riguarda ciò che vedono i tuoi visitatori, clienti e utenti e come utilizzano il tuo sito web. Lo sviluppo front-end (o sviluppo lato client) prevede una combinazione di JavaScript, HTML e CSS. Controlla inoltre componenti quali tipografia e caratteri, navigazione, posizionamento, compatibilità e reattività del browser. Questa parte riflette maggiormente la visione originale del tuo sito web e ciò che hai incluso nel tuo wireframe. Man mano che la tecnologia e le preferenze dei consumatori cambiano, la codifica lato client tende a diventare obsoleta molto più velocemente dello sviluppo back-end. È qui che le risorse di codifica (come quelle elencate di seguito) tornano utili.
(Facoltativo) Lavora con un CMS. Perché qualcuno dovrebbe scegliere un CMS invece di scrivere codice “a mano” o “da zero”? È vero che un CMS è meno flessibile e quindi ti dà meno controllo sul tuo frontend. Tuttavia, un CMS è più facile da usare (è necessario scrivere meno codice) e spesso dispone di strumenti per ospitare il sito Web, archiviare informazioni sull'utente, creare un blog, pubblicare pagine di destinazione, acquisire lead e persino creare un elenco di posta elettronica. Ciò ti consente di rendere il tuo sito web più redditizio con meno della metà dello sforzo. Scopri perché migliaia di clienti utilizzano il CMS per creare un sito Web ottimizzato che si integri con i dati CRM e l'intero stack di marketing. Le opzioni CMS spesso includono plugin che eliminano la necessità di scrivere un backend. Ad esempio, esistono plugin WordPress per l'eCommerce, quindi invece di creare un complicato backend per addebitare le carte di credito dei tuoi clienti, puoi semplicemente utilizzare un plugin esistente ed evitare la necessità di gestire database e codice lato server. I sistemi di gestione dei contenuti più diffusi includono Joomla, Magento e WordPress con una quota di mercato superiore al 65%. (In questo caso stiamo parlando del software WordPress open source, non del costruttore di siti WordPress.)
Ottieni un nome di dominio. A questo punto, il tuo sito web ha un indirizzo IP. Richiede anche un nome di dominio, un nome di sito web memorabile che i tuoi visitatori possono utilizzare per trovare il tuo sito web. Potresti aver sentito parlare di siti come GoDaddy e Hover. Questi servizi ti aiutano ad acquistare un nome di dominio e a registrarti presso ICANN (Internet Corporation for Assigned Names and Numbers). La maggior parte delle registrazioni di domini sono valide per un anno prima che sia necessario rinnovarle. Anche i costruttori di siti Web e i servizi di hosting come WordPress e Squarespace ti consentono di acquistare un nome di dominio. Avvia il tuo sito web. Una volta impostato un nome di dominio e collegato al tuo host, sei quasi pronto per pubblicare il tuo lavoro su Internet.
Ma non così in fretta: ci sono ancora alcune cose da controllare prima del lancio ufficiale. Ciò include la pianificazione delle responsabilità per il tuo team, il test approfondito del tuo sito Web per eventuali problemi tecnici, l'ottimizzazione per la SEO e un controllo finale prima di attivare l'interruttore e rendere attivo il tuo sito Web. Risorse per lo sviluppo di siti Web Vuoi saperne di più sullo sviluppo e sulla codifica? Oltre a poterti connettere e fare rete con altri sviluppatori, ci sono numerose risorse che puoi utilizzare per approfondire la tua comprensione dello sviluppo web. Corsi e lezioni di sviluppo Web Che tu voglia esplorare la codifica back-end, front-end o full-stack, ecco alcuni corsi e corsi online consigliati dagli sviluppatori. TutorialsPoint Tutti i contenuti e le risorse su TutorialsPoint sono gratuiti. Tra tutorial, e-book e video, TutorialsPoint offre una varietà di opzioni per imparare a programmare. Egghead Secondo il loro sito web, "egghead è un gruppo di professionisti dello sviluppo web e collaboratori open source che ti offrono corsi video concisi e informativi sui migliori strumenti del settore".
Gli utenti possono seguire corsi, ascoltare podcast o seguire corsi su un'ampia gamma di argomenti di sviluppo web. Khan Academy Khan Academy è una nota risorsa educativa gratuita. Gli utenti possono imparare di tutto, dalla macroeconomia all'algebra lineare, alla storia americana, oltre a una manciata di argomenti informatici. freeCodeCamp freeCodeCamp è un'organizzazione no-profit (come Khan Academy) che aiuta le persone a imparare a programmare gratuitamente. Con migliaia di articoli, video e lezioni interattive, nonché gruppi di apprendimento globali, freeCodeCamp aiuta migliaia di sviluppatori e ingegneri a conoscere le attività di programmazione e di sviluppo del territorio. Team Treehouse Team Treehouse è un programma di apprendimento online basato su abbonamento. Gli utenti pagano una tariffa mensile e hanno accesso a centinaia di corsi su più di 20 argomenti diversi. Da JavaScript a Python a PHP, Treehouse può insegnarti tutto ciò che devi sapere sullo sviluppo web.
Comunità di sviluppo Web Gli sviluppatori Web sono maestri di Internet, quindi è logico che frequentino e socializzino in comunità basate su Internet. Secondo Code Condo, gli sviluppatori si uniscono a queste comunità per: Ottenere informazioni aggiornate e risoluzione dei problemi. Risposte penetranti, nuove prospettive. Suggerimenti e trucchi per programmatori a tutti i livelli. Collegamenti a risorse, conferenze e documenti di ricerca. Incontra nuovi amici e appassionati di programmazione Potenziali partner Ecco alcune comunità online consigliate dai nostri sviluppatori.
Stack Overflow Stack Overflow è stato lanciato quasi 15 anni fa e da allora è diventata una delle comunità di programmazione più popolari al mondo. Secondo il co-fondatore Jeff Atwood, "[Stack Overflow] è ideato dai programmatori, per i programmatori, con l'intento finale di aumentare collettivamente la somma delle buone conoscenze di programmazione nel mondo." Stack Overflow è un ottimo posto dove rivolgersi per domande perché altro gli sviluppatori di solito chiedono e rispondono alle stesse domande. I forum su Stack Overflow ti tengono in contatto con altri sviluppatori e ti tengono anche aggiornato. Rete di sviluppo Mozilla La rete di sviluppo Mozilla (MDN) è nota per essere più completa e accurata rispetto ad altre risorse online. Non è tanto una comunità quanto una risorsa completa e una libreria di documenti sul linguaggio di programmazione. MDN è utile per apprendere come funzionano determinate funzionalità e rimanere aggiornati sulle novità di codifica e sviluppo.
Reddit Reddit è una comunità basata su forum in cui sviluppatori di tutti i livelli si riuniscono per porre domande e rispondere. È incredibilmente interattivo e include persone provenienti da tutto il mondo. Puoi anche unirti a "subreddit" basati su argomenti specifici come web design, JavaScript o freelance. Immergiti nello sviluppo web. Internet è qui per restare ed è in continua evoluzione per soddisfare le esigenze degli utenti. Gli sviluppatori web sono in prima linea in queste innovazioni e miglioramenti: da questo blog al tuo social network preferito fino alle app che usi sul tuo telefono, lo sviluppo web è ovunque. Ecco perché vale la pena dedicare del tempo a conoscere la codifica e la programmazione per rendere il sito Web della tua azienda il migliore possibile, per te e per i tuoi clienti. Nota del redattore: questo post è stato originariamente pubblicato nel novembre 2018 ed è stato aggiornato per completezza. Fatto interessante: oggi ci sono quasi 2 miliardi di siti web nel mondo.
Web DesignCon così tanti siti web, può essere difficile, se non impossibile, distinguersi dalla massa. È già abbastanza difficile ottenere traffico verso il tuo sito web, ed è ancora più difficile convincere quelle persone a restare e fare effettivamente qualcosa. Cosa rende un buon sito web? Sfondo disegnato da Freepik Cosa rende effettivamente un buon sito web? In breve: un buon sito web deve essere caratterizzato da forma e funzione. Deve avere uno scopo chiaro. Dovrebbe essere visivamente accattivante e facile da navigare. Deve essere adatto ad un'ampia gamma di visitatori ed essere tecnicamente stabile e sicuro. I buoni siti web sono attraenti, funzionali e utili. Il tuo sito web a volte è l'unica cosa che vedono i tuoi clienti. Vuoi che questo idiota sia così bello da attirare backlink, casi di studio come questo, attenzione dei media e clienti dal nulla. E sei fortunato. Perché in questo post ti insegnerò tutto ciò che sappiamo su ciò che rende fantastico un sito web.
E non devi nemmeno essere un designer. Evviva! The Great Web Design Index (clicca per navigare) Sezione 1: Design visivo del sito web (noto anche come "Bellezza") Sezione 2: Design tecnico del sito web (noto anche come "Roba geeky") Sezione 3: Strumenti del sito web (noti anche come "Cose utili per costruire il tuo sito web" ") "Meglio") -dark-chat-banner-2 Basta chiacchiere, tuffiamoci nel web design 10 Cos'è un buon sito web?
Ok, quindi è un problema piuttosto grosso da affrontare. Sono stati scritti migliaia di libri e corsi sul web design. Prima di iniziare a condividere le lezioni, voglio assicurarmi che ci sia qualcosa che puoi portare via e implementare oggi. Quindi ecco i quattro fondamenti di ciò che rende un buon sito Web da tenere a mente durante la riprogettazione/lancio: Scopo. Un buon design inizia con un obiettivo in mente. Chiediti: "Cosa voglio ottenere con questa pagina?" Se una pagina non ha uno scopo chiaro, dovresti considerare di rimuoverla. Esteticamente piacevole. Ne parlerò più approfonditamente nella prima sezione sul visual design, ma il tuo sito web deve avere un bell'aspetto. Se il tuo sito web sembra essere stato costruito negli anni '90, è tempo di aggiornarlo. Contenuti pertinenti e originali. Il tuo sito web dovrebbe mostrare contenuti pertinenti e originali per il tuo mercato di riferimento. Il plagio è illegale e sarà punito da Google. Inoltre, è meglio essere una versione di prim'ordine di te stesso piuttosto che una versione di second'ordine di qualcun altro. Cancella la navigazione del sito. Ne parlerò ulteriormente nella seconda sezione tecnica, ma sappi che la navigazione è importante. Ogni pagina del tuo sito web dovrebbe trovarsi a tre clic da ogni altra pagina del tuo sito web. La tua navigazione dovrebbe essere intuitiva e facile. Ciò aiuta sia Google con l'ottimizzazione dei motori di ricerca sia i tuoi visitatori con la navigazione. Un buon design inizia con un obiettivo in mente. CLICCA PER TWEET Ora che hai in mente i principi di base, approfondiamo un po'.
Design visivo del sito web (noto anche come "bellezza") Immagina uno scenario per un momento. Stai cercando un regalo per il compleanno di tua sorella. Noti un tweet di qualcuno che segui sul nuovo negozio di abbigliamento del suo amico. Fai clic. Allora vedi questo. brutto-website-design-1024x533-2 Haha, no. Te ne sei andato. È un esempio estremo? SÌ. Il design del sito web è ancora così importante? SÌ.
Vuoi che ti dica cosa devi fare per rendere il tuo sito web fantastico? Sicuro. Vedete, le immagini influenzano tutto, dal tasso di conversione al tempo trascorso sulla pagina, all'affidabilità e ai backlink organici (che ti aiutano a classificare il tuo sito su Google). Quindi l'equazione funziona così: Ottimo design del sito web = più fiducia = conversioni migliori. Ottimo design del sito web = più fiducia = più conversioni. CLICCA PER TWEET Come fai a mantenere bello l'aspetto del tuo sito web? Inizia con il tuo marchio. Branding attraverso il design del sito web Il tuo marchio è la tua immagine. Tutto, dai colori che usi ai caratteri che scegli, influenza la percezione delle persone di chi sei. Nella sua guida al branding, Sonia Gregory afferma: “Come piccola impresa, potresti competere con grandi marchi con clienti dedicati. Ecco perché devi trovare modi per differenziarti, con un solido processo di costruzione del tuo marchio”.
Cosa vuoi che pensino le persone quando vedono il tuo sito web? Audace, moderno, satirico, professionale, qualcos'altro? Puoi trasmettere queste cose attraverso il tuo design. Basta guardare la psicologia del colore: colori diversi trasmettono emozioni diverse. Infatti, uno studio intitolato “Effetti del colore sul marketing” ha rilevato che, a seconda del prodotto, fino al 90% dei giudizi spontanei sui prodotti possono essere basati solo sul colore. Oltre al colore, hai anche la scelta del carattere. E sì, c’è della psicologia dietro la scelta del carattere. Ted Hunt di Crazy Egg ha creato questa fantastica infografica al riguardo: La psicologia dietro la scelta del carattere Indipendentemente dal carattere che scegli per il tuo logo e gli sforzi di branding, dovresti sempre dare priorità alla leggibilità rispetto alla sensazione emotiva per il tuo carattere principale. Di solito si tratta di caratteri sans serif perché sono i più facili da leggere su Internet. Un ultimo consiglio per la scelta dei caratteri: non utilizzare più di due caratteri nel tuo progetto. Scegline due che si completino a vicenda e seguili per l'intero marchio.
Conclusione: scegli non più di tre colori e due caratteri per rappresentare il tuo marchio. Prendi nota dei caratteri e dei codici colore e usali in modo coerente nel tuo sito Web e nelle attività di marketing. Trovare, progettare e utilizzare le immagini Le immagini sono una parte importante della progettazione di un sito web. Eppure così tante persone lo fanno in modo sbagliato. Le grandi immagini offrono un valore aggiunto al visitatore. Aiutano a spiegare un punto importante e danno una pausa ai tuoi occhi. Aiutano persino a vendere i tuoi prodotti e servizi. Ad esempio, se gestisci un sito di e-commerce, desideri che le foto dei tuoi prodotti siano di alta qualità e mostrino molte angolazioni diverse.
Quale di questi fiori preferiresti acquistare? Immagini del sito web (Fonte) Se vedessi anche solo l'immagine a destra, probabilmente te ne andresti e non torneresti mai più. L'immagine centrale è migliore, ma ancora non eccezionale. Il lato sinistro garantisce che ti fidi del sito web. Fai attenzione perché le cattive immagini riducono i lettori. Ricorda il principio di progettazione n. 1: un buon design ha uno scopo. Qualsiasi immagine priva di scopo è una cattiva immagine. Periodo di tempo. Se hai bisogno di maggiori incentivi, la velocità di caricamento della pagina (di cui parlerò nella sezione due) è estremamente importante per il SEO e l’usabilità. Troppe immagini di grandi dimensioni rallenteranno il tuo sito web.
Come trovi, progetti e utilizzi le immagini sul tuo sito web? In questo post abbiamo parlato di alcuni strumenti per creare fantastiche immagini. Guardarlo. Ma per darti un po' di ispirazione, ecco alcuni esempi di buone immagini che puoi utilizzare: Grafici e grafici dei punti dati Schermate Fotografie stock di alta qualità (scegli saggiamente) Disegni personalizzati e grafica vettoriale Fotografia professionale (o almeno ben fatta) Asporto più importante: usa le immagini, ma fallo con uno scopo specifico. 3 esempi di bellissimi siti web Riconoscere ciò che rende un buon sito web è più facile quando si guardano esempi pratici.
Eccone alcuni che adoro: KlientBoost è dedicato esclusivamente al design di siti Web eccezionali. Il tuo sito irradia bellissime immagini. Klientboost Website Design CoSchedule è un sito web che ammiro anch'io. L'intero tuo sito web è basato su un'ottima formattazione e un marchio coerente. Esempio di design di CoSchedule Expedia: Visit Britain ha ricevuto un premio come sviluppatore per il suo design. expedia-uk Puoi anche vedere altri esempi che hanno vinto premi per l'ottimo design agli Awwwards e ai Webby Awards. (Nota: nella prossima sezione sul responsive design, fornirò anche un elenco di modelli di siti web con una grafica fantastica nel caso tu sia come me e non sappia programmare.) Basta con la grafica. Diventiamo un po' più geek.
Design tecnico del sito web (noto anche come "Geeky Stuff") Il design tecnico del web include cose come: Design reattivo e ottimizzazione dei dispositivi mobili Velocità di caricamento elevate Ottimizzazione per i motori di ricerca (SEO) Crittografia SSL Architettura e navigazione del sito Se una di queste cose ti fa dire "Cosa?" , nessun problema. Li spiegherò tutti in parole povere. Design reattivo e facilità d'uso per i dispositivi mobili
Il post di Smashing Magazine “Responsive Web Design: cos’è e come usarlo” afferma: “Il responsive web design è l’approccio che suggerisce che progettazione e sviluppo dovrebbero rispondere al comportamento e all’ambiente dell’utente in base alle dimensioni dello schermo, alla piattaforma e all’orientamento. ” Responsive Web Design In altre parole, un sito Web reattivo è un sito Web che funziona bene su tutti gli schermi e dispositivi. È ottimizzato per i dispositivi mobili e adatto al dispositivo su cui lo stai visualizzando. Se pensi che questo sembri complicato... lo è. Ma è importante. Infatti, gli smartphone rappresentano ormai oltre il 51% di tutto il traffico online, mentre i tablet rappresentano poco più del 12%. E questo numero è in crescita. Google pone molta enfasi anche sull'usabilità mobile. In effetti, ora danno la priorità al posizionamento dei siti ottimizzati per i dispositivi mobili (un aggiornamento chiamato “Mobilegeddon”).
Infine, l’ottimizzazione per i dispositivi mobili garantisce una migliore esperienza utente. E alla fine, è tutta una questione di utente. Sono loro che aprono i loro portafogli per mantenere a galla la tua attività. Quindi cosa deve fare un non designer? Innanzitutto, controlla se il tuo sito è considerato ottimizzato per i dispositivi mobili da Google utilizzando il test di ottimizzazione per dispositivi mobili del tuo sito. È anche una buona idea verificarlo tu stesso visitando il tuo sito web dal tuo telefono. Se non funziona bene o non ha un bell'aspetto, devi comunque fare qualcosa. Test di ottimizzazione mobile Evviva, siamo ottimizzati per i dispositivi mobili! Oltre ad assumere un designer, una delle cose migliori che puoi fare è cambiare il modello del tuo sito web. Questo è il modo più semplice ed economico per rendere il tuo sito web ottimizzato per i dispositivi mobili e reattivo.
Ecco alcuni modelli ottimizzati per dispositivi mobili per i costruttori di siti Web più diffusi: modelli WordPress ottimizzati per dispositivi mobili, modelli Shopify ottimizzati per dispositivi mobili, modelli BigCommerce ottimizzati per dispositivi mobili, modelli Magento ottimizzati per dispositivi mobili, esempi di modelli multipiattaforma, velocità di caricamento del sito Web rapida, secondo studi di Akamai e Gomez. com, quasi la metà degli utenti di Internet si aspetta che un sito web venga caricato in 2 secondi o meno e tende ad abbandonare un sito web che non si carica in 3 secondi! Questo non ti lascia molto margine di manovra. Ma se non sei ancora convinto, leggi questo: Circa il 79% degli acquirenti online che riscontrano problemi di prestazioni del sito web afferma di non tornare sul sito per effettuare un acquisto e circa il 44% di loro lo direbbero a un amico se lo avesse fatto. una brutta esperienza di acquisto online. In altre parole, se la velocità del tuo sito web è scarsa, perdi. Alla grande. Quindi, come garantire velocità di caricamento elevate? Prova questo: proprio come il test di ottimizzazione mobile, Google offre anche un test di velocità della pagina. Tuttavia, alcuni credono che non sia molto preciso, quindi non sarebbe male provare anche Pingdom e GT Metrix.
Tutti e tre ti daranno un'idea di cosa sta influenzando la tua velocità di caricamento e suggerimenti per migliorare. Page Speed Test Come puoi vedere, ci sono molti modi per migliorare la velocità di caricamento del tuo sito web, come ad esempio: B. Memorizzare nella cache del browser e caricare prima i contenuti "above the fold" (i contenuti che vedi senza scorrere verso il basso). Tuttavia, uno dei modi più semplici è ottimizzare e comprimere le tue immagini. Come ho accennato nella sezione visiva, le immagini occupano molta larghezza di banda. Ecco perché è importante utilizzare solo immagini di alto valore. Puoi utilizzare uno strumento come Gimp per comprimere le tue immagini gratuitamente. (Puoi trovare le istruzioni su come eseguire questa operazione qui.) Dimensioni dei file immagine prima e dopo Gimp Search Engine Optimization (SEO) SEO significa ottimizzare il tuo sito web affinché appaia sui motori di ricerca come Google. È l'essenza e la fine di un buon sito web.
Se fatto correttamente, puoi attirare migliaia di visitatori al tuo sito web ogni mese senza alcuno sforzo aggiuntivo. Fatto male, nessuno ti troverà su Google. Secondo Jon Rognerud, la SEO consiste di quattro passaggi. Ecco alcuni suggerimenti utili di Jon: scopri a chi ti rivolgi e fai ricerche per parole chiave. Ottimizza le pagine del tuo sito web con la SEO on-page mirata a queste par
.jpg)
.jpg)
.jpg)
You are welcome to share your ideas with us in comments.