Kreatív webdesign stúdió – Budapest

Menu

Stíluslap mágia

2017. 06. 3.

A napokban egy leendő ügyfél keresett meg minket, hogy van egy jól működő sportcipőkkel foglalkozó webáruháza, de a megjelenése, felülete már kicsit elavult. Az oldal legalább öt éve készült és ez tényleg meg is látszott rajta. Az ügyfél alapjába véve elégedett volt az oldallal, az elrendezést, arculatot, színeket nem is szerette volna ha módosítjuk. A vevők is szeretik az oldalt, hozza a megrendeléseket, jó forgalma van. Továbbá fontos kívánalom volt, hogy minimális fejlesztői munkaórát igényeljen a ráncfelvarrás.

Elvállaltuk a munkát és nekiestünk a tervezésnek. Kaptunk elérhetőséget az oldal fejlesztői csapatához és abszolút nyitottak voltak egy kis segítségre az irányunkba.

A jelenlegi struktúrát megtartva tervet készítettünk a kezdő oldalra, termék lista és termék oldalra. Minden ugyanott volt rajta, passzoltak a színek, formák is és az ügyfél is maximálisan elégedett volt a végeredménnyel. Jött a kérdés részéről, hogy lesz ebből a képből weboldal. Vagyis miként fog ez a megjelenés átvándorolni a jelenlegi oldalára.

A válasz pedig a stíluslap vagyis a CSS (a CSS az angol Cascading Style Sheets kifejezés rövidítése) fájl. Ez a lap tartalmazza az oldal megjelenésére vonatkozó összes utasítást a böngésző részére. Milyen betűtípust használjon az oldal a szöveges tartalom megjelenítésére, milyen méretű és színű legyen egy adott elem stb. Gyakorlatilag a stíluslap átírásával egy teljesen új megjelenésű weboldalt lehet létrehozni (itt mondjuk nem ez volt a cél…).

A stíluslapon kívül sikerült még megoldani, hogy az oldalon használt ikonokat, képes tartalmakat is lecseréljük. A fejlesztők részére egy teljesen új képi csomagot adtunk át, ugyanolyan elnevezésekkel csak más kiterjesztésű fájlokkal. A régi pixelgrafikus ikonokat újrarajzoltuk és lecseréltük (volt amit újraterveztünk) svg kierjesztésű vektorgrafikus képekre. Ezeknek hatalmas előnye, hogy a csili-vili új telefonok full HD kijelzőjén is tűélesek és a méretük is minimálisra zsugorodott (a méret alatt nem a fizikai méretre gondolok), így csökkent az oldal betöltődési ideje.

A megrendelő boldog, mi is, és a fejlesztőknek sem kellett három óránál többet tölteni a feladattal.

És akkor lássuk a lényeget. Ez volt az eredeti megjelenés:

Ez pedig a mi általunk készített verzió: