Se kestää vuosikymmenen 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äikkunaan?
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 Highbridge 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 suunnittelun luomisen mahdollisia etuja useille laitteille:
Jos haluat, että reagoiva sivusto toimii, osoita Google Chrome selaimella (mielestäni Firefoxilla on sama ominaisuus) Highbridge. 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.
Voit käyttää yläreunan navigointiasetuksia vaihtaaksesi näkymän vaakasuorasta 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!
Verkkosuunnittelu ei ole enää verkkovastaavien valinta, vaan se on nyt pakollinen heille. Kiitos tämän informatiivisen viestin jakamisesta.
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!
Luulen, että olet täysin oikeassa, Aaron. Ei riitä, että vain muutamme asioita ja siirrämme asioita ... meidän on todella käytettävä myös sisältöä tehokkaasti.