szeptember 17, 2013

Reszponzív weboldal készítés CSS keretrendszer segítségével

Augusztusban megjelent a Bootstrap CSS keretrendszer újabb 3.0.0 verziója. Segítségével egyszerűen készíthetünk minden igényt kielégítő responsive weboldalakat. Használatával rengeteg fejfájástól és fejlesztői munkaórától kímélhetjük meg magunkat, éppen ezért érdemes megismerkedni vele.

Mi is az CSS keretrendszer (CSS framework)?

Bár megjelenésében minden weboldal igyekszik megkülönböztetni magát, a weboldalakat felépítő elemek, funkciók gyakran azonosak. Ilyen elemek lehetnek az űrlapok, gombok, kereső mezők, menüpontok és nem utolsó sorban maga a reszponzív működés is. Ezeknek az elemeknek a működése, elrendezése az aktuális grafikai megjelenéstől függetlenül többé kevésbé azonos.
Amikor egy weboldal fejlesztésébe belevágunk ezeknek az elemeknek a működését minden alkalommal újra és újra ki kell alakítanunk, ami JavaScript és CSS fejlesztést igényel. CSS keretrendszerek használatával ezt a munkát spórolhatjuk meg. Ezek a rendszerek ugyanis tartalmazzák azokat az általános, szabványos, alap működési megoldásokat, amelyekre minden weboldalnak szüksége lehet. Nagyszerű példa erre a a reszponzív működés maga, amire az alábbiakban példákat is meg fogunk nézni.

Mit kell tennünk ha a meglévő oldalunkat kell reszponzívvá tenni?

Ez nem egyszerű dolog, többnyire elég sok kellemetlenséggel kell ilyenkor szembesülnünk. A CSS szabályok ad-hoc fabrikálásán túl gyakran a tartalmat is át kell szerkesztenünk. Sokszor pedig egészen lehetetlen helyzetekkel kerülünk szembe. 🙁 Az oldalunk alap szerkezetét is érintő módosítások során könnyen kerülhetünk abba a helyzetbe, hogy a módosítások eredményeként a CSS szerkezet átláthatatlanná, zavarossá válik. Ilyen helyzetben érdemes megfontolnunk a frontend teljes újraépítését egy CSS keretrendszer segítségével. Elsőre talán könyörtelenül hangzik, de a mobilra optimalizálást nem kerülhetjük el, és ha már hozzá kell nyúlni az oldalhoz érdemes úgy elvégezni a módosításokat, hogy azzal jelentősen modernizáljunk az általunk használt technológiát is.

Hogyan használjunk CSS keretrendszert?

A Bootsrtap keretrendszer szinte az összes általánosan használt UX elemet tartalmazza, ami egy weboldalon előfordulhat. Ha ezekből az elemekből építjük fel a honlapunkat, akkor biztosak lehetünk benne, hogy ezeknek az elemeknek a működése szabványos, böngésző kompatibilis, egyszerű és megbízható lesz. Saját oldalunk átépítését három lépésben végezzük el:

  1. Töltsük le a Bootstrap keretrendszert
    A “Compile” gombra kattintva egy ?id=123456 URL-t fogunk kapni. Ezt mentsük el, mert a beállításainkat ezen az URL-en elmenti a Bootsrap. Így ha a letöltött csomagot később szeretnénk módosítani (színek, margók, stb.), akkor nem kell minden újra beállítanunk.
  2. Készítsünk Bootstrap drótvázakat
    Anélkül, hogy bármit módosítanánk a Bootstrap alap megjelenésén építsük fel a saját honlapunk típusoldalait a Bootsrtap CSS-ek segítségével. Készítsünk működő HTML drótvázakat, prototípusokat, a nélkül hogy bármit dizájnolnánk. Léteznek grafikus eszközök is erre a feladatra, mint a Divshot, de én jobban szeretem a forráskódban történő szerkesztést.
  3. Módosítsuk oldalaink grafikai megjelenését
    Ha a típusoldalak prototípusaival kész vagyunk, jöhet a dizájn. Módosítsuk ízlésünknek megfelelően a CSS stílusokat, de itt is érdemes első körben a Bootsrtap saját egyéni, személyre szabási lehetőségeit (1. pont) kihasználni, és csak ezt követően saját stílusokat alkalmazni.

Reszponzív weboldal készítése Bootsrtap segítségével

Ez az egyik legszórakoztatóbb része a keretrendszernek. Egy meglévő legördülő menüt reszponzívvá tenni szinte lehetetlen kihívás. A Bootstrap segítségével viszont játék az egész, néhány jól irányzott CSS class segítségével tökéletesen működő menüt készíthetünk, nézzünk egy példát.

A tartalom reszponzívvá tétele szintén gyerekjáték. Alapból négy  eszközméretet különböztet meg a keretrendszer:

  • Extra small devices – Phones (<768px)
  • Small devices – Tablets (≥768px)
  • Medium device -Desktops (≥992px)
  • Large devices – Desktops (≥1200px)

Azt hogy egy HTML elem megjelenjen e telefonon, vagy táblagépeken egyszerű CSS classok segítségével állíthatjuk be.

Reszponzív működés kialakítására használható CSS classok

Reszponzív működés kialakítására használható CSS classok

Nehéz meghozni azt a döntést, hogy az weboldalunkat, amire adott esetben jelentős összeget költöttünk, most ismét nulláról újra felépítsük. Én mégis azt mondom, hogy érdemes fontolóra venni ezt a lehetőséget is. A döntésben esetleg segíthet a most bemutatott CSS keretrendszer is, hiszen ez jelentősen megkönnyítheti a munkánkat.
A saját projektjeinkben mi is szembesültünk már ezzel a problémával és én az újraépítés felé hajlok. 🙂

  • Szalai Károly

    Egyre inkább úgy érzem, hogy a reszponzív megjelenés lesz az optimális megoldás. Felesleges külön domain alá vinni. Csináljunk egy külön oldalt, külön aldomainon, hogy aztán annak adjunk egy reszponzív dizájnt.

    Olvastam egy érdekes gondolatot. Kíváncsi vagyok a véleményetekre.

    “Egyszerűen az a modell, hogy megtervezzük 320 px, 480 px, 768 px és 1024 px (mobil álló, mobil fekvő, tablet álló, tablet fekvő – desktop) méretekre az oldalt már nem alkalmazható. 320px-re tervezd meg az oldalt, esetleg egy általános tabletre (768px), végül pedig desktopra. A köztes állapotokat teljesen felesleges tervezni, ott szorosan együtt kell működni a fejlesztőkkel és on-the-fly tervezni. – See more at: http://blog.fps.hu/post/63408984659/reszponzivan-jol

    • Nincs igazán jó megoldás, de a reszponzív esetén sok SEO jellegű duplikációs probléma elkerülhető.
      Ami a méreteket illeti, szintén nem egyszerű a helyzet, amit a mobil eszközök változó pixelsűrűsége tovább bonyolíthat. A Bootsrap esetében alapértelmezetten több “töréspont” van definiálva és a legkisebb nézetben már “fluid” a szerkezet, nincs egy adott méretre beállítva. http://getbootstrap.com/getting-started/#examples