Mukautuva muotoilu (reagoiva muotoilu)

Käyttäjät, jotka käyttävät Internetiä tablettien ja matkapuhelinten kautta, lisääntyvät. Tämä, kuten tiedät jo, tarkoittaa, että ei riitä, että suunnittelemme vain hyvän verkkosivun, joka näyttää hyvältä tietokoneellamme: se on myös nähtävä jokaisessa mobiililaitteessa. Ongelma? Erilaiset näytön koot ja tarkkuudet. Siksi on niin vaikeaa tehdä suunnittelu, joka sopeutuu oikein kaikkiin medioihin (kuuluisa reagoiva suunnittelu, käännetty nimellä mukautuva muotoilu).

Tässä on joitain vinkkejä, jotka on pidettävä mielessä, kun teet mallin, jolla on nämä ominaisuudet. Kiinnittää huomiota!

Vinkkejä mukautuvaan suunnitteluun

1. Tee yksinkertainen malliYksinkertaisella en tarkoita mietoa. Puhun rakenne Verkkosivustosi HTML: mitä selkeämpi se on, sitä parempi. Muista, että tietokoneen näyttöön mahtuu kolme pystysaraketta; matkapuhelimen näytöllä, vain yksi. Ajattele sitä ja miten siirrät elementit uudelleen.
2. Poista kaikki tarpeetonVältä jQuery-tehosteita, Flash-animaatioita ja muita koodeja, jotka hidastavat sivusi lataamista. Mitä vähemmän sisältöä sinulla on, sitä nopeammin verkko latautuu.
3. Määritä tyyli css jokaiselle "koolle"Luo esimerkiksi tiny.css, small.css ja big.css, jotka toimivat sen laitteen mukaan, jota sitä katsellaan. Esimerkiksi:
   

   @import url (tiny.css) (min-leveys: 300px);

   @import url (small.css) (min-leveys: 600px);

   @import url (big.css) (min-leveys: 900px);

4. Eniten käytetyt tarkkuudet320 pikseliä / 480 pikseliä / 720 pikseliä / 768 pikseliä / 900 pikseliä / 1024 pikseliä
5. Tee mallistasi joustavaAina kun voit, työskentele prosenttiosuuksilla kiinteiden summien sijaan. Tässä on joitain viiteekvivalensseja: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Typografia Se on tärkeämpää kuin koskaan Joskus laitteesi näyttö voi olla niin pieni, että näet vain tekstin. Siksi meidän on valittava erittäin huolellisesti sivustomme parhaat fontit, jotta pienennettynä ne eivät menetä luettavuutta. Lisäksi meidän on osattava yhdistää neutraalimmat fontit muiden persoonallisuuksien kanssa, jotka antavat verkolle tarvittavan luonteen. Siksi ensimmäinen vinkki on, että vietät aikaa valitsemiesi kirjasinten valitsemiseen.
7. Yhdysvallat korkealaatuisia kuviaKun tilaa vähennetään, kuvat tulevat sen mukana. Valitse ne, jotka eivät menetä laatua vähentyessään ja jotka toimivat samalla tavalla skaalattaessa. Huonolaatuinen kuva saa verkkosivustosi näyttämään huonolta.
8. Että kuvasi näkyvät aina kokoEstä valokuviesi leikkaaminen lisäämällä img-koodi (leveys: 100%;) css: ään. Tällä tavoin käsket laitetta laskemaan kuvalle annettava korkeus niin, että sen leveys näkyy sata prosenttia.
9. Kaikki matalat sama URL-osoiteUnohda aliverkkotunnukset, kuten www.mysite.com/mobile, koska sama juurikansiossa oleva index.html-tiedosto toimii kaikilla laitteilla (jos teet mukautuvan suunnittelun oikein). Tiedät jo edun: mitä vähemmän aliverkkotunnuksia, sitä nopeammin sivu latautuu.
10. Hyödynnä tuet: Ole mielikuvituksellinen Verkkosivustolle pääsy ei ole sama kuin pöytätietokoneelta kuin iPadista tai matkapuhelimesta. Ensimmäisen kanssa navigoit rauhallisesti ja rennosti. Jälkimmäisen kanssa teet sen tyhjäkäynnillä ja suljet ikkunan heti, kun kyllästyt. Hyödynnä näitä ehtoja viihdyttäessäsi käyttäjää ja houkuttelemalla häntä pitämään hauskaa niissä muutamassa minuutissa, jonka hän aikoo omistaa sinulle. Ehkä palattuaan kotiin hän päättää vierailla taas rennommin.
11. Hanki inspiraatiota Digitaalisissa julkaisuissa ihmettelet miksi tämä neuvo. Erittäin helppoa: digitaaliset aikakauslehdet (hyvä) osaa hyödyntää tukea ja niiden suunnittelu on erittäin älykäs. Inspiroidu heistä ja tee verkkosivusto, josta on vaikea poistua.

Lisää tietoa - Digitaaliset aikakauslehdet

Lähde - splio, 960.gs, pylväs