ai-my-web-site

Megújult a my-web.hu

date október 12, 2009 @ 22:27

category Nincs kategorizálva
category , ,

Kanyarodjunk el egy kicsit a CSS 3-tól, mert szeretném megmutatni cégem új honlapját. Nem teljes újratervezésre csak egy kis ráncfelvarrásra törekedtem, mert volt néhány pont, amelyen javítani szerettem volna.

Elsőként a fejlécet és a főmenüt terveztem át. Az egész site-nak szerettem volna egy bordós alapszínt adni, ennek köszönhető a bordó menü és a vele megegyező színű gomb. Ezen kívül kisebbre vettem a fejlécben szereplő képet, hogy helyet adjak a legfontosabb tartalomnak. Mivel a látogatók jó része nemhogy a címlapról nem megy tovább, de még le sem hajlandó görgetni az oldal végéig – ez nem csak erre a honlapra, hanem mindegyikre igaz -, ezért fontosnak tartottam, hogy már a böngészőben görgetés nélkül látható tartalom is lekösse a látogató figyelmét.

A screenshotok túl kicsik, ahhoz, hogy minden részlet látható legyen, de illusztrációnak szerintem megfelel. Ilyen volt:

mw-old1

És ilyen lett:

mw-new1

Az átalakítás következő célpontja a lábléc lett, ami eddig a weboldal leganakronisztikusabban kinéző része volt. Egy egyszerűbb, lábléc került a helyére, amelyen keresztül elérhetőek a fontosabb menüpontok, és egy pár sorban az is le van írva, hogy milyen tartalom található az adott menüpont alatt.

Ilyen volt:

mw-old2

És ilyen lett:

mw-new2

A ráncfelvarrás következő áldozata a “Kapcsolat” menüpont lett, amely az átalakulásban sokat köszönhet a Niceforms scriptnek. Ezen kívül összedobtam hozzá egy kis JavaScript kódot, ami még a form elküldése előtt ellenőrzi, hogy az e-mail cím megfelel-e a RegEx feltételeknek. Semmi extra, de az előző verzióban nem volt.

Ilyen volt:

mw-old3

Ilyen lett:

mw-new3

Ez után arra próbáltam megoldást keresni, hogy hogyan tudnám az oldalon szereplő egyes – ritkábban használt – fogalmakat elmagyarázni a kevésbé hozzáértő olvasóknak, a nélkül, hogy olyanokat untatnék, akik nem szorulnak rá a magyarázatra. Persze nem a spanyolviaszt találtam fel, csak egy más weboldalakon – általában reklám célra – használt technikát valósítottam meg, CSS és jQuery segítségével: ha az olvasó a szaggatott vonallal aláhúzott szóra viszi az egeret, akkor egy külön tooltip-en (hogy mondják ezt magyarul?) megjelenik egy kis magyarázat. Akárcsak az alábbi képen.

mw-new4

Végezetül ami sokak számára nem látható, de mégis fontos változtatás, hogy a sIFR-ről áttértem a Cufón-ra. Ez ugyanúgy alkalmas arra, hogy a felhasználó gépén nem látható betűtípust tegyen használhatóvá a weboldalon, viszont azzal a nem kis előnnyel bír, hogy nem Flash alapú, így azok is Myriad Pro Light-ot láthatnak Trebuchet MS helyett, akik valamilyen flash-t blokkoló alkalmazást futtatnak.

Hát nagyjából eddig terjednek a design szempontból fontos újítások, a többi inkább marketing, amivel ezen a blogon nem untatnálak benneteket. Nézzétek meg az oldalt élőben is, és várom az építő kritikákat, vagy netalántán dicséreteket :)