Responsive design on suhteellisen uusi termi web-suunnittelussa. Se syntyi vain kolme vuotta sitten toukokuussa 2010, kun web-suunnittelija Ethan Marcotte käytti termiä hänen artikkelinsä A List Apartille.
Tänään on olemassa myös mini-keskustelu siitä, onko reagoiva muotoilu täällä jäädäkseen vai onko se vain salama panoksessa. Vain aika kertoo, mutta nyt on selvää, että reagoiva muotoilu pyrkii tekemään käyttäjän kokemuksen mahdollisimman mukavaksi.
Responsive design on web-suunnittelufilosofia, joka keskittyy luomaan sivustoja, jotka tarjoavat käyttäjille paremman katselukokemuksen. Tämä sisältää ominaisuuksia, kuten vaivaton navigointi ja lukeminen, sekä selaimen pienin skaalaus, vieritys ja vieritys. Kaikki tämä tapahtuu useilla erilaisilla laitteilla, työpöydältä älypuhelimiin.
Koska tämä verkkosuunnitteluprosessi on vielä alhaisessa tilassa, et ehkä ole täysin selvillä siitä, mikä reagoiva muotoilu on kyse. Tarkoittaako saumattomasti sisältöä useilla eri alustoilla vai onko se lähinnä auttaa yrityksiä rakentamaan houkuttelevampia sivustoja lisäämään myyntiään paremman käyttökokemuksen kautta?
Mashable on jo mennyt raajaan ja nimeltään 2013 vastaavan suunnittelun vuosi. Vaikka tämä on edelleen nähtävissä, osa suunnittelun peruspiirteistä on normeja, jotka eivät koskaan mene pois. Tässä ovat tärkeimmät reagoivat suunnittelutiedot tutustumalla itseesi.
Sinulle annetaan anteeksi, että ajatteleva suunnittelu ja mobiilisuunnittelu ovat yhtä ja samaa - mutta eivät. Varmasti, reagoiva muotoilu luo verkkosivustoja niin, että ne molemmat vastaavat selaimen kokoon ja ovat mobiiliystävällisiä, mutta reagoiva muotoilu on todella koko web-suunnittelu. Ongelmana viitata tähän web design lähestymistapa kuin matkapuhelin muotoilu on, että se on luonnostaan rajoittava, mikä vahingoittaa itse lähestymistapaa.
Tehokkaimmat reagoivat verkkosivustot voidaan katsoa niiden tarkoituksenmukaisiksi eri ratkaisujen kautta. Tämä sisältää kaiken tavallisen 1024 × 768 pikselin ja 1920 × 1080 näytön välillä ja kaiken välillä. Tällaiset sivustot näyttävät loistavilta myös tablettien (sekä verkkokalvon ja standardinäytöllä) että älypuhelimilla. Jos web-suunnittelija tarkastelee reagoivaa muotoilua pelkästään mobiiliyhteyden kautta, hän saattaa kadota laajemmasta käyttäjäkokemuksesta.
Samalla liikkuvuus on todella sopiva lähtökohta koko suunnittelulle suunnatulle suunnittelulle. Se on ollut normaali aloittaa mobiilijärjestelmän avulla ja laajentaa tätä mallia lisää kokoja vastaavan sivuston kehittämiseksi. Paljon suunnittelijoita uskoo, että on yksinkertaisempaa kasvattaa kuvamateriaalia eikä minimoida niitä.
Jos sääntöjen noudattaminen edellyttää web-suunnittelijoiden noudattamista, kuvan laatu on paljon tärkeämpää kuin todellinen kuvien määrä. Syy on, että heikkolaatuinen kuva ei yksinkertaisesti näytä houkuttelevalta missään koossa. Aika, jolloin sivuston lataaminen on lähes yhtä tärkeää kuin koon. Mobiilikäyttäjät ovat samaa mieltä siitä, että heillä on rajoitettu kaistanleveys, jolla he voivat vastustaa.
Mikä on web-suunnittelija tekemään? Päästä vain älykkään tasapainon kuormitusajan ja laadun välillä. Tämä sisältää skaalautuvat kuvat CSS: n korkeus- ja leveysominaisuuksilla, ohjaus ilman kuvien täysikokoisuutta ja kuvan optimointi Internetiin. Ennen lataamista on erittäin suositeltavaa leikata kaikki kuvat ja tallentaa kuvat mahdollisimman pieneen kokoon, kunhan se on edelleen terävä, visuaalinen laatu.
Tarkista Sony USA: n verkkosivuilla . Huomaa, kuinka kaikki kuvat ovat erittäin teräviä, riippumatta siitä, minkä kokoisia ne ovat. Kun vierailet sivustolla tai päivität kotisivun, huomaa myös, kuinka nopeasti kuvien lataus tapahtuu. Sinun ei tarvitse odottaa yli sekuntia, jotta kaikki päästäisiin keskittymään äärimmäisen jyrkästi.
Suunnittelijoilla on monia valintoja, kun he sisällyttävät kuviin herkästi. He voivat käyttää vain muutamia kuvia; vähentää kuvien käyttöä mobiilikokoisissa järjestelmissä; sallivat kuvat peittämään itseään liikkuvassa ympäristössä; tai käyttää erilaisia tiedostokokoja ja -versioita. Nämä valinnat toimivat tehokkaasti, vaikka jotkut kehittäjät vastustavat kuvien piilottamista, koska käyttäjän on silti ladattava kuvat huolimatta siitä, että niitä ei ole näkyvissä.
Tyypin ei pitäisi olla yhtä kokoa. Eräänlainen fontti, joka näyttää miellyttävältä työpöydällesi, saattaa olla kauhistuttava älypuhelimellasi. Typografian on noudatettava samoja sääntöjä kuin muut herkän suunnittelun näkökohdat.
Tärkein piirre reagoivan typografian osalta on linjan pituus. Jotta pehmeä luettavuus, tyyppi olisi optimoitava näytön leveyden perusteella. Nyrkkisääntö työpöydän verkkosivustoille on, että 50-75 merkin pituinen rivi on ihanteellinen; mobiililaitteille, vain 35-50 merkkiä on ihanteellinen.
Tyyppiä on myös helppo lukea pystysuorassa. Paljon sivustoja hyödyntää linjatilaa, joka on jopa 140 prosenttia näytön pistekokosta suurempien tekstiryhmien kohdalla. Jos näyttö on pienempi, lisää tilaa.
Jopa erityinen kirjasintyyppi, jota käytetään, on merkittävä. Fancy-fontit ja uutuustyyppikirjat ovat kyky tarkastella visuaalisesti isompia näyttöjä, mutta niitä on vaikea lukea, jos pistekoko on pieni. Tällaisilla fonteilla pitäisi olla paljon tilaa niiden välillä. Kun työskentelet pienemmillä kooilla, on helpointa käyttää normaaleja sans serif -tyylejä ja jopa aivohalvauksia.
Päällä Hardboiled Web Design -sivusto , näet monia näistä periaatteista, joita noudatetaan ja jotka tekevät hyvää reagointia. Huomaa, kuinka tekstin pituus tekstillä - keskimäärin suurempi kuin 50-75 merkin ihanteellinen suositus - koostuu puhtaasta ja helppolukuisesta kirjasintyypistä. Lisäksi rivitila on suurempi kuin fontin pistekoko. Mobiililaitteissa sivuston herkkyys on vielä parempi: iPhone 5 -näytöllä merkkien määrä riviä kohti oli noin 67, mikä on vain hieman yli ihanteellinen sääntö, joka on 35-50 merkkiä.
Käyttäjäkokemuksen osalta - mikä on yksi tärkeimmistä tekijöistä, joita web-suunnittelijoiden pitäisi ajatella - navigointi on aivan ensisijaisten kohteiden kärjessä. Navigoinnin on oltava sileä ja tehokas, jotta varmistetaan mukava käyttökokemus.
Tehokas herkkä muotoilu on varmistettava kiinnittämällä erityistä huomiota tietyn selaimen tiettyyn leveyteen. Sivusto, joka käyttää reagoivaa muotoilua hyvin, antaa sivuston navigoinnin eri aloille, jotka riippuvat selaimen leveydestä. Yksi parhaista esimerkkeistä tästä on Food Sense Sivuston navigointi.
Virheellinen suunnitelma on virhe, jonka avulla sivuston navigointi voidaan suurentaa suuremmissa osuuksissa laitteissa, joissa on suuremmat näytöt.
Joten nyt, kun kuulet web-suunnittelijat puhuvan reagoivasta suunnittelusta, tiedät, että kyse ei ole pelkästään siitä, että verkkosivusto näyttää hyvältä ja toimii sujuvasti pienemmillä, liikkuvilla näytöillä. Tiedät, että tämä suunnitteluprosessi perustuu periaatteeseen, jonka mukaan kaikentyyppiset verkkosivustot tarjoavat käyttäjälle optimaalisen kokemuksen - riippumatta siitä, mitä he käyttävät sivuston katseluun.
Reagoiva muotoilu on edelleen suhteellisen uusi konsepti, ainakin useimmille ihmisille, jotka katsovat verkkosivustoja vain internetissä. Siksi niin monet ihmiset eivät vieläkään voi olla samaa mieltä siitä, mikä tekee reagoivasta suunnittelusta ... reagoivan suunnittelun. Aikooko nähdä kaikki kunnolla mobiilisovelluksissa? Onko kyse vain kuormitusajoista ja laadukkaista kuvista, jotka miellyttävät silmää? Onko kyse puhtaasta suunnittelusta ja helposti luettavista kirjasimista?
Se on kaikkea muuta. Ne ovat vain tämän verkkosuunnittelun lähestymistavan perustekijät, mutta reagoiva muotoilu on edelleen kehittymässä ja muuttumassa, joten mahdollisuudet ovat hyviä, kun otetaan huomioon myös muita elementtejä. Loppujen lopuksi kyseessä on käyttäjäkokemuksen parantaminen, koska kukaan ei halua käsitellä verkkosivustoa, joka on hidas, epäselvä, vaikea lukea, sekava tai vaikea käyttää.
Onko reagoiva muotoilu vain suuntaus? Mitkä ovat tärkeän näkökohdat herkän suunnittelun? Kerro meille mielipiteesi kommentteihin.