Responsiivinen suunnittelu

Mitä responsiivinen suunnittelu on ja miksi se on välttämätöntä?

Responsiivinen suunnittelu tarkoittaa asettelujen luomista jotka mukautuvat mihin tahansa ruutukokoon — puhelin, tabletti, kannettava, ultraleveä näyttö. Sama HTML, sama sisältö, mutta eri järjestys käytettävissä olevan tilan mukaan.

Tämä on välttämätöntä koska yleisösi käyttää jokaista laitetta. Design joka toimii vain työpöydällä sulkee pois puolet kävijöistä. Design joka toimii vain mobiilissa hukkaa työpöytätilan. Responsiivinen suunnittelu palvelee kaikkia yhdestä koodikannasta.

Tällä sivustolla jokainen tyyli on responsiivinen. Muuta selainikkunan kokoa ja katso: sarakkeet romahtavat, välistys mukautuu, typografia juoksuttuu uudelleen. Tyylin luonne säilyy — vain järjestys muuttuu.

Mikä ero on mobile-first- ja desktop-first-lähestymistavalla?

Mobile-first tarkoittaa suunnittelua pienimmälle ruudulle ensin, sitten monimutkaisuuden lisäämistä suuremmille ruuduille. Aloitat yksinkertaisesta ja laajennat.

Desktop-first tarkoittaa suunnittelua suurimmalle ruudulle ensin, sitten ominaisuuksien poistamista pienemmille ruuduille. Aloitat monimutkaisesta ja yksinkertaistat.

Mobile-first on yleensä suositumpi nykyään koska: (1) se pakottaa priorisoimaan sisällön, (2) mobiilikäyttäjät ovat usein enemmistö, (3) lisääminen on helpompaa kuin poistaminen.

Web-brutalismi on vahingossa mobile-first — koko leveys, yksi sarake, järjestelmäfontit, ei koristelua. Se toimii millä tahansa ruudulla ilman mediakyselyitä koska se ei koskaan olettanut suurta ruutua alun perin.

Bauhaus ja Swiss International ovat desktop-first — niiden kaksisarakkeiset gridit ja 1100px leveys on suunniteltu suurille ruuduille, sitten ne romahtavat yksisarakkeisiksi mobiilissa.

Miten taitepisteet toimivat ja milloin niitä pitäisi käyttää?

Taitepiste (breakpoint) on ruutuleveys jossa asettelu muuttuu — tyypillisesti vaihtaen monisarakkeisesta yksisarakkeiseksi tai säätäen välistystä. Yleisiä taitepisteitä: 768px (tabletti), 1024px (työpöytä), 1440px (suuri työpöytä).

Mutta moderni responsiivinen suunnittelu käyttää taitepisteitä vähemmän kuin ennen. Työkalut kuten CSS Gridin `auto-fit`, `clamp()` ja juokseva typografia vähentävät kovien taitepisteiden tarvetta.

Nordic Minimal demonstroi tätä: sen välistys käyttää `clamp(3rem, 8vw, 6rem)` — välistys on juokseva 3rem:n ja 6rem:n välillä, skaalaten suhteessa näkymän leveyteen. Taitepistettä ei tarvita.

Taitepisteet ovat yhä välttämättömiä rakenteellisille muutoksille (2 saraketta → 1 sarake), mutta vältä niiden käyttöä hienosäätöön. Jos tarvitset 10 taitepistettä, asettelusi on luultavasti liian jäykkä.

Miten sisällön leveys vaikuttaa mobiilikokemukseen?

Työpöydällä `max-width` rajoittaa sisällön luettavaan mittaan. Mobiilissa sisältö täyttää näkymän luonnostaan — rajoitusta ei tarvita.

Vertaa mobiilissa:

• Art Deco (800px max-width) — mobiilissa kompakti työpöytäleveys muuttuu koko leveydeksi joka tapauksessa. Mobiilikokemusta hallitsevat korkeat osiot ja seremoniallinen välistys.

• Bauhaus (1100px max-width) — mobiilissa kaksisarakkeinen grid romahtaa yhteen sarakkeeseen. Vierekkäin ollut sisältö pinoutuu päällekkäin.

• Web-brutalismi (100% leveys) — identtinen jokaisella ruudulla. Mukautumista ei tarvita koska se ei koskaan rajoittanut itseään.

Oppi: valitse työpöydän `max-width` tietäen että mobiili jättää sen huomiotta. Todellinen kysymys on miten gridisi ja välistyksesi mukautuvat.

Miten typografian tulisi reagoida ruudun kokoon?

Fonttikokojen tulisi olla mukavia jokaisella laitteella. Leipäteksti koossa 16px (1rem) toimii kaikkialla. Mutta otsikoiden on usein kutistuttava pienemmillä ruuduilla — 5rem-otsikko joka mahtuu työpöydälle vuotaa yli mobiilissa.

Ratkaisu: juokseva typografia `clamp()`-funktiolla. Esimerkiksi: `font-size: clamp(2rem, 5vw, 4rem)` — vähintään 2rem, enintään 4rem, skaalaa näkymän mukaan siltä väliltä.

Tällä sivustolla hero-otsikko käyttää `clamp(1.8rem, 4vw, 3rem)` oppimissivuilla ja `clamp(3rem, 8vw, 5rem)` tyylisivuilla. Teksti on aina luettavaa, aina suhteellista, ei koskaan ylivuotavaa.

Rivin pituudella on myös merkitystä: kapeilla ruuduilla 720px palsta muuttuu koko leveydeksi — luoden mahdollisesti hyvin lyhyitä rivejä. Tämä on hyväksyttävää puhelimilla (käyttäjät odottavat lyhyempiä rivejä) mutta vaatii riittävän fonttikoon pysyäkseen luettavana.

Mitä gridille ja monisarakkeisille asetteluille tapahtuu mobiilissa?

CSS Grid `auto-fit`- ja `minmax()`-funktioilla hoitaa tämän luonnostaan: `grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))`. Leveillä ruuduilla useita sarakkeita. Kapeilla ruuduilla yksi sarake. Taitepistettä ei tarvita.

Näin StyleShiftin periaatekortit toimivat. Työpöydällä Bauhaus näyttää ne kaksisarakkeisessa gridissä. Mobiilissa ne pinoutuvat pystysuoraan. `minmax(280px, 1fr)` varmistaa etteivät kortit koskaan muutu liian kapeiksi luettaviksi.

Art Deco käyttää `grid-orphan-column: 1 / -1` — pariton viimeinen kortti gridissä venyy koko leveyteen. Mobiilissa tämä on epäolennaista (kaikki on yksi sarake), mutta työpöydällä se ylläpitää symmetrian.

Keskeinen periaate: suunnittele grid sisällölle, ei tietylle laitteelle. Jos vähimmäissarakeleveytesi on 280px, grid mukautuu luonnostaan mihin tahansa ruutuun joka on sitä leveämpi tai kapeampi.

Miten välistys ja täyte mukautuvat responsiivisesti?

Kiinteä pikselivälistys hajoaa pienillä ruuduilla. 5rem osiovälistys joka hengittää kauniisti työpöydällä murskaa mobiilikäyttäjät loputtomalla vierityksellä.

Ratkaisut:

• clamp() — `padding: clamp(1rem, 5vw, 3rem)` skaalaa sulavasti

• Näkymäyksiköt — `padding: 5vw` on aina suhteellinen

• Pienennetyt arvot mobiilissa — yksinkertaisempi mutta vaatii taitepisteitä

Nordic Minimal käyttää clampia osiovälistykseen: `clamp(3rem, 8vw, 6rem)`. 375px puhelimella tämä ratkeaa arvoon 3rem. 1440px työpöydällä 6rem. Sulava siirtymä, ei taitepistettä.

Victorian käyttää kiinteää 1.5rem sivutäytettä — tiukka kaikilla ruuduilla. Tämä heijastaa tyylin horror vacuita: tilaa ei hukata, laitteesta riippumatta.

Tavoite: välistyksen tulisi tuntua suhteelliselta ruutuun, ei identtiseltä laitteiden välillä. 5rem aukko joka luo seremonian työpöydällä luo turhautumisen mobiilissa.