Kunden
Eksosanlegg AS er Norges eksosanleggspesialist, basert i Moss. De konstruerer, produserer, reparerer og importerer eksosanlegg for de fleste bilmodeller - med særlig fokus på amerikanske biler og klassiske kjøretøy. Skreddersydd fabrikasjon er tilgjengelig etter avtale og utføres mandag til onsdag. Komponenter selges direkte gjennom nettbutikken deres, som dekker alt fra rette rør og Y-rør til headers, enderør, klemmer og lyddempere. Partnermerker inkluderer Supersprint fra Italia og MagnaFlow fra USA. Selskapet holder til i Rabekkgata 17, 1523 Moss, og kan nås på [email protected].
Utfordringen
Eksosanlegg hadde en fungerende nettside med en stor produktkatalog på over hundre sider, men presentasjonen sto ikke i stil med innholdet. Bildene lå som jpg og png på rotnivå uten tydelig organisering. Kategorikortene på forsiden hadde gradienter som brøt med resten av uttrykket. Toppbildet viste taket på en bil, ikke eksosen selskapet faktisk spesialiserer seg på. Galleriseksjonen brukte en innebygd YouTube-video i stedet for eget videoinnhold.
Selve galleriet hadde 19 oppføringer som pekte til filer som ikke lenger eksisterte, tre filterkategorier som ikke nøyaktig beskrev innholdet, og et stort antall bilder som aldri ble vist noe sted. Klemmer-produktsiden grupperte alle klemmetyper på én side, men lenket hvert produktkort til samme standardvisning, noe som tvang kunden til manuelt å bytte mellom AccuSeal, U-klemmer og galvaniserte klemmer uansett hvilket kort de klikket på.
Den underliggende kodebasen var solid. Jobben var ikke å bygge om - den var å fikse de spesifikke tingene som fikk nettstedet til å føles ufullstendig og upolert.
Hva vi bygget
Bildemigrering og organisering
Alle bilder ble konvertert til WebP. 94 HTML-filer ble omlenket fra jpg/png-referanser til sine WebP-ekvivalenter, og bildene ble omorganisert fra en flat rotmappe til navngitte undermapper: american_classic, cars_and_bikes, Parts, Verksted og case_toyota_crown. 149 originale jpg- og png-filer ble slettet når alle referanser var bekreftet trygge å fjerne.
Galleri - bygget opp fra bunnen
Filterstrukturen ble redesignet rundt tre meningsfulle kategorier: Verksted (verksted- og prosessbilder), Kundebilder (kundebiler) og Deler (komponenter og deler). Innhold fra american classic og cars_and_bikes ble flyttet til Kundebilder, delefotografi til Deler og verkstedprosessbilder til Verksted. Tretti nye gallerielementer ble lagt til fra tidligere ubrukte bilder. Alle 19 oppføringer som pekte til manglende filer ble fjernet.
Forsidekategorikort
Seks nye produktbilder uten bakgrunn ble hentet fra en dedikert forside_produkter-mappe og brukt på alle seks kategorikort. Gradient-overleggene som var inkonsekvente med resten av siden ble fjernet og erstattet med en enhetlig #111-bakgrunn på alle kort, noe som brakte dem i tråd med nettstedets designsystem.
Toppbilde
Toppbildet ble byttet til et foto av en amerikansk klassiker der eksosen er synlig. Bildeposisjonen ble justert for å ramme inn den nederste delen av bilen, slik at spesialiteten blir tydelig med en gang siden lastes.
Videoseksjon i galleriet
YouTube-innbyggingen i forsidegallerivisningen ble erstattet med en lokalt hostet MP4. En tilpasset volumkontrollskive ble lagt til - dempet som standard, med mulighet til å øke volumet. En liten CTA under seksjonen peker besøkende til selskapets YouTube-kanal for mer videoinnhold.
Klemmer-dyplinking
De tre klemmeproduktkortene på komponentsiden (AccuSeal, U-klemmer, Galvaniserte) lenker nå til klemmer.html#accuseal, klemmer.html#uklemmer og klemmer.html#galvanisert. JavaScript på klemmesiden leser URL-hashen ved lasting og aktiverer automatisk det tilsvarende produktfilteret, slik at kunden lander direkte på det de klikket på.
Produktkortbilder
AccuSeal-kortet ble oppdatert til å bruke nærbildet av båndklemmen som best representerer produktet. U-klemmer-kortet ble oppdatert til å bruke det korrekte U-klemmebildet. Produktbilder på klemmerdetaljsiden ble justert for å fjerne et reklamefoto som ikke var passende for produktvisningen.
Beslutninger som er verdt å forklare
Migrering
Skriptet WebP-migrering, ikke manuell opplasting
Nettstedet hadde rundt 150 jpg- og png-bilder spredt over en flat rotmappe. Et Python-skript håndterte masseomlinkingen på tvers av alle 94 HTML-filer i én kjøring, med regex-mønstre kartlagt til den nye undermappestrukturen. Manuelle oppdateringer ville introdusert inkonsekvenser og tatt betydelig lengre tid.
Galleri
Kategorier basert på hva bildene faktisk er
De opprinnelige gallerfiltrene gjenspeilte ikke innholdet. Å kalle verkstedbilder 'Verksted' og kundebiler 'Kundebilder' gjør navigasjonen nøyaktig fremfor omtrentlig. Deler er en ny kategori som ikke fantes før - den gir produktfotografi en plass i galleriet.
Video
Lokal MP4 fremfor innebygd YouTube
En iframe-innbygging er avhengig av en tredjepartstjeneste og laster inn ekstra skript. En lokal MP4 er raskere, har ikke YouTube-UI-elementer, og holder besøkende på siden. YouTube-CTAen under tjener samme reklamiformål uten å plassere plattformens kontroller midt på forsiden.
Lyd
Volumskive, ikke autoavspilling med lyd
Autoavspilling med lyd blokkeres av de fleste nettlesere og ville vært påtrengende. Videoen spilles stille som standard. Å legge til en tilgjengelig volumglider gir besøkende muligheten uten å tvinge den på.
Navigasjon
Hash-ruting på en enkelt produktside
Å beholde AccuSeal, U-klemmer og galvaniserte klemmer på én delt side med et filter er fornuftig - produktene er nært beslektet. Men å lenke alle tre kort til samme standardvisning betydde at filteret i praksis var usynlig. URL-hash-ruting legger ingen kompleksitet til siden og får navigasjonen til å oppføre seg nøyaktig som en kunde forventer.
Omfang
Ingen gjenoppbygging
Den eksisterende kodebasen var solid. En gjenoppbygging ville tatt lengre tid, introdusert risiko og levert samme resultat. Målrettede forbedringer - bildemigrering, galleriomstrukturering, navigasjonsfikser - leverte mer verdi raskere på tvers av alle 106 sider.
Resultatet
Nettstedet laster raskere, har ingen ødelagte bildereferanser og presenterer produkter og bilder i riktig kontekst. Galleriet er ryddigere og mer komplett, kategorikortene henger bedre sammen visuelt, og toppbildet kommuniserer hva selskapet gjør. Kunder som klikker på et klemmekort lander direkte på riktig produktvisning uten å måtte forstå filtersystemet først.
106 sider. Samme kodebase. Alt på riktig plass.
Raskere lasting. Ingen ødelagte bilder. Hvert produktkort lander der det skal. Nettstedet trengte ikke å bygges på nytt - det trengte å ferdigstilles.