Suunnittelu webille ja tableteille - reagoiva suunnittelu

• Saattaa 19, 2024

Termi Responsive on ollut eturintamassa jo jonkin aikaa, mutta mitä se oikein tarkoittaa? Internet on muuttunut huomattavasti vuosien mittaan, pääosin tekstipohjaisesta alustasta vuorovaikutteiseksi, kiinnostavaksi, multimediaksi ja monilaitteiseksi ympäristöksi.

Verkkosivut ovat muuttuneet viimeisen vuosikymmenen aikana Internetin ja sen katseluun käytettävien laitteiden parannusten vuoksi. Laitteista puhuttaessa meillä on useita tyyppejä, mukaan lukien tietokoneet, minitietokoneet, tabletit ja älypuhelimet. Laitteiden lukumäärän ja niiden variaatioiden kasvaessa ongelmasta tulee ilmeinen. Jokaisella laitteella ja jokaisella laitteen muunnelmalla on oma näytön koko.

Kun jouduimme suunnittelemaan vain verkkosivustoja pöytätietokoneisiin ja kannettaviin tietokoneisiin, päätarkoituksenamme oli varmistaa, että verkkosivu näkyy samalla tavalla tietokoneesta tai selaimesta riippumatta. Vastaus oli suunnittelu suosituimmille selaimille ja yleisimpiä näytön tarkkuuksia. Se toimi lyhyen aikaa. Toinen ongelma tuli ilmeiseksi, kun nämä parametrit muuttuivat jatkuvasti. Ensimmäisen tietokoneeni näytön koko oli 800 x 600 ja rakastin sitä silti. Sitten 1024 x 800 tuli normi. Nyt tietokoneet ovat kasvaneet vähintään 27 tuumaa. Joten verkkosivuston tavoiteresoluutio muuttui jatkuvasti.

Juuri kun aloimme nauttia suunnittelusta näille suuremmille näytöille, älypuhelimen ja tablet-laitteen suosio kasvoi huomattavasti niiden hienojen sovellusten, mutta pienempien näyttöjen kanssa. Itse asiassa ennustetaan, että älypuhelimia ja taulukoita käytetään useammin kuin tietokoneita verkon katselemiseen vain muutamassa vuodessa. Aluksi mobiililaitteita oli vain muutama. Joten aloimme suunnitella sekä pääsivusto verkkosivulle tietokoneen käyttäjälle että toisen sivuston matkapuhelimen käyttäjälle. Mutta tämä ei ratkaissut ongelmaa kokonaan, koska suunnittelimme edelleen kiinteän leveyden asetteluita.

Nyt ei voi olettaa, mitä laitetta katsoja käyttää verkkosivustosi tarkastelemiseen. Joten tiettyjen kiinteiden näyttökokojen suunnittelu ei ole enää paras vastaus ongelmaan. Tarvitsemme tapaa määrittää käyttäjän laitteen näytön koko ja näyttää verkkosivu vastaavasti. Siksi reagoiva web-suunnittelu, joka käyttää CSS: ää näytön leveyden määrittämiseen ja verkkosivun näyttämiseen eri tavalla kuin tarvitaan. Tämä antaa meille mahdollisuuden olla vain yksi verkkosivusto, joka muuttaa tarvittaessa useita versioita.

Video-Ohjeita: Asus Zenbook UX305FA -ultrabook-kannettava (Tuote: 838797) (Saattaa 2024).