Építőipari weboldal készítés a nulláról: Az SZMH-Euro Metall Kft. projektje
Minden egy Facebook poszttal kezdődött. Egy virtuális asszisztens csoportban osztottam meg az önéletrajzomat és a portfóliómat, abban bízva, hogy talán valakinek épp egy webfejlesztőre van szüksége. Az eredmény? Több megkeresés is landolt a postafiókomban, köztük Gáboré, az SZMH-Euro Metall Kft. tulajdonosáé.
A cég egy kőkemény ipari szereplő: építőipar, bádogozás, fémszerkezetek építése és ipari csarnokok felhúzása a fő profiljuk. A probléma az volt, hogy bár a fizikai világban profik, az online térben gyakorlatilag láthatatlanok voltak. Egyáltalán nem volt weboldaluk, így egy teljesen tiszta lappal, a nulláról kellett felépíteni a digitális jelenlétüket.
A cél: Kilépni az online térbe
Az építőipari weboldal készítés során a legfontosabb cél gyakran nem a bonyolult webshopos értékesítés, hanem a hitelesség építése. Gáborék kérése is egyszerű, de annál fontosabb volt: szerettek volna egy stabil, megbízható online pontot, egy digitális névjegykártyát, ami megmutatja a leendő megrendelőknek (legyen az B2B vagy lakossági ügyfél), hogy egy valós, komoly céggel állnak szemben.
Kihívás #1: SEO tartalomírás infók nélkül
Amikor nulláról indítunk egy projektet, a legnagyobb falat általában a tartalom (szövegírás). Mivel nem kaptam kész anyagokat, az egyetlen forrásom a cég Facebook oldala volt. Onnan kellett összeszednem az információmorzsákat, hogy releváns, és a keresők (Google) számára is értékes SEO szöveget írjak.
Hogyan írj szöveget, ha az ügyfél nem küld anyagot?
Soha ne hagyd üresen (vagy Lorem Ipsummal) az oldalt! Nézd át a régi posztokat, keress rá a konkurensekre az adott iparágban, és írj egy vázlatot. Az ügyfélnek sokkal könnyebb egy meglévő, általad megírt szöveget kijavítania, mint a nulláról megírnia a sajátját. Ez rengeteg időt spórol mindkét félnek!
Kihívás #2: Az egyedi kódolás csapdája
A weboldal nem egy WordPress + Elementor kombinációval készült, hanem tisztán egyedi kódolással (HTML/CSS/JS). Ez sebesség és biztonság szempontjából fantasztikus, de bevallom őszintén, fejlesztőként belesétáltam egy igazi kezdő csapdába.
A fejlesztés elején a Fejlécet (Header - menüsáv) és a Láblécet (Footer) belekódoltam minden egyes HTML fájlba. Amikor már több aloldal is készen volt, és egy apró módosítást kellett végrehajtani a menüben, rájöttem, hogy ezt minden egyes oldalon manuálisan át kell írnom. Rengeteg időt veszítettem a semmire.
A komponens-alapú gondolkodás életmentő!
Ha egyedi weboldalt fejlesztesz HTML-ben, soha ne másold a ismétlődő elemeket! Használj PHP include-ot (<?php include 'header.php'; ?>), vagy valamilyen templating enginet (Pug, EJS), esetleg JavaScriptet az ismétlődő elemek betöltésére. Ha egy helyen módosítasz, változzon meg mindenhol! Tanuljatok az én hibámból!
Dizájn: Hogyan tegyünk izgalmassá egy fémipari céget?
Egy építőipari/fémipari weboldal könnyen válhat szárazzá, unalmassá. Hogy ezt elkerüljem, az arculatot a cég meglévő logója köré építettem fel: tiszta fehér háttér, határozott piros dominanciával, ami erőt és precizitást sugároz.
Hogy megtörjem a monotonitást, a következő trükköket vetettem be:
- Rengeteg vizuális tartalom: Kialakítottam egy külön galériát a referenciamunkáknak, hiszen ebben a szakmában a kép többet mond ezer szónál.
- Belépési animációk: Ahogy a felhasználó görget, az elemek finoman úsznak be a képernyőre (Scroll Reveal). Ez modern érzetet ad egy hagyományos iparág weblapjának is.
- Változatos elrendezések: Nem csak unalmas szövegblokkokat használtam, hanem aszimmetrikus rácsokat (grid) a szolgáltatások bemutatására.
A Végeredmény
Az ügyfélnek, és a családjának is annyira tetszett a végeredmény, hogy már jelezték: amint elkészül az új boltjuk, ahhoz is velem szeretnék megcsináltatni a weboldalt!
Ennél nagyobb dicséretet és jobb referenciát egy fejlesztő nem is kaphat. Az SZMH-Euro Metall Kft. immár profi online jelenléttel rendelkezik, ami méltó a fizikai világban végzett minőségi munkájukhoz.
Szeretnél egy hasonló weboldalt?