Vakiomitat sivustot: ominaisuuksia, vaatimukset ja suositukset

Teknologian kehittäminen verkkosivujen - erittäin monitahoinen prosessi. Mutta sen kaikissa vaiheissa voidaan jakaa kahteen pääkomponenttiin - toiminnallinen ja ulkovaippa. Tai kuten keskipitkällä webmaster Beg End ja Front End vastaavasti. Ihmiset, jotka ostivat verkkosivuilleen web-kehitys studiot, usein sinisilmäisesti uskoa, että on tarpeen keskittyä vain toimiva, ja se on oikea päätös. Mutta tämä on totta hyvin, hyvin harvoissa tapauksissa, yleensä aloitusten hankkeita vaiheessa beta testaus. Loput graafisen suunnittelun ja käyttöliittymä on yksinkertaisesti noudatettava web-kehitystä standardien ja olla mukava.

Ensimmäinen kulmakivi päin käyttöliittymän suunnittelija, tai suunnittelija - on leveys sivuston ulkoasu. Loppujen lopuksi se on tarpeen kiinnittää rajapinnat häntä. Intuitiivisesti on olemassa kaksi lähestymistapaa - joko tehdä erilliset ulkoasuja jokaiselle suositun näyttöresoluutioilla tai voit luoda versio sivustosta kaikkiin karttoihin. Molemmat vaihtoehdot ovat väärässä, mutta asiat ensin.

Standard pikseleinä sivuston sinun koskaan tarvitse

Ennen kehittämällä mukautuvia layout joukkoilmiö on ollut kehityksen sivuston tuhansia pikseliä leveä. Tämä luku oli valittu yksinkertaisesta syystä - että sivusto on tehty mihin tahansa näytöllä. Ja on olemassa tietty logiikka, Oletetaan kuitenkin, että henkilö on edelleen vähintään HD-näyttö työpöydälle. Tällöin asettelu tuntuvat pieni kaistale keskellä näyttöä, jossa kaikki on valettu yhtenä kasaan, ja sivuilla valtava kuin avaruuteen. Nyt oletetaan, että henkilö on tullut Web-sivuston tabletti näytön 800 pikseliä leveä, ja tarkistetaan asetukset "Näytä verkkosivustosta täysversio." Tällöin sivustosi näkyy myös virheellisesti, koska yksinkertaisesti sovi näytön.

Näiden seikkojen perusteella voidaan päätellä, että kiinteä leveys layout, emme vain sovi ja haluat löytää toinen tapa. Katsotaanpa analysoida ajatus erillisen asettelun kullekin näytön leveyden.

Kaavoista kaikissa tilanteissa

Jos olet valinnut strategian luomiseksi kaavoista kaikille näytön koko saatavilla markkinoilla, sivustosi on kaikkein ainutlaatuinen internetissä. Onhan nyt se on yksinkertaisesti mahdotonta kattaa koko kirjon laitteiden yritettäisiin tehdä tarkka asetusta nuolinäppäimillä. Mutta jos keskitytään suosituin näytön resoluutio ja näytön laitteita, ajatus on hyvä. Sen ainoa haittapuoli - taloudellisia kustannuksia. Loppujen lopuksi, kun suunnittelija käyttöliittymän suunnittelija ja koodaaja joutuu 5 tai 6 kertaa tehdä samaa työtä, hanke maksaa suhteettoman alunperin istutettu edulliseen hintaan.

Siksi ylpeillä runsaasti versioita eri näyttöjä voi olla paitsi että sivustot-odnostranichniki jonka tarkoituksena - myydä yhden tuotteen ja varmasti tehdä sen hyvin. No, jos et ole yksi niistä Landing, multi-site, järkeenkäypää entisestään.

Suosituin koot sivustoja

Kompromissi näiden kahden ääripään välillä on piirustus asettelun kolme tai neljä näytön kokoa. Niistä yksi on ulkoasun mobiililaitteille. Loput on sovitettu pieni, keskikokoinen ja suuri työpöydän näytön. Miten valita leveys sivustolla? Alla esittelemme HotLog Työnvälitystilasto toukokuun 2017 joka osoittaa meille jakautumista suosio eri näytön resoluutio laitteen, sekä muutoksen dynamiikkaan tämän indikaattorin.

Taulukosta on mahdollista oppia määrittää koko sivuston haluat käyttää. Lisäksi voidaan todeta, että yleisin tänään on kuvasuhde 1366 768 pikseliä. Nämä näytöt on asennettu budjetti kannettavan, joten niiden suosio on luonnollista. Seuraavaksi suosituin on Full HD-näyttö, joka on kultakanta elokuvia, pelejä, ja siksi luoda sivustoasetteluita. Edelleen taulukossa näemme sallia mobiililaitteisiin 360 x 640 pikseliä, sekä eri suoritusmuotojen työpöydän ja mobiili näytöt jälkeenpäin.

suunnittelu taitto

Joten, analysoinnin jälkeen tilastot, voimme päätellä, että optimaalinen leveys sivusto on 4 muunnelmia:

1. Versio kannettava, jonka leveys on 1366 pikseliä.
2. Full HD-versio.
3. 800 kuvapistettä leveä kooltaan asettelun näytettäväksi vähän pöytätilaa monitorit.
4. Mobiili versio sivustosta - 360 pikseliä leveä.

Oletetaan päätimme mitä haluat käyttää kokoa syntyy lähdekoodin sivuston. Mutta tällainen hanke olisi silti kalliita. Joten harkita enemmän vaihtoehtoja, tällä kertaa ilman kiinteä leveys.

Tee joustava asettelu

On vaihtoehtoinen lähestymistapa, että meidän tarvitsee vain säätää vähimmäiskokoa näytön ja suuren koon vuoksi sivustojen kysytään prosenttia. Tässä tapauksessa, käyttöliittymän elementtejä, kuten valikoita, painikkeita ja logot, voidaan määritellä absoluuttisesti, keskittyen vähimmäiskoko leveyden näytön pikseliä. Lohkojen sisältöä, päinvastoin, venytetään mukaan määritelty prosenttia leveyden näytöllä. Tämä lähestymistapa mahdollistaa ei tunnista koko sivuston rajoituksia suunnittelijan ja kyvyt voittamaan tämän vivahde.

Mikä on kultainen suhde, ja miten käyttää verkkosivujen ulkoasun?

Jopa renessanssin monien arkkitehtien ja taiteilijoiden yritti antaa hänen luomuksiaan täydellisen muodon ja mittasuhteet. Vastauksia kysymyksiin, miten kyseinen mittasuhteet, he kääntyivät kuningattarelle kaikkien tieteiden - matematiikka.

Ajoista lähtien antiikin keksi osuutta, jota meidän silmä havaitsee luonnollisimmaksi ja tyylikäs, koska se on läsnä kaikkialla luonnossa. Löytäjä kaava tämän suhteen oli lahjakas kreikkalainen arkkitehti nimeltään Phidias. On laskettu, että jos useimmat mittasuhteet koskee matalan kokonaisuutena tarjoaa suuremman, niin tämä osuus näyttää hyvin. Mutta tässä tapauksessa, jos haluat jakaa epäsymmetrisesti objekti. Tämä osuus myöhemmin kutsuttu kultainen suhde, se ei silti yliarvioida sen merkitystä maailman kulttuurihistoriaa.

Palataan web design

Se on hyvin yksinkertainen - käyttäen Kultainen leikkaus, voit suunnitella sivuja, jotka on eniten miellyttää ihmissilmä. Lasketaan kaavalla kultaisen leikkauksen, löydämme irrationaalinen numero +1,6180339887 ..., mutta mukavuussyistä voit pyöristetty arvo 1,62. Tämä tarkoittaa, että meidän sivun lohkot olisi 62% ja 38% koko, ei väliä mitä kokoa luotu lähdekoodi sivuston käytät. Esimerkki näet seuraavassa kaaviossa:

Uusien teknologioiden käyttö

Moderni teknologia asettelua sivustojen avulla voit tarkasti välittää ideoita suunnittelija ja suunnittelija, joten nyt sinulla on varaa toteuttamisesta rohkeampia ideoita kuin kynnyksellä Internet-teknologian. Ei enää tarvitse paljon palapeli, mitä pitäisi olla koko sivuston. Kynnyksellä sellaisia asioita kuten lohko mukautuva ulkoasu, dynaaminen kuormitus sisältöä ja fontteja, web-sivuston kehittämiseen on tullut monta kertaa miellyttävämpää. Loppujen lopuksi nämä tekniikat ovat vähemmän rajoituksia, vaikka ne ovat. Mutta kuten tiedätte, rajoituksetta, ei olisi taidetta. Suosittelemme käyttämään todella luovasti suunnittelussa - kultaisen leikkauksen. Sen avulla voi tehokkaasti ja mukavasti täyttää työtilan, mitä kokoa tai sivustoja kysyit oman malleja.

Miten lisätä työtilaan sivusto

Mahdollisuudet ovat, että sinulla ei ole tarpeeksi tilaa majoittaa kaikki käyttöliittymän elementit ulkoasu pieni koko. Tässä tapauksessa sinun täytyy alkaa miettiä luovasti, tai jopa enemmän luovaa kuin tähänkin saakka.

Maksimi vapauttaa tilaa paikalle mahdollisimman piilossa navigointi ponnahdusvalikosta. Tämä lähestymistapa on loogista käyttää paitsi Mobile, vaan myös työpöydällä. Loppujen lopuksi käyttäjän ei tarvitse koko ajan katsoa, mitä on otsikot sivuston - se on tullut sisältöä. Käyttäjä haluaa noudatettava.

Esimerkkinä hyvä tapa piilottaa valikko on seuraava layout (kuvassa alla).

Ylemmässä kulmassa punaisen alueen, näet laidalta klikkaa valikosta piiloutuu pieni kuvake, jolloin käyttäjä yksin sivuston sisältöä.

Tämä on kuitenkin vapaaehtoista, voit jättää navigointi, joka on aina näkyvissä. Mutta voit tehdä sen kauniin ulkoasun, ei vain linkkilista on suosittu sivusto. Käytä intuitiivinen kuvakkeita tekstin lisäksi linkkejä tai jopa korvata ne. Se mahdollistaa myös sivuston tehokkaampaan käyttöön näytön tilaa laitteen.

Best Website - mukautuva

Jos et tiedä, minkä valitsee asettelu sivuston, kaikki sinua varten. Säästää kehityskustannuksia ja samalla ei menetä yleisön huonon ulkoasun jonkin laitteen, käytä reagoiva web design.

Adaptive kutsutaan muotoilu, joka näyttää eri laitteilla yhtä hyvin. Tämä lähestymistapa mahdollistaa sivuston on selkeää ja helppoa myös kannettava tietokone, ainakin tabletin, jopa älypuhelin. Se saavuttaa tämä vaikutus johtuu automaattinen muutoksia työalueen näytön leveyden. Adaptiivista tyylitiedostot sivuston, käytät oikean päätöksen mahdollista.

Mikä erottaa mukautuva suunnittelu saatavuuden eri versioita sivustosi

Reagoivia on erilainen kuin mobiili sivuston niin, että viimeksi mainitussa tapauksessa, käyttäjä saa html-koodin, joka on erilainen kuin työpöydällä. Tämä on haitta siitä näkökulmasta optimoimalla palvelimen sekä hakukoneoptimoinnin. Lisäksi sitä vaikeampaa harkitsemaan tilastojen mukaan eri versioita sivuston. Adaptiivinen lähestymistapa on vailla puutteita.

Mukautuvuus eri laitteille saavutetaan asettelusta johtuen leveys tai Prosenttiosuudet kautta kuljetus lohkot käytettävissä olevan tilan (pystytasossa sijasta horisontaalisen älypuhelin työpöydälle), tai yksittäiset asettelujen luomalla eri näytöissä.

Voit oppia lisää reagoiva suunnitella ja kehittää voit kirjoista.