Codifica di un Web design per velocità e qualità

La bellezza di essere un web designer sta creando un web design dettagliato, creativo e originale in Photoshop , senza dover (per la maggior parte) pensare a come sarà codificato .

Durante la fase di progettazione, tutto dipende dall'aspetto e la codifica può essere risolta in un secondo momento oppure essere esternalizzata a uno sviluppatore.

In ogni caso, non pensare all'usabilità o alla funzionalità dello sviluppo è un ottimo modo per un designer di non sentirsi limitato nel processo di progettazione.

Questo è un ottimo modo di pensare e può portare ai migliori progetti. Tuttavia, una volta che ha bisogno di essere codificato, noi come designer siamo in una situazione delicata.

In questo articolo, troverai alcuni semplici suggerimenti che possono aiutare i progettisti a imparare la conversione XHTML / CSS di base in modo efficiente per un sito web a caricamento rapido che sia preciso al PSD originale.

O dobbiamo separare noi stessi e codificare i progetti, oppure deviare parte dei nostri profitti a un PSD di outsourcing a una società o uno sviluppatore di XHTML / CSS. In qualità di progettisti, la seconda opzione è solitamente la scelta migliore per il cliente, poiché fornirà i risultati migliori.

A volte però, come con progetti più piccoli o meno, abbiamo bisogno di codificare un sito web da soli . Qualunque sia la ragione, non dovrebbe essere un ripiego, o qualcosa che richiede troppo tempo.

Farlo autonomamente vs. Outsourcing

Questo articolo è più mirato ai web designer, anche se si spera che anche coloro che sono sviluppatori possano prendere qualcosa da loro. Concentrandosi sui progettisti, tuttavia, è comune per molti web designer non gradire di codificare i siti web. Ci piace progettare . Ci sono alcune eccezioni, ma per la maggior parte questo è l'atteggiamento nei suoi confronti.

Molti designer hanno scoperto i vantaggi dell'outsourcing : pagare una società esterna per suddividere e codificare il progetto, recuperarlo in pochi giorni e risparmiare tempo e sforzi per farlo da soli.

Se non si ha esperienza con la codifica di un sito Web in modo sufficientemente efficiente, spendere troppo tempo su di esso potrebbe non valere la pena per cui verrai pagato per un progetto.

Ad esempio, se un programmatore inesperto passasse diverse ore cercando di capire come codificare un disegno appena creato, il loro tempo trascorso può facilmente valere più di quello che costa semplicemente esternalizzare il lavoro.

Inoltre, addebitare al cliente il lavoro di esternalizzazione invece del proprio lavoro può essere economicamente vantaggioso per loro, oltre che tempo effettivo per se stessi. (Oh, e aiuterai la comunità di sviluppo dando loro anche un po 'di affari!)

Arriva un momento nella carriera di ogni designer, però, dove non è proprio pratico esternalizzare un lavoro. Alcuni esempi potrebbero essere:

Non sei solo in un punto finanziario forte.
Soprattutto per i liberi professionisti, i forti mesi finanziari vanno e vengono. Se sei un po 'basso in banca, potrebbe non essere l'opzione migliore per spendere $ 150 circa in outsourcing, quando potresti essere pagato un po' di extra per fare il lavoro da solo. Mentre il cliente compenserebbe il pagamento con l'outsourcer come parte del pagamento del progetto, questo è solo il fatto che le tue finanze si interrompono anche per la porzione di sviluppo del sito web. Facendo da soli, è molto più lavoro, ma è anche molto più denaro in tasca.
È un piccolo progetto.
Il progetto è sotto $ 1000? Vale la pena investire oltre 1/10 del budget del progetto? Se si esternalizza la parte di codifica troppo grande di una percentuale del progetto, è probabilmente più pratico farlo semplicemente da solo. Inoltre, i progetti più piccoli sono probabilmente più semplici, quindi non deve necessariamente richiedere molto tempo.
Quando ha bisogno di un servizio clienti speciale o personalizzazione.
Alcuni progetti richiedono solo un po 'più di attenzione al cliente, da te, il progettista. A seconda del cliente e del progetto, potrebbe essere meglio suddividere la porzione di slicing e di codifica in pezzi più gestibili, con alcuni pezzi che sono variabili in base all'opinione del cliente durante l'intero processo. In qualsiasi situazione in cui tu, il progettista, dovresti continuare a modificare il codice per adattarlo alle esigenze del cliente dopo che il sito web iniziale è stato codificato, è probabilmente meglio fare tutto da solo.

Quindi spetta a te basare su ciascun progetto, ogni cliente e ogni serie di circostanze per decidere se esternalizzare la parte di codifica o meno.

Come vantaggio per l'outsourcing, i programmatori esperti possono creare una versione codificata identica al design del PSD , mantenendo la velocità di caricamento e l'usabilità.

Se ti trovi nella situazione in cui stai / vuoi dividere e codificare un sito web da solo, ecco alcuni suggerimenti generali per 1) risparmiare tempo in modo da non dover lavorare per $ 2 / ora e 2) fornire risultati migliori per il tuo cliente, come uno sviluppatore esperto, mentre continua a risparmiare i costi di outsourcing.

1. Taglia in modo efficace

Photoshop e Fireworks sono dotati di uno strumento di taglio incorporato che consente a un designer di codificare un sito Web direttamente in HTML. Tuttavia, anche le versioni moderne di questi software creano markup basati su tabelle. Questo non è molto utile per il web designer moderno, ovviamente.

Questo è il motivo per cui lo sviluppo e la codifica dei siti Web sono una pratica separata che prende il suo talento e la sua esperienza. Tutti i progetti web hanno bisogno di una codifica manuale e di un processo mentale dietro di esso. Nessun software può fare tutto per te.

Tuttavia, lo strumento sezione in Photoshop e Fireworks può essere utilizzato per la parte di sviluppo del web design . Il punto è sapere come usare efficacemente lo strumento slice.

Invece di approfondire un intero tutorial su slicing e coding, un ottimo tutorial su nettuts + può aiutare molti fuori: " Slice and Dice that PSD . "Ripercorre i processi di pensiero di base, oltre all'approccio tecnico, per affettare un web design in modo moderno e corretto, utilizzando allo stesso tempo lo strumento slice tradizionale.

È in ordine cronologico, con diversi screencast per ciascuna fase del processo di sviluppo, oltre a link utili a screencast simili e aggiuntivi.

Il primo passo è quello di visualizzare questi tutorial e di prendere i punti più importanti da loro: sapere quali immagini tagliare, come ottimizzare quelle immagini per l'equilibrio di qualità e velocità e quali elementi del PSD dovrebbero essere semplici XHTML e CSS .

Basta osservare il processo e le spiegazioni di uno sviluppatore più esperto per aiutare un progettista con poca esperienza di codifica e analisi a testimoniare un processo più efficiente.

2. Semplifica i CSS

A volte, il primo modo in cui si capisce come utilizzare i CSS per ottenere un determinato effetto non è il modo migliore per farlo. Se ti ritrovi a creare troppe classi personalizzate o altrimenti tattiche complicate, per ottenere un effetto, pensa a un modo alternativo di farlo in modo più efficiente.

Per la maggior parte, questo viene fornito con esperienza. Più codice un sito web e scopri nuove tecniche, più facilmente si otterrà l'uso del CSS in modo efficace.

Per i principianti sulla semplificazione dei CSS, guarda l'articolo di Woork su " Approccio dall'alto verso il basso per semplificare il codice CSS “.

L'articolo condivide suggerimenti sull'utilizzo di CSS per creare il wireframe di base e lo stile specifico, come riutilizzare gli elementi HTML preimpostati in modo efficace e quando è opportuno creare classi o ID personali.

3. Usa CSS Stenografia e Riduci a icona HTML Markup

Più piccola è la dimensione del file, più veloce è il caricamento, ed è così semplice. Usare la stenografia CSS e ridurre al minimo la lunghezza del markup XHTML riutilizzando gli elementi è un ottimo modo per farlo.

La codifica di un intero sito Web deve essere un bilanciamento del markup e dello stile che marcano con i CSS. Markup dovrebbe essere usato per la struttura e CSS dovrebbe essere usato per lo styling, quindi un ottimo modo per trovare quell'equilibrio è tenerlo a mente.

Oltre a questo, la pratica richiede solo la comprensione degli aspetti tecnici della stenografia dei CSS, oltre a guadagnare esperienza.

Guarda alcuni dei tutorial qui di seguito per padroneggiare la stenografia CSS:

Anche la rimozione di spazi bianchi non necessari può aiutare la velocità di caricamento dei file di markup e CSS. Proprio come con un file JavaScript minimizzato (come jquery.min.js), i file più piccoli renderanno il tempo di caricamento più efficiente, consentendo al processore di leggerli più rapidamente.

Come con CSS e markup, tuttavia, non è pratico rimuovere tutti gli spazi bianchi per scopi di modifica e gestione.

Invece, entra in una pratica di indentazione e utilizzo di interruzioni di linea solo quando necessario. Rimuovi anche eventuali commenti all'interno del markup e del foglio di stile che non sono necessari alla manutenzione del sito web.

4. Smush.it

Usa uno strumento come Yahoo's Smush.it per scricchiolare ulteriormente le immagini. Uno strumento come questo utilizza un algoritmo di compressione che riduce significativamente le dimensioni del file, senza sacrificare la qualità dell'immagine. Una riduzione media di circa il 40% di tutte le immagini può comportare un'enorme differenza nel tempo di caricamento di un sito web.

Basta caricare semplicemente le immagini per il sito Web, dopo che sono state ottimizzate originariamente in Photoshop, nell'applicazione Smush.it. Ti darà un nuovo elenco di immagini per il download, spiegando quanto spazio è stato salvato e come.

5. Prestare attenzione a CSS & Markup Order

Avere gli elementi strutturali prima degli elementi di contenuto o lo stile blockquote prima dello stile di paragrafo non renderà più veloce il caricamento di un foglio di stile. Tuttavia, un foglio di stile viene caricato nell'ordine in cui è presentato nel foglio di stile , quindi è possibile utilizzarlo per far apparire un sito Web come se si caricasse più velocemente.

Ad esempio, se in un foglio di stile sono stati definiti per la prima volta tutti i contenuti, le immagini e lo stile del testo, questi elementi vengono caricati prima che vengano caricati sfondi, elementi strutturali o immagini di progettazione.

Per questo motivo, sembra che il web design stia caricando leggermente più lentamente rispetto a quando abbiamo visto prima lo sfondo e la struttura.

Prima con la struttura e le immagini principali, lo spettatore ha qualcosa su cui concentrarsi per quei secondi in cui il contenuto è ancora in fase di caricamento.

6. Sapere quando utilizzare scripting lato client o lato server

Per i progetti di base, i web designer probabilmente non entreranno troppo nella programmazione. Tuttavia, alcuni script possono essere richiesti per un semplice modulo di contatto o per effetti speciali di navigazione.

Qualunque sia la ragione, possono essere utilizzati due tipi di linguaggi di scripting: lato client (dove il linguaggio di scripting viene eseguito sul browser dell'utente) o lato server (il linguaggio di scripting viene eseguito sul server).

JavaScript e qualsiasi libreria sotto di esso, è il linguaggio di scripting lato client più comune. Poiché viene eseguito localmente sul browser dell'utente, non deve essere eseguito fino al server per eseguire l'elaborazione, quindi renderlo più veloce. Lo scripting lato server è leggermente più lento, ma funziona bene a piccole dosi e se usato in modo appropriato.

Utilizzare lo scripting lato server per tutto ciò che richiede un database o tutto ciò che è necessario per lo scopo del sito Web. Poiché un utente può disabilitare JavaScript, ma non può disabilitare una lingua lato server, lo scripting lato server è sicuro da utilizzare per qualsiasi necessità del sito web.

Ad esempio, un modulo di contatto, sebbene sia leggero e potrebbe non richiedere un database, è meglio utilizzato con un linguaggio lato server perché è ancora accessibile per le persone con JavaScript disabilitato.

Nel complesso, la maggior parte dei siti web che richiedono script aggiuntivi dovrebbero avere un equilibrio di entrambi. Alcuni siti web più piccoli possono aver bisogno solo dell'uno o dell'altro, ma è importante non usarne uno solo per il gusto di farlo. Sapere quando e perché, utilizzarli.

7. Ultimo ma non meno importante, convalida

Questo è ovvio per la maggior parte di noi, ma come per ogni articolo come questo, va detto: durante tutto il processo di codifica, e quando tutto è detto e fatto, convalidare il codice CSS e XHTML.

Tutti conosciamo i vantaggi della convalida, in quanto può rendere i vari browser visualizzati in modo simile, caricare le pagine Web più rapidamente ed è un controllo generale degli errori per il codice semantico.

Un ulteriore vantaggio di questo processo, tuttavia, è quello di esplorare nuove tecniche per la gestione del codice CSS e del markup.

Se hai implementato un certo effetto in un web design che non convalida o dà un avvertimento, è probabile che W3 abbia una ragione per questo. Questi sono grandi momenti per la ricerca di altre opzioni per creare lo stesso effetto, ma in un modo migliore, più convalidato.

Avvolgendo

Alcuni progettisti temono di dover sacrificare la qualità nelle immagini del design durante la codifica in XHTML / CSS per creare un sito Web a caricamento rapido, ma non è vero.

Esistono molti modi per codificare in modo intelligente che possono essere creati per un sito web facile da usare e in rapida carica che soddisfi la qualità di un designer. L'utilizzo di questi suggerimenti può aiutare, ma ci sono molte altre cose da imparare.

Ricorda, se sei un'affettatrice e un programmatore inesperto, all'inizio potrebbe essere lento, specialmente quando si è ancora nel processo di apprendimento. Potremmo conoscere XHTML e CSS, ma è un'abilità completamente diversa per imparare a farlo in modo efficace. Proprio come dovevamo quando imparavamo il design, dobbiamo imparare anche a codificare magnificamente .

Scritto esclusivamente per WDD da Kayla Knight .

Questi sono suggerimenti generalizzati, quindi assicurati di condividere eventuali suggerimenti aggiuntivi per la pratica di affettare un disegno e codificarlo, specialmente dal punto di vista del designer.

usabilità sviluppo web codifica