Responsiivinen suunnittelu: käytännön opas
Responsiivinen suunnittelu on lakannut olemasta erityinen tekniikka ja muuttunut normaaliksi tavaksi rakentaa. Hyvät tulokset erottaa yhä työjärjestys ja testaus oikeilla laitteilla.
Tämä opas kattaa lähestymistavan, tekniset päätökset ja ongelmat jotka näkyvät vasta oikealla puhelimella.
Mobiili ensin, ja miksi#
Pienen näytön suunnitteleminen ensin ei ole esteettinen mieltymys: se on rajoite, joka tuottaa parempia päätöksiä.
- Tilaa on vähemmän, joten on pakko päättää mikä on olennaista.
- Se mikä selviää pienestä näytöstä, on se mikä sivulla todella merkitsee.
- Tilan lisääminen isommille näytöille on helppoa; sisällön poistaminen sattuu.
- Suurin osa liikenteestä tulee mobiilista useimmilla toimialoilla — tarkista oma analytiikkasi.
- Suorituskyky paranee sivutuotteena, koska oletuksena ladataan vähemmän.
- Yksinkertaistettu mobiilinavigaatio osoittautuu yleensä paremmaksi myös työpöydällä.
Käänteinen malli — suunnitella työpöydälle ja «sovittaa» lopuksi — tuottaa improvisoidun mobiilikokemuksen, jonka tunnistaa heti.
Taitekohdat ja asettelu#
Taitekohtien tulisi seurata sisältöä, ei laitemalleja jotka vaihtuvat vuosittain.
| Päätös | Suositus |
|---|---|
| Minne taitekohdat sijoitetaan | Sinne missä asettelu hajoaa, ei laiteleveyksiin |
| Montako | Kolme tai neljä riittää useimmille sivustoille |
| Ruudukkojärjestelmä | CSS Grid sivulle, flexbox komponenteille |
| Leveydet | Suhteelliset maksimilla, ei kiinteitä arvoja |
| Typografia | Joustava clamp-funktiolla minimin ja maksimin välillä |
| Välistykset | Johdonmukainen asteikko, ei satunnaisia arvoja |
| Säiliöt | Maksimileveys, jottei teksti veny leveillä näytöillä |
Elementit jotka yleensä hajoavat#
Ne vastaavat suurimmasta osasta visuaalisia ongelmia pienillä näytöillä.
- Taulukot. Ne eivät kutistu. Joko ne vierivät vaakasuunnassa omassa säiliössään tai muuttuvat korteiksi.
- Kuvat. Ne tarvitsevat srcset- ja sizes-määritteet, ettei puhelin lataa työpöytäversiota.
- Pitkät otsikot. Testaa pisimmällä joka tulee esiintymään, ei esimerkin otsikolla.
- Lomakkeet. Kentät täydellä leveydellä, oikea näppäimistö kenttätyypin mukaan, näkyvät nimikkeet.
- Navigaatio. Kokoon taitetun valikon pitää sulkeutua ja toimia näppäimistöllä.
- Modaalit ja peittokerrokset. Niiden pitää mahtua näytölle ja vierittyä sisäisesti.
- Kiinnitetyt elementit. Kiinnitetty palkki matalalla näytöllä voi viedä puolet pinta-alasta.
- Upotetut videot ja kartat. Ne tarvitsevat säiliön määritellyllä kuvasuhteella.
Kunnollinen testaus#
Selaimen simulaattori nappaa asetteluongelmat ja piilottaa kaiken muun.
- Testaa oikeilla puhelimilla, mukaan lukien vanha ja hidas.
- Testaa rajoitetulla yhteydellä, ei toimistoverkossa.
- Testaa vaaka-asennossa — siellä kiinnitetyt palkit yleensä pettävät.
- Testaa suurennetulla tekstillä järjestelmän asetuksista.
- Testaa kosketusta peukalolla, ei hiirellä simuloidulla näytöllä.
- Tarkista aiheuttaako jokin vaakavieritystä; se on näkyvin olemassa oleva vika.
- Tarkista kosketuskohteet: vähintään 44 pikseliä, tilaa niiden välissä.
Vaakavieritys on vika, jonka kävijät huomaavat välittömästi ja jonka simulaattorit piilottavat helposti.
Usein kysytyt kysymykset
Montako taitekohtaa tarvitsen?
Kolme tai neljä riittää useimmille sivustoille. Kriteeri on se, missä asettelu lakkaa toimimasta, ei tietyn puhelimen leveys. Laiteleveydet vaihtuvat vuosittain; sisältö ei. Pienennä ikkunaa hitaasti ja aseta taitekohta sinne, missä jokin alkaa näyttää huonolta.
Tarvitsenko erillisen mobiilisivuston?
Et. Erilliset mobiilisivustot vaativat kaksinkertaisen ylläpidon, jakavat hakukonesignaalit ja ovat käytännössä hylätty lähestymistapa. Responsiivinen sivusto palvelee kaikkia näyttöjä samoista osoitteista, mikä on myös se mitä hakukoneet nykyään odottavat.
Miten käsittelen taulukot pienillä näytöillä?
Kaksi ratkaisua toimii: vaakavieritys taulukon omassa säiliössä, mikä säilyttää sarakkeiden vertailun, tai kunkin rivin muuttaminen pinotuksi kortiksi. Valinta riippuu siitä, pitääkö ihmisten vertailla arvoja sarakkeiden välillä. Se mikä ei koskaan toimi, on antaa taulukon työntää sivua sivusuunnassa.
Hidastaako responsiivisuus sivustoa?
Ei sinänsä. Hidastaa jos työpöytäkuvia lähetetään puhelimiin, mikä tapahtuu kun srcset puuttuu. Kun kuvat tarjoillaan oikeassa koossa ja CSS on järjestyksessä, responsiivinen sivusto on mobiilissa kevyempi kuin huonosti ylläpidetty erillinen versio.
responsiivinen suunnittelumobile firstcss-taitekohdatsivusto mobiilissaresponsiiviset kuvatjoustava typografia
