Mis on tundlik disain? (Seletaja video ja infograafik)

tundlik veebidisain

Selleks on kulunud kümme aastat tundlik veebidisain (RWD) minna peavoolu alates aastast Esmakordselt tutvustas Cameron Adams kontseptsioon. Idee oli geniaalne - miks ei saaks me kujundada saite, mis kohanduvad selle seadme vaateavaga, mida vaadatakse?

Mis on tundlik disain?

Reageeriv veebidisain (RWD) on veebidisainilahendus, mis on suunatud saitide loomisele, et pakkuda optimaalset vaatamiskogemust - hõlpsat lugemist ja navigeerimist ning minimaalset suuruse muutmist, panoraamimist ja kerimist - paljudes seadmetes (alates mobiiltelefonidest kuni lauaarvutini). monitorid). RWD-ga kujundatud sait kohandab paigutuse vaatamiskeskkonnaga, kasutades sujuvaid, proportsioonipõhiseid ruudustikke, paindlikke pilte ja CSS3 meediumipäringuid, mis on @media reegli laiendus.

Wikipedia

Teisisõnu saab reguleerida nii elemente nagu pilte, kui ka nende elementide paigutust. Siin on video, mis selgitab, mis on tundlik disain ja miks peaks teie ettevõte seda rakendama. Töötasime hiljuti välja DK New Media saidil olema reageeriv ja töötavad nüüd Martech Zone sama teha!

Saidile reageeriva loomise metoodika on natuke tüütu, kuna teil peab olema stiilide hierarhia, mis on korraldatud vastavalt vaateava suurusele.

Brauserid on oma suurusest ise teadlikud, nii et nad laadivad stiililehe ülevalt alla, pärides ekraani suuruse järgi sobivaid stiile. See ei tähenda, et peate iga suurusega ekraani jaoks kujundama erinevad stiililehed, vaid peate lihtsalt vajalikud elemendid nihutama.

Mobiilseadme esmalt mentaliteediga töötamine on tänapäeval põhistandard. Oma klassi parimad kaubamärgid mõtlevad mitte ainult sellele, kas nende sait on mobiilisõbralik, vaid ka täieliku kliendikogemuse üle.

Lucinda Duncalfe, Monetate'i tegevjuht

Siin on Monetate infograafik, mis illustreerib mitme seadme jaoks ühe tundliku kujunduse loomise võimalikke eeliseid:

Tundlik veebidisaini infograafik

Kui soovite, et reageeriv sait toimiks, osutage oma Google Chrome brauser (usun, et Firefoxil on sama funktsioon) DK New Media. Nüüd valige Vaade> Arendaja> Arendaja tööriistad menüüst. See laadib brauseri alaossa hulga tööriistu. Klõpsake arendaja tööriistade menüüribal vasakul asuval väikesel mobiiliikoonil.

reageeriv-testiv-kroom

Ülal olevate navigeerimisvalikute abil saate vaate muuta horisontaalsest vertikaalseks või valida suvalise arvu eelprogrammeeritud vaateava suurusi. Peate võib-olla lehe uuesti laadima, kuid see on maailma kõige vingem tööriist, et kontrollida oma reageerivaid seadeid ja tagada, et teie sait näeb kõikides seadmetes hea välja!

3 Kommentaarid

  1. 1
  2. 2

    Suur tänu Douglasele selle hästi selgitatud artikli eest. Pean sellega siiski asja sisupoolel nõustuma. Enamiku saitide jaoks, millest me automaatselt reageerime, ei piisa. Vajame reageerivat sisu. Kuid põhiliste veebisaitide jaoks kasutame kindlasti teie hästi dokumenteeritud artiklit selle kohta, kuidas seda käsitleda!

Mis sa arvad?

Sellel saidil kasutatakse rämpsposti vähendamiseks Akismetit. Vaadake, kuidas teie andmeid töödeldakse.