Verkkosivustojen kehitysteknologia on hyvin monipuolinen prosessi. Mutta silti, kaikki sen vaiheet voidaan jakaa kahteen pääkomponenttiin - toiminnalliseen ja ulkokuoreen. Tai, kuten verkkovastaavien keskuudessa on tapana, tausta- ja käyttöliittymä. Verkkokehitysstudioista verkkosivujaan tilaavat ihmiset uskovat usein naiivisti, että vain toimivuuteen kannattaa keskittyä, ja tämä on oikea päätös. Mutta tämä pätee hyvin, hyvin harvoissa tapauksissa, yleensä beta-testausvaiheessa oleviin käynnistysprojekteihin. Muuten graafisen suunnittelun ja käyttöliittymän on yksinkertaisesti oltava web-kehitysstandardien mukaisia ja mukavia.
Ensimmäinen kulmakivi, jonka käyttöliittymäsuunnittelija tai suunnittelija kohtaa, on sivuston asettelun leveys. Loppujen lopuksi sitä varten on tarpeen piirtää rajapinnat. Puhtaasti intuitiivisesti syntyy kaksi lähestymistapaa - joko luoda erilliset asettelut kullekin suositulle näytön resoluutiolle tai luoda yksi versio sivustosta kaikille näytöille. Ja molemmat vaihtoehdot ovat vääriä, mutta ensin asiat ensin.
Verkkosivuston vakioleveys pikseleinäRunetille
Ennen adaptiivisen asettelun kehittämistä tuhannen pikselin levyisen sivuston kehittäminen oli massailmiö. Tämä kuva valittiin yhdestä yksinkertaisesta syystä - jotta sivusto sopii mihin tahansa näyttöön. Ja tässä on oma logiikkansa, mutta oletetaan, että ihmisellä on edelleen ainakin HD-näyttö työpöydällä. Tässä tapauksessa ulkoasu näyttää pieneltä nauh alta keskellä näyttöä, jossa kaikki on juuttunut yhteen kasaan ja sivuilla on v altava käyttämätön tila. Oletetaan nyt, että henkilö käyttää verkkosivustoasi tabletilla, jossa on 800 pikseliä laajakuva, ja "Näytä koko verkkosivusto" on valittuna asetuksista. Tässä tapauksessa myös sivustosi näytetään väärin, koska se ei yksinkertaisesti mahdu näyttöön.
Näistä pohdinnoista voimme päätellä, että asettelun kiinteä leveys ei todellakaan sovi meille ja meidän on etsittävä toinen tapa. Analysoidaan ideaa erillisestä asettelusta jokaiselle näytön leveydelle.
Asetteluja kaikkiin tilanteisiin
Jos olet valinnut strategiaksesi luoda asetteluja kaikille markkinoiden kokoisille näytöille, sivustostasi tulee ainutlaatuisin koko Internetissä. Loppujen lopuksi on nykyään yksinkertaisesti mahdotonta kattaa koko laitevalikoima yrittämällä hienosäätää jokaista vaihtoehtoa. Mutta jos keskityt suosituimpiin näyttöjen ja laitenäyttöjen resoluutioihin, idea ei ole huono. Sen ainoa haittapuoli on taloudelliset kustannukset. Loppujen lopuksi, kun käyttöliittymäsuunnittelija, suunnittelija ja koodaaja pakotetaan tekemään sama työ 5 tai 6 kertaa, projekti maksaasuhteettoman korkeampi kuin alun perin budjetoitu hinta.
Siksi vain yksisivuiset sivustot voivat ylpeillä runsaalla versiolla eri näytöille, joiden tarkoituksena on myydä yksi tuote ja tehdä se hyvin. No, jos sinulla ei ole yhtä näistä laskeutumisista, vaan monisivuinen sivusto, sinun kannattaa harkita tarkemmin.
Suosituimmat sivustokoot
Kompromissi kahden ääripään välillä on asettelun tekeminen kolmelle tai neljälle näyttökoolle. Niiden joukossa on oltava asettelu mobiililaitteille. Loput tulee mukauttaa pienille, keskisuurille ja suurille työpöytänäytöille. Kuinka valita sivuston leveys? Alla esittelemme HotLog-palvelun tilastot toukokuulta 2017, joka näyttää meille eri laitteiden näyttötarkkuuksien suosion jakautumisen sekä tämän indikaattorin dynamiikan.
Taulukosta saat selville, kuinka määrität käytettävän sivuston koon. Lisäksi voimme päätellä, että yleisin muoto nykyään on 1366 x 768 pikselin näyttö. Tällaiset näytöt asennetaan edullisiin kannettaviin tietokoneisiin, joten niiden suosio on luonnollista. Seuraavaksi suosituin on Full HD -näyttö, joka on kultainen standardi videoille, peleille ja siten myös verkkosivustojen asettelujen luomiseen. Taulukossa näkyy edelleen mobiililaitteiden resoluutio 360 x 640 pikseliä sekä sen jälkeen erilaisia vaihtoehtoja työpöytä- ja mobiilinäytöille.
Asettelun suunnittelu
JotenTilastojen analysoinnin jälkeen voimme päätellä, että optimaalisella sivuston leveydellä on 4 muunnelmaa:
- Kannettava versio 1366 pikselin leveydellä.
- Full HD -versio.
- 800 pikseliä leveä asettelu pienille pöytätietokoneiden näytöille.
- Sivuston mobiiliversio – 360 pikseliä leveä.
Oletetaan, että olemme päättäneet, mitä kokoa käytetään sivuston luodulle lähteelle. Mutta tällainen projekti olisi silti kallis. Joten katsotaan lisää vaihtoehtoja tällä kertaa ilman kiinteää leveyttä.
Asettelun tekeminen joustavaksi
On olemassa vaihtoehtoinen lähestymistapa, jolloin kannattaa sopeutua vain näytön vähimmäiskokoon, ja itse sivustojen koot asetetaan prosentteina. Samanaikaisesti sellaiset käyttöliittymäelementit kuten valikot, painikkeet ja logo voidaan asettaa absoluuttisiin arvoihin keskittyen näytön leveyden vähimmäiskokoon pikseleinä. Sisältöä sisältävät lohkot päinvastoin venytetään määritetyn prosenttiosuuden mukaan näyttöalueen leveydestä. Tämän lähestymistavan avulla voit lakata pitämästä sivustojen kokoa suunnittelijan rajoituksena ja voittaa tämän vivahteen taitavasti.
Mikä on kultainen leikkaus ja miten sitä voidaan soveltaa verkkosivun ulkoasuun?
Jopa renessanssin aikana monet arkkitehdit ja taiteilijat yrittivät antaa luomuksilleen täydellisen muodon ja mittasuhteet. Vastauksia kysymyksiin tällaisen osuuden arvoista he kääntyivät kaikkien tieteiden kuningattaren - matematiikan - puoleen.
Antiikista lähtien on keksitty osuus, jonka silmämme pitävät luonnollisimpana ja tyylikkäimpana,koska se on kaikkialla luonnossa. Tällaisen suhteen kaavan keksijä oli lahjakas antiikin kreikkalainen arkkitehti nimeltä Phidias. Hän laski, että jos suurempi osa osuudesta liittyy pienempään, kun kokonaisuus liittyy suurempaan, niin tällainen osuus näyttää parha alta. Mutta tämä pätee, jos haluat jakaa kohteen epäsymmetrisesti. Tätä osuutta kutsuttiin myöhemmin kultaleikkaukseksi, mikä ei edelleenkään yliarvioi sen merkitystä maailman kulttuurihistorialle.
Takaisin web-suunnitteluun
Se on hyvin yksinkertaista - kultaisen leikkauksen avulla voit suunnitella sivuja, jotka ovat mahdollisimman miellyttäviä ihmissilmälle. Laskemalla kultaisen suhteen kaavan määritelmän mukaan, saamme irrationaalisen luvun 1, 6180339887 …, mutta mukavuuden vuoksi voimme käyttää pyöristettyä arvoa 1, 62. Tämä tarkoittaa, että sivumme lohkojen tulisi olla 62 % ja 38 % kokonaisuudesta riippumatta siitä, minkä kokoinen käyttämäsi sivuston luotu lähde on. Näet esimerkin tässä kaaviossa:
Käytä uusia tekniikoita
Nykyaikaiset verkkosivujen asettelutekniikat mahdollistavat suunnittelijan ja suunnittelijan idean välittämisen tarkasti, joten nyt on varaa toteuttaa rohkeampia ideoita kuin Internet-tekniikoiden kynnyksellä. Sinun ei enää tarvitse miettiä tarkasti, minkä kokoinen sivuston tulisi olla. Sellaisten asioiden, kuten lohkon mukautuvan asettelun, sisällön ja fonttien dynaamisen lataamisen, myötä verkkosivustojen kehittämisestä on tullut paljon miellyttävämpää. Loppujen lopuksi nämä tekniikat ovatvähemmän rajoituksia, vaikka ne ovat edelleen olemassa. Mutta kuten tiedät, taidetta ei olisi ilman rajoja. Suosittelemme käyttämään yhtä todella luovaa suunnittelutapaa - kultaista leikkausta. Sen avulla voit täyttää työtilan tehokkaasti ja kauniisti malleissasi määrittämäsi sivustokoot riippumatta.
Kuinka lisätä työpaikan työtilaa
On hyvä mahdollisuus, että sinulla ei ole tarpeeksi tilaa sovittaaksesi kaikki käyttöliittymäelementit pieneen asetteluun. Tässä tapauksessa sinun on alettava ajatella luovasti tai jopa luovemmin kuin ennen.
Vapauta sivustolla maksimitilaa piilottamalla navigointi ponnahdusvalikosta. On loogista käyttää tätä lähestymistapaa ei vain mobiililaitteissa, vaan myös pöytätietokoneissa. Loppujen lopuksi käyttäjän ei tarvitse katsoa koko ajan, mitä otsikoita sivustollasi on - hän tuli hakemaan sisältöä. Ja käyttäjän toiveita on kunnioitettava.
Esimerkki hyvästä tavasta piilottaa valikko on seuraava asettelu (kuva alla).
Punaisen alueen yläkulmassa näkyy risti, jota klikkaamalla valikko piiloutuu pieneksi kuvakkeeksi, jolloin käyttäjä jää yksin sivuston sisällön kanssa.
Tämä on kuitenkin valinnainen, voit poistua navigoinnista, joka on aina näkyvissä. Mutta voit tehdä siitä kauniin suunnitteluelementin, ei vain luettelon suosituista linkeistä sivustolla. Käytä intuitiivisia kuvakkeita tekstilinkkien lisäksi tai jopa niiden sijaan. se on samaavulla sivustosi voi käyttää tehokkaammin käyttäjän laitteen näyttötilaa.
Paras verkkosivusto on responsiivinen
Jos et tiedä, minkä asettelun valitset sivustolle, kaikki on sinulle yksinkertaista. Käytä responsiivista suunnittelua säästääksesi kehityskustannuksissa ja samalla et menetä yleisöäsi joidenkin laitteiden huonon ulkoasun vuoksi.
Responsiivinen muotoilu on muotoilu, joka näyttää yhtä hyvältä eri laitteissa. Tämän lähestymistavan avulla sivustosi on ymmärrettävä ja kätevä jopa kannettavalla tietokoneella, jopa tabletilla, jopa älypuhelimella. Tämä vaikutus saavutetaan muuttamalla automaattisesti näytön työalueen leveyttä. Käyttämällä responsiivisia tyylisivuja sivustossasi teet parhaan mahdollisen päätöksen.
Mitä eroa on responsiivisen suunnittelun ja verkkosivustoversioiden välillä
Responsiivinen suunnittelu eroaa sivuston mobiiliversiosta siinä, että jälkimmäisessä tapauksessa käyttäjä saa html-koodin, joka eroaa työpöytäversiosta. Tämä on haitta palvelimen suorituskyvyn optimoinnin sekä hakukoneoptimoinnin kann alta. Lisäksi tilastojen laskeminen sivuston eri versioille tulee vaikeammaksi. Mukautuvassa lähestymistavassa ei ole näitä haittoja.
Eri laitteiden reagointikyky saavutetaan asettelulla, jossa on prosenttiosuus määritetystä leveydestä tai siirtämällä lohkoja käytettävissä olevaan tilaan (älypuhelimen pystytasossavaakasuoraan työpöydällä) tai luomalla yksittäisiä asetteluja eri näytöille.
Lisätietoja responsiivisesta suunnittelusta ja kehityksestä opetusohjelmissamme.
