Egy jó weboldal alapja a jó Sitebuild. Ebben a posztban hasznos tippeket adunk a modern weboldal készítéshez.



Ha tovább olvasod a posztot, akkor megtudhatod:

  • Hogyan könnyítheted az életedet a Grid System segítségével
  • Hogyan tesztelheted weboldalad Internet Explorer 8 böngészőben, ha már magasabb verzió van a gépeden
  • Hogyan használj nem átlagos fontot
  • Milyen formátumot használj a reszponzivitás követéséhez

Hogyan könnyítheted az életedet a Grid System segítségével



A Grid system a reszponzív weboldal készítés egyik alappillére. Ez nagyban segíti a Webdesigner és a Sitebuilder munkáját, hiszen a Webdesignerek is Gridekkel dolgoznak. A Grid System gyakorlatilag egy eszköz, amivel arányos méretű oszlopokra bontod a weboldalad szélességét, és az oldalon lévő elemeket ezekhez igazítod.

Az alábbi Grid System-et használjuk mi, aminek az alapját ez a reszponzív framework képezi.
Ha nemtudod, mi az a reszponzivitás, itt olvashatsz róla bővebben: Reszponzív webdesign. Mit jelent? Mire jó?

Hogyan tesztelheted weboldalad Internet Explorer 8 böngészőben, ha már magasabb verzió van a gépeden



Manapság is sokan használnak Internet Explorert. Legfőképpen azért, mert a vállalatok nem telepítenek más böngészőt a megvásárolt számítógépekre, hanem használják a gyárilag telepítettet. Szerencsére Internet Explorer 8 előtti verziókat nem nagyon használnak már, mert a Windows XP Service Pack 3 már tartalmazta. Ezért érhető el olyan nagy számban az IE8 és az ez feletti verziók.

Ahhoz, hogy tesztelni tudjuk a weboldalunk működését IE8 böngészőben, telepítenünk kell egy virtuális gépet, amire telepítjük a Windows XP SP3 verzióját.

Ne használjuk különböző User Agent bővítményeket, mert nem tudja megfelelően emulálni a különböző böngészőket.

Hogyan használj nem átlagos fontot



A külső fontok (amelyeket nem tartalmazza alapból az operációs rendszerünk) nagy szerepet játszanak manapság a weboldalak egyedi megjelenésében. Az egyedi font használata kétféleképpen történhet. Ha a fontunkat egy másik szerverről hívjuk meg (pl.:Google fontok), akkor nem kell a szerverünkön tárolni az adott font fájlokat. A Google fontok használatáról további infót itt találsz: http://www.google.com/fonts

A másik lehetőség, hogy a fontokat saját szerverünkön tároljuk. Érdemes több formátumban is tárolni a fontot(.ttf (TrueType Font), .otf (OpenType Font), .eot, .woff, .svg file), a különböző böngészők miatt. Ezt a megoldás a CSS-ben @font-face tag-el lehet megoldani. Bővebben itt olvashattok róla: Font-Face

Milyen formátumot használj a reszponzivitás követéséhez



Az a formátum, amit erre használnak az az SVG. Az SVG előnye a JPEG és a PNG formátumokkal szemben, hogy teljesen vektoros, így bármekkora méretre nagyítható illetve kicsinyíthető ugyanaz a fájl, minőség romlás nélkül. Ennek azért van haszna, mert napjainkban rengeteg különböző felbontású eszköz van, és ezzel a formátummal nincs szükség több fájl készítéséhez. Ám, mivel ez vektoros, így csak olyan “képeknél” használható, ami alapból vektoros. Tehát egy fényképet nem készíthetünk el SVG formátumúra. Alapvetően az oldal logóját és az ikonokat érdemes ebben a formátumban használni.

A legjobb módszer, amit jelenleg ismerek az az, hogy a fent említett módon fontként hívjuk meg az ikonokat, így testre szabhatóak lesznek, és egyszerűbben kezelhetőek, mivel fontként viselkednek. Átszínezheted, vagy méretezheted könnyen CSS-ből.
Itt egy egyszerű alkalmazás, amivel könnyen készíthetünk az SVG fájlunkból fontot: IcoMoon

Ezek azok a technológiák, amik már kellőképpen elterjedtek, így biztosak lehetünk benne, hogy sokáig fogják támogatni őket a böngészők. Bátran ajánlom használatukat a weboldal készítéshez!