Reszponzív weboldal készítés és tesztelés

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:

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.
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.
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

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. 🙂

Más alternatívák

Responsive design tesztelése

Ha az általunk készített reszponzív oldalt szeretnénk tesztelni, nem kell feltétlenül a mobiltelefonunkkal vesződni. Van ennél jobb megoldás is.

Néhány reszponzív teszteléshez alkalmas megoldást szeretnék megosztani veletek, amelyek segítségével egyszerűen és kényelmesen, mobiltelefon nyomkodása nélkül ellenőrizhetitek, hogy hogyan sikerült weboldalatokat mobilbaráttá tenni.

Németh Attila

SEO és Webanalitikai szakértő

Keresőoptimalizálási és webanalitikai szakértő. Azon dolgozom, hogy hibátlan, hatékony, és értékes honlapok szülessenek, mert a jó minőségű tartalom minden trükknél többet ér. Jelenleg az Extreme Digital E-commerce Managereként dolgozom.

[thrive_leads id='5025']