Kuidas muuta veebisait mobiilisõbralikuks

Veebisaidi mobiilisõbralikuks muutmiseks lisa viewport meta-silt, ehita paigutus mobiili-esimeselt paindlike laiustega ja kasuta CSS-i murdepunkte, et suurematel ekraanidel paigutust ümber korraldada — veerge allapoole järjestada, menüü kokku voltida ja pilte sobitada. Seejärel kontrolli iga lehte telefoni laiuses külgsuunalise kerimise, väikese teksti ja liiga väikeste puudutatavate nuppude suhtes. AI-ga ehitatud saidil lahendab enamiku probleemidest tavaliselt üks selge prompt ja läbivaatus telefonisuuruses eelvaates.

Mis on responsiivne disain tegelikult

Responsiivne sait kasutab ühte lehtede ja aadresside komplekti, mis kohanduvad ekraaniga. Eraldi „m.“ saidi asemel muudab CSS paigutust teatud laiustel, mida nimetatakse murdepunktideks. Ehitusplokid on:

• Viewport meta-silt käsib mobiilibrauseritel kasutada seadme tegelikku laiust.
• Voolavad paigutused kasutavad protsente, flexboxi ja gridi, mitte kindlaid pikslilaiusi.
• Meediapäringud (või raamistiku klassid nagu Tailwindi md:) muudavad paigutust teatud laiusest alates.
• Paindlik meedia — pildid ja videod, mis kahanevad oma konteinerisse mahtumiseks.

See on oluline, sest suur osa liiklusest tuleb tõenäoliselt telefonidelt ja Google indekseerib lehtede mobiiliversiooni. Kui sisu või lingid on olemas ainult lauaarvutis, ei pruugi Google neid ka näha.

Valikud ja kompromissid

Mobiili-esimene on tavaliselt lihtsam: üks veerg on kõige lihtsam paigutus ning veergude lisamine ruumi kasvades on vähem tööd kui nende eemaldamine.

Osad, mis tavaliselt katki lähevad

Viewport-silt

Kui leht näeb telefonis välja nagu väike lauaarvuti sait, puudub viewport-silt:

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

Ära lisa maximum-scale=1 ega user-scalable=no. Pigistusega suumimise blokeerimine teeb sait keerulisemaks nägemispuudega inimestele.

Kindlad laiused ja horisontaalne kerimine

Kõige levinum mobiilivead on midagi ekraanist laiemat: kindla laiusega width: 1200px konteiner, lai tabel, pikk URL või koodiplokk, pilt ilma max-width: 100%-ta. Terve leht kerib siis külgsuunas. Kasuta max-width asemel width ja lase tekstil murduda ning anna laiadele asjadele oma kerimisala.

Navigeerimine

Viis lauaarvuti menüü linki tavaliselt telefonis ei mahu. Levinud lahendus on menüünupp, mis avab paneeli. Hoia nähtavana kaks-kolm kõige olulisemat tegevust — „Broneeri“, „Ostukorv“, „Logi sisse“ — ja veendu, et menüü töötab klaviatuuriga ning sulgub kergesti.

Tekst ja puudutusalad

• Põhitekst umbes 16 px on telefonides mõistlik miinimum. Väiksema tekstiga sisendväljad panevad iPhone’id puudutamisel suumima.
• Tee nupud ja lingid hõlpsasti tabatavaks. WCAG 2.2 AA seab miinimumiks 24 × 24 CSS-piksli (või piisava vahe); umbes 44 piksel on sõrmedele mugavam.
• Jäta külgnevate linkide vahele ruumi, et inimesed ei klõpsaks valet.

Tabelid ja andmed

Laiad tabelid on responsiivse rakenduse kõige raskem osa. Valikud eelistuse järjekorras: näita telefonides vähem veerge, muuda iga rida kaardiks või pane tabel horisontaalselt keritavasse konteinerisse, kus esimene veerg on kinnitatud. Vali selle järgi, mida inimesed peavad võrdlema.

Pildid ja meedia

Kasuta max-width: 100% ja height: auto, paku väikestele ekraanidele väiksemaid faile srcset-iga ning sea laius ja kõrgus, et vältida paigutuse hüppeid. Manustatud videod ja kaardid vajavad responsiivset ümbrist, et säilitada oma kuvasuhe. Väiksemad pildid teevad lehed ka kiiremaks — vaata kuidas teha oma veebisait kiiremaks.

Vormid

Paiguta sildid väljade kohale, tee väljad täislaiusega ja kasuta õigeid sisendtüüpe (type="email", type="tel", inputmode="numeric"), et telefonid näitaksid sobivat klaviatuuri. Pane saatmisnupp kohta, kuhu pöial ulatub, ja hoia see nähtavana, kui klaviatuur avaneb.

Ainult hõljumisel toimivad tegevused

Telefonid ei tea hõljumisest. Tööriistavihjed, rippmenüüd ja eelvaated, mis ilmuvad ainult hõljumisel, on puuteekraani kasutajatele nähtamatud. Tee need töötama ka puudutusega.

Promptid, mis töötavad

Uuel ehitusel ütle see kohe alguses:

Ehita see mobiili-esimesena. Telefonides üks veerg, tahvli laiusest alates kaks veergu, lauaarvutis täielik paigutus. Ei mingit horisontaalset kerimist 320 px laiuses, põhitekst vähemalt 16 px, puudutusalad vähemalt 44 px, väikestel ekraanidel menüünupp ja tabelid, mis telefonides muutuvad kaartideks.

Olemasoleva lehe puhul kirjelda, mida näed:

Telefonides kerib /pricing leht külgsuunas ja kolm hinnakaarti on kõrvuti kokku surutud. Paiguta kaardid alla 768 px allapoole, tee võrdlustabel kerimisalaga oma konteineris koos kinnitatud funktsioonide veeruga ning jäta lauaarvuti paigutus muutmata.

Kontrolli iga lehte 375 px laiuselt. Loetle kõik, mis ületab piiri, kattub, on väiksem kui 16 px tekst või 44 px puudutusala, või töötab ainult hõljumisel, ja paranda iga üks.

Samm-sammult

1. Kinnita viewport-silt on lehe päises.
2. Testi 320–375 px laiuselt brauseri seadmerežiimis või telefonisuuruses eelvaates. Keri iga lehte ülevalt alla.
3. Paranda kõigepealt horisontaalne kerimine. Leia liiga lai element; kõik muu on raske hinnata, kuni see on kadunud.
4. Korrasta navigeerimine: menüünupp, peamised tegevused nähtavad.
5. Kontrolli teksti, puudutusalasid ja vorme igal põhivoul — registreerimine, otsing, ostu sooritamine, kontakt.
6. Tegele tabelite ja meediaga: kaardid või kerimiskonteinerid, responsiivsed pildid ja manused.
7. Kontrolli vahepealseid suurusi. Lohista laiust aeglaselt telefonist lauaarvutini; paigutused katkevad sageli tahvli laiuse ümber.
8. Testi päris telefonil. Emulaatorid ei näe asju nagu ekraaniklaviatuur, mis katab nupu, sälgud või seda, kui kiiresti sait mobiilsideühenduses laadib.

Levinud vead

• Testimine ainult ühe telefoni suurusega. Kontrolli väikest telefoni, suurt telefoni ja tahvelarvutit.
• Sisu peitmine mobiilis, et see mahuks. Google indekseerib mobiiliversiooni ja telefonikasutajad tahavad sama teavet.
• Suumimise keelamine viewport-sildis.
• Lauaarvuti suuruses pildid telefonides, mis maksavad laadimisaja ja andmeid.
• Fikseeritud elementide kuhjumine: kleepuv päis, küpsisebänner ja vestlusmull võivad katta poole telefoni ekraanist.
• Hüpikaknad, mida ei saa sulgeda, sest sulgemisnupp jääb väljapoole ekraani.

Mobiili kontrollnimekiri

• Viewport meta-silt on olemas; suumimine pole keelatud
• Ühelgi lehel ei ole horisontaalset kerimist 320 px laiuselt
• Põhitekst ~16 px; sisendväljad ei käivita suumimist
• Puudutusalad on piisavalt suured ja vahelised
• Menüü töötab telefonides ja klaviatuuriga
• Tabelid on telefonides loetavad (kaardid, vähem veerge või kerimiskonteiner)
• Pildid ja manused skaleeruvad; serveeritakse õige suurusega faile
• Vormid kasutavad õigeid sisendtüüpe; saatmisnupp on kättesaadav
• Miski oluline ei sõltu hõljumisest
• Testitud vähemalt ühel päris telefonil

Responsiivne paigutus on ka osa juurdepääsetavusest: WCAG nõuab, et sisu töötaks 320 px laiuselt ja 200% suurendusel. Kui ehitad rakendust, mida inimesed kasutavad igapäevaselt telefonis, läheb kuidas ehitada mobiilisõbralikku veebirakendust kaugemale, sealhulgas paigaldatavate PWA-deni.

Responsiivne disain Mythexis

Mythex ehitab responsiivseid veebirakendusi ja Pro paketis saab neid pakendada Androidi ja iPhone’i rakendusteks. Töökeskkonnas klõpsa eelvaate kohal olevat telefoniikooni (Switch to Mobile), et näha oma rakendust telefonisuuruses raamis, ja lohista raami serva, et proovida teisi laiusi (Eelvaade ja kood). Dokumentatsioonis on lühike alguspromptide näide väikeste ekraanide paigutuse parandamiseks lehel mobiilisõbralikud promptid. Kontrolli ka päris telefonil — ava avaldatud aadress või jaga eelvaate linki ja ava see telefonis.

Küsimused