Linardics Kft.
Harminc év szaktudás, öt technológia, tizennyolc CNC gép, és egy háromnyelvű oldal, amelyből mindez ajánlatkérés lesz.
linardics.hu →A Linardics Kft. 1994 óta gyárt precíziós lemezalkatrészeket a székesfehérvári Sóstói Ipari Parkban. A tudás megvolt, csak nem látszott. A B2B lemezmegmunkálásban viszont nem a szlogen dönt: a beszerző azt keresi, milyen gép áll a csarnokban, mekkora táblát tud vágni, milyen tűréssel dolgozik, és van-e mögötte ISO 9001. Ha ezt öt percen belül nem találja meg, továbbáll a következő beszállítóhoz. Az oldalnak tehát ezekre a kérdésekre kellett válaszolnia, nem a cégtörténetre.
Ehhez jött a nyelvi kérdés: a megrendelések jelentős része Ausztriából és Németországból érkezik, tehát az oldalnak magyarul, angolul és németül is ugyanolyan pontosnak kellett lennie, a szakszavaktól a letölthető tanúsítványokig és a keresőknek szóló jelzésekig.
A harmadik nehézség a mennyiség: öt technológiai főcsoport, tizenöt szolgáltatás, tizennyolc CNC berendezés és egy folyamatosan bővülő tudástár. Ezt úgy kellett rendszerbe tenni, hogy a látogató két kattintással eljusson a saját feladatához.
Egy 2014-es WordPress-oldal, amely már nem a mai beszerzőknek szólt.
Az ügyfél három dolgot mondott, ebben a sorrendben: az oldal elavult látványra, nem jönnek rajta keresztül megkeresések, és nehezen tudnak rá új tartalmat feltölteni. Ez a három panasz végül három különböző területre mutatott: az arculatra, az információszerkezetre és a szerkesztőfelületre.
A korábbi oldal 2014-ben indult, WordPressen, az akkori bővítménysorra építve: WPML a nyelvekhez, Contact Form 7 a kapcsolatfelvételhez, fancybox a galériákhoz. A nyitóképen stock illusztráció, a szolgáltatásoldalakon oldalsáv-menü és folyó szöveg, a géppark pedig egy tizenhat soros lenyíló lista, gépenként egyetlen névvel, fotó és műszaki adat nélkül.
Mérhetően két helyen látszott a baj: a betöltési sebességen és azon, amit az oldal a keresőknek üzent. A tíz év alatt felgyűlt bővítmények miatt a kezdőlap 7,8 MB-os lett, az LCP 7,6 másodperc. Strukturált adat közben nem volt az oldalon, tehát a Google-nak semmi nem mondta meg, hogy itt egy székesfehérvári, ISO 9001-es bérgyártóról van szó.
A feladat ezért nem egyszerű újratervezés volt, hanem sorrendcsere: a döntéshez szükséges információnak (gép, paraméter, tanúsítvány, ajánlatkérés) előre kellett kerülnie.
- Alapok
- WordPress-téma + bővítmények React + Vite, saját komponensek
- Nyelvek
- WPML-bővítmény Nyelvenkénti útvonalak, hreflang, sitemap
- Géppark
- 16 gépnév lenyíló listában 18 gépkártya fotóval és szűrővel
- Ajánlatkérés
- Contact Form 7, egy üzenetmező Háromlépcsős űrlap rajzfeltöltéssel
- Szolgáltatások
- Oldalsáv-menü, folyó szöveg 5 főcsoport, 15 paraméteres aloldal
- Strukturált adat
- nincs Organization, WebSite, LocalBusiness
- Szerkesztés
- WordPress admin, nehézkes Saját admin, súgóval és audit naplóval
- Kezdőlap súlya
- 7,8 MB 3,0 MB
- LCP
- 7,6 mp 1,8 mp
- Elrendezés-elmozdulás (CLS)
- 0,454 0,032
- Lighthouse (asztali)
- 8 · 79 · 96 · 85 99 · 95 · 96 · 100
A géppark mint érv
A szerkezet a gyártási folyamatot követi: vágás, hajlítás, megmunkálás, felületkezelés, logisztika. Minden főcsoport alá saját szolgáltatásoldalak kerültek, azokkal a paraméterekkel, amelyeket a beszerző keres: asztalméret, anyagok, maximális vastagság, tűrés.
A géppark külön, szűrhető oldalt kapott: tizennyolc berendezés technológia szerint csoportosítva, gyártóval és a lényeges műszaki adattal a kártyán. Mellé egy tudástár került a szerves forgalomért, és egy háromlépcsős ajánlatkérő űrlap, amely az elérhetőségtől a projektadatokon át a rajzfeltöltésig vezet.
A látogató ebből semmit nem lát, pedig a projekt gerince egy saját admin: innen kezelik a gépeket, a tudástárat, a kategóriákat és a képtárat, mindhárom nyelven, beépített, kereshető útmutatóval az új munkatársaknak.
Ipari sötét, nem „teches” sötét.
Arculati kézikönyvet kaptunk, de az a weboldalhoz alig adott támpontot, így a digitális megjelenést nagyrészt szabad kézzel alakíthattuk. A sötét paletta a mi javaslatunk volt: mélykék-fekete alap, amelyen a gépfotók érvényesülnek, és egyetlen meleg vörös kiemelőszín, amely mindig ugyanazt jelzi: itt lehet kattintani. Második kiemelőszínt nem terveztünk mellé, mert egy B2B oldalon a szín dolga az eligazítás, nem a hangulat.
A vörös a logóból jön, de nem pontosan az az árnyalat. Az eredeti a sötét alapon nem adott elég kontrasztot, ezért a webre külön hangoltuk. Ez egyszerre design- és akadálymentességi döntés volt.
A tipográfiában minden betűtípusnak saját szerepe van. A Barlow Condensed keskeny, mérnökies nagybetűs címeket ad, és ez itt nem esztétikai kérdés: a „Cső- és zártszelvény-lézervágás” egy háromnyelvű oldalon normál szélességű betűvel sehol nem fér ki egy sorba. A folyó szöveg Inter, a műszaki adatok és a gépazonosítók JetBrains Mono.
A fotózásnál két különböző dolgot akartunk. A katalógusfotó (fehér háttér, egységes nézet) azért kell, hogy a beszerző egy pillanat alatt felismerje a gépet, amelyet keres. A helyszíni fotó azért, mert az bizonyít: a gép tényleg megvan, működik, és a környezete is rendben van. Egy bérgyártónál ez a kettő együtt felel arra a kérdésre, amelyet senki nem tesz fel hangosan.
A mozgás GSAP-alapú és visszafogott: görgetésre beúszó elemek, amelyek sehol nem veszik el a figyelmet az adatokról.
Az ipari oldalak fele azért lesz sötét, mert az divatos. Itt azért lett az, mert a gépfotók 90%-a szürke fém: világos alapon egymásba folynak, sötéten viszont kirajzolódnak. A szín itt munkaeszköz.
Kutassy Bálint ügyfélkapcsolati vezető és a csapat szóvivője, KUTASSY
- Alap #060F1A Oldalháttér
- Kártya #0D1B2A Felületek, listaelemek
- Vörös #9C2622 Gombok és kiemelés
- Sötétkék #0F3052 Másodlagos felület
- Barlow Condensed Nagybetűs címsorok, navigáció
- Inter Folyó szöveg, űrlapok
- JetBrains Mono Műszaki adatok, gépazonosítók
Mit építettünk, és mi alapján.
Nem funkciólistából indultunk, hanem abból, hogy egy beszerző milyen sorrendben kérdez. Minden döntés alatt ott van a forrása is.
-
01
A szerkezet és az útvonalrendszer volt a legnehezebb rész.
Az oldal alapnyelve magyar, a piac viszont Ausztria és Németország. Az útvonaltáblát ezért nem lehetett egyszerűen lefordítani: egy táblából kell kiszolgálni a navigációt, a mega menüt, a nyelvváltót, a hreflanget és a sitemapet, mindhárom nyelven. A slugok nyelvi kezelése ezen belül külön kérdés volt, mert magyar alapnyelvnél nem ugyanaz a feladat, mint egy alapból angol oldalnál.
Mi alapján: ha a nyelvváltó és a hreflang külön logikából épít URL-t, az eltérésük nem ad hibaüzenetet, egyszerűen 404-es oldalra visz, és csak akkor derül ki, amikor valaki rákattint.
-
02
A nyelvek kezelése nem bővítményre épül.
Három nyelv, nyelvenkénti útvonalakkal, hreflanggel és build-időben generált sitemappel. Az Organization / WebSite / LocalBusiness JSON-LD statikusan a dokumentum fejlécébe került, nem a böngészőben töltődik be.
Mi alapján: egy egyoldalas alkalmazásnál a böngészőben betöltött metaadatokat a keresőrobot első, renderelés nélküli bejárása nem feltétlenül látja, a statikus fejléc viszont mindig ott van.
-
03
A géppark önálló, szűrhető adatbázis lett.
Tizennyolc berendezés technológia szerint csoportosítva, kártyánként fotóval, gyártóval és azzal az egy adattal, amely a döntéshez kell: teljesítmény, tonnázs, vagy hogy kombigépről van szó. A szűrőn a darabszám is látszik, így egy pillantásból kiderül, van-e egyáltalán csőhajlító kapacitás.
Mi alapján: a régi oldalon ugyanez egy tizenhat soros lenyíló lista volt, csak gépnevekkel, fotó, adat és szűrés nélkül.
-
04
Az ajánlatkérő űrlap előre szűr, nem csak adatot gyűjt.
Az ügyfélinterjúkból két jól elkülönülő csoport rajzolódott ki. A nagy megrendelők beszerzési e-mailt küldenek, hogy minden beszállító ugyanarra tudjon árat adni, őket űrlappal nem lehet megszólítani. A kisebb, eseti megrendelők viszont űrlapot töltenek, csak ritkán írják le az összes adatot, amelyből árazni lehet. Minden ilyen érdeklődés egy visszahívás és egy beszélgetés: sok munkaóra, mielőtt egyáltalán kiderül, hogy érdemes-e.
Mi alapján: az űrlap ezért kér nettó 50 000 Ft-os minimumot még a kitöltés előtt, és ezért kéri be a projektadatokat is. Nem az ügyfelet szűri, hanem a gyártó idejét védi.
-
05
Azért lett háromlépcsős, hogy senki ne adja fel félúton.
Az első lépés csak elérhetőséget kér, a második a projektadatokat, a harmadik a rajzfeltöltést. Ha mindez egy képernyőn jelenne meg, a validáláshoz szükséges mezőmennyiség önmagában elriasztaná azt is, aki egyébként kitöltené.
Mi alapján: egy hosszú, egyoldalas B2B űrlapnál a kitöltés az első képernyőn dől el.
-
06
Az igazi termék a belső admin lett.
Tartalom- és felhasználókezelés gépekre, cikkekre, kategóriákra és képekre, mindhárom nyelven, és ami a legtöbbet ér: beépített útmutatóval az új munkatársaknak. Az egyik eredeti panasz az volt, hogy nehezen tudnak új tartalmat feltölteni; ezt nem lehet szebb szerkesztőmezővel megoldani, csak azzal, ha a rendszer maga tanítja be a használóját.
Mi alapján: egy weboldal élete során sokkal többször szerkesztik a tartalmát, mint ahányszor a tervén dolgoznak.
-
07
A vezérlőpult feladatlista, nem statisztika.
Belépés után nem grafikonok fogadják a szerkesztőt, hanem egy „Mit kell csinálnod most?” lista: piros sáv a közzétételre váró piszkozatnak, sárga a hiányzó angol vagy német fordításnak és a hiányzó borítóképnek, szürke az üres kategóriának. A sor melletti gomb nem a szekcióba visz, hanem a konkrét mezőre ugrik, és piros kiemeléssel megmutatja, hova kell írni. Ha nincs teendő, zöld „Minden rendben!” üzenet jelenik meg, alatta nem sürgős javaslatokkal, például hogy egy cikk fél éve nem frissült.
Mi alapján: a szerkesztő nem azt akarja tudni, hány tartalom van a rendszerben, hanem azt, mi hiányzik belőle. A darabszám ettől még ott van, csak nem az a főszereplő.
-
08
Az admin megmutatja, mi mire van hatással.
Majdnem minden mező alatt ott áll, hol jelenik meg a beírt érték: „Ez jelenik meg a publikus géppark oldal listáján”, „Javasolt arány 4:3 vagy szélesebb, min. 1200 px szélesség”. A géplista tetején pedig egyetlen mondat tisztázza a legfontosabb szabályt: a publikus oldalon csak a „Közzétéve” státuszú gépek jelennek meg. A kártyán látszó kiemelt szám (5 kW, kombi) sem szabad szöveg valahol a leírásban, hanem saját mező: „Kiemelt érték, piros jelvényként a képkártyán”.
Mi alapján: az új szerkesztő nem attól fél, hogy nem tudja kitölteni a mezőt, hanem attól, hogy elront valamit a nyilvános oldalon. Ha a felület megmondja, mit csinál egy mező, elmarad a kérdés is.
-
09
A rendszer nem hagyja, hogy a szerkesztő kizárja magát.
Az auditnapló minden adminműveletet rögzít (belépés, létrehozás, törlés, sorrendcsere, jelszócsere), módosításnál mezőszinten megmutatva, mi volt előtte és mi lett utána. A napló szándékosan nem törölhető. Emellé jön néhány beépített korlát: van nem törölhető „védett” admin fiók, és mindig kell maradnia legalább egy aktívnak; a Tudástárban pedig pontosan egy kiemelt cikk lehet: ha egy másikat jelölsz ki, a régiről a rendszer magától leveszi, az utolsót viszont sem levenni, sem törölni nem engedi.
Mi alapján: ezek az esetek évente egyszer fordulnak elő, de akkor fejlesztői beavatkozás nélkül megoldhatatlanok. Olcsóbb szabálynak megírni őket, mint egyszer helyreállítani.
-
10
Az „Eladó gépeink” oldal ugyanabból a gépadatból él.
A gépek műszaki adatai már benne vannak a rendszerben, tehát a használt gépek hirdetéséhez nem kell új tartalmat felvinni: ugyanaz az adat kap egy második, értékesítési nézetet. Az értékesítő így nem specifikációt másol egy levélbe, hanem linket küld.
Mi alapján: ugyanaz az adat két üzleti folyamatban, a második oldal így nem új tartalom, hanem új nézet.
-
11
A fordítóirodát kivettük a folyamatból.
A teljesítési idő túl hosszú lett volna, és nem találtunk olyan irodát, amelyben teljesen megbíztunk volna: a gépi fordítások korában a „fordítás” szó ma már nem elég garancia. Helyette MI-alapú fordítómodellekkel dolgoztunk, majd az ügyfél adott nyelven értékesítő munkatársai javították a hibákat. Ehhez a fordítandó anyagot külön, olvasható fájlokba exportáltuk, hogy ne fejlesztői formátumban kelljen javítaniuk.
Mi alapján: a szakmai pontosságot nem a fordító adja, hanem az, aki azon a nyelven adja el a terméket. A folyamatot ehhez igazítottuk.
-
12
A régi oldalt nem kikapcsoltuk, hanem átköltöztettük.
A gépspecifikációk a régi oldalról jöttek át, a korábbi URL-ek pedig 301-es átirányítással mutatnak az új megfelelőjükre. Tíz év alatt egy ilyen oldal rengeteg linket és keresési helyezést gyűjt, ezeket eldobni fölösleges veszteség.
Mi alapján: a domain tízéves múltja a projekt egyik legértékesebb eszköze volt, nem a terhe.
-
13
A tudástár nem blog, hanem keresési felület.
Anyagismereti és technológiai összehasonlító cikkek (porfestés vagy nedves festés, acéltípusok), vagyis pontosan azok a kérdések, amelyeket a beszerző a döntés előtt beír a keresőbe.
Mi alapján: a szolgáltatásoldalakra az talál rá, aki egy konkrét technológiát keres, a tudástárra az, aki egy problémára keres megoldást.
-
14
A sebesség itt tervezési döntés.
Vite-alapú build, React / React Router / GSAP szerint szétbontott kód, előre betöltött nyitókép, és csak azok a betűvastagságok, amelyeket az oldal használ. A kezdőlap 7,8 MB-ról 3,0-ra fogyott, az LCP 7,6 másodpercről 1,8-ra.
Mi alapján: az LCP-t a nyitókép adja, minden más optimalizálás csak ezután hoz mérhető javulást.
-
15
A pályázati kötelezettség is a fejlesztő dolga.
A cég uniós pályázatot nyert, amelynek kötelező megjelenítésére pontos szabályok vonatkoznak: méret, elhelyezés, tartalom. Ezt nem az ügyfélre bíztuk: a Széchenyi-blokk és a hozzá tartozó oldal a követelmények szerint készült.
Mi alapján: aki weboldalt épít, annak ismernie kell azokat a kötelezettségeket is, amelyekről az ügyfél nem tudja, hogy kérdeznie kellene.
Hogyan készült
Öt elem, amelyből az oldal összeáll.

Szolgáltatásoldalak
Öt főcsoport, tizenöt aloldal. Mindegyik a saját műszaki adataival nyit: technológia, megmunkálási tartomány, anyagok, maximális vastagság.

Iparági referenciák
Autóipar, gépipar, elektronika, energetika, közlekedés: projektenként a felhasznált technológiákkal és a sorozatnagysággal.

Bizalmi jelek
Partnerlogók, ISO 9001 és ISO 3834-2 tanúsítvány, harmincéves gyártói idővonal. A bizalomhoz is kell bizonyíték.

Tudástár
Anyagismeret és technológiai összehasonlítások szakcikkekben, pontosan azokra a kérdésekre, amelyekre a beszerző a döntés előtt rákeres.

Három nyelv, egy váz
Magyar, angol és német változat ugyanabból a tartalomvázból, nyelvenkénti útvonalakkal, hreflanggel és nyelvenként külön letölthető tanúsítvánnyal.
A legnehezebb rész nem a látvány volt, hanem a szerkezet: hogyan kapcsolódik egymáshoz tizennyolc gép, tizenöt szolgáltatás és három nyelv úgy, hogy egy új gép felvitele ne legyen fejlesztői feladat.
Biró Tamás
vezető fejlesztő, KUTASSY