Kako napraviti sajt prilagođen mobilnim uređajima

Da biste napravili sajt prilagođen mobilnim uređajima, dodajte viewport meta oznaku, gradite raspored mobile-first sa fleksibilnim širinama i koristite CSS prelomne tačke da ga preslažete na većim ekranima — slaganjem kolona, skupljanjem menija i prilagođavanjem slika da stanu. Zatim proverite svaku stranicu u širini telefona: da li ima bočnog pomeranja, sitnog teksta ili dugmadi premalih za dodir. Na sajtu napravljenom uz AI, jedan jasan upit i pregled u prikazu telefona obično reši većinu problema.

Šta je zapravo responzivni dizajn

Responzivni sajt koristi jedan skup stranica i URL-ova koji se prilagođavaju ekranu. Umesto zasebnog sajta „m.”, CSS menja raspored na određenim širinama, koje se zovu prelomne tačke (breakpoints). Gradivni blokovi:

• Viewport meta oznaka govori mobilnim pregledačima da koriste pravu širinu uređaja.
• Fluidni rasporedi koriste procente, flexbox i grid umesto fiksnih širina u pikselima.
• Media upiti (ili klase okvira kao Tailwind-ovo md:) menjaju raspored iznad date širine.
• Fleksibilni mediji — slike i video koji se skupljaju da stanu u svoj kontejner.

Važno je jer je verovatno veliki deo vašeg saobraćaja na telefonima, i zato što Google indeksira mobilnu verziju vaših stranica. Ako sadržaj ili linkovi postoje samo na računaru, Google ih možda takođe neće videti.

Opcije i kompromisi

Mobile-first je obično jednostavniji: jedna kolona je najlakši raspored, a dodavanje kolona kako prostor raste manje je posla nego njihovo uklanjanje.

Delovi koji se obično pokvare

Viewport oznaka

Ako stranica na telefonu izgleda kao mali sajt za računar, viewport oznaka nedostaje:

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

Ne dodajte maximum-scale=1 ili user-scalable=no. Blokiranje zumiranja prstima čini sajt težim za korišćenje ljudima sa slabim vidom.

Fiksne širine i horizontalno pomeranje

Najčešća greška u responzivnosti je nešto šire od ekrana: fiksni kontejner width: 1200px, široka tabela, dugačak URL ili blok koda, slika bez max-width: 100%. Cela stranica se tada pomera u stranu. Koristite max-width umesto width, dozvolite da se tekst prelama i dajte širokim delovima sopstvenu oblast za pomeranje.

Navigacija

Pet linkova iz desktop menija retko stane na telefon. Uobičajeno rešenje je dugme za meni koje otvara panel. Zadržite dve ili tri najvažnije radnje vidljive — „Zakaži”, „Korpa”, „Prijava” — i proverite da meni radi tastaturom i da se lako 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.
• Neka dugmad i linkovi budu lako pogodivi. WCAG 2.2 AA postavlja minimum od 24 × 24 CSS piksela (ili dovoljno razmaka); oko 44 piksela je udobnije za prste.
• Ostavite razmak između susednih linkova da ljudi ne pogode pogrešan.

Tabele i podaci

Široke tabele su najteži deo responzivne aplikacije. Opcije, po redosledu poželjnosti: prikažite manje kolona na telefonima, pretvorite svaki red u karticu ili stavite tabelu u kontejner koji se horizontalno pomera, sa fiksiranom prvom kolonom. Izaberite prema tome šta ljudi treba da uporede.

Slike i mediji

Koristite max-width: 100% i height: auto, poslužujte manje fajlove manjim ekranima pomoću srcset i postavite širinu i visinu da se raspored ne bi skakao. Ugrađeni video i mape treba da imaju responzivni omotač kako bi zadržali odnos stranica. Manje slike takođe čine stranice bržim — pogledajte kako ubrzati sajt.

Forme

Stavite labele iznad polja, neka polja budu cele širine i koristite odgovarajuće tipove unosa (type="email", type="tel", inputmode="numeric") da telefon prikaže odgovarajuću tastaturu. Stavite dugme za slanje tamo gde palac može da dohvati i neka ostane vidljivo kada se otvori tastatura.

Interakcije samo na lebdenje

Na telefonima nema lebdenja mišem. Opisi (tooltip), padajući meniji i pregledi koji se pojavljuju samo na lebdenje nevidljivi su korisnicima koji dodiruju ekran. Neka rade i na dodir.

Upiti koji rade

Za novu izgradnju, recite to od početka:

Gradi ovo mobile-first. Jedna kolona na telefonima, dve kolone od tablet širine, puni raspored na računaru. Bez horizontalnog pomeranja pri širini od 320 px, tekst tela najmanje 16 px, dodirne površine najmanje 44 px, dugme za meni na malim ekranima i tabele koje se pretvaraju u kartice na telefonima.

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

Na telefonima se stranica /pricing pomera u stranu, a tri kartice paketa su stisnute jedna pored druge. Ispod 768 px poslaži kartice vertikalno, neka tabela poređenja može da se horizontalno pomera unutar sopstvenog kontejnera uz fiksiranu kolonu sa funkcijama, a desktop raspored neka ostane isti.

Proveri svaku stranicu na širini od 375 px. Navedi sve što se prelije, preklopi, ima tekst manji od 16 px ili dodirnu površinu manju od 44 px, ili radi samo na lebdenje, 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 pregledača ili u pregledu u veličini telefona. Prođite kroz svaku stranicu od vrha do dna.
3. Prvo popravite horizontalno pomeranje. Nađite element koji je preširok; sve ostalo je teško oceniti dok on postoji.
4. Rešite navigaciju: dugme za meni, ključne radnje vidljive.
5. Proverite tekst, dodirne površine i forme na svakom ključnom toku — registracija, pretraga, plaćanje, kontakt.
6. Obradite tabele i medije: kartice ili kontejneri za pomeranje, responzivne slike i ugrađeni sadržaj.
7. Proverite međuveličine. Polako povlačite širinu od telefona do računara; rasporedi se često lome oko širine tableta.
8. Testirajte na pravom telefonu. Emulatori propuštaju stvari kao što je tastatura na ekranu koja prekriva dugme, izrezi na ekranu i koliko brzo sajt radi na mobilnom internetu.

Česte greške

• Testiranje samo na jednoj veličini telefona. Proverite mali telefon, veliki telefon i tablet.
• Skrivanje sadržaja na mobilnom da bi stao. Google indeksira mobilnu verziju, a korisnici na telefonu žele iste informacije.
• Isključivanje zumiranja u viewport oznaci.
• Slike veličine za računar na telefonima, što košta vreme učitavanja i podatke.
• Nagomilani elementi sa fiksnom pozicijom: zaglavlje koje ostaje, baner za kolačiće i balon za čet mogu da prekriju polovinu ekrana telefona.
• Iskačući prozori koji se ne mogu zatvoriti na malom ekranu jer je dugme za zatvaranje van ekrana.

Lista za mobilne uređaje

• Viewport meta oznaka prisutna; zumiranje nije isključeno
• Nema horizontalnog pomeranja na 320 px ni na jednoj stranici
• Tekst tela oko 16 px; polja ne izazivaju zumiranje
• Dodirne površine dovoljno velike i razmaknute
• Meni radi na telefonima i tastaturom
• Tabele čitljive na telefonima (kartice, manje kolona ili kontejner za pomeranje)
• Slike i ugrađeni sadržaj se skaliraju; poslužuju se fajlovi prave veličine
• Forme koriste odgovarajuće tipove unosa; dugme za slanje je dostupno
• Ništa važno ne zavisi od lebdenja
• Testirano na bar jednom pravom telefonu

Responzivni raspored je takođe deo pristupačnosti: WCAG traži da sadržaj radi pri širini od 320 px i pri zumu od 200%. Ako gradite aplikaciju koju ljudi svakodnevno koriste na telefonima, kako napraviti veb aplikaciju prilagođenu telefonu ide dalje, uključujući instalabilne PWA.

Responzivni dizajn na Mythex-u

Mythex pravi responzivne veb aplikacije, a na paketu Pro može da ih zamota kao Android i iPhone aplikacije. U radnom prostoru kliknite ikonu telefona iznad Preview-a (Switch to Mobile) da vidite aplikaciju u okviru veličine telefona, a povucite ivicu okvira da isprobate druge širine (Preview i kod). Dokumentacija ima kratak početni upit za popravku rasporeda na malim ekranima u upitima za prilagođenost mobilnim uređajima. Proverite i na pravom telefonu — otvorite objavljeni URL ili podelite link za pregled i otvorite ga na telefonu.

Pitanja