Mikä on reagoiva suunnittelu? (Selitysvideo ja infografiikka)

reagoiva web-suunnittelu

Se kestää vuosikymmenen ajan reagoiva web-suunnittelu (RWD) siirtyä valtavirtaan vuodesta Cameron Adams esitteli ensimmäisenä käsite. Idea oli nerokas - miksi emme voi suunnitella sivustoja, jotka sopeutuvat katseltavan laitteen näkymään?

Mikä on reagoiva suunnittelu?

Reagoiva verkkosivujen suunnittelu (RWD) on verkkosuunnittelun lähestymistapa, jonka tarkoituksena on luoda sivustoja optimaalisen katselukokemuksen tarjoamiseksi - helppo lukeminen ja navigointi vähällä koon muuttamisella, panoroinnilla ja vierityksellä - useilla laitteilla (matkapuhelimista pöytätietokoneisiin) näytöt). RWD: llä suunniteltu sivusto mukauttaa asettelun katseluympäristöön käyttämällä sujuvia, osuuksiin perustuvia ruudukoita, joustavia kuvia ja CSS3-mediakyselyjä, jotka ovat @media-säännön laajennus.

wikipedia

Toisin sanoen elementtejä, kuten kuvia, voidaan säätää sekä näiden elementtien asettelua. Tässä on video, joka selittää, mikä reagoiva muotoilu on, ja miksi yrityksesi tulisi toteuttaa se. Olemme äskettäin uudistaneet DK New Media sivusto on reagoiva ja työskentelee nyt Martech Zone tehdä sama!

Sivustokohtaisen reaktiivisuuden rakentaminen on hieman tylsiä, koska tyylisi on oltava hierarkkinen, joka on järjestetty näkymän koon mukaan.

Selaimet ovat tietoisia koostaan, joten ne lataavat tyylitaulukon ylhäältä alas kyselemällä näytön koon mukaan sovellettavia tyylejä. Tämä ei tarkoita, että sinun on suunniteltava erilaisia ​​tyylitaulukoita jokaiselle koonäytölle, sinun tarvitsee vain siirtää tarvittavat elementit.

Toiminta matkapuhelimella ensin -tekniikalla on nykypäivän perustaso. Luokkansa parhaat tuotemerkit ajattelevat paitsi sitä, ovatko heidän verkkosivustonsa mobiililaitteille sopivia, vaan myös koko asiakaskokemuksen.

Lucinda Duncalfe, Monetaten toimitusjohtaja

Tässä on Monetaten infografiikka, joka kuvaa yhden responsiivisen mallin luomisen mahdollisia etuja useille laitteille:

Reagoiva verkkosivujen infografiikka

Jos haluat, että reagoiva sivusto toimii, osoita Google Chrome selaimella (mielestäni Firefoxilla on sama ominaisuus) DK New Media. Valitse nyt Näytä> Kehittäjä> Kehittäjän työkalut valikosta. Tämä lataa joukon työkaluja selaimen alaosaan. Napsauta kehittäjän työkalujen valikkorivin vasemmassa reunassa olevaa pientä mobiilikuvaketta.

reagoiva-testaus-kromi

Voit käyttää yläreunan navigointiasetuksia vaihtaaksesi näkymän vaaka-asennosta pystyasentoon tai jopa valita minkä tahansa määrän esiohjelmoituja näkymäkokoja. Saatat joutua lataamaan sivun uudelleen, mutta se on maailman hienoin työkalu reagoivien asetusten tarkistamiseksi ja sen varmistamiseksi, että sivustosi näyttää hyvältä kaikilla laitteilla!

3 Kommentit

  1. 1
  2. 2

    Kiitos paljon Douglas tästä hyvin selitetystä artikkelista. Minun on kuitenkin hyväksyttävä tämä asioiden sisältöpuolella. Useimmille sivustoille reagoiva ulkoasu ei riitä. Tarvitsemme reagoivaa sisältöä. Mutta perussivustoilla käytämme varmasti hyvin dokumentoitua artikkeliasi tämän käsittelemiseksi!

Mitä mieltä olet?

Tämä sivusto käyttää Akismetiä roskapostin vähentämiseksi. Lue, miten kommenttitietosi käsitellään.