Koding av et webdesign for fart og kvalitet
Skjønnheten ved å være en webdesigner skaper et detaljert, kreativt og originalt webdesign i Photoshop , uten å måtte (for det meste) tenke på hvordan det blir kodet .
I designfasen handler det om utseendet , og enten kan kodingen tas vare på senere, eller bli outsourcet til en utvikler.
Uansett, ikke å tenke på utviklingsbrukbarheten eller funksjonaliteten er en flott måte for en designer å ikke føle seg begrenset i designprosessen.
Dette er en fin måte å tenke på, og kan føre til de beste designene. Men når den trenger å bli kodet, er vi som designere på et vanskelig sted.
I denne artikkelen finner du noen enkle tips som kan hjelpe designere til å lære grunnleggende XHTML / CSS-konvertering effektivt for et raskt lastet nettsted som er nøyaktig på den opprinnelige PSD.
Vi må enten kutte og kode designene selv, eller slå av en del av vår fortjeneste til en outsourcing PSD til XHTML / CSS selskap eller utvikler. Som først og fremst designere er det andre alternativet vanligvis det beste valget for kunden, fordi det gir de beste resultatene.
Noen ganger, men som med mindre prosjekter eller på annen måte, må vi kodes et nettsted selv . Uansett årsak, bør det ikke være en tilbakegang, eller noe som tar for mye tid.
Gjør det selv vs Outsourcing
Denne artikkelen er mer målrettet mot webdesignere, selv om forhåpentligvis de som er utviklere, kan ta noe bort fra det også. Fokusere på designerne, men det er vanlig at mange webdesignere ikke liker å kode nettsteder. Vi liker å designe . Det er noen unntak, men for det meste er dette holdningen til det.
Mange designere har oppdaget fordelene med outsourcing : Betal et eksternt firma for å skille og kode designen din, få den tilbake om noen dager, og spar deg tid og krefter for å gjøre det selv.
Hvis man ikke har erfaring med å kode et nettsted effektivt nok, kan det ikke være verdt det å bruke for mye tid på det du får betalt for på et prosjekt.
For eksempel, hvis en uerfaren koder skulle tilbringe flere timer for å finne ut hvordan man kodes et design de nettopp har opprettet, kan tiden deres lett være verdt mer enn hva det koster å bare bare outsource jobben.
Også lading av klienten for outsourcing arbeidet i stedet for ditt eget arbeid kan være kostnadseffektivt for dem, så vel som tid effektiv for deg selv. (Åh, og du vil hjelpe utviklingssamfunnet ved å gi dem litt forretning også!)
Det kommer en tid i hver designerens karriere, men der er det bare ikke praktisk å outsource en jobb. Noen eksempler ville være:
- Du er bare ikke på et sterkt økonomisk poeng.
Spesielt for frilansere, kommer sterke økonomiske måneder til å gå. Hvis du er litt lav i banken, er det kanskje ikke det beste alternativet å bruke $ 150 eller så på outsourcing, når du kan bli betalt litt ekstra for å gjøre jobben selv. Mens klienten ville gjøre opp for betalingen til outsourcer som en del av prosjektutbetalingen, er det bare å få økonomien til å bryte seg selv for utviklingsdelen av nettstedet. Ved å gjøre det selv, er det så mye mer arbeid, men det er også så mye mer penger i lommen. - Det er et lite prosjekt.
Er prosjektet under $ 1000? Har du over 1/10 av prosjektets budsjett, ikke gå direkte til deg verdt det? Hvis outsourcing av kodingsdelen er for stor av en prosentandel av prosjektet, er det sannsynligvis mer praktisk å bare få det gjort selv. Også mindre prosjekter er sannsynligvis enklere, så det trenger ikke nødvendigvis å ta mye tid. - Når den trenger spesiell kundeservice eller tilpasning.
Noen prosjekter trenger bare litt mer kundebehandling, fra deg, designeren. Avhengig av både klienten og prosjektet, kan det være best å bryte ned skive- og kodingsdelen i mer håndterbare stykker, med enkelte stykker som varierer etter kundens oppfatning gjennom hele prosessen. I en situasjon der du, designeren, måtte fortsette å endre koden slik at den passer kundens behov etter at den opprinnelige nettsiden er kodet, er det sannsynligvis best å gjøre det hele selv.
Så det er opp til deg basert på hvert prosjekt, hver klient og hvert sett av omstendigheter for å bestemme om du skal outsource kodingsdelen eller ikke.
Som en fordel for outsourcing, kan erfarne kodere skape en identisk kodet versjon til PSD-designen din , samtidig som du opprettholder lasthastighet og brukervennlighet.
Hvis du er i situasjonen hvor du har / ønsker å kutte og kode et nettsted selv, er det noen generelle tips til 1) spare tid slik at du ikke trenger å jobbe for $ 2 / time og 2) gi bedre resultater for Din klient, som en erfaren utvikler ville, mens du fortsatt sparer outsourcing kostnadene.
1. Slice Effektivt
Photoshop og fyrverkeri kommer med et innebygd skjæreverktøy som gjør det mulig for en designer å kode et nettsted direkte inn i HTML. Men selv moderne versjoner av disse programvarene skaper tabellen basert oppslag. Dette er ikke veldig nyttig for den moderne webdesigneren, selvfølgelig.
Derfor er utvikling og nettstedkoding en egen praksis som tar sitt eget talent og erfaring. Alle webdesigner trenger litt håndkoding og en tankeprosess bak den. Ingen programvare kan gjøre alt for deg.
Likevel kan skiveverktøyet i Photoshop og fyrverkeri brukes til bruk for utviklingsdelen av webdesign . Poenget er å vite hvordan du bruker skiveverktøyet effektivt.
I stedet for å delge inn i en hel skive- og kodingsveiledning her, kan en flott opplæring over nettnoter + hjelpe mange ut: " Slice and Dice that PSD . "Det går over de grunnleggende tankeprosessene, så vel som den tekniske måten å skli et webdesign på den moderne og riktige måten - mens du bruker det tradisjonelle stykkeverktøyet.
Det er i kronologisk rekkefølge, med forskjellige screencasts for hver fase i utviklingsprosessen, samt nyttige lenker til lignende og flere screencasts.
Det første trinnet er å se disse veiledningene, og å ta de viktigste punktene fra dem: vite hvilke bilder som skal skille, hvordan optimalisere bildene for balansen mellom kvalitet og hastighet, og hvilke elementer i PSD-en din skal være ren XHTML og CSS .
Bare å se på en mer erfaren utviklerens prosess og forklaring kan hjelpe en designer med liten skiving og koding erfaring vitne til en prosess som er mer effektiv.
2. Forenkle CSS
Noen ganger er den første måten man kan bruke CSS på for å oppnå en viss effekt, ikke den beste måten å gjøre det på. Hvis du finner deg selv å lage for mange tilpassede klasser, eller komplisert taktikk ellers, for å oppnå en effekt, tenk på en alternativ måte å gjøre det mer effektivt på.
For det meste kommer dette med erfaring. Jo mer du kodes et nettsted og oppdager nye teknikker, desto enklere bruker CSS effektivt.
For nybegynnerens måter å forenkle CSS, sjekk ut Woorks artikkel om " Top-Down-tilnærming for å forenkle CSS-koden “.
Artikkelen deler tips om balansen mellom bruk av CSS for å lage grunnleggende wireframe og spesifikke styling, hvordan du kan gjenbruke forhåndsdefinerte HTML-elementer effektivt, og når det er hensiktsmessig å lage egne klasser eller ID-er.
3. Bruk CSS Shorthand og Minimize HTML Markup
Jo mindre en filstørrelse er, jo raskere er det å laste, og det er så enkelt som det. Ved hjelp av CSS-kortografi og minimering av lengden av XHTML-markering ved å gjenbruke elementer, er det en fin måte å gjøre dette på.
Koding av et helt nettsted må være en balanse mellom markering og styling som markerer med CSS. Markup skal brukes til struktur og CSS skal brukes til styling, så en fin måte å finne den balansen på er å holde dette i bakhodet.
Annet enn dette, krever øvelsen bare å forstå technicalities av CSS shorthand, samt å få erfaring.
Ta en titt på noen av veiledningene nedenfor for å mestre CSS shorthand:
Hvis du også fjerner unødvendig hvitt plass, kan du laste inn hastigheten til markup- og CSS-filer. På samme måte som med en minimert JavaScript-fil (for eksempel jquery.min.js), gjør mindre filer ladetiden mer effektiv, slik at prosessoren kan lese dem raskere.
Som med CSS og markup, er det imidlertid ikke praktisk å fjerne alle hvite plasser for redigering og administrasjon.
I stedet får du innspill og bruk av linjeskift bare når det er nødvendig. Fjern også eventuelle kommentarer i oppslaget og stilarket som ikke er nødvendige for vedlikehold av nettstedet.
4. Smush.it
Bruk et verktøy som Yahoo's Smush.it å knase noen bilder enda lenger. Et verktøy som dette bruker en komprimeringsalgoritme som reduserer filstørrelsen betydelig, uten å forringe bildekvaliteten. Et gjennomsnitt på rundt 40% reduksjon av alle bilder kan gjøre en stor forskjell i lastetiden på et nettsted.
Bare legg inn noen bilder for nettstedet, etter at de har blitt optimalisert opprinnelig i Photoshop, til Smush.it-applikasjonen. Det gir deg en ny liste over bilder for nedlasting, forklarer hvor mye plass var lagret, og hvordan.
5. Vær oppmerksom på CSS og Markup Order
Å ha strukturelementene før innholdselementene, eller blokktypestilen før stykkeformen, gjør ikke en stilarkladning noe raskere. Et stilark laster imidlertid i rekkefølgen den presenteres i stilarket , slik at man kan bruke det for å få et nettsted til å vises som om det lastes raskere.
Hvis du for eksempel i et stilark er alt innhold, bilder og tekst styling først definert, vil disse elementene lastes inn før noen bakgrunner, strukturelementer eller designbilder ble lastet inn.
På grunn av dette ser det ut som om webdesignet laster litt tregere enn om vi så bakgrunnen og strukturen først.
Med strukturen og hovedbildet først har seeren noe å fokusere på for de sekundene hvor innholdet fremdeles lastes.
6. Vet når du skal bruke Client-Side eller Server-Side Scripting
For grunnleggende prosjekter vil webdesignere sannsynligvis ikke komme inn i for mye programmering. Det kan imidlertid være nødvendig med noen skripting for et enkelt kontaktskjema eller for spesielle navigeringseffekter.
Uansett hva det er, kan to typer skriptspråk brukes: klientside (hvor skriptspråket kjører på brukerens nettleser) eller server-side (skriptspråket kjører på serveren).
JavaScript, og hvilket som helst bibliotek under det, er det vanligste skriptspråket på klientsiden. Fordi den kjører lokalt i brukerens nettleser, trenger den ikke å løpe helt til serveren for å gjøre behandlingen, og gjør det derfor raskere. Server-side scripting er litt tregere, men går fint i små doser og når det brukes riktig.
Bruk server-side scripting for alt som krever en database, eller alt som er nødvendig for nettsidens formål. Siden en bruker kan deaktivere JavaScript, men ikke kan deaktivere et server-side språk, kan server-side scripting være trygt å bruke for eventuelle nettsider nødvendigheter.
For eksempel er et kontaktskjema, selv om det er lett og kanskje ikke krever en database, best brukt med et server-side språk fordi det fortsatt er tilgjengelig for noen med JavaScript deaktivert.
Samlet sett må de fleste nettsteder som krever tilleggsskripting ha en balanse mellom begge. Noen mindre nettsteder trenger bare en eller annen, men det er viktig å ikke bare bruke en for det. Vet når, og hvorfor, å bruke hver.
7. Sist men ikke minst, bekreft
Dette er åpenbart for de fleste av oss, men som med en hvilken som helst artikkel som dette må det sies: i hele prosessen med koding, og når alt er sagt og gjort, validere CSS og XHTML-koden.
Vi vet alle fordelene ved validering, ved at det kan gjøre forskjellige nettlesere gjengivende, gjøre nettsider laster raskere, og er en generell feilkontroll for semantisk kode.
En ekstra fordel for å gå gjennom denne prosessen, er imidlertid å utforske nye teknikker for håndtering av CSS-kode og markup.
Hvis du har implementert en viss effekt i et webdesign som ikke validerer eller gir en advarsel, er sjansene W3 har en grunn til dette. Dette er gode øyeblikk for å undersøke andre alternativer for å skape den samme effekten, men på en bedre, mer validert måte.
Wrapping Up
Noen designere frykter at de må ofre kvalitet i bildene av designet når de kodes til XHTML / CSS for å lage et raskt lastet nettsted - men det er bare ikke sant.
Det er mange måter å kode intelligent på som kan skape for et brukervennlig, raskt lastende nettsted som tilfredsstiller en designers kvalitet. Å bruke disse tipsene kan hjelpe, men det er mange flere ting å lære.
Husk at hvis du er en uerfaren slicer og koder, kan det være sakte i begynnelsen, spesielt når du fortsatt er i læringsprosessen. Vi kan kanskje kjenne XHTML og CSS, men det er en helt annen ferdighet å lære å gjøre det effektivt. Akkurat som vi måtte når vi lærte design, må vi lære å kode vakkert også .
Skrevet utelukkende for WDD av Kayla Knight .
Disse er generelle tips, så sørg for å dele noen ekstra tips for å praktisere skiver av et design og koding av det, spesielt fra en designerens perspektiv.