Másképp néz ki az oldalam telefonon, mint számítógépen — mi a baj?

Megnyitod a weboldaladat a számítógépen, és minden szépen a helyén ül. Aztán megnyitod a telefonodon, és hirtelen a szöveg kilóg a képernyőről, a képek le vannak vágva, a gombok egymásra csúsznak, a menü pedig eltűnt. Az első természetes reakció ez: „Elromlott az oldalam?" vagy „A telefonommal van baj?"

Jó hír: a legtöbb esetben sem a telefonoddal, sem komoly meghibásodással nincs baj. Ez egy reszponzív dizájn probléma — vagyis az, hogy az oldalad hogyan alkalmazkodik a különböző képernyőszélességekhez. Egy számítógép nagyjából 1400px széles; egy telefon körülbelül 380px. Ha az oldal nem úgy készült, hogy kis szélességnél átrendezze magát, akkor széttörik. Ebben a cikkben pontosan elmagyarázom, mi történik, mik a valódi okok, és hogyan javítható ez — hogy hozzáértően tudj beszélni azzal, aki az oldaladat építette.

Miért néz ki másképp egy oldal telefonon (röviden)

Egy weboldal nem egyetlen rögzített „kép". A böngésző megkapja a kódot, és a rendelkezésre álló hely alapján rendezi el. Széles képernyőn van hely arra, hogy a dolgokat egymás mellé tegye; keskeny képernyőn viszont egymás alá kellene raknia őket.

Ezt nevezik reszponzív dizájnnak: ugyanaz a tartalom, de a szélességtől függően más elrendezés. Ha jól csinálják, telefonon a menü egy „hamburger" gombbá válik, az oszlopok függőlegesen egymásra rendeződnek, a szöveg pedig nagyítás nélkül is olvasható marad.

Ha rosszul csinálják, a böngésző megpróbálja az asztali elrendezést belegyömöszölni egy kis képernyőbe. Pontosan innen jönnek a tüneteid: a szöveg kilóg a képernyőről, a képek levágódnak, az elemek egymásra csúsznak. Ez nem egy véletlenszerű hiba — hanem annak a szabálynak a hiánya, amely azt mondja az oldalnak, hogy „kis képernyőn rendezd magad másképp".

Egy széteső mobilelrendezés 5 leggyakoribb oka

A gyakorlatban szinte minden mobilos probléma néhány jól körülhatárolható okból ered:

• Rögzített pixelszélességek: egy „1000px szélesre" állított elem nem fér el egy 380px-es képernyőn, és oldalra tolja az oldalt, létrehozva azt a bosszantó vízszintes görgetést.
• Hiányzó „viewport" meta címke: az a sor nélkül, amely megmondja a böngészőnek, hogy a telefon valódi szélességét használja, az oldal összezsugorodva jelenik meg, mintha egy asztali oldalt néznél messziről.
• Szélességkorlát nélküli képek: egy nagy fotó nem zsugorodik össze, és kilóg a képernyőről.
• Túl kicsi vagy túl közel lévő szövegek és gombok: nehéz olvasni, nehéz ujjal megérinteni.
• Egy sablon vagy téma, amely csak papíron „reszponzív": sok kész sablon széttörik abban a pillanatban, amikor felviszed a saját valódi tartalmadat (hosszú szöveg, más alakú fotók).

Ha felismered a vízszintes görgetést vagy a „megszökő" szöveget, akkor szinte biztos, hogy az első kettő valamelyikéről van szó.

Hogyan ellenőrizheted magad 2 perc alatt, technikai tudás nélkül

Nem kell programozónak lenned ahhoz, hogy ezt beazonosítsd. Tedd a következőt:

• Nyisd meg az oldalt a telefonodon, és próbáld meg balra-jobbra húzni az oldalt. Ha oldalra mozdul, és üres hely jelenik meg, akkor van egy elem, amely szélesebb a képernyőnél — ez a klasszikus ok.
• Ellenőrizd, hogy csippentéssel kell-e nagyítanod az olvasáshoz. Ha igen, akkor valószínűleg hiányzik a viewport címke.
• A számítógépeden nyisd meg az oldalt, és a széléét húzva szűkítsd le a böngészőablakot, amíg olyan keskeny nem lesz, mint egy telefon. Egy reszponzív oldal átrendeződik, ahogy szűkíted; egy hibás oldal beragad vagy levágja a tartalmat.

Készíts néhány képernyőképet a konkrét problémákról (a menü, egy gomb, egy adott szakasz). Sokkal egyszerűbb lesz megmutatni valakinek, hogy mi a baj, mint szavakkal leírni.

Mit jelent valóban megoldani a problémát (nem csak elrejteni)

Kétféle „javítás" létezik. A rosszak elrejtik a tünetet: mindent összezsugorítanak, amíg elfér, vagy egyszerűen elrejtik azokat az elemeket, amelyek mobilon rosszul viselkednek. Az eredmény? Egy olyan oldal, amelyen semmi sem olvasható, vagy amelyről fontos részek hiányoznak.

A helyes javítás azt jelenti, hogy az elrendezést újragondolják mobilra: az oszlopok függőlegesen egymásra rendeződnek, a menü kompakttá válik, a szöveg olvasható méretű marad, a gombok elég nagyok egy ujjnak, a képek pedig méreteződnek ahelyett, hogy kilógnának a képernyőről.

A gyakorlatban ezt „media query"-kkel oldják meg — olyan szabályokkal a kódban, amelyek azt mondják, hogy „768px alatt így rendezd magad". Ez nem óriási munka annak, aki érti a dolgát, de megköveteli, hogy az oldal mobile-first szemlélettel épüljön, ne utólag foltozzák. Egy helyi vállalkozás látogatóinak több mint fele telefonról érkezik, így a mobil nem másodlagos eset — hanem a fő eset.

Mikor éri meg újraépíteni, és hogyan dolgozunk az MPO-nál

Néha egy régi oldal pontokban javítható. Máskor a téma annyira merev, hogy minden javítás elront valami mást — és akkor hosszú távon egy elejétől kezdve helyesen felépített új oldal olcsóbb.

Az MPO Web Studiónál mindent mobile-first szemlélettel építünk: először a telefonra tervezünk, majd kiterjesztjük az asztalra — pontosan az ellenkezőjét annak, ahogy a legtöbb oldal széttörik. Az egész országban távolról dolgozunk, átlátható árazással és „garantált első hely a Google-ön" ígéretek nélkül (ha valaki ezt ígéri neked, légy óvatos).

Ha szeretnéd, először ingyenes demót készítünk neked — az oldalad egy valódi változatát, amelyet a saját telefonodon nézel meg, mielőtt bármit fizetnél. Írj nekünk WhatsAppon a jelenlegi oldalad címével, és pontosan megmondjuk, mi a baj, és mennyibe kerülne egy javítás.