Adaptiivinen verkkosivustosuunnittelu on kätevä järjestelmä saman verkkosivuston näyttämiseen erityyppisillä laitteilla verkossa. Yksinkertaisesti sanottuna tämä on kyky tarkastella yhtä verkkosivua kannettavalla tietokoneella, älypuhelimella ja muilla laitteilla.
Verkon reagoivuudesta on tullut välttämättömyys siitä lähtien, kun ihmiset ovat hankkineet eri muotoisia Internet-yhteensopivia gadgeteja. Yritykset, verkkokaupat ja jopa vain informatiiviset sivustot pyrkivät miellyttämään yleisöään mukautumalla siihen kaikin mahdollisin tavoin. Responsiivinen muotoilu ratkaisee mukavuusongelman, joten se on korvaamaton työesine.
Responsiivisen verkkosuunnittelun ominaisuudet
Muunnittelun mukavuutta luonnehtivat useat pääkriteerit.
- Koko. Responsiivisessa sivuston suunnittelussa tulee olla pieniä eroja sivun näyttämisessä eri laitteilla, joten katseltavien kuvien, tekstin ja muiden elementtien kokojen tulee vastata itse laitteiden kokoa. Tätä varten verkkokehittäjät muokkaavat suunnittelua niin, että siitä on useita näkymäversioita.
- Sisällön mukauttaminen. Sivuston täyttävä materiaali (kuvat, videotja muut multimediaelementit) on myös vastattava vaadittuja näytön resoluutioita heikentämättä näytön laatua.
- Suunnittelun joustavuus. Sellaisten elementtien sisällyttäminen kehittämiseen, joiden avulla voit nopeasti muokata sivuston ulkoasua, kun vaihdat katsomaasi verkkosivua. Käyttäjä esimerkiksi vierittää sivua ylös ja alas, selaa eri osien läpi tai muuttaa näytön paikkaa pystysuorasta vaakasuuntaan ja päinvastoin.
- Yksinkertaista kohteita laitteen mukaan parantaaksesi käytettävyyttä.
- Piilota merkityksettömät lohkot pienemmillä näytöillä.
Perusasiat
Verkkosivustojen rakentaminen liittyy ehdottomasti ohjelmointikieliin, koska et yksinkertaisesti tule toimeen ilman niitä. HTML:n ja CSS:n avulla selain tunnistaa objektien (tekstit, kuvat, videot) koostumuksen ja järjestyksen – näin sivusto muodostuu.
CSS vastaa väreistä, tyyleistä, kooista, fonteista, tasauksista, täyteaineista, taustaelementeistä, lomakkeista jne. HTML on vastuussa sivuston yleisestä sisällöstä ja rakenteesta. Siten verkkoresurssi rakennetaan kahden tärkeimmän kuvausmenetelmän yhdistelmästä.
CSS on toisa alta välttämätön suunnittelutyökalu. Sisältää suuren joukon ominaisuuksia, jotka ovat parempia kuin HTML:
- Tarjoaa suunnittelun johdonmukaisuuden useille sivuille, sivuston ulkoasun ja ohjaa HTML-dokumenttien näyttöä.
- Antaa sinulle mahdollisuuden tehdä suunnittelua ja sisältöä samanaikaisesti.
- Käyttää useita tyylejä ja kykyäkatselu eri laitteilla.
- Tekee monimutkaisia suunnittelupäätöksiä.
- Suuri nopeus.
Websivuston kehittämiseksi sinun on tiedettävä joitain peruskäsitteitä.
CSS-valitsin on merkitty tyylin nimellä, joka määrittää ominaisuudet ja muotoiluasetukset. Se kertoo selaimelle, mitä elementtiä ominaisuudet koskevat.
Kiinteistö on rakenneyksikkö. Se määrittelee ulkoiset parametrit (koko, sijainti, väri, muoto jne.) ja ilmaistaan tietyllä koodilla.
On joukko määritettyjä CSS-ominaisuuksia, jotka kuvaavat yhtä objektia ulkonäöltään ja sijainniltaan.
Nämä elementit muodostavat yhdessä seuraavan kaavan:
Valitsija { ominaisuus1: arvo; ominaisuus2; arvo }.
Asettelukoot ja resoluutiot
Suunnittelun kehittäminen alkaa asettelun valmistelulla Photoshopissa tai muissa graafisissa ohjelmissa. Mukavuuden vuoksi kankaaseen lisätään modulaarisen ruudukon erityiset merkinnät, erityisiä sisennyksiä havaitaan. Siten web-suunnittelija näyttää taittosuunnittelijalle tulevan sivuston jäsentämisen ja verkkoelementtien oikean järjestelyn periaatteet.
Responsiiviset verkkosuunnittelun resoluutiot ja koot päälaitetyypeille:
- Tämä malli noudattaa periaatetta, jonka mukaan työt aloitetaan mobiililuvalla. Älypuhelimen asettelu on luotu kokoon 460 × 960 px.
- Tabletin asettelun koko on 768 × 1024.
- Kannettavan koko on 1280 × 802.
- PC:n koko on 1600 × 992.
Sivuston mobiiliversiossaolisi mahdollisimman yksinkertaistettu ja säilytettävä kaikki päätoiminnot. Jos ulkoasua valmistellaan verkkokaupalle, kaikilla käytössä olevilla yksinkertaistuksilla, siinä tulisi olla pääkuvaus, tuoteluettelo, tilausvaihtoehto, ostoskori jne. - kaikki tarvittavat elementit täysimittaiseen toimintaan, kuten koko muodon katselu PC:llä. Mobiiliversion mukavuus on, että täällä voit välttää ylimääräisiä sivuja säästääksesi aikaa latauksen aikana.
Mukautuvassa sisällössä voit piilottaa HTML-koodin avulla joitain elementtejä, joita ei todellakaan tarvita. Esimerkiksi korkealla resoluutiolla sivusto näyttää tuotekortin, jossa on sen kuvaus, hinta, toimitustiedot ja mahdollisuus lisätä "koriin". Mobiiliresoluutiolla prosessi yksinkertaistuu valokuvaan, hintaan ja ostopainikkeeseen.
Keski- ja vähimmäisresoluutioissa responsiivisessa suunnittelussa tulee ottaa huomioon käyttäjän helppolukuisuus lukea ja katsella.
Asettelu
Adaptiivisen suunnitteluasettelun tarkoituksena on luoda joustava layout tai kuten on myös tapana sanoa: "kumipohja". Tärkeintä ei ole yksinumeroisissa sivukooissa, vaan mallin suhteellisessa pakattavuudessa, jotta se on helppo katsella kaikilla laitteilla.
Se on rakennettu pääasiassa CSS:lle. Kehityksen aikana määritetään näytön mittojen ohjauspisteet. Siten jäljellä olevien objektien leveys määritetään. Tätä varten sivun leveys asetetaan css max-width -ominaisuudella, näistä kriteereistä riippuen muiden elementtien koko valitaan prosentteina. Esimerkiksi lohkon koko pääosassasivu on 600 pikseliä ja sivupalkkilohkon (sivuston sivupalkin) leveys on 400 kuvapistettä, sisällön leveys on 60 % ja sivupalkin leveys 40 %.
Responsiivisia asetteluja on useita. Jokainen valitaan erikseen ominaisuuksien ja rakenteen mukaan.
Katselut:
- Asettelutyyppi, joka sallii lohkojen rivittymisen, kun näytön resoluutiota pienennetään. Monisarakkeisissa sivustoissa lisälohkot siirretään näytön alaosaan.
- Kun kullekin luvalle on laadittu erillinen malli. Tämän tyyppinen responsiivinen suunnittelu kestää kauemmin, mutta on luettavin.
- Yksinkertainen muotoilu, jonka tavoitteena on skaalata kaikki elementit. Se ei ole joustava.
- Paneelityyppi on kätevä käytettäväksi mobiilisovelluksissa, kun näyttöön tulee lisätoimintoja, kun itse näytön paikkaa muutetaan.
Responsiivisten tasojen luominen on vain yksi osa työtä. Mukautuvat kuvat ovat erillinen tapaus, jolla on omat ongelmansa ja menetelmänsä niiden ratkaisemiseksi.
Yksittäinen kuva on näytettävä selkeästi eri näytön resoluutioilla. Tässä on ongelma - kuinka varmistaa, että kuva pysyy aina samana resoluution muutoksesta huolimatta. Tässä tapauksessa yksinkertaisen CSS-koodin syöttäminen ei riitä.
Esimerkki: img {max-width: 250px;} - tässä tulisi käyttää menetelmää, jossa kuvan sisältävän säilön kokoa rajoitetaan, ei itse kuvaa. Se näyttää suunnilleen tältä: div img {max-width: 250px;}. Tämä menetelmä ratkaisee ongelmanpienten kuvien asettelu, mutta ei sovellu suurille kuville.
Siksi monet kehittäjät käyttävät mieluummin javascript-kieliä, joiden avulla voit mukauttaa mitä tahansa kuvia ylikuormittamatta palvelinta. Javascript tarjoaa suuren määrän vaihtoehtoisia skriptejä.
Responsiivisen asettelun plussat ja miinukset
Positiiviset:
- Tallenna kaikkien elementtien sijainti. Tämä on kätevää, kun käyttäjä on tottunut sivuston täysversioon.
- Tallenna verkkotunnukset ja osoitteet.
- Täysi räätälöinti muille lupamuodoille.
Negatiivit:
- Toimintallinen joustavuus on menetetty
- Kaikki informatiiviset ylikuormitukset ovat täynnä verkkoresurssin pitkää käynnistämistä, mikä pakottaa monet käyttäjät vaihtamaan nopeampiin vaihtoehtoihin.
Verkkosivuston luominen
Sivuston rakenne on jaettu useisiin osiin ja lohkoihin. Asettelu koostuu perinteisesti sivuston yläosasta (otsikko), logosta, valikosta, sisältölohkosta ja sivuston viimeisestä osasta (esimerkiksi tarkat yhteystiedot). Katsotaanpa, kuinka luodaan responsiivinen verkkosivusto yksinkertaisesta mallipohjasta.
Aputunnisteet kirjoittamiseen:
- wrapper - tunniste, joka yhdistää kaikki mallin elementit;
- header h1 - logo;
- header - valikon ja muiden tärkeiden elementtien otsikko;
- sisältö - lohko;
- colLeft - sisällön koko;
- colRight - sivupalkki (sivusarake);
- footer - sivuston viimeinen osa;
- medianäyttö - sarjathaluttu resoluutio.
Sivustoa kirjoitettaessa nämä elementit voivat liikkua eri järjestyksessä tarpeen mukaan. Esimerkiksi suurilla resoluutioilla valikko voidaan näyttää pystysuorassa. Mobiiliversiossa asettelu voidaan rakentaa siten, että valikko liukuu ulos vaaka-asennossa.
- Viewport - tunniste, jonka avulla voit tallentaa tekstin koon pienempään malliversioon. Se sijaitsee tunnisteiden. välissä
- max-width - optimoidaksesi sivuston venymisen välttämiseksi yli 1000 pikselin resoluutioilla.
Asettelua toteutettaessa jQuery-kirjasto auttaa paljon, kun haluat muuttaa lohkojen tyyliä ja rakennetta.
Mitä eroa on responsiivisella ja mobiilisuunnittelulla
Ymmärtääksesi täydellisesti, harkitse muutamaa havainnollistavaa esimerkkiä, sillä näiden kahden käsitteen sekoittaminen ei ole harvinaista.
Sinun on ymmärrettävä, että mobiiliversio on aliverkkotunnuksen sisältävän ensisijaisen sivuston analogi. Sivuston ulkoinen esitys toistaa täysin tyylin ja toiminnallisuuden, kun taas sen rakenne ja sisältö voivat poiketa pääversiosta, koska versio on leikattu tarvittaviin elementteihin.
Responsiivinen muotoilu on optimaalinen kaikille laitteiden resoluutioille. Se on skaalautuva ja hahmontuu oikein katseluolosuhteista riippumatta.
Nämä ovat kaksi erilaista esitystä sivustosta, joiden ympärillä kiistat väsymättä raivoavat kumpi on parempi. On huomattava, että varmaa päätöstä ei ole vielä tehty. Joku kehuu tätä mallia osoittaen muotitrendin ja monia etuja. Mobiiliversiossa on myös useita etuja, joita responsiivisella suunnittelulla ei ole. Siksi sinun tulee aluksi ymmärtää perustarpeet.
Edut
Miten responsiivinen suunnittelu on parempi kuin mobiili?
Monipuolisuus. Meidän aikanamme, kun markkinat kasvavat niin kiihkeästi, on yksinkertaisesti välttämätöntä esittää tiedot eri tavalla, joka tyydyttää kuluttajien toiveet. Responsiivinen suunnittelu ratkaisee tämän ongelman.
Tehokas edistäminen hakukoneissa. Mitä ei voida katsoa mukautuvan laitteen pääeduiksi. Hakukoneet tarjoavat käyttäjille mieluummin reagoivia verkkosivustoja.
Käytettävyys. Responsiivinen muotoilu suunnitellaan yleensä parhaissa suunnitteluratkaisuissa, mikä on mukava lahja käyttäjien visuaaliselle havainnolle.
Helppoa ja yksinkertaista niin projektin toteuttamisessa kuin käytössä.
Hyvät muuntokurssit. Koska mukautuvalla suunnittelulla on enemmän näyttömahdollisuuksia, itse muunnos lisääntyy.
Talous. Se on suhteellisen halvempaa kuin erillisen mobiiliversion luominen ja mainostaminen.
Mobiiliversion plussat ja miinukset
Responsiivisen mobiilisuunnittelun luominen vaatii monipuolisuutta ja johdonmukaisuutta. Ensinnäkin on suositeltavaa kirjoittaa toimeksianto yksityiskohtaisesti, mikä tietysti auttaa välttämään turhaa työtä ja säästää aikaa sekä ottaa huomioon sen palvelimen ominaisuudet, jolla sivustoa isännöidään..
Mobiiliresponsiivisessa suunnittelussa on tiettyjä etuja ja haittoja.
Edut:
- Jos sinulla on valmis sivusto, mobiiliversion suunnittelua ei tarvitse kehittää tyhjästä. Vain muutamia muutoksia voidaan tehdä, mikä vapauttaa tämän asettelun tarpeettomista toiminnoista.
- Kaikista yksinkertaistuksista johtuen mobiiliversiota pidetään nopeampana latauksen aikana.
- Käyttäjä näkee kaiken sisällön tärkeimmän tiedon.
- Nopea toteutus. On olemassa laajennuksia, joilla voit toteuttaa mobiilisovitusta, vaikka et tietäisi tageja ja koodeja.
- Hakukoneiden valinnat suosivat mukautuvia versioita, koska niiden analysointi vie vähemmän aikaa.
Haitat:
- Kaikki mobiiliversiot eivät välttämättä vastaa mobiililaitteiden resoluutioita. Sivusto tietysti avautuu, mutta näytön tarkkuus ei aina vastaa asettelua. Joskus hyvin suunniteltu älypuhelimen muotoilu voi näyttää erilaiselta, kun se avataan tabletiksi.
- Mobiiliversiot vaativat erilliset maksulliset verkkotunnukset.
- Sisällön lähettämisessä on joitain pieniä ongelmia. Jos versioita on useita kerralla, sisältö tulee säätää kaikille formaateille kerralla. Uuden materiaalin lähettämistä pääsivustolle ja sen kopioimista mobiiliversioon voidaan pitää varastamisena. Tämän ongelman välttämiseksi saatat joutua todistamaan resurssien yhteyden.
Toteutusmenetelmät
Tärkeimmät toteutustavat:
- Asettelujen ja asettelun suunnittelun luomisen jälkeen se ladataan vaadittuihin mittoihin käyttämälläoperaattorin sivusto ja pääkoodi. Tämä on klassinen menetelmä, jota käytetään luotaessa keskikokoisia ja pieniä versioita (tabletit, älypuhelimet jne.).
- BootStrap on yksinkertainen ja selkeä joukko mukautustyökaluja. Soveltuu versioiden luomiseen aloitussivulle ja muille ei kovin monimutkaisille verkkoprojekteille. Se antaa hyvän mahdollisuuden soveltaa monia erilaisia tyylejä käyttöliittymätoiminnoissa.
- Responsive Grid System on suosittu joukko monipuolisia työkaluja. Helppo soveltaa eikä vaadi syvällistä tietoa. Sisältää laajan valikoiman infografioita.
- GUMBY – CSS-kehys, jossa on joustava reagointikyky ja loistavat työkalut.
- Evästeet – voit ottaa käyttöön reagoivia kuvia. Liittyy automaattisesti selaimen pyytämiin tiedostoihin.
- ExpressionEngine on toinen tapa luoda reagoivia kuvia. Määrittää, onko laite mobiili ja pystyykö muuttamaan kuvat vaadittuun resoluutioon.
- ProtoFluid - Tarjoaa nopean prototyyppien valmistuksen. Sopii kaikenlaisille laitteille.
