Kako napraviti web sajt prilagodljivim za mobilne uređaje

Da napravite web sajt prilagodljivim za mobilne uređaje, dodajte viewport meta oznaku, gradite raspored krećući od mobilnog s fleksibilnim širinama i koristite CSS prelomne tačke da ga preslažete na većim ekranima — slažući kolone, skupljajući meni i skalirajući slike da stanu. Zatim provjerite svaku stranicu na širini telefona za bočno skrolovanje, sitan tekst i dugmad premala za dodir. Kod sajta izgrađenog uz AI, jedan jasan upit i provjera u pregledu veličine telefona obično riješe većinu problema.

Šta je zapravo prilagodljiv dizajn

Prilagodljiv sajt koristi jedan skup stranica i URL-ova koji se prilagođavaju ekranu. Umjesto posebnog sajta s „m.” prefiksom, CSS mijenja raspored na određenim širinama, koje se zovu prelomne tačke (breakpoints). Gradivni elementi:

• Viewport meta oznaka govori mobilnim pregledačima da koriste stvarnu širinu uređaja.
• Fluidni rasporedi koriste procente, flexbox i grid umjesto fiksnih širina u pikselima.
• Media upiti (ili klase okvira poput Tailwindovog md:) mijenjaju raspored iznad date širine.
• Fleksibilni mediji — slike i video koji se smanjuju da stanu u svoj okvir.

Važno je jer velik dio saobraćaja vjerovatno dolazi s telefona, i zato što Google indeksira mobilnu verziju stranica. Ako sadržaj ili linkovi postoje samo na desktopu, Google ih možda ni ne vidi.

Opcije i kompromisi

Pristup koji kreće od mobilnog obično je jednostavniji: jedna kolona je najlakši raspored, a dodavanje kolona kako prostor raste manje je posla nego njihovo uklanjanje.

Dijelovi koji se obično pokvare

Viewport oznaka

Ako stranica na telefonu izgleda kao sitan desktop sajt, viewport oznaka nedostaje:

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

Ne dodajte maximum-scale=1 ni user-scalable=no. Blokiranje zumiranja prstima otežava korištenje sajta ljudima sa slabijim vidom.

Fiksne širine i horizontalno skrolovanje

Najčešća greška u prilagodljivosti je nešto šire od ekrana: kontejner s fiksnom širinom width: 1200px, široka tabela, dug URL ili blok koda, slika bez max-width: 100%. Cijela stranica se tada skroluje u stranu. Koristite max-width umjesto width, dopustite tekstu da se prelama i dajte širokim stvarima sopstvenu zonu za skrolovanje.

Navigacija

Pet linkova iz desktop menija rijetko stane na telefon. Uobičajeno rješenje je dugme za meni koje otvara panel. Držite dvije-tri najvažnije radnje vidljivim — „Rezerviši”, „Korpa”, „Prijava” — i pazite da meni radi s tastaturom i lako se zatvara.

Tekst i dodirne površine

• Osnovni tekst od oko 16 px je razuman minimum na telefonima. Polja sa manjim tekstom uzrokuju da se iPhone zumira kada ih dodirnete.
• Dugmad i linkovi treba da se lako pogode. WCAG 2.2 AA postavlja minimum od 24 x 24 CSS piksela (ili dovoljno razmaka); oko 44 piksela je udobnije za palac.
• Ostavite razmak između susjednih linkova da ljudi ne pogode pogrešan.

Tabele i podaci

Široke tabele su najteži dio prilagodljive aplikacije. Opcije, po redoslijedu preferencije: prikazati manje kolona na telefonima, pretvoriti svaki red u karticu ili staviti tabelu u kontejner koji se može horizontalno skrolovati s fiksiranom prvom kolonom. Odaberite na osnovu toga šta ljudi trebaju da upoređuju.

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 da izbjegnete skakanje rasporeda. Ugrađeni video i karte trebaju prilagodljiv omotač da zadrže odnos stranica. Manje slike također čine stranice bržim — pogledajte kako ubrzati web sajt.

Obrasci

Poredajte oznake iznad polja, neka polja budu pune širine i koristite odgovarajuće tipove unosa (type="email", type="tel", inputmode="numeric") da telefoni prikažu odgovarajuću tastaturu. Stavite dugme za slanje tamo gdje palac može doći do njega i neka ostane vidljivo kada se otvori tastatura.

Interakcije samo na hover

Na telefonima nema hovera. Tooltipovi, padajući meniji i pregledi koji se pojavljuju samo na hover su nevidljivi korisnicima koji koriste dodir. Neka rade i na dodir.

Upiti koji funkcionišu

Za novu izradu, kažite to unaprijed:

Napravi ovo krećući od mobilnog. Jedna kolona na telefonima, dvije kolone od širine tableta, puni raspored na desktopu. Bez horizontalnog skrolovanja na širini 320 px, osnovni tekst najmanje 16 px, dodirne površine najmanje 44 px, dugme za meni na malim ekranima i tabele koje se na telefonima pretvaraju u kartice.

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

Na telefonima se stranica /pricing skroluje u stranu, a tri kartice paketa su stisnute jedna do druge. Ispod 768 px poredaj kartice vertikalno, neka se tabela poređenja skroluje horizontalno unutar svog kontejnera s fiksiranom kolonom funkcija i zadrži desktop raspored nepromijenjen.

Provjeri svaku stranicu na širini 375 px. Navedi sve što prelazi okvir, preklapa se, ima tekst manji od 16 px ili dodirne površine manje od 44 px, ili radi samo na hover, pa popravi svaku stavku.

Korak po korak

1. Potvrdite viewport oznaku u zaglavlju stranice.
2. Testirajte na širini 320–375 px u režimu uređaja u pregledaču ili u pregledu veličine telefona. Skrolujte svaku stranicu od vrha do dna.
3. Prvo popravite horizontalno skrolovanje. Nađite element koji je preširok; sve ostalo je teško procijeniti dok on ne nestane.
4. Riješite navigaciju: dugme za meni, glavne radnje vidljive.
5. Provjerite tekst, dodirne površine i obrasce na svakom ključnom toku — registracija, pretraga, plaćanje, kontakt.
6. Riješite tabele i medije: kartice ili kontejneri za skrolovanje, prilagodljive slike i ugradnje.
7. Provjerite međuveličine. Polako povlačite širinu od telefona do desktopa; rasporedi se često pokvare oko širine tableta.
8. Testirajte na pravom telefonu. Emulatori propuštaju stvari poput tastature na ekranu koja pokriva dugme, izreza na ekranu i brzine sajta na mobilnom internetu.

Česte greške

• Testiranje samo na jednoj veličini telefona. Provjerite mali telefon, veliki telefon i tablet.
• Skrivanje sadržaja na mobilnom da bi stao. Google indeksira mobilnu verziju, a korisnici telefona žele iste informacije.
• Onemogućavanje zumiranja u viewport oznaci.
• Slike veličine desktopa na telefonima, što usporava učitavanje i troši podatke.
• Nagomilani elementi s fiksnom pozicijom: lijepi header, banner za kolačiće i chat balon mogu prekriti pola ekrana telefona.
• Iskačući prozori koji se ne mogu zatvoriti na malom ekranu jer je dugme za zatvaranje van ekrana.

Kontrolna lista za mobilne

• Viewport meta oznaka prisutna; zumiranje nije onemogućeno
• Nema horizontalnog skrolovanja na 320 px ni na jednoj stranici
• Osnovni tekst oko 16 px; polja ne izazivaju zumiranje
• Dodirne površine dovoljno velike i razmaknute
• Meni radi na telefonima i s tastaturom
• Tabele čitljive na telefonima (kartice, manje kolona ili kontejner za skrolovanje)
• Slike i ugradnje se skaliraju; poslužuju se odgovarajuće veličine datoteka
• Obrasci koriste odgovarajuće tipove unosa; dugme za slanje je dostupno
• Ništa važno ne zavisi od hovera
• Testirano na bar jednom pravom telefonu

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

Prilagodljiv dizajn na Mythexu

Mythex pravi prilagodljive web aplikacije, a na Pro paketu ih može zamotati kao Android i iPhone aplikacije. U radnom prostoru kliknite ikonicu telefona iznad Preview-a (Switch to Mobile) da vidite aplikaciju u okviru veličine telefona, i povucite ivicu okvira da isprobate druge širine (Preview i Code). Dokumentacija ima kratak početni upit za popravku rasporeda na malim ekranima u upitima za prilagodljivost mobilnim. Provjerite i na pravom telefonu — otvorite objavljeni URL ili podijelite link za pregled i otvorite ga na telefonu.

Pitanja