Kodning af en webdesign for hastighed og kvalitet
Skønheden ved at være webdesigner skaber et detaljeret, kreativt og originalt webdesign i Photoshop , uden at skulle (for det meste) tænke over, hvordan det vil blive kodet .
Under designfasen handler det om udseendet , og enten kan kodningen tages hånd om senere eller outsources til en udvikler.
Uanset hvordan man tænker på udviklingsbrugen eller funktionaliteten, er det en god måde, at en designer ikke føler sig begrænset i designprocessen.
Dette er en god måde at tænke på og kan føre til de bedste designs. Men når det er nødvendigt at kode, er vi som designere på en vanskelig måde.
I denne artikel finder du et par enkle tips, der kan hjælpe designere med at lære grundlæggende XHTML / CSS-konvertering effektivt til et hurtigt læsningswebsted, der er nøjagtigt til den originale PSD.
Vi skal enten skære og kode selve mønstrene eller vende en del af vores overskud til en outsourcing PSD til XHTML / CSS firma eller udvikler. Som primært designere er den anden mulighed normalt det bedste valg for kunden, fordi det giver de bedste resultater.
Nogle gange skal vi, som med mindre projekter eller på anden måde, selv kode en hjemmeside . Uanset årsagen skal det ikke være en tilbagegang eller noget, der tager for meget tid.
Gør det selv vs. Outsourcing
Denne artikel er mere målrettet mod webdesignere, selv om forhåbentlig de, der er udviklere, kan tage noget væk fra det også. Fokusere tilbage på designerne, men det er almindeligt, at mange webdesignere ikke kan lide at kode websteder. Vi kan godt lide at designe . Der er nogle få undtagelser, men for det meste er det holdningen til det.
Mange designere har opdaget fordelene ved outsourcing : Betal et eksternt firma til at skære og kode dit design, få det tilbage om et par dage, og spar dig selv tid og kræfter til at gøre det selv.
Hvis man ikke har erfaring med at kode et websted effektivt nok, kan det være umuligt at bruge for meget tid på det, som du bliver betalt for på et projekt.
Hvis en uerfarlig koderen f.eks. Skulle bruge flere timer på at finde ud af, hvordan man kan kode et design, som de netop har oprettet, kan deres tid nemt være mere værd end hvad det koster at blot outsource jobbet.
Også opladning af klienten til outsourcing arbejde i stedet for dit eget arbejde kan være omkostningseffektivt for dem såvel som tidseffektive for dig selv. (Åh, og du hjælper udviklingssamfundet ved at give dem en smule forretning også!)
Der kommer imidlertid en tid i hver designerens karriere, hvor det bare ikke er praktisk at outsource et job. Et par eksempler ville være:
- Du er bare ikke på et stærkt finansielt punkt.
Især for frilansere kommer stærke finansielle måneder til at gå. Hvis du er lidt lav i banken, er det måske ikke den bedste mulighed at bruge $ 150 eller så på outsourcing, når du kunne få lidt ekstra for at gøre arbejdet selv. Mens kunden ville gøre op for betalingen til outsourcer som en del af projektbetalingen, er det bare at gøre din økonomi i stykker selv for udviklingsdelen af hjemmesiden. Ved at gøre det selv er det så meget mere arbejde, men det er også så meget flere penge i lommen. - Det er et lille projekt.
Er projektet under $ 1000? Har over 1/10 af projektets budget ikke direkte til dig det værd? Hvis outsourcing af kodningsdelen er for stor af en procentdel af projektet, er det nok mere praktisk at bare få det gjort selv. Også mindre projekter er sandsynligvis enklere, så det behøver ikke nødvendigvis at tage meget tid. - Når den har brug for særlig kundeservice eller tilpasning.
Nogle projekter kræver kun lidt mere kundeservice, fra dig, designeren. Afhængigt af både klienten og projektet kan det være bedst at nedbryde skære- og kodningsdelen i mere håndterbare stykker, hvor nogle stykker varierer efter kundens mening i hele processen. I enhver situation, hvor du, designeren, skulle fortsætte med at ændre koden, så den passer til kundens behov efter at den oprindelige hjemmeside er kodet, er det nok bedst at gøre det hele selv.
Så det er op til dig, baseret på hvert projekt, hver klient og hvert sæt omstændigheder, der skal afgøres om at outsource den kodende del eller ej.
Som en fordel for outsourcing kan erfarne kodere oprette en identisk kodet version til dit PSD-design , samtidig med at du opdaterer hastigheden og anvendeligheden.
Hvis du er i den situation, hvor du har / ønsker at skære og kode en hjemmeside selv, her er nogle generelle tips til 1) spare tid, så du ikke behøver at arbejde for $ 2 / hr og 2) give bedre resultater for Din klient, som en erfaren udvikler ville, mens du stadig sparer outsourcing omkostninger.
1. Skær effektivt
Photoshop og fyrværkeri leveres med et indbygget skæreværktøj, der gør det muligt for en designer at kode et websted direkte i HTML. Men selv moderne versioner af disse stykker software skaber bordbaseret markering. Det er selvfølgelig ikke særlig nyttigt for den moderne webdesigner.
Derfor er udvikling og webkodning en separat praksis, der tager sit eget talent og erfaring. Alle webdesigner kræver nogle håndkodning og en tankeproces bagved den. Ingen software kan gøre alt for dig.
Stadig kan skæreværktøjet i Photoshop og Fireworks udnyttes til udviklingen af webdesignet . Pointen er at vide, hvordan man bruger skiveværktøjet effektivt.
I stedet for at deltage i en hel skæring og kodningstutorial her, kan en god tutorial over på netværker + hjælpe mange ud: " Skive og terning den PSD . "Det går over de grundlæggende tankeprocesser, såvel som den tekniske måde at skære et webdesign på den moderne og korrekte måde - mens du bruger det traditionelle skiveværktøj.
Det er i kronologisk rækkefølge, med forskellige screencasts for hver fase af udviklingsprocessen, samt nyttige links til lignende og yderligere screencasts.
Det første skridt er at se disse tutorials og at tage de vigtigste punkter fra dem: vide, hvilke billeder der skal skives, hvordan man optimerer billederne for balance mellem kvalitet og hastighed, og hvilke elementer i din PSD skal være almindeligt XHTML og CSS .
Bare at se på en mere erfaren udviklerens proces og forklaring kan hjælpe en designer med lille skære- og kodningserfaring at vidne til en proces, der er mere effektiv.
2. Forenkle CSS
Nogle gange er den første måde, man beskriver, hvordan man bruger CSS til at opnå en vis effekt, ikke den bedste måde at gøre det på. Hvis du finder dig selv at skabe for mange brugerdefinerede klasser eller komplicerede taktikker ellers for at opnå en effekt, skal du tænke på en alternativ måde at gøre det mere effektivt på.
For det meste kommer dette med erfaring. Jo mere du kodes en hjemmeside og opdager nye teknikker, vil det lettere at bruge CSS effektivt få.
For nybegynderens måder at forenkle CSS, se Woorks artikel om " Top-down tilgang til at forenkle din CSS kode ”.
Artiklen deler tips om balancen i at bruge CSS til at oprette den grundlæggende wireframe og specifikke styling, hvordan man genbruger forudindstillede HTML-elementer effektivt, og når det er hensigtsmæssigt at oprette dine egne klasser eller ID'er.
3. Brug CSS stenografi og minimer HTML Markup
Jo mindre en filstørrelse er, jo hurtigere er den at indlæse, og det er så simpelt som det. Brug CSS stenografi og minimere længden af XHTML markup ved at genbruge elementer er en fantastisk måde at gøre dette på.
Kodning af en hel hjemmeside skal være en balance mellem markering og styling, der markerer med CSS. Markup skal bruges til struktur og CSS skal bruges til styling, så en god måde at finde den balance på er at huske på.
Bortset fra dette kræver praksis kun at forstå de tekniske aspekter af CSS stenografi, samt at få erfaring.
Tjek et par af vejledningerne nedenfor for at mestre CSS stenografi:
Fjernelse af unødvendig hvide rum kan også hjælpe med at indlæse hastigheden af markup- og CSS-filer. Ligesom med en minimeret JavaScript-fil (som jquery.min.js), vil mindre filer gøre læsningstiden mere effektiv, så processoren kan læse dem hurtigere.
Som med CSS og markup er det dog ikke praktisk at fjerne al hvide rum til redigering og forvaltning.
I stedet skal du komme ind i en praksis med indrykning og kun bruge linjeskift, når det er nødvendigt. Fjern også eventuelle kommentarer i markeringen og stilarket, der ikke er nødvendige for vedligeholdelsen af hjemmesiden.
4. Smush.it
Brug et værktøj som Yahoo's Smush.it at knuse eventuelle billeder endnu længere. Et værktøj som dette bruger en komprimeringsalgoritme, der reducerer filstørrelsen betydeligt uden at ofre billedkvaliteten. Et gennemsnit på omkring 40% reduktion af alle billeder kan gøre en stor forskel i læsningstiden på et websted.
Læg simpelthen billederne til hjemmesiden, efter at de er blevet optimeret oprindeligt i Photoshop, til Smush.it applikationen. Det vil give dig en ny liste med billeder til download, forklarer, hvor meget plads der er gemt, og hvordan.
5. Vær opmærksom på CSS & Markup Order
At have strukturelementerne før indholdselementerne eller blokquote-stilen før stykkeformatet gør ikke en stylesheet-belastning hurtigere. Et stylesheet indlæses dog i den rækkefølge, det vises i stilarket , så man kan bruge det til at få et websted til at blive vist som om det bliver hurtigere.
For eksempel, hvis i et stylesheet, blev alt indhold, billeder og tekst styling først defineret, vil disse elementer blive indlæst, før baggrund, strukturelementer eller designbilleder blev indlæst.
På grund af dette ser det ud til, at webdesignet lægges lidt langsommere end hvis vi så baggrunden og strukturen først.
Med struktur og hovedbilleder først har seeren noget at fokusere på i de sekunder, hvor indholdet stadig indlæses.
6. Ved hvornår skal du bruge Client-Side eller Server-Side Scripting
Til grundlæggende projekter vil webdesignere sandsynligvis ikke komme ind i for meget programmering. Men nogle scripting kan være påkrævet for en simpel kontaktformular eller for særlige navigationseffekter.
Uanset hvad det er, kan to typer scriptningssprog anvendes: klientside (hvor skriptsproget kører på brugerens browser) eller server-side (scriptningssproget kører på serveren).
JavaScript, og ethvert bibliotek under det, er det mest almindelige script-sprog på kundesiden. Fordi det kører lokalt i brugerens browser, behøver det ikke at løbe helt til serveren for at gøre dets behandling, hvilket gør det hurtigere. Server-side scripting er lidt langsommere, men kører fint i små doser og når det bruges korrekt.
Brug server-side scripting til alt, hvad der kræver en database, eller alt, hvad der er nødvendigt for webstedets formål. Da en bruger kan deaktivere JavaScript, men ikke kan deaktivere et server-side sprog, er server-side scripting sikkert at bruge til enhver hjemmeside nødvendigheder.
For eksempel er et kontaktformular, selvom det er let og måske ikke kræver en database, bedst brugt på et server-side sprog, fordi det stadig er tilgængeligt for nogen med JavaScript deaktiveret.
Samlet set skal de fleste hjemmesider, der kræver yderligere scripting, have en balance i begge dele. Nogle mindre websteder kan kun have brug for den ene eller den anden, men det er vigtigt ikke at bruge en til det. Ved hvornår, og hvorfor, at bruge hver.
7. Sidste men ikke mindst, Validere
Dette er tydeligt for de fleste af os, men som med enhver artikel som denne, må det siges: hele processen med kodning, og når alt er sagt og gjort, validere CSS og XHTML kode.
Vi kender alle fordelene ved validering, idet det kan gøre forskellige browsere til gengæld, gøre websider hurtigere, og er en generel fejlcheck for semantisk kode.
En yderligere fordel for at gennemgå denne proces er imidlertid at undersøge nye teknikker til håndtering af CSS kode og markup.
Hvis du har implementeret en vis effekt i et webdesign, der ikke validerer eller giver en advarsel, er chancerne W3 har en grund til dette. Det er gode øjeblikke for at undersøge andre muligheder for at skabe den samme effekt, men på en bedre og mere valideret måde.
Afslutter
Nogle designere frygter, at de skal ofre kvalitet i billedets design, når de kodes til XHTML / CSS for at lave et hurtigtiladswebsted - men det er bare ikke sandt.
Der er mange måder at kode intelligent på, som kan oprette til et brugervenligt, hurtigt læsende websted, der opfylder en designerens kvalitet. Brug af disse tips kan hjælpe, men der er mange flere ting at lære.
Husk, at hvis du er en uerfaren slicer og koder, kan det være langsomt i starten, især når du stadig er i læringsprocessen. Vi kan måske vide XHTML og CSS, men det er en helt anden færdighed at lære at gøre det effektivt. Ligesom vi havde til at lære design, må vi lære at kode også smukt .
Skrevet udelukkende til WDD af Kayla Knight .
Disse er generelle tips, så sørg for at dele yderligere tips til udøvelsen af at skære et design og kodende det, især fra designers perspektiv.