Így kelnek életre a megtervezett weboldalak: Sitebuild

Mit értünk sitebuild alatt?

A webdesigner által ( nagyrészt photoshopban ) megtervezett webfelületek megvalósítását HTML és CSS nyelvek segítségével. A jó sitebuild logikus gondolkodást igénylő komoly feladat, melyen egy webes projekt sikeressége is múlhat, ezért nem árt komolyan venni.

sitebuild

Akkor ismerkedtem meg először a sitebuild fontosságával, mikor az én terveim kerültek megvalósításra, és visszajelzéseket kaptam, hogy egy-két cirádás elem, művészi grafika milyen nehézségeket okoz a kódolásban. Ennek hatására a későbbiekben igyekeztem sokkal gyakorlatiasabb tervezni, de valójában akkor értettem meg ennek az egésznek a lényegét, mikor a teveimet nekiálltam saját magam megvalósítani. Valahol itt vetkőztem le a képzőművészeti hajlamaim, önmegvalósítási kényszerem kiélését a weboldaltervezésben és itt tértem át a valóban hatékony és tartalom központú honlapok készítésére.

Mára épp olyan élvezettel állok neki egy-egy tervet HTML-ben megírni, mint korábban egy weboldal megtervezésének Photoshopban. Építettem már többször is mások által tervezett oldalakat, egyes cégeknél jelenleg is csak sitebuilderként dolgozom, más designerek terveit valósítom meg, vagy éppen alakítom CMS rendszerekhez.

Hogyan zajlik egy megtervezett design megvalósítása?

  • Már a tervezés ideje alatt jó, ha sitebuilder fejjel is gondolkozunk. Csak olyat érdemes tervezni, amit szabványos kódolással gond nélkül meg lehet valósítani.

  • A megtervezett oldalakat tüzetesen át kell nézni ( nem elég csak a kezdőlapot! ), majd azokból ( akár szabadkézzel papírra ) vázlatokat készíteni.

  • Minden böngészőnek van egy alapértelmezett CSS stílus készlete, melyek eltérnek egymástól ( IE for president ). De CSS reset segítségével az összes böngészőt be tudjuk állítani egy közös stílus készletre.

  • Meg kell határozni egy globális alap stílust, ami az egész honlapon egységes. Meg kell adni az alap betű készletet, méretet, sor magasságot, a címsorok, lista elemek, űrlap elemek, normál és akció gombok stílusát, linkek színét, stb. Itt kell körültekintően eljárni, hogy később ne keletkezzenek felesleges stílus felülbírálások.

  • Ki kell vágni a design állandó képi elemeit, ikonok, logók, háttérképek stb. A gyors letöltés érdekében ezeket érdemes CSS sprite(-ok) formájában tárolni. Emellett a kivágott képek optimalizálásával is foglalkozni kell.

Mikre kell figyelni a sitebuild során?

  • Ismerni kell a layout típusokat, legyen az fix széles, vagy responsive.
  • Megfelelő HTML tageket használni az adott tartalomhoz.
  • CSS-t mélyrehatóan ismerni, hogyan vonhatóak össze CSS utasítások.
  • Szabványos hibamentes kódot írni.
  • SEO szempontokat szem előtt tartani.
  • Webes tipográfia alapelveit követni.
  • Törekedni a minimális HTML kód használatára.

A jó sitebuild és front-end fejlesztés sokkal fontosabb mint, ahogy azt gondolnátok. Egy „elegáns” HTML kód komoly szakmai kihívást jelent, s messze túl mutat a középiskolás tanulmányokon, valamint folyamatos aktualizálást igényel. Jelentősége a flat design trend és a reszponzívitás megjelenésével egyre csak nő. Így ajánlott minden webdesignernek komolyabban elmélyedni a témában.

Nagyszerű, elolvastad! Oszd meg a világgal!

Írta: Pócsik Emese webdesigner

2007 óta dolgozom a design szakmában. Munkáim nagy részét céges weboldalak, portálok tervezése teszi ki. Rólam bővebben »

Iratkozz fel értesítési csatornámra!

Tetszett a bejegyzés? Iratkozz fel csatornámra és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.