Kodning av webbdesign för snabbhet och kvalitet
Skönheten att vara webbdesigner skapar en detaljerad, kreativ och original webbdesign i Photoshop , utan att behöva (för det mesta) tänka på hur det kommer att kodas .
Under designfasen handlar det om utseendet , och antingen kan kodningen tas om hand senare eller outsourcas till en utvecklare.
Hur som helst, inte tänker på användbarheten eller funktionaliteten är ett bra sätt för en formgivare att inte känna sig begränsad i designprocessen.
Detta är ett bra sätt att tänka, och kan leda till de bästa designerna. Men när det behöver kodas är vi som designers på en knepig plats.
I den här artikeln hittar du några enkla tips som kan hjälpa designers att lära sig grundläggande XHTML / CSS-konvertering effektivt för en snabbladdningswebbplats som är korrekt i den ursprungliga PSD.
Vi måste antingen skära och koda själva mönster, eller vända bort en del av vår vinst till en outsourcing PSD till XHTML / CSS företag eller utvecklare. Som främst designers är det andra alternativet oftast det bästa valet för kunden, eftersom det ger de bästa resultaten.
Ibland måste vi , som med mindre projekt eller på annat sätt, själva koda en webbplats . Oavsett orsaken, det borde inte vara en nedgång, eller något som tar upp för mycket tid.
Gör det själv vs Outsourcing
Denna artikel är mer riktade mot webbdesigners, även om förhoppningsvis de som är utvecklare kan ta något bort från det också. Fokusera på designers, men det är vanligt att många webbdesigners inte gillar att koda webbplatser. Vi gillar att designa . Det finns några undantag, men för det mesta är det inställningen till det.
Många designers har upptäckt fördelarna med outsourcing : Betala ett externt företag för att skära och koda din design, få tillbaka den om några dagar och spara dig tid och ansträngning att göra det själv.
Om man inte har erfarenhet av att koda en webbplats tillräckligt effektivt, kan det inte vara värt att spendera för mycket tid på det som man får betalt för på ett projekt.
Om en oerfaren kodare exempelvis skulle spendera flera timmar på att försöka hitta hur man kodar en design som de just skapat kan deras tid enkelt vara värt mer än vad det kostar att helt enkelt lägga ut jobbet.
Också laddning av kunden för outsourcingsarbetet istället för eget arbete kan vara kostnadseffektivt för dem såväl som tid som är effektiv för dig själv. (Åh, och du kommer att hjälpa utvecklingssamhället genom att ge dem lite affärer också!)
Det kommer dock en tid i varje designerens karriär, var det bara inte är praktiskt att lägga ut ett jobb. Några exempel skulle vara:
- Du är bara inte på en stark ekonomisk punkt.
Speciellt för frilansare kommer starka finansiella månader att gå och gå. Om du är lite låg i banken är det kanske inte det bästa alternativet att spendera $ 150 eller så på outsourcing, när du kan betala lite extra för att göra jobbet själv. Medan kunden skulle kompensera för betalningen till utbetalaren som en del av projektbetalningen, så gör det bara att din ekonomi bryter mot utvecklingen av webbplatsen. Genom att göra det själv är det så mycket mer arbete, men det är också så mycket pengar i fickan. - Det är ett litet projekt.
Är projektet under $ 1000? Har du över 1/10 av projektets budget går du inte direkt till dig värt det? Om outsourcing av den kodande delen är för stor av en procentandel av projektet, är det förmodligen mer praktiskt att bara få det gjort själv. Även mindre projekt är sannolikt enklare, så det behöver inte nödvändigtvis ta mycket tid. - När den behöver special kundservice eller anpassning.
Vissa projekt behöver bara lite mer kundvård, från dig, designern. Beroende på både klienten och projektet kan det vara bäst att bryta ner skivnings- och kodningsdelen i mer hanterbara bitar, med vissa delar som varierar efter kundens uppfattning under hela processen. I en situation där du, formgivaren, skulle behöva ändra koden för att passa kundens behov efter att den ursprungliga hemsidan är kodad, är det troligtvis bäst att själv göra allt.
Så det är upp till dig baserat på varje projekt, varje kund och varje uppsättning omständigheter för att bestämma huruvida du ska lägga ut den kodande delen eller inte.
Som en fördel för outsourcing kan erfarna kodare skapa en identisk kodad version till din PSD-design , samtidigt som lasthastigheten och användbarheten bibehålls.
Om du befinner dig i den situation där du vill ha eller skära en hemsida själv, här är några allmänna tips för att 1) spara tid så att du inte behöver jobba för $ 2 / hr och 2) ge bättre resultat för Din kund, som en erfaren utvecklare, skulle samtidigt spara kostnaderna för outsourcing.
1. Slice effektivt
Photoshop och Fireworks levereras med ett inbyggt skivverktyg som gör att en designer kan koda en webbplats direkt till HTML. Men även moderna versioner av dessa mjukvaror skapar tabellbaserad markering. Det här är inte särskilt användbart för den moderna webbdesignern självklart.
Därför är utveckling och hemsida kodning en separat övning som tar sin egen talang och erfarenhet. Alla webbdesigner behöver lite handkodning och en tankeprocess bakom den. Ingen programvara kan göra allt för dig.
Ändå kan skivverktyget i Photoshop och Fireworks användas till nytta för utvecklingsdelen av webbdesignen . Poängen är att veta hur man använder skivverktyget effektivt.
Istället för att dela in i en hel skivning och kodning handledning här, kan en bra handledning på nätet + hjälpa många ut: " Slice and Dice som PSD . "Det går över de grundläggande tankeprocesserna, liksom det tekniska sättet att skära en webbdesign det moderna och korrekta sättet - samtidigt som man använder det traditionella skivverktyget.
Det är i kronologisk ordning, med olika skärmdumpar för varje fas i utvecklingsprocessen, samt användbara länkar till liknande och ytterligare skärmdumpar.
Det första steget är att se dessa handledning och ta de viktigaste punkterna från dem: Veta vilka bilder som ska skivas, hur man optimerar bilderna för balans mellan kvalitet och hastighet, och vilka delar av din PSD ska vara vanliga XHTML och CSS .
Att bara titta på en mer erfaren utvecklare process och förklaring kan hjälpa en designer med liten skivning och kodning erfarenhet vittna en process som är effektivare.
2. Förenkla CSS
Ibland är det första sättet man räknar ut hur man använder CSS för att uppnå en viss effekt inte det bästa sättet att göra det. Om du tycker att du skapar för många anpassade klasser eller komplicerad taktik annars, för att uppnå en effekt, tänk på ett alternativt sätt att göra det mer effektivt.
För det mesta kommer detta med erfarenhet. Ju mer du kodar en webbplats och upptäcker nya tekniker, desto lättare kommer CSS att få det.
För nybörjarens sätt att förenkla CSS, kolla in Woorks artikel om " Top-Down-tillvägagångssätt för att förenkla din CSS-kod ”.
Artikeln delar tips om balansen mellan att använda CSS för att skapa den grundläggande trådramen och specifika styling, hur man återanvänder förinställda HTML-element effektivt, och när det är lämpligt att skapa egna klasser eller ID-er.
3. Använd CSS stenografi och minimera HTML Markup
Ju mindre en filstorlek är, ju snabbare den är att ladda, och det är så enkelt som det. Att använda CSS stenografi och minimera längden av XHTML-markering genom att återanvända element är ett bra sätt att göra detta.
Kodning av en hel webbplats måste vara en balans mellan markup och styling som markup med CSS. Markup ska användas för struktur och CSS ska användas för styling, så ett bra sätt att hitta det balansen är att hålla detta i åtanke.
Utöver detta kräver praktiken bara att förstå de tekniska egenskaperna hos CSS stenografi, samt att få erfarenhet.
Kolla in några av handledningarna nedan för att behärska CSS stenografi:
Också borttagning av onödig blankutrymme kan bidra till att ladda upp hastigheten på markup- och CSS-filer. Precis som med en minimerad JavaScript-fil (som jquery.min.js), gör mindre filer laddningstiden effektivare, så att processorn kan läsa dem snabbare.
Liksom med CSS och markup, är det dock inte praktiskt att ta bort all whitespace för redigering och förvaltning.
I stället får du en inlärningspraxis och använder linjeskalor endast vid behov. Ta bort eventuella kommentarer i markeringen och stilarket som inte är nödvändiga för underhållet av webbplatsen.
4. Smush.it
Använd ett verktyg som Yahoo's Smush.it att krossa några bilder ännu längre. Ett verktyg som det här använder en komprimeringsalgoritm som minskar filstorleken avsevärt, utan att åsidosätta bildkvaliteten. Ett genomsnitt på cirka 40% minskning av alla bilder kan göra en stor skillnad i laddningstiden för en webbplats.
Bara ladda enkelt bilder för webbplatsen, efter att de har optimerats ursprungligen i Photoshop, till programmet Smush.it. Det ger dig en ny lista med bilder för nedladdning, förklarar hur mycket utrymme som sparades och hur.
5. Var uppmärksam på CSS & Markup Order
Att ha strukturelementen före innehållsdelarna, eller blockquote-stilen före styckestilen, gör inte en stilarkladning något snabbare. Ett stilark fylls dock i den ordning det presenteras i stilarket , så man kan använda det för att göra en webbplats "visas" som om den laddas snabbare.
Om du till exempel i ett stylesheet var allt innehåll, bilder och textstyling först definierade, skulle dessa element laddas innan någon bakgrund, strukturella element eller designbilder laddades.
På grund av detta verkar det som om webbdesignen laddar lite långsammare än om vi såg bakgrunden och strukturen först.
Med strukturen och huvudbilden först har tittaren något att fokusera på för de sekunder där innehållet fortfarande laddas.
6. Veta när du ska använda Client-Side eller Server-Side Scripting
För grundläggande projekt kommer webdesigners förmodligen inte att komma in i för mycket programmering. Vissa skript kan dock krävas för en enkel kontaktformulär eller för speciella navigeringseffekter.
Vad det än är, kan två typer av skriptspråk användas: klientsida (där skriptspråket körs på användarens webbläsare) eller serverns sida (skriptspråket körs på servern).
JavaScript, och vilket bibliotek som helst under det, är det vanligaste skriptspråket på klientsidan. Eftersom den körs lokalt i användarens webbläsare, behöver den inte köra hela vägen till servern för att kunna hantera den, vilket gör det snabbare. Skriptet på serversidan är lite långsammare, men går bara bra i små doser och när den används på rätt sätt.
Använd skript för server-sidor för allt som kräver en databas eller vad som är nödvändigt för webbplatsens syfte. Eftersom en användare kan inaktivera JavaScript, men det går inte att inaktivera ett språk på serverns sida, kan skrivarserveren på servernsidan användas för alla nödvändiga webbsidor.
Exempelvis används en kontaktform, även om den är lätt och kanske inte kräver en databas, bäst med ett språk på serverns sida eftersom det fortfarande är tillgängligt för någon som har JavaScript inaktiverat.
Sammantaget borde de flesta webbplatser som kräver ytterligare skript en balans mellan båda. Vissa mindre webbplatser kan bara behöva ett eller annat, men det är viktigt att inte bara använda en för dess skull. Vet när och varför att använda varje.
7. Sist men inte minst, Godkänn
Detta är uppenbart för de flesta av oss, men som med någon artikel som denna måste det sägas: Under hela processen med kodning, och när allt är sagt och gjort, validera CSS och XHTML-koden.
Vi vet alla fördelarna med validering, eftersom det kan göra olika webbläsare att göra på samma sätt, göra webbsidor laddas snabbare och är en allmän felkontroll för semantisk kod.
En ytterligare fördel att gå igenom denna process är dock att utforska nya tekniker för hantering av CSS-kod och markup.
Om du har implementerat en viss effekt i en webbdesign som inte validerar eller ger en varning, är chansen att W3 har anledning till detta. Det här är fantastiska ögonblick för att undersöka andra alternativ för att skapa samma effekt, men på ett bättre, mer validerat sätt.
Avslutar
Vissa designers är rädda för att de måste offra kvaliteten i bilderna i designen när de kodar för XHTML / CSS för att göra en snabblastande webbplats - men det är bara inte sant.
Det finns många sätt att koda intelligent som kan skapa en användarvänlig, snabblastande webbplats som möter en designers kvalitet. Att använda dessa tips kan hjälpa, men det finns många fler saker att lära.
Kom ihåg att om du är oerfaren slicer och kodare kan det vara långsamt först, särskilt när du fortfarande är i lärprocessen. Vi kanske känner till XHTML och CSS, men det är en helt annan skicklighet för att lära oss att göra det effektivt. Precis som vi var tvungna att när vi lärde oss design, måste vi lära oss hur man kodar också vackert .
Skriven uteslutande för WDD av Kayla Knight .
Det här är allmänna tips, så var noga med att dela med dig av några extra tips för att skära en design och koda den, särskilt från en designers perspektiv.