Ha már van weboldalad, illetve webfejlesztő, blogger vagy akkor neked is fontos, hogy a weboldalad a lehető legtöbb kijelző mérethez tudjon alkalmazkodni, azokon egységesen jól nézzen ki. Ilyenek lehetnek a telefon, tablet, laptop és asztali felbontások. 

Napjainkban egyre több applikáció versenyzik a weboldalakkal az olvasókért, látogatókért, ezért elkerülhetetlen, hogy weboldalunk is mobilbarát legyen a közönség megtartásáért. Ezért érdemes mindig megbizonyosodni, arról hogy oldalunk jól néz ki minden felbontásban. Korábban már részletesebben kifejtettem, hogy mi is a reszponzivitás és tényleg van -e értelme.

A következő programozási nyelvek határozzák meg, hogy a böngészőben hogyan fog megjelenni weboldalunk:

• HTML
• CSS
• JavaScript
• jQuery

A reszponzív weboldal stílus technológiák folyamatosan fejlődnek, ezért már ma is megannyi keretrendszer érhető el, például a Boostrap. Ezen keretrendszerek segítenek a programozóknak, weboldal fejlesztőknek, hogy a kész weboldal egységesen jól nézzen ki minden kijelzőn.

Hogyan lehet tesztelni a weboldal alkalmazkodóképességét a kijelzőhöz?

Több gyors módszer is van rá, amikkel viszonylag egyszerűen tudjuk tesztelni weboldalunk alapvető alkalmazkodási képességét. A legjobb az egészben,  hogy nincs szükség hozzá drága szoftverekre vagy bármilyen előfizetésre. Persze vannak prémium megoldások, amik sokkal többet árulnak el egy weboldalról, mint egy manuális pár perces elemzés. Természetesen ezeket már inkább szakemberek szokták használni, hogy teszteljék az elkészült weboldalt. 

A legegyszerűbb mód a tesztelésre tulajdonképpen a nap mint nap használt böngészőkön, eszközökön is elérhető. Ezekkel könnyen megtekinthető bármely webhely forráskódja, lehet hibakeresést végezni és tesztelhető a mobilbarát megjelenés is. 

Nyilvánvalóan mivel az ilyen funkciók részei a böngészőknek ezért ingyenes a használatuk is. 

Google Chrome és Firefox fejlesztői eszközök

Természetesen a két legtöbbet böngészőben is megvan ez a funkció. Mivel én a Firefoxot jobban szeretem weboldal készítéshez használni, ezért ezen mutatom be ezt a funkciót: 

• Jobb egér gombbal kattintsunk a megnyitott oldalra
• Válasszuk az “Elem vizsgálata” menüpontot
• Az oldalt vagy az alul megjelenő sávban keressük meg jobb oldalt felül a mobil ikont majd kattintsunk rá. 
• A megjelent nézetben felül tetszés szerint tudjuk változtatni a felbontást. 
• Visszalépéshez kattintsunk a megjelenítőben az X-re.

Szerencsére nincs szükség mindig végig lépkedni, mert létezik billentyűkombináció, a “ctl shift m”, ez Chrome böngészőben is működik.

Online elérhető elemző eszközök

Ahogy egyre inkább alapvetővé vált a weboldalak mobilra optimalizálása, úgy lett egyre több reszponzivitást elemző eszköz is, ezzel párhuzamosan megjelentek online elemzők is. Ilyenekből rengeteget találni az interneten, így hoztam egy példát, ami a böngészők elemzőjéhez nagyon hasonló: responsivedesignchecker.com  

Google mobilbarát teszt

Mint weboldal készítő szakember, számomra az egyik legalapvetőbb elemző szoftver a böngészők beépített tesztelőjén túl a Google mobilbarát tesztje. Fontosnak tartom több módszerrel is megvizsgálni egy oldalt, mert vannak olyan hibák, amik csak bizonyos felbontásban jönnek ki. Ezen felül pedig a SEO, azaz a keresőoptimalizálás miatt sem mindegy, hogy a Google hogyan látja weboldalunkat. Komoly hátrányba kerülhet oldalunk, ha ezen a teszten nem teljesít jól. Szerencsére a  Search Console szokta jelezni, ha hibát észlel, de véleményem szerint jobb azt megelőzni. 

Összegzés

Mindig legyünk biztosak abban, hogy weboldalunk megfelelően van optimalizálva a különböző kijelzőhöz. Azt se felejtsük el, hogy ez egy alapvető SEO tulajdonság, amire mint weboldal tulajdonos, fejlesztő érdemes odafigyelni.

Ha szeretnéd mobilbaráttá tenni weboldalad vagy egy teljesen új weboldal készítés lehetősége jobban tetszik, akkor vedd fel velünk a kapcsolatot.