me kaikki kuulemme tätä sanaa ”responsiivinen” web design domainissa nykyään paljon. Ihmiset suosittelevat ja mennä ga-ga yli merkitys reagoiva suunnittelu. Mutta aloittelijoille aloilla ammatillisen bloggaaminen ja webmastering usein kestää vähän aikaa saada käsiinsä kaikki tämä buzz siitä, mikä on reagoiva verkkosivuilla ja miten kehittää yksi.
ihmiset luovat usein verkkosivujensa teemoja kuvatiedoston (esimerkiksi PSD) perusteella. Vaikka kaikki verkkosivujen mallit alkavat kuvana, on syytä olla hyvin varovainen, että niiden muotoilu vastaa reagointikyvyn periaatteita ja ovat mobiiliystävällisiä. Otetaan pulahtaa aiheeseen ja selvittää kaikki tästä asiasta.
no, verkkosivuston reagointikyky viittaa sen kykyyn säätää näyttöä sen laitteen mukaan, jolla se nähdään. Takana ovat ajat, jolloin useimmat ihmiset käyttivät pöytätietokoneita-nyt on kaikenlaisia laitteita siellä. Pöytäkoneet, Kannettavat tietokoneet, netbookit, tabletit, mini-tabletit, e-kirjojen lukijat, älypuhelimet ja ei-niin-älypuhelimet! Huh! Liian monet olla huolissaan!
kaikilla näillä laitteilla on omat erityiset näyttökokonsa ja resoluutionsa. ”Jäykkä” verkkosivusto ei pysty mukautumaan (tai sanotaan, vastaamaan) vaihteleviin näytön kokoihin. Vaakasuuntaisen vierityspalkin ilmestyminen selaimessa on yksi näkyvimmistä merkeistä siitä, että verkkosivusto ei reagoi.
sen sijaan reagoivalla teemalla varustettu verkkosivusto pystyy mukautumaan ja varmistaa, että sisältö on helposti luettavissa minkä tahansa näytön koosta.
ei oikeastaan. Reagoiva teema säätää näytön ensisijaisena tavoitteena, että sisältöä verkkosivuilla voitaisiin käyttää kävijä. Tämän tavoitteen saavuttamiseksi sivusto voi piilottaa joitakin sen lisälaitteita (kuten sivupalkissa) ja muuttaa muiden komponenttien kokoa (esim.kuvat, fontit jne.)
on melko helppo tietää, kuinka reagoiva on sivustosi teema. Avaa se vain eri kokoisille tietokonenäytöille ja matkapuhelimen näytöille. Jos näet sivustosi kunnossa ja kaikki sisältö on luettavissa, sivustosi on reagoiva. Jos sinulla ei ole erilaisia laitteita testaamiseen sivuston, voit myös käyttää online testi reagointikykyä.
yleinen vastaus on, että kyllä se on erittäin tärkeää. Mutta ennen kuin teet päätöksen tehdä makeover sivuston muuttaa sen reagoiva yksi-sinun pitäisi tarkastella web-liikenteen tiedot. Näistä tiedoista, yritä selvittää, kuinka paljon liikennettä sivustosi vastaanottaa mobiililaitteilla. Yleensä sivustot on suunniteltu käytettäväksi pöytäkoneella / kannettavalla tietokoneella –mutta jos saat merkittävää liikennettä laitteista, kuten tableteista / matkapuhelimista-sinun pitäisi nähdä, miten sivustosi näyttää tällaisilta laitteilta.
tällä hetkellä Aasialaissivustot saavat keskimäärin 27 prosenttia liikenteestään mobiililaitteilta. Tämä prosenttiosuus olisi paljon suurempi sivustoja alueilla, kuten Euroopassa ja Amerikassa, koska siellä mobiililaitteet ovat suhteellisen paljon suositumpia.
yllätyt siitä, että reagointikyky on helposti saavutettavissa pelkän CSS: n avulla. Nykyisten CSS-standardien avulla voit tyylitellä sivustosi eri näyttötyypeille. Tämä tarkoittaa, että sinulla voi olla erilliset CSS-säännöt eri näyttökooille. Esimerkiksi:
@medianäyttö ja (max-width:320px) {
.ensisijainen sivupalkki { näyttö: ei mitään } / / piilota sivupalkissa, kun näytön koko on 320px tai vähemmän
}
@medianäyttö ja (minileveys: 1024px) {
body { font-size: 12px } / / aseta kirjasinkoko näyttönkoolle, joka on suurempi kuin 1024px
}
tällaiset räätälöidyt CSS-säännöt ohjaavat sivustosi ulkoasua riippuen ruudulla olevasta tilasta.
jos päätät siirtyä responsiiviseen suunnitteluun verkkosivustollesi tai blogiisi, voit odottaa, että sinulla on seuraavat edut:
- liikenne lisääntyy verkkosivustollasi, koska mobiililaitteiden käyttäjät voivat käyttää sitä ja voivat päättää palata hakemaan uutta tietoa. Jos mobiilikäyttäjät eivät voi käyttää verkkosivuston sisältöä-he eivät tule takaisin!
- jos käytät mainoksia sivustossasi ansaitaksesi rahaa verkossa-tulosi voivat kasvaa, koska reagoiva verkkosivusto pystyy näyttämään mainoksia mukavasti myös mobiililaitteilla.
- sinun ei tarvitse kehittää verkkosivustostasi tai blogistasi eri versioita eri alustoille. Tämä säästää aikaa myös huollossa, koska useampi versio vaatii enemmän huoltoaikaa.
- jos kehität useampaa kuin yhtä versiota erityyppisille laitteille, saatat joutua Googlen indeksoimaan päällekkäisiä URL-osoitteita. Eri URL-osoitteita, jotka viittaavat samaan sisältöön, kutsutaan päällekkäisiksi URL-osoitteiksi. Google asettaa raskas rangaistus päällekkäisiä URL uskoen, että sisältö liian on päällekkäistä. Responsiivinen Verkkosivujen suunnittelu suojaa sinua tällaiselta rangaistukselta.
- sinun ei tarvitse huolehtia agenttien oikeasta tunnistuksesta, koska sama verkkosivusto toimii kaikille selaimen edustajille.
- URL-osoitteiden jakaminen sosiaalisen median sivustoilla helpottuu, koska jokaisella sivustosi sivulla on vain yksi URL, joka liittyy siihen.
responsive designissa ei ole merkittäviä haittoja, paitsi että ylimääräiset CSS-säännöt saattavat kasvattaa CSS-tiedoston kokoa ja sen seurauksena latausaika kasvaa. Mutta nopeampi internet tulossa saataville ympäri maailmaa – en usko, että tämä aiheuttaa mitään todellista ongelmaa.
responsiivisessa suunnittelussa ei käytetä eri kuvakokoja. Sen sijaan saman kuvan kokoa muutetaan css: n kautta niin, että se mahtuu laitteen näytölle. Niin, mobiililaitteet on myös ladata samat korkean resoluution kuvia, jotka tarjoillaan työpöytäyhteydet.
nyt tiedämme, että reagoiva suunnittelu voi tuoda hieman ylimääräistä taakkaa mobiili internet-yhteys, on tärkeää, että pystyt testata, kuinka nopeasti nykyinen (reagoiva tai ei-reagoiva) suunnittelu toimii. Paras online-työkalu testata tätä on PageSpeed Google. Tämä työkalu voi pisteet sivuston sekä työpöydälle ja mobiililaitteisiin.
suurin osa Googlen verkkosivuista reagoi nyt. Esimerkiksi Chromebook-sivusto käyttää responsiivista suunnittelua. Mutta Google on uraauurtava yritys mitään liittyvät Internet. Kuten yhä useammat muut yritykset tunnustavat merkityksen reagoiva suunnittelu, sivustot ovat siirtymässä tähän uuteen paradigma. Tutustu Wendy ’ s-ravintolaketjun, inbound-markkinointiyhtiö Hubspotin ja sanomalehti Boston Globen verkkosivuihin saadaksesi inspiraatiota.
Kyllä, On olemassa monia suuria verkkosivustoja, jotka eivät ole vielä omaksuneet reagoivaa suunnittelua. Asiasta kertovat muun muassa CNN ja BBC. Nämä ovat valtavia sivustoja ja täydellinen uudelleensuunnittelu sisällyttää reagointikykyä voi vaatia merkittäviä investointeja. Se voi olla syy, miksi nämä mediatalot eivät vielä lähde reagoimaan.
ei, se ei ole oikeasti kallis. Jos omistat sivuston / blogin perustuu WordPress, on olemassa paljon reagoiva teemoja. Oletus teema WordPress (eli TwentyThirteen) on myös suunniteltu reagoiva. Suurin osa ilmaisia teemoja tarjoamia WordPress ja Blogger ovat reagoivia. Mutta jos käytät kolmannen osapuolen teema-sinun täytyy tarkistaa sen reagointikykyä.