Responsive webdesign (RWD) – Az alapok 1.

A weben az általunk készített oldalaknak egy folyamatosan változó környezetben kell helyt állniuk. Manapság, ahogy a telefonjaink egyre “okosabbak”, egyre innovatívabbak és változó kijelzőmérettel megáldottak, szükséges hogy alkalmazkodjunk ezekhez a megváltozott követelményekhez. Az általunk készített weboldalnak is “okosnak”, de legalábbis responsive-nak illik lennie. Tehát összegezve,  a változás elkerülhetetlen. Az egyetlen dolog, amit tehetünk az, az alkalmazkodás … 

RWD websedign

Responsive Webdesign

A wikipédia szerint, a kifejezést Ethan Marcotte alkotta meg 2011 elején. És a responsivitás nem más, mint egy szemlélet, amellyel elkészítjük weboldalainkat, egy eszköz a kezünkben, hogy több embert érjünk el ebben a változó környezetben. A responsive webdesign (RWD) lényege, hogy oldalainkat, az elkészítése után minden eszközön (asztali gép, laptop, tablet, mobiltelefon, e-book reader, stb.) úgy jelenítsük meg, ahogy az adott eszközön és kijelző méreten az optimális vizuális élményt kapjuk. Könnyen olvasható, a navigációs menü átméretezésével jól navigálható és támogatja az érintés alapú görgetést valamint az eszközök és kijelzőméretek  széles skáláját.


Lehetőségeink

1. Mobil sablon

Ebben az esetben a régi utat követjük, elkészítjük a weboldal normál asztali környezetre és mobilra szánt verzióját. Legtöbbször ugye a css fájlokkal operálunk (mobile.css, desktop.css). Ez a megoldás a mai napig jól működik, de a használata több időt, energiát igényel fejlesztői oldalról. De ez a befektetett energia a nagyméretű, komplexebb weboldalak esetén tapasztalatom szerint megtérül.

2. Rugalmas layout

Talán a legrégebbi megoldás. Egyszerű weboldalaknál rendkívül jól alkalmazható. A gyakorlatban ez a megoldás esetén a weboldal strukturális elemeinek rugalmas méretezésűeknek kell lenniük, hogy a különböző képernyő méretekhez igazodni tudjanak. A min-width és a max-width CSS tulajdonságokkal ötvözve egy elég hatékony eszközt jelent. A linket követve erről tudtok bővebben olvasni.

3. Media Query

A legújabb megoldásnak számít. A legtöbb oldal esetében a responsivitást ezzel a megoldással valósítják meg. A CCS Media Query segítségével lekérhetjük a weblap látogatója által használt készülék képernyőjének méretét, ami alapján módosíthatjuk a weblapunk megjelenését, mindezt javascript használata nélkül. Így különböző CSS utasításokat tudunk beállítani, különböző kijelző méretekhez. A következőkben mutatok pár általános méretet, persze ettől eltérőt is használhatunk:

/* 960px felbontásnál kisebb eszközök */
 @media only screen and (max-width: 959px) {}

 /* Tablet álló méret 768px-960px */
 @media only screen and (min-width: 768px) and (max-width: 959px) {}

 /* Mobil méretek */
 @media only screen and (max-width: 767px) {}

 /* Mobil fekvőtől tablet állóig */
 @media only screen and (min-width: 480px) and (max-width: 767px) {}

 /* Mobil álló mérettől mobil fekvőig */
 @media only screen and (max-width: 479px) {}</pre>

Rendelkezésre álló eszközök

Méretezd át a böngésződ! 🙂 Ez a legegyszerűbb tesztelési lehetőség, ha a méretét is szeretnéd tudni, itt egy remek chrome kiegészítő!

Egy nagyszerű teszter a – http://www.responsinator.com/

Opera mobile emulator – http://www.opera.com/hu/developer/mobile-emulator

A legjobb, ha élőben is tudjuk tesztelni az elkészült weboldalt, mert a fenti emulátor és teszter ugyan megbízhatónak számít, de azért jobb ha a valóságban is látjuk az elkészült oldalt.

Érvek, ellenérvek

Egy szempont lehet a hirdetések és az abból származó bevételek. Ha a weboldal tulajdonosa gondolkodik ebben, a responsive website nem biztos hogy jó választás. Hiszen a hirdetések a mobil eszközökön egészen biztos, hogy máshogy fognak megjelenni. Nem lesz tökéletesen optimalizált. Ebben az esetben dupla munkával lehet hogy jobban járunk, ha elkészítjük a weboldal mobil sablonos változatát. Ugyan ez igaz a különböző média típusokra, ahol egy értelmes határ alá már nem kicsinyíthető a megjelenítés.

Felhasználói élmény szempontjából több cikk született a témában, nem idézném be őket, inkább a saját véleményemet írnám le. A mobil sablon vs responsive media query kérdésben szerintem lényegtelen, hogy melyik megoldást választjuk abban az esetben ha egyszerű felépítésű weboldalakról van szó. Abban az esetben, ha robosztus nagy méretű, sok tartalommal rendelkező weboldalt fejlesztünk már érdemes elgondolkodni a mobil sablonok használatán, de én ebben az esetben sem javaslom. Hogy miért? Az oldal fejlesztési ideje brutálisan megnő. Legalább két sablont kell készítened, de inkább hármat. A karbantartás sem lesz egyszerű. Jóval nagyobb költségvetést igényel a megrendelődtől. Ezeket figyelembe véve, illetve a harmadik szempontot, amiről még nem szóltunk.. Mi is ez ?

Nem utolsó szempont a SEO (keresőoptimalizálás) kérdése. A legnagyobb keresők már jelezték, hogy támogatják a media query útját. A Bing és a Google is kijelentette, hogy az egy és közös URL-t ajánlják, szemben a mobilokra létrehozott külön aldomaines és egyéb megoldásokkal (m.domain.hu).

Ahogy időm engedi a folytatásban hozom a megszokott példákat és reményeim szerint még számtalan tippet és trükköt mutatok nektek a közeljövőben.

Creative Commons Licenc
Responsive webdesign (RWD) – Az alapok 1. a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
  Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.