Ako urobiť webovú stránku responzívnou pre mobil

Ak chcete urobiť webovú stránku responzívnou pre mobil, pridajte meta značku viewport, postavte rozloženie najprv pre mobil s pružnými šírkami a použite CSS zlomové body na preskupenie na väčších obrazovkách — skladanie stĺpcov, zbalenie menu a prispôsobenie obrázkov veľkosti. Potom skontrolujte každú stránku na šírke telefónu, či sa nedá posúvať do strán, či text nie je drobný a či tlačidlá nie sú príliš malé na dotyk. Na webe vytvorenom AI väčšinu problémov zvyčajne vyrieši jeden jasný prompt a kontrola v náhľade s veľkosťou telefónu.

Čo responzívny dizajn naozaj je

Responzívna stránka používa jednu sadu stránok a URL, ktoré sa prispôsobia obrazovke. Namiesto samostatnej stránky „m.“ CSS mení rozloženie pri určitých šírkach, ktoré sa nazývajú zlomové body. Stavebné bloky:

• Meta značka viewport hovorí mobilným prehliadačom, aby použili skutočnú šírku zariadenia.
• Pružné rozloženia používajú percentá, flexbox a grid namiesto pevných šírok v pixeloch.
• Media queries (alebo triedy frameworku, ako Tailwindove md:) menia rozloženie nad danou šírkou.
• Pružné médiá — obrázky a videá, ktoré sa zmestia do svojho kontajnera.

Záleží na tom, lebo veľká časť návštevnosti je pravdepodobne z telefónov a Google indexuje mobilnú verziu vašich stránok. Ak obsah alebo odkazy existujú len na počítači, Google ich pravdepodobne tiež nevidí.

Možnosti a kompromisy

Navrhovanie najprv pre mobil je zvyčajne jednoduchšie: jeden stĺpec je najľahšie rozloženie a pridávať stĺpce, ako pribúda miesta, je menej práce než ich odoberať.

Časti, ktoré sa zvyčajne rozbijú

Meta značka viewport

Ak stránka vyzerá na telefóne ako malá stolová stránka, chýba viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Nepridávajte maximum-scale=1 ani user-scalable=no. Zablokovanie priblíženia štipnutím sťaží používanie stránky ľuďom so slabozrakosťou.

Pevné šírky a horizontálne posúvanie

Najčastejšia chyba responzivity je niečo širšie než obrazovka: pevný kontajner width: 1200px, široká tabuľka, dlhá URL alebo blok kódu, obrázok bez max-width: 100%. Celá stránka sa potom posúva do strán. Používajte max-width namiesto width, nechajte text zalamovať a širokým veciam dajte vlastnú oblasť na posúvanie.

Navigácia

Päť odkazov z menu na počítači sa na telefóne málokedy zmestí. Bežná odpoveď je tlačidlo menu, ktoré otvorí panel. Nechajte viditeľné dve alebo tri najdôležitejšie akcie — „Rezervovať“, „Košík“, „Prihlásiť sa“ — a uistite sa, že menu funguje aj klávesnicou a ľahko sa zatvára.

Text a dotykové ciele

• Telo textu okolo 16 px je rozumné minimum na telefónoch. Vstupy s menším textom spôsobia, že sa iPhone pri ťuknutí priblíži.
• Tlačidlá a odkazy by sa mali ľahko trafiť. WCAG 2.2 AA stanovuje minimum 24 × 24 CSS pixelov (alebo dostatočný rozostup); okolo 44 pixelov je pohodlnejšie pre palce.
• Nechajte medzery medzi susednými odkazmi, aby ľudia netrafili zlý.

Tabuľky a dáta

Rozsiahle tabuľky sú najťažšia časť responzívnej appky. Možnosti v poradí podľa preferencie: na telefónoch zobrazte menej stĺpcov, každý riadok premeňte na kartu alebo dajte tabuľku do horizontálne posúvateľného kontajnera s prichytenou prvou kolónou. Vyberte podľa toho, čo ľudia potrebujú porovnávať.

Obrázky a médiá

Používajte max-width: 100% a height: auto, na malé obrazovky podávajte menšie súbory cez srcset a nastavte šírku a výšku, aby sa rozloženie neskákalo. Vložené videá a mapy potrebujú responzívny obal, aby si zachovali pomer strán. Menšie obrázky tiež urýchľujú stránky — pozrite ako zrýchliť svoju webovú stránku.

Formuláre

Popisky nechajte nad poľami, polia nech sú na celú šírku a používajte správne typy vstupov (type="email", type="tel", inputmode="numeric"), aby telefóny ukázali zodpovedajúcu klávesnicu. Tlačidlo na odoslanie umiestnite tam, kam dosiahne palec, a nech zostáva viditeľné, keď sa otvorí klávesnica.

Interakcie len pri prejdení myšou

Telefóny nemajú kurzor. Bubliny s nápovedou, rozbaľovacie menu a náhľady, ktoré sa objavia len pri prejdení myšou, sú pre dotykových používateľov neviditeľné. Urobte, aby fungovali aj pri ťuknutí.

Prompty, ktoré fungujú

Pri novej stavbe to povedzte hneď na začiatku:

Postav to najprv pre mobil. Na telefónoch jeden stĺpec, od šírky tabletu dva stĺpce, na počítači plné rozloženie. Žiadne horizontálne posúvanie pri šírke 320 px, text tela aspoň 16 px, dotykové ciele aspoň 44 px, tlačidlo menu na malých obrazovkách a tabuľky, ktoré sa na telefónoch menia na karty.

Pri existujúcej stránke opíšte, čo vidíte:

Na telefónoch sa stránka /pricing posúva do strán a tri karty plánov sú stlačené vedľa seba. Pod 768 px karty zlož pod seba, porovnávaciu tabuľku nech sa posúva horizontálne vo vlastnom kontajneri s prichytenou kolónou funkcií a rozloženie na počítači nechaj nezmenené.

Skontroluj každú stránku pri šírke 375 px. Vypíš, čo pretečie, sa prekrýva, má text menší ako 16 px alebo dotykové ciele menšie ako 44 px, alebo funguje len pri prejdení myšou, a potom oprav každé z nich.

Krok za krokom

1. Overte meta značku viewport v hlavičke stránky.
2. Otestujte pri šírke 320–375 px v režime zariadenia v prehliadači alebo v náhľade s veľkosťou telefónu. Prejdite každú stránku od hora až dolu.
3. Najprv opravte horizontálne posúvanie. Nájdite prvok, ktorý je príliš široký; všetko ostatné sa ťažko posudzuje, kým to nezmizne.
4. Vyriešte navigáciu: tlačidlo menu, kľúčové akcie viditeľné.
5. Skontrolujte text, dotykové ciele a formuláre pri každom kľúčovom toku — registrácia, vyhľadávanie, pokladnica, kontakt.
6. Vyriešte tabuľky a médiá: karty alebo kontajnery na posúvanie, responzívne obrázky a vložené prvky.
7. Skontrolujte medzi-veľkosti. Pomaly ťahajte šírku od telefónu k počítaču; rozloženia sa často rozpadajú okolo šírky tabletu.
8. Otestujte na reálnom telefóne. Emulátory minú veci ako klávesnicu na obrazovke, ktorá zakrýva tlačidlo, výrezy na displeji a to, ako rýchlo stránka pôsobí na mobilných dátach.

Časté chyby

• Testovanie len jednej veľkosti telefónu. Skontrolujte malý telefón, veľký telefón a tablet.
• Skrývanie obsahu na mobile, aby sa zmestil. Google indexuje mobilnú verziu a používatelia telefónov chcú rovnaké informácie.
• Vypnutie priblíženia v meta značke viewport.
• Obrázky pre počítač na telefónoch, ktoré spomaľujú načítanie a spotrebúvajú dáta.
• Hromadenie pevne ukotvených prvkov: lepiaca hlavička, lišta so súhlasom s cookies a chatovacia bublina dokážu zakryť polovicu obrazovky telefónu.
• Vyskakovacie okná, ktoré sa nedajú zavrieť na malej obrazovke, lebo tlačidlo zatvorenia je mimo dosahu.

Kontrolný zoznam pre mobil

• Meta značka viewport je prítomná; priblíženie nie je vypnuté
• Žiadne horizontálne posúvanie pri 320 px na žiadnej stránke
• Text tela cca 16 px; vstupy nespúšťajú priblíženie
• Dotykové ciele pohodlne veľké a dostatočne rozostúpené
• Menu funguje na telefónoch aj klávesnicou
• Tabuľky čitateľné na telefónoch (karty, menej stĺpcov alebo kontajner na posúvanie)
• Obrázky a vložené prvky sa prispôsobujú; podávajú sa správne veľké súbory
• Formuláre používajú správne typy vstupov; tlačidlo na odoslanie je dosiahnuteľné
• Nič dôležité nezávisí od prejdenia myšou
• Otestované aspoň na jednom reálnom telefóne

Responzívne rozloženie je tiež súčasťou prístupnosti: WCAG požaduje, aby obsah fungoval pri šírke 320 px a pri 200 % priblížení. Ak stavate appku, ktorú ľudia používajú denne na telefónoch, ako postaviť mobilne priateľskú webovú appku ide ďalej, vrátane inštalovateľných PWA.

Responzívny dizajn na Mythexe

Mythex stavia responzívne webové appky a na Pro ich dokáže zabaliť ako Android a iPhone appky. V pracovnom prostredí kliknite na ikonu telefónu nad Náhľadom (Switch to Mobile) a uvidíte appku v rámci s veľkosťou telefónu; okraj rámca môžete ťahať a vyskúšať iné šírky (Náhľad a kód). Dokumentácia obsahuje krátky štartovací prompt na opravu rozloženia na malých obrazovkách v promptoch pre mobilnú responzivitu. Skontrolujte aj na reálnom telefóne — otvorte publikovanú URL alebo zdieľajte odkaz na náhľad a otvorte ho v telefóne.

Otázky