Nykyään verkkosivustollasi on monenlaisia ​​laitteita: pöytätietokoneet suurilla näytöillä, keskikokoiset kannettavat tietokoneet, tabletit, älypuhelimet ja paljon muuta.

Optimaalisen käyttökokemuksen saavuttamiseksi a etupääinsinööri , sivustosi tulisi säätää asettelua vastauksena näihin erilaisiin laitteisiin (ts. niiden vaihteleviin näytön tarkkuuksiin ja mittoihin). Prosessi vastaaminen käyttäjän laitteen muotoon viitataan (arvasit sen) reagoiva web-suunnittelu (RWD).

Miksi kannattaa aikaa opiskella reagoiva web-suunnittelu esimerkkejä ja siirtää painopiste RWD: lle? Esimerkiksi jotkut verkkosivujen suunnittelijat tekevät sen sijaan elämästään vakaan käyttökokemuksen varmistamisen kaikissa selaimissa ja käyttävät usein päiviä pienten ongelmien ratkaisemiseen Internet Explorerilla.

Tämä on typerä lähestymistapa.

Jotkut verkkosivujen suunnittelijat käyttävät päiviä pienten ongelmien ratkaisemiseen Internet Explorerissa ja jättävät mobiilikäyttäjänsä käytettyihin vierailijoihin. Tämä on typerä lähestymistapa.

Mashable kutsui vuotta 2013 reagoivan web-suunnittelun vuodeksi . Miksi? Yli 30% heidän liikenteestään tulee mobiililaitteista. He ennustavat, että tämä määrä voi nousta 50 prosenttiin vuoden loppuun mennessä. Internetissä yleensä, 17,4% verkkoliikenteestä tuli älypuhelimista vuonna 2013 . Samaan aikaan esimerkiksi Internet Explorerin käyttö muodostaa vain 12% kaikesta selain - liikenne, noin 4% vähemmän kuin viime vuonna (vuoden 2006 mukaan) W3Koulut ). Jos optimoit tietylle selaimelle globaalin älypuhelinkannan sijaan, puuttuu metsä metsästä. Ja joissakin tapauksissa tämä voi tarkoittaa eroa onnistumisen ja epäonnistumisen välillä - reagoivalla suunnittelulla on vaikutuksia muuntokurssit , SEO , poistumisprosentit , ja enemmän.

Reagoiva verkkosuunnittelun lähestymistapa

RWD: stä on yleensä puhuttu siinä, että kyse ei ole vain verkkosivujen ulkoasun säätämisestä; sen sijaan on keskityttävä sivustosi loogiseen mukauttamiseen käytettäväksi eri laitteissa. Esimerkiksi: hiiren käyttö ei tarjoa samaa käyttökokemusta kuin esimerkiksi kosketusnäyttö. Etkö ole samaa mieltä? Reagoivan mobiili- ja työpöytäasettelun tulisi heijastaa näitä eroja.

Samaan aikaan et halua kirjoittaa sivustoasi kokonaan uudelleen jokaiselle kymmenelle erikokoiselle näytölle, joita sitä voidaan tarkastella - tällainen lähestymistapa on yksinkertaisesti mahdoton. Sen sijaan ratkaisuna on toteuttaa joustavia reagoivia suunnitteluelementtejä, jotka käyttävät samaa HTML-koodia käyttäjän näytön koon mukauttamiseksi.

Teknisestä näkökulmasta ratkaisu on tässä reagoivassa suunnitteluoppaassa: käyttäminen CSS-mediakyselyt , pseudoelementit , joustavat verkkoasettelut ja muut työkalut dynaamiseen sopeutumiseen annettuun resoluutioon.

Mediakyselyt reagoivassa suunnittelussa

Mediatyypit ilmestyivät ensimmäisen kerran vuonna HTML4 ja CSS2.1 , joka mahdollisti erillisen CSS: n sijoittamisen näyttöä ja tulostusta varten. Tällä tavalla oli mahdollista asettaa erilliset tyylit sivun tietokoneen näytölle sen tulostukseen nähden.

@media screen { * { background: silver } }

tai

max-width

Sisään CSS3 , voit määrittää tyylit sivun leveyden mukaan. Koska sivun leveys korreloi käyttäjän laitteen koon kanssa, tämän ominaisuuden avulla voit siten määrittää erilaiset asettelut eri laitteille. Huomaa: Media tukee kyselyjä kaikki tärkeimmät selaimet .

Tämä määritelmä on mahdollista asettamalla perusominaisuudet: device-width, orientation, color ja @media screen and (min-width: 480px) { div { float: left; background: red; } ....... } . Myös muut määritelmät ovat mahdollisia; mutta tässä tapauksessa tärkeimmät huomioitavat asiat ovat vähimmäistarkkuus (leveys) ja suunta-asetukset (vaaka vs. pysty).

Alla oleva responsiivinen CSS-esimerkki näyttää menettelyn tietyn CSS-tiedoston aloittamiseksi sivun leveyden suhteen. Esimerkiksi, jos 480 kuvapistettä on nykyisen laitteen näytön suurin resoluutio, käytetään main_1.css: ssä määriteltyjä tyylejä.

initial-scale

Voimme myös määrittää erilaisia ​​tyylejä samassa CSS-tyylitaulukossa siten, että niitä käytetään vain, jos tietyt rajoitukset täyttyvät. Esimerkiksi reagoivan CSS: n tätä osaa käytettäisiin vain, jos nykyisen laitteen leveys on yli 480 kuvapistettä:

user-scalable=false

'Smart Zoom'

Mobiiliselaimet käyttävät ns. Älyäistä zoomia tarjotakseen käyttäjille 'ylivertaisen' lukukokemuksen. Pohjimmiltaan älykäs zoomaus pienentää sivukokoa suhteellisesti. Tämä voi ilmetä kahdella tavalla: (1) käyttäjän aloittama zoomaus (esimerkiksi napauttamalla kahdesti iPhone-näyttöä nykyisen verkkosivuston lähentämiseksi) ja (2) web-sivun suurennetun version näyttäminen alun perin ladata.

Koska voimme vain käyttää reagoivia mediakyselyjä ongelmien ratkaisemiseen, joihin älykäs zoomaus voi kohdistua, on usein toivottavaa (tai jopa välttämätöntä) poistaa zoomaus käytöstä ja varmistaa, että sivusi sisältö täyttää aina selaimen:

display: none;

Asettamalla :before arvoon 1, ohjaamme sivun alkuperäistä zoomaustasoa (ts. zoomauksen määrää sivun lataamisen yhteydessä). Jos olet suunnitellut verkkosivusi reagoivaksi, sujuvan ja dynaamisen asettelun tulisi täyttää älypuhelimen näyttö älykkäästi ilman, että tarvitsee aloituszoomia.

Lisäksi voimme poistaa zoomauksen kokonaan käytöstä :after.

Sivun leveydet

Oletetaan, että aiot tarjota kolme erilaista reagoivaa sivun asettelua: yhden pöytätietokoneille, toisen tableteille (tai kannettaville tietokoneille) ja toisen älypuhelimille. Mihin sivumittoihin sinun tulisi kohdistaa raja-arvot (esim. 480 kuvapistettä)?

Valitettavasti sivuleveyksien kohdentamiseksi ei ole määritelty standardia, mutta seuraavia esimerkkejä reagoivista arvoista käytetään usein:

• 320px
• 480 kuvapistettä
• 600 kuvapistettä
• 768 kuvapistettä
• 900 kuvapistettä
• 1024 kuvapistettä
• 1 200 kuvapistettä

On kuitenkin olemassa useita erilaisia ​​leveysmäärityksiä. Esimerkiksi, 320 tai enemmän on viisi oletusarvoista CSS3-mediakyselyn lisäystä: 480, 600, 768, 992 ja 1382 kuvapistettä. Tässä reagoivassa verkkokehitysoppaassa annetun esimerkin ohella voisin luetella ainakin kymmenen muuta lähestymistapaa.

Millä tahansa näistä kohtuullisista lisäyksistä voit kohdistaa useimpiin laitteisiin. Käytännössä ei yleensä tarvitse käsitellä erikseen kaikkia edellä mainittuja esimerkkejä sivuleveydestä - seitsemän erilaista tarkkuutta on todennäköisesti ylenmääräinen. Kokemukseni mukaan 320px, 768px ja 1200px ovat yleisimmin käytettyjä. näiden kolmen arvon pitäisi olla riittävä kohdistamaan älypuhelimet, tabletit / kannettavat tietokoneet ja vastaavasti pöytätietokoneet.

Psuedo-elementit

Edellisen esimerkin mukaisten reagoivien mediakyselyjen lisäksi voit myös haluta näyttää tai piilottaa tietyt tiedot ohjelmallisesti käyttäjän laitteen koon perusteella. Onneksi tämäkin voidaan saavuttaa puhtaalla CSS: llä alla olevan opetusohjelman mukaisesti.

Aloittelijoille joidenkin elementtien (:first-line) piilottaminen voi olla hyvä ratkaisu, kun on kyse näytön elementtien määrän vähentämisestä älypuhelinasettelussa, jossa tilaa on melkein aina riittävästi.

Mutta sen lisäksi voit myös olla luovia CSS: n avulla pseudoelementit (valitsimet), esim. p:first-line ja p. Huomaa: jälleen kerran pseudoelementit ovat kaikki tärkeimmät selaimet .

Pseudoelementtejä käytetään tiettyjen tyylien soveltamiseen HTML-elementin tiettyihin osiin tai tietyn alaryhmän valitsemiseen. Esimerkiksi a:visited pseudo-elementin avulla voit määrittää tyylit vain tietylle valitsimelle ensimmäisellä rivillä (esim. a koskee kaikkien .username:after { content:'Insert your user name'; } @media screen and (max-width: 1024px) { .username:before { content:'User name'; } } @media screen and (max-width: 480px) { .username:before { content:''; } } s: n ensimmäistä riviä). Vastaavasti :before pseudo-elementin avulla voit määrittää tyylit kaikille :after -linkeille, joissa on käyttäjän aiemmin vierailemia linkkejä. Nämä voivat selvästi olla hyödyllisiä.

Tässä on yksinkertainen reagoiva suunnitteluesimerkki, jossa luomme kolme erilaista ulkoasua kirjautumispainikkeelle, yhden palan työpöydälle, tabletille ja älypuhelimelle. Älypuhelimessa meillä on yksinäinen kuvake, kun taas tablet-laitteessa on sama kuvake ja käyttäjänimi. Lopuksi työpöydälle lisätään myös lyhyt ohjeviesti ('Lisää käyttäjänimesi').

@media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

Käyttämällä vain img { max-width: 100% } ja

pseudoelementit, saavutamme seuraavat:

Lisätietoja psuedoelementtien taikuudesta Chris Coyierilla on hyvä kirjoittaa ylös CSS-temppuilla.

Joten, mistä minun pitäisi aloittaa?

Tässä opetusohjelmassa olemme luoneet joitain reagoivan verkkosuunnittelun rakennuspalikoita (ts. Mediakyselyt ja näennäiselementit) ja esittäneet joitain esimerkkejä niistä. Minne menemme täältä?

Ensimmäinen askel sinun on järjestettävä kaikki verkkosivusi elementit erikokoisiksi.

Katso edellä esitetyn asettelun työpöytäversio. Tällöin vasemmalla oleva sisältö (vihreä suorakaide) voisi toimia jonkinlaisena päävalikkona. Mutta kun pienemmän resoluution laitteita on käytössä (esim. Tabletti tai älypuhelin), saattaa olla järkevää, että tämä päävalikko näytetään koko leveydellä. Mediakyselyjen avulla voit toteuttaa tämän käyttäytymisen seuraavasti:

|_+_|

Valitettavasti tämä peruslähestymistapa on usein riittämätön, koska käyttöliittymänne komplikaatio kasvaa. Koska sivuston sisältöorganisaatio eroaa usein huomattavasti mobiiliversiosta ja työpöytäversiosta, käyttökokemus riippuu lopulta reagoivan CSS: n lisäksi myös HTML: n ja JavaScriptin käytöstä.

Määritettäessä reagoivia ulkoasuja eri laitteille, useita avainelementtejä ovat tärkeitä. Toisin kuin työpöytäversiot, joissa meillä on tarpeeksi tilaa sisällölle, älypuhelinten kehittäminen on vaativampaa. Enemmän kuin koskaan, on välttämätöntä ryhmitellä tietty sisältö ja määritellä hierarkkisesti yksittäisten osien merkitys.

Älypuhelimelle on tärkeämpää kuin koskaan ryhmitellä tietty sisältö ja määritellä hierarkkisesti yksittäisten osien merkitys.

Sisällönne eri käyttötavat ovat myös tärkeitä. Esimerkiksi kun käyttäjälläsi on hiiri, hän voi asettaa kohdistimen tiettyjen elementtien yläpuolelle saadakseen lisätietoja, joten sinä (verkkokehittäjänä) voit jättää joitain tietoja kerättäväksi tällä tavalla - mutta tämä ei ole tapauksessa, kun käyttäjä on älypuhelimessa.

Lisäksi, jos jätät sivustoosi painikkeita, jotka älypuhelimissa näkyvät sitten pienemmiksi kuin tyypillinen sormi, luot epävarmuutta sivustosi käytöstä ja tuntemuksesta. Huomaa, että yllä olevassa kuvassa tavallinen verkkonäkymä (vasemmalla) tekee joistakin elementeistä täysin käyttökelvottomia, kun niitä tarkastellaan pienemmällä laitteella.

Tällainen käyttäytyminen lisää myös mahdollisuutta, että käyttäjä tekee virheen, mikä hidastaa hänen kokemustaan. Käytännössä tämä voi ilmetä pienentyneinä sivun katselukerroina, vähemmän myyntiä ja vähemmän sitoutumista kokonaisuutena.

Muut reagoivat suunnitteluelementit

Mediakyselyjä käytettäessä on pidettävä mielessä kaikkien sivuelementtien käyttäytyminen, ei vain kohteena olevien, erityisesti nesteruudukoita käytettäessä, jolloin (toisin kuin kiinteät mitat) sivu täytetään täysin milloin tahansa tällä hetkellä lisäämällä ja pienentämällä sisällön kokoa suhteellisesti. Koska leveydet asetetaan prosentteina, graafiset elementit (eli kuvat) voivat vääristyä ja sekoittua tällaisen juoksevan asettelun alla. Kuville yksi ratkaisu on seuraava:

Muita elementtejä olisi käsiteltävä samalla tavalla. Esimerkiksi loistava ratkaisu RWD: n kuvakkeille on käyttää IconFonts .

Muutama sana nestejärjestelmistä

Kun keskustelemme suunnittelun täydellisestä mukauttamisesta, katsomme usein optimaalista katselukokemusta (käyttäjän näkökulmasta). Tällaisen keskustelun tulisi sisältää mahdollisimman helppo käyttö, elementtien merkitys (näkyvien sivualueiden perusteella), helpotettu lukeminen ja intuitiivinen navigointi. Näiden luokkien joukossa yksi tärkeimmistä komponenteista on sisällön leveyden säätö . Esimerkiksi ns. Nesteverkkojärjestelmissä on asetettuja elementtejä eli suhteellisiin leveyksiin perustuvia elementtejä prosentteina koko sivusta. Tällä tavalla kaikki reagoiva web-suunnittelu järjestelmä mukautuu automaattisesti sivun koon mukaan.

Vaikka nämä nesteverkkojärjestelmät liittyvät läheisesti siihen, mistä olemme keskustelleet täällä, ne ovat oikeastaan ​​erillinen kokonaisuus, joka tarvitsisi lisäopetusohjelman keskustellakseen yksityiskohtaisesti. Siksi mainitsen vain joitain tärkeitä kehyksiä, jotka tukevat tällaista käyttäytymistä: Bootstrap , Ei-semanttinen ja Suluissa .

Johtopäätös

Viime aikoihin asti verkkosivustojen optimointi oli termi, joka on varattu yksinomaan eri selaimiin perustuvien toimintojen mukauttamiseen. Yhdessä väistämättömän taistelun kanssa selaimen nykyisistä standardeista, tämä termi edellyttää nyt sopeutumista laitteisiin ja näyttökokoihin myös reagoivalla verkkosuunnittelulla. Jos haluat leikata sen uudenaikaisessa verkossa, sivustosi on tiedettävä paitsi kuka on katsellen sitä, mutta Miten .