A webfejlesztés folyamata – 10 lépés a sikerhez

Szinte mindegy, hogy egy hírportál oldalról, egy webshopról vagy egy kisvállalkozás bemutatkozó weboldaláról van szó, a webfejlesztés folyamatának főbb lépései szinte minden esetben azonosak. Cikkemben ezt a folyamatot szeretném bemutatni részletesen.

Az itt bemutatásra kerülő folyamat arra is rávilágít, hogy …

• bár a munkát webfejlesztésnek nevezzük, ahhoz, hogy a végeredmény sikeres legyen, egy sor kapcsolódó szolgáltatásra, pl. versenytárs elemzésre, UX design-ra, szövegírásra … stb. van szükség.
• magától értetődő, hogy egy webfejlesztés projektre webfejlesztő szakembert keresel, de az alábbi cikkből is látni fogod, hogy az effektív programozás mellett egy projektvezetőre, webdesignerre, SEO szakemberre, szövegíróra, UX specialistára, online marketingesre is szükség lesz. 

1. Kapcsolatfelvétel, igény felmérés

Az első általában e-mail-ben történő megkeresést egy Skype vagy személyes találkozó követi, amelynek során megpróbálunk minél több információt összeszedni a projektről.

Az alábbi témákat szoktuk érinteni az első találkozó során:

• Mivel foglalkozik a cég?
• Mi a webfejlesztés célja?
• Milyen elvárások vannak a készítendő weboldallal kapcsolatban?
• Kiknek készül a weboldal? Ki a célközönség?
• Milyen eredményeket vár a marketing az új weboldaltól?
• Milyen piaci környezetben kell megállnia a helyét az új oldalnak? Kik a versenytársak?

Sok olyan webfejlesztés projektről hallok, ahol rögtön fejest ugranak a weboldal tervezésbe anélkül, hogy pontosan tudnák mi a vállalkozás célja a weboldallal, milyen eredményeket várnak el tőle és kik a főbb versenytársak, akikkel az új site-nak majd versenyeznie kell.

Az első lépéstől kezdődően arra szoktam törekedni, hogy minden apró információt írásban dokumentáljak és megosszam a projektben résztvevőkkel, így semmi nem merül feledésbe, másrészt írásos nyoma marad mindennek, amiben a fejlesztést illetően megállapodtunk. Az ilyen írásos dokumentációk arra is jók, hogy elejét vegyük az esetleges egymásnak ellentmondó kéréseknek.

Minél nagyobb a webfejlesztés projekt, a dokumentálásnak annál nagyobb szerepe van. Sok véget nem érő, elhaló projekt mögött az húzódik meg, hogy az igények nem lettek megfelelően rögzítve és a projekt megkezdése után fél évvel már senki nem emlékszik arra, hogy egy adott részfeladatot illetően ki miben állapodott meg.

2. Specifikáció készítés

A webfejlesztés projekt specifikációja tulajdonképpen egy részletes feladatleírás. Összeszedi az összes lényeges információt, amelyet a projektről ezidáig megtudtunk. 

Ahhoz, hogy egy webfejlesztés projektre árajánlatot tudjunk adni, az alábbi kérdéseket javasolt megválaszolni:

• Melyik iparágban tevékenykedik a cég, mivel foglalkozik?
• Mi az új weboldal célja? Itt elsősorban az üzleti és marketing célokra vagyunk kíváncsiak.
• Milyen tapasztalatok voltak a korábbi weboldallal? Mi az, ami működött és mi az, amin mindenképpen változtatni szeretnének?
• Ki a weboldal célközönsége? Mit lehet tudni a potenciális ügyfelekről?
• Rendelkezik a vállalkozás arculati elemekkel, logóval?
• Milyen menüpontokból áll a készítendő weboldal? Milyen jellegű információ kerül az egyes menüpontokba?
• Milyen funkciókra van szükség az új weboldalon? Pl. blog, webshop, jelszóvédett felület, esemény naptár, … stb.
• Hány nyelvű lesz a weboldal?
• Kik a potenciális versenytársak?
• Tudna mutatni olyan weboldalakat, amelyek megjelenésükben tetszenek?

3. Árajánlat készítés

A webfejlesztés specifikációját követően egy általában 6-12 oldalas tételes árajánlatot készítünk. Az  árajánlat része a munkafolyamat bemutatása, az egyes szolgáltatások leírása, a költségek részletezése és a határidők megjelenítése.

Az árajánlatban pontosan leírjuk, hogy az egyes szolgáltatások, pl. grafikai tervezés, programozás, tartalom feltöltés … stb. milyen tevékenységet jelentenek és elvégzésükhöz milyen információkra van szükségünk.

4. Szerződéskötés

Az árajánlat elfogadását követően egy szerződés készítünk és átküldjük ügyfelünknek jóváhagyásra. A szerződés tervezet főbb részei:

• felek alapadatai
• szerződés tárgya
• szolgáltatás elállásának menete
• felek jogai és kötelességei
• adatok védelme és titoktartás
• szavatosság
• vállalkozói díj
• fizetési feltételek, számlázási időszak
• hatályba lépés, szerződés megszűnése
• szerzői jogok
• záró rendelkezések
• mellékletek (pl. szolgáltatás megrendelő, feladat specifikáció)

5. Kutatás és tervezés

Az ügyféllel történt első megbeszélés és az ezután készült specifikáció információi alapján egy olyan kutatásba kezdünk, amely segít abban, hogy a készítendő weboldal a célközönségnek minél magasabb felhasználói élményt nyújtson.

A felhasználói élmény alapú tervezés (angolul UX design) egyre inkább meghatározó szerepet tölt be a webes projekteknél, mivel segítségével olyan weboldalak készülnek, amelyek a látogatók szívesen böngésznek.

A kutatás és tervezés az alábbi tevékenységeket érintheti:

• versenytárs elemzés – alaposan átnézzük a legerősebb piaci szereplők weboldalát és online stratégiáját annak érdekében, hogy az általunk készített website rögtön a legjobbak között lehessen.
• weboldal látogatottsági adatok elemzése – a korábbi weboldal analitikájának átnézése annak érdekében, hogy megértsük a felhasználók viselkedését.
• weboldal UX audit – a korábbi weboldal auditálása felhasználói élmény szempontjából. Mi az ami jó működött benne és mi az ami fejlesztésre szorul?
• perszóna alkotás – a weboldal célközönség csoportjainak meghatározása, motivációjuk, eszköz használati szokásaik, böngészési szokásaik megértése
• user interjúk – szóbeli vagy írásos interjúk a célközönséggel annak érdekében, hogy minél jobban megismerjük őket
• customer journey defíniálása – a látogató útjának meghatározása a weboldalon. Ez az eszköz segít a konverziós útvonalak meghatározásában és a konverzió optimalizálásban
• drótváz készítés (wireframing) – a drótvázak szabadkézi vagy számítógéppel készített fekete-fehér rajzok, amelyek segítenek az egyes oldalak elrendezését bemutatni.
• prototípus készítés – a drótváz tervek felruházása alapvető műveletekkel (kattinthatóság) annak érdekében, hogy a látogató viselkedését az oldalon szimulálni tudjuk

6. Webdesign

Itt már minden információ összeállt ahhoz, hogy a webdesignerek a korábban jóváhagyott struktúra, funkcionális terv és drótvázak alapján elkészítsék a weboldal grafikai terveit.

Első körben a nyitólap 1:1 méretarányú terve készül el, amelyet böngészőben prezentálunk, majd pedig ennek finomítása és jóváhagyása után készülnek el az aloldalak tervei. Egy egyszerű bemutatkozó oldal esetében 2-3 aloldal terv is elégséges lehet, míg egy összetett site esetében akár tucatnyi aloldal terv is készülhet.

A weboldal grafikai terve a drótvázakon prezentált elrendezéseken felül már a végleges színeket, formákat, arculati elemeket, betűtípusokat, ikonokat, illusztrációkat és képeket tartalmazza. Egy szóval pixel pontosan azt, amit a későbbi látogatók a böngészőben látnak majd.

Az ideális eset az, ha már vázlatos szöveges anyagokat is kapunk, mert ebben az esetben a designerek pontosan a szöveg szerkezetére és mennyiségére tudják szabni az oldal megjelenését.

A weboldal grafikai tervezése már rég nem öncélú művészi munka, a designereknek számtalan szempontot kell figyelembevenniük a tervezés során annak érdekében, hogy a kész site megfeleljen az üzleti és marketing céloknak és maximális teljesítményt nyújtson. Íme néhány ezek közül:

• célközönség – a weboldal nem a saját, sőt nem is az ügyfél ízlésének kell, hogy megfeleljen, hanem a célközönségének. Ez nem csak a megjelenésre, de a működésre és még a szövegekre is vonatkozik.
• arculat – a weboldalnak követnie kell a cég arculatát. Amennyiben csak egy logót kapunk, úgy annak forma- és szín-világához kell igazodni.
• versenytársak – egy weboldal szerkezete, funkcionalitása és megjelenése során figyelembe kell vennünk az online versenytársakat.
• navigáció – a weboldal navigációja kiemelten fontos funkció. Ha rosszul van megtervezve, akkor az oldal már indulása pillanatában gyengébben fog teljesíteni, amit utólag sokszor nem könnyű javítani.
• betöltési sebesség – a mobil használat elterjedésével az egyik legfontosabb szemponttá vált a weboldal betöltési sebessége. Ennek első lépcsője a webdesigner, akinek figyelembe kell vennie a sebességgel kapcsolatos szempontokat munkája során és nem tervezhet olyan nyitólapot, amelyen olyan sok kép van, hogy eleve ellehetetleníti a jó teljesítmény elérését.
• reszponzívitás – a grafikusnak tisztában kell lennie azzal, hogy mik az alapvető reszponzív működésre vonatkozó elvárások és ezek figyelembevételével kell az asztali, a tablet és mobil nézetet megterveznie
• programozhatóság – a webdesignernek figyelembe kell vennie a webfejlesztési technológiákat és olyan terveket kell előállítania, amelyek a mai modern programozási nyelvekkel kompatibilisek.
• SEO-barát kialakítás – a webdesigner-nek alapvető SEO ismeretekkel kell rendelkeznie és a weboldalra be kell terveznie azokat az elemeket, amelyek javítják a site feltérképezhetőségét és Google teljesítményét. Pl. breadcrumbs, címsorok, … stb.
• nyelvi verziókkal történő kompatibilitás – ez talán az egyik legnehezebb feltétel. A weboldalt úgy kell megtervezni, hogy a nyelvi mutációkkal történő feltöltés után se essen szét a megjelenés. Itt elsősorban arra gondolok, hogy egy adott menüpont elnevezése angolul sokkal kevesebb helyet foglal, mint pl. németül. Tehát megfelelő helyet kell hagyni a hosszabb szövegeknek is.
• tartalomkezelő rendszerek – a mai modern weboldalak mindegyikéhez tartalomkezelő rendszer tartozik. A weboldal grafikájának megtervezése során ügyelni kell arra, hogy minél több tartalmi elem CMS-ből szerkeszthető legyen.
• következetesség – weboldal nyitólapjának és aloldalainak stílusát, fejlécét, láblécét és navigációját következetesen kell felépíteni annak érdekében, hogy a látogató számára egyértelmű legyen, melyik oldalon tartózkodik éppen
• felhasználói élmény – ahogy korábban említettem, a felhasználói élmény alapú tervezés az egyik legfontosabb szempont a weboldal k
• aktuális trendek – ha minden korábban felsorolt szempontnak sikerült megfelelni, akkor ezen felül nem árt, ha az oldal divatos és megfelel a modern design trendeknek. A kutatások szerint egy átlagos látogató is el tudja dönteni, hogy egy weboldal elavult vagy divatos megjelenésű-e, ami értelemszerűen kihat a cég megítélésére is.

7. Programozás

Ott tartunk, hogy készen van a weboldal nyitólapjának és aloldalainak ügyfél által jóváhagyott grafikai terve. Ebben a lépésben kapnak szerepet a programozók, akik a grafikai tervekből egy kattintható, reszponzív, működőképes weboldalt készítenek.

A grafikai tervek leprogramozása mellett a szakemberek beüzemelik a tartalomkezelő rendszert, ami lehetővé teszi, hogy a weboldal egy jelszóvédett felületen keresztül az ügyfél által is szerkeszthető legyen.

A webfejlesztő (programozó) munkája alapvető fontosságú a weboldal sikere szempontjából. A webfejlesztő felelőssége, hogy a weboldal …

• pixel pontosan azonos legyen a grafikai tervekben látottakhoz
• minden modern böngészőben hibátlanul működjön
• reszponzív legyen, vagyis alkalmazkodjon a látogató eszközének felbontásához
• keresőbarát módon legyen kialakítva a lehető legjobb Google helyezések érdekében
• tartalomkezelő rendszerből (CMS) frissíthető legyen
• betöltődési sebessége a lehető legrövidebb legyen
• a GDPR ajánlásainak megfeleljen
• biztonságos legyen, védje a látogatók személyes adatait és ellenálljon a webről érkező támadásoknak
• az összes támogatott nyelven hibátlanul jelenjen meg
• kódolása tiszta és áttekinthető legyen

Az előbb felsorolt okok miatt sem mindegy, hogy milyen webfejlesztőt választ egy cég partneréül.

8. Tartalom feltöltés

Szinte mindegy, hogy milyen iparágról beszélünk, általánosan elmondható, hogy egy élvonalbeli weboldalhoz nagy mennyiségű, minőségi szöveges és képi tartalomra van szükség. Ezeknek az anyagoknak az elkészítését célszerű már a weboldal tervezési fázisában elkezdeni és akkor tapasztalataink szerint a programozási szakasz végére olyan állapotban lesznek, hogy feltölthetők az oldalra.

A legalaposabb tervezés ellenére elő szokott fordulni, hogy a végleges feltöltendő anyagok mennyiségük vagy szerkezetük okán eltérnek attól, mint amire a weboldalt fejlesztettük és ilyen esetben kisebb-nagyobb módosításokat kell eszközölnünk a tökéletes megjelenés és működés érdekében.

9. Tesztelés

A kész weboldalt élesítés előtt tesztelni kell. A tesztelés általában az alábbi területekre terjed ki:

• szövegek helyesírása
• az űrlapok működésének tesztelése
• hibaüzenetek
• böngésző kompatibilitás
• reszponzív működés
• technikai SEO beállítások
• weboldal sebesség
• nyelvi mutációk megjelenése
• régi URL-ek átirányítása az újakra
• közösségi oldalak bekötése
• analitikai kódok elhelyezése (Google Analytics, Google Ads, Google Tag Manager, Facebook Pixel … stb.)
• XML webhelytérkép

Ha minden területen hibátlannak bizonyul a tesztelés, akkor a weboldal készen áll az élesítésre.

10. Élesítés

A weboldal élesítése kényes művelet, mivel rövid idő alatt kell több összehangolt tevékenységet elvégezni a site-on. Mivel a weboldalt általában a végleges tárhelyén fejlesztjük egy ideiglenes elérhetőséggel, ezért az esetek többségében az élesítés a domain név átirányítását jelenti a régi tárhelyről az újra. A domain név átirányítását a szolgáltató vagy adminisztrációs hozzáférés esetén mi magunk tudjuk elvégezni.

Mivel fejlesztési szakaszban az ideiglenes cím alatt elérhető weboldal ki van tiltva a kereső rendszerekből, ezért az első, hogy ezt a tiltást eltávolítjuk. Ezzel párhuzamosan megszüntetjük az ideiglenes címet. 

Rögtön az éles indulást követően ellenőrizzük a régi weboldal URL-ek átirányításait az újra, ez kulcsfontosságú a Google helyezések megőrzése érdekében. Még egyszer ellenőrizzük az analitikai kódok és a HTTPS kapcsolat működését. A weboldalt regisztráljuk a Google Search Console-ba, amely még egy plusz megerősítést ad arra vonatkozóan, hogy az átállással minden rendben ment. Ha mégis valami gond lenne, pl. bizonyos régi URL-ek 404-es nem létező oldal hibaüzenetre futnak, akkor ezt gyorsan korrigálni tudjuk.

Karbantartás és üzemeltetés

A modern tartalomkezelő rendszerek tették lehetővé, hogy egy kisebb-nagyobb módosításhoz, frissítéshez ne kelljen webfejlesztő segítségét igénybe venni, hanem maga a weboldal tulajdonos is azonnal el tudja végezni. 

A tartalomkezelő rendszerekkel ugyanakkor a weboldalak elleni támadások is megszaporodtak. Az okok viszonylag egyszerűek: a tartalomkezelő rendszerek olyan komplex szoftverek, amelyek a webről folyamatosan elérhetők és a legkisebb biztonsági rés esetén is komoly károkat lehet okozni rajtuk keresztül egy weboldalban, éppen ezért folyamatosan monitorozni és frissíteni kell őket. (A weboldalak elleni támadások okairól itt olvasható egy kimerítő cikkem.)

Többek között a modern weboldalak sérülékenysége okán vált szükségessé egy olyan ügyfélszolgálat felállítása, amely e-mail-en vagy telefonon folyamatosan elérhető és segítséget tud biztosítani a biztonsággal vagy akár a tartalomkezelő rendszer használatával kapcsolatos kisebb-nagyobb kérdésekben.

Ez az üzemeltetői háttér nagy biztonságot nyújt ügyfeleinknek, mert folyamatos felügyelet mellett biztonságban tudhatják weboldalaikat illetve bármilyen felmerülő kérdésük van, lesz akit el tudnak érni és segítséget kapnak.

A webfejlesztés során felmerülő leggyakoribb kérdések

• Keresőbarát lesz az új weboldal? Válasz: technikai SEO oldalról mindent elkövetünk annak érdekében, hogy a lehető legjobb alapokkal rendelkezzen a weboldal a legjobb Google helyezésekért vívott versenyben.
• Mobilon is jól fog megjelenni a weboldal? Válasz: csak reszponzív weboldalakat készítünk, amelyek automatikusan igazodnak a látogató eszközének felbontásához, így mobilon is optimális megjelenéssel bírnak
• Tudom majd én magam is szerkeszteni az oldalt? Válasz: minden weboldalhoz tartalomkezelő rendszert adunk, amely egy felhasználó névvel és jelszóval védett felületen keresztül lehetővé teszi a tartalom módosítását

Zárszó

A webfejlesztés az utóbbi 10 évben nagy változáson ment keresztül. Az online értékesítésből származó bevételek növekedésével szinte minden iparágban óriási lett a verseny, a cégek egymásra licitálnak weboldalaik minőségét, tartalmát és funkcionalitását illetően annak érdekében, hogy a látogatók őket válasszák.

Egy ilyen élvonalbeli weboldal megtervezése és lefejlesztése viszont gondos projekt menedzsmentet igényel, amelynek lépéseiről ebben a cikkemben próbáltam meg egy kis betekintést nyújtani.