Kako prilagoditi web stranicu za mobilne uređaje

Da biste web stranicu prilagodili za mobilne uređaje, dodajte viewport meta oznaku, izgradite izgled prvo za mobilne uređaje s fleksibilnim širinama i koristite CSS prijelomne točke kako biste ga preslagali na većim ekranima — slažući stupce, sažimajući izbornik i skalirajući slike da stanu. Zatim provjerite svaku stranicu na širini telefona za bočno pomicanje, sitan tekst i gumbe premale za dodir. Na web stranici izrađenoj uz AI, jedan jasan upit i pregled u prikazu telefona obično riješe većinu problema.

Što je zapravo responzivni dizajn

Responzivna stranica koristi jedan skup stranica i adresa koje se prilagođavaju ekranu. Umjesto zasebne „m.“ stranice, CSS mijenja izgled pri određenim širinama, koje se zovu prijelomne točke (breakpoints). Građevni elementi:

• Viewport meta oznaka govori mobilnim preglednicima da koriste stvarnu širinu uređaja.
• Fluidni izgledi koriste postotke, flexbox i grid umjesto fiksnih širina u pikselima.
• Media upiti (ili klase okvira poput md: u Tailwindu) mijenjaju izgled iznad zadane širine.
• Fleksibilni mediji — slike i videi koji se smanjuju da stanu u svoj okvir.

To je važno jer je velik dio vašeg prometa vjerojatno s telefona i jer Google indeksira mobilnu verziju vaših stranica. Ako sadržaj ili poveznice postoje samo na računalu, Google ih možda također neće vidjeti.

Opcije i kompromisi

Prvo za mobilne uređaje obično je jednostavnije: jedan stupac je najlakši izgled, a dodavanje stupaca kako prostora ima više manje je posla nego njihovo uklanjanje.

Dijelovi koji se obično pokvare

Viewport oznaka

Ako stranica na telefonu izgleda kao sitna stolna stranica, viewport oznaka nedostaje:

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

Nemojte dodavati maximum-scale=1 ili user-scalable=no. Blokiranje zumiranja prstima otežava korištenje stranice ljudima slabog vida.

Fiksne širine i vodoravno pomicanje

Najčešća greška prilagodbe jest nešto šire od ekrana: fiksni width: 1200px spremnik, široka tablica, dugačka adresa ili blok koda, slika bez max-width: 100%. Cijela stranica se tada pomiče u stranu. Koristite max-width umjesto width, dopustite da se tekst prelama i dajte širokim elementima vlastito područje za pomicanje.

Navigacija

Pet poveznica iz izbornika za računalo rijetko stane na telefon. Uobičajeno rješenje je gumb izbornika koji otvara panel. Zadržite vidljivima dvije ili tri najvažnije radnje — „Rezerviraj“, „Košarica“, „Prijava“ — i pazite da izbornik radi s tipkovnicom i lako se zatvara.

Tekst i dodirni ciljevi

• Tekst od oko 16 px je razuman minimum na telefonima. Polja s manjim tekstom uzrokuju da se iPhone zumira kada ih dodirnete.
• Učinite gumbe i poveznice lako pogodivima. WCAG 2.2 AA postavlja minimum od 24 x 24 CSS piksela (ili dovoljan razmak); oko 44 piksela ugodnije je za palac.
• Ostavite razmak između susjednih poveznica da ljudi ne pogode pogrešnu.

Tablice i podaci

Široke tablice najteži su dio responzivne aplikacije. Opcije, redom po prioritetu: prikažite manje stupaca na telefonima, pretvorite svaki redak u karticu ili stavite tablicu u spremnik koji se može pomicati vodoravno s prvim stupcem fiksiranim. Odaberite prema tome što ljudi trebaju usporediti.

Slike i mediji

Koristite max-width: 100% i height: auto, poslužujte manje datoteke na malim ekranima pomoću srcset i postavite širinu i visinu kako biste izbjegli skakanje izgleda. Ugrađeni videi i karte trebaju responzivni omotač kako bi zadržali omjer stranica. Manje slike također čine stranice bržima — pogledajte kako ubrzati web stranicu.

Obrasci

Oznake postavite iznad polja, polja neka budu pune širine i koristite ispravne vrste unosa (type="email", type="tel", inputmode="numeric") kako bi telefoni prikazali odgovarajuću tipkovnicu. Gumb za slanje stavite tamo gdje palac može doseći i neka ostane vidljiv kada se otvori tipkovnica.

Interakcije samo na lebdenje

Telefoni ne podržavaju lebdenje mišem. Savjeti, padajući izbornici i pretpregledi koji se pojavljuju samo pri lebdenju nevidljivi su korisnicima koji koriste dodir. Neka rade i na dodir.

Upiti koji djeluju

Za novu izradu, recite to unaprijed:

Izradi ovo prvo za mobilne uređaje. Jedan stupac na telefonima, dva stupca od širine tableta, puni izgled na računalu. Bez vodoravnog pomicanja pri širini od 320 px, tekst tijela najmanje 16 px, dodirni ciljevi najmanje 44 px, gumb izbornika na malim ekranima i tablice koje se na telefonima pretvaraju u kartice.

Za postojeću stranicu, opišite što vidite:

Na telefonima se stranica /pricing pomiče u stranu, a tri kartice paketa stisnute su jedna uz drugu. Ispod 768 px složi kartice okomito, neka se tablica usporedbe pomiče vodoravno unutar vlastitog spremnika sa stupcem značajki fiksiranim, a izgled za računalo ostavi nepromijenjen.

Provjeri svaku stranicu pri širini od 375 px. Popiši sve što se prelijeva, preklapa, ima tekst manji od 16 px ili dodirne ciljeve manje od 44 px, ili radi samo pri lebdenju, zatim popravi svaki od njih.

Korak po korak

1. Potvrdite viewport oznaku u zaglavlju stranice.
2. Testirajte pri širini 320–375 px u načinu uređaja u pregledniku ili u pregledu veličine telefona. Pomaknite svaku stranicu od vrha do dna.
3. Najprije riješite vodoravno pomicanje. Pronađite element koji je preširok; sve ostalo teško je procijeniti dok on postoji.
4. Riješite navigaciju: gumb izbornika, ključne radnje vidljive.
5. Provjerite tekst, dodirne ciljeve i obrasce u svakom ključnom toku — registracija, pretraga, naplata, kontakt.
6. Obradite tablice i medije: kartice ili spremnike za pomicanje, responzivne slike i ugrađene sadržaje.
7. Provjerite međuveličine. Polako povlačite širinu od telefona do računala; izgledi se često pokvare oko širine tableta.
8. Testirajte na pravom telefonu. Emulatori propuštaju stvari poput tipkovnice na ekranu koja prekriva gumb, izreza ekrana i toga koliko stranica brzo radi na mobilnim podacima.

Česte greške

• Testiranje samo jedne veličine telefona. Provjerite mali telefon, veliki telefon i tablet.
• Skrivanje sadržaja na mobitelu kako bi stao. Google indeksira mobilnu verziju, a korisnici telefona žele iste informacije.
• Onemogućavanje zumiranja u viewport oznaci.
• Slike veličine za računalo na telefonima, što stoji vremena učitavanja i podataka.
• Gomilanje elemenata s fiksnom pozicijom: ljepljivo zaglavlje, banner za kolačiće i balončić chata mogu prekriti pola ekrana telefona.
• Skočni prozori koje nije moguće zatvoriti na malom ekranu jer je gumb za zatvaranje izvan vidljivog područja.

Popis za mobilne uređaje

• Viewport meta oznaka prisutna; zumiranje nije onemogućeno
• Nema vodoravnog pomicanja pri 320 px na nijednoj stranici
• Tekst tijela oko 16 px; polja ne uzrokuju zumiranje
• Dodirni ciljevi dovoljno veliki i razmaknuti
• Izbornik radi na telefonima i s tipkovnicom
• Tablice čitljive na telefonima (kartice, manje stupaca ili spremnik za pomicanje)
• Slike i ugrađeni sadržaji se skaliraju; poslužuju se ispravno veličine datoteka
• Obrasci koriste ispravne vrste unosa; gumb za slanje je dostupan
• Ništa važno ne ovisi o lebdenju
• Testirano na barem jednom pravom telefonu

Responzivni izgled dio je i pristupačnosti: WCAG traži da sadržaj radi pri širini od 320 px i pri zumu od 200%. Ako gradite aplikaciju koju će ljudi svakodnevno koristiti na telefonima, kako izraditi web aplikaciju prilagođenu mobilnim uređajima ide dalje, uključujući instalabilne PWA-ove.

Responzivni dizajn na Mythexu

Mythex izrađuje responzivne web aplikacije, a u paketu Pro može ih omotati kao Android i iPhone aplikacije. U radnom prostoru kliknite ikonu telefona iznad pregleda (Switch to Mobile) kako biste vidjeli aplikaciju u okviru veličine telefona, a rubom okvira možete isprobati druge širine (Pregled i kod). Dokumentacija ima kratak početni upit za popravak izgleda na malim ekranima u upitima za prilagodbu mobilnim uređajima. Provjerite i na pravom telefonu — otvorite objavljenu adresu ili podijelite poveznicu za pregled i otvorite je na telefonu.

Pitanja