Kuinka suunnitella täydellinen yhden sivun verkkosivusto
Yksisivuiset mallit voivat olla erinomainen tekniikka, jolla voidaan käsitellä pienempiä verkkosivustoja, jopa sellaisia, joita ei ehkä ajatella koskaan ilman useita sivuja. On olemassa lukuisia hyviä syitä yhden sivun sivuston käyttöön, helppokäyttöisyydestä vähäisempään kaistanleveyden tarpeisiin.
Jos käsittelette lyhyempää sivustoa, jolla olisi yleensä kourallinen sivuja, harkitse yhden sivun käyttöä ja katso, tekevät hankkeen helpoksi ja käyttäjäystävällisemmäksi. Lue lisätietoja hyödyistä, milloin ja milloin käyttää niitä, ja joitain parhaita käytäntöjä, joita sinun on noudatettava.
Yhden sivun suunnittelun edut
On selvää, että yhden sivun mallit eivät ole ihanteellisia jokaiselle projektille. Mutta on olemassa lukuisia syitä käyttää niitä, jos ne ovat sopivaa.
He ovat intuitiivisia käyttää
Oletusarvon mukaan kaikkien käyttäjien, jotka haluavat siirtyä yhdelle sivulle, on vierittää. Voit lisätä nuolia tai muita navigointiin liittyviä vihjeitä, mutta harvoin poikkeuksena vain vieritys tuo kävijöitä yhdestä osasta seuraavaan.
Sinun ei tarvitse huolehtia siitä, että kävijät jumittuvat useisiin navigointikerroksiin etsimättä loputonta tarvettaan. Ylätunnisteen tai muiden navigointiyhteyksien käyttö on usein hyödyllistä, jos sivulla on useita osioita, mutta ilman niitä sivustoa voidaan käyttää.
Se voi olla nopeampi ja helpompi ylläpitää
Vaikka tämä ei ole annettu, hyvin koodattu yhden sivun sivusto todennäköisesti on nopeampi koodaa kuin monisivuinen sivusto. Suunnitteluprosessi voi joskus kestää vähemmän aikaa, mutta se riippuu siitä, kuinka monimutkainen yksittäinen sivu tulee olemaan.
Yhden sivun sivusto voi myös asettaa tiettyjä suunnittelurajoituksia, jotka nopeuttavat prosessia, kun sinulla on perusasettelu. Moreso kuin monisivuinen sivusto, yhden sivun sivustolla on oltava osioita, jotka toimivat saumattomasti yhdessä. Tällainen rajoitus voi todella nopeuttaa sivukehitystä, kun olet selkeästi määritellyt mitä voit ja et voi tehdä.
Huolto voi olla myös helpompaa. Kun sinulla on vain yksi sivu käsittelemään, ylläpito on virtaviivaisempaa, kunhan koodi on kirjoitettu hyvin aluksi.
Sinun on pakko yksinkertaistaa
Tämä rakentuu edellisestä kohdasta. Kun käytössäsi on vain yksi sivu, sinun on yksinkertaistettava asioita tärkeimpiin komponentteihin. Ei enää sivut ja sivut hyödytöntä markkinointikampanjaa. Sinun täytyy päästä asiaan heti.
Parempi SEO-potentiaali
Laatu saapuvat linkit ovat suuri osa siitä, kuinka hyvin verkkosivusto toimii hakukoneissa. Vaikka hakukoneet eivät välttämättä ole suurimpia liikenteen lähteitä monille sivustoille, ne ovat edelleen yleensä tärkeitä.
Jos sinulla on vain yksi sivu, sinulla on vain yksi sivu, johon on linkitetty. Tämä voi lisätä sivuston merkitystä niin pitkälle kuin hakukoneet menevät.
Tarinan kertaus voi lisätä toimintaa
Yhden sivun sivustot käyttävät usein tarinankerrosta, jonka monisivuiset sivustot eivät ole yhtä hyviä. Tämä voi lisätä tuloksia ja innostaa kävijöitä ryhtymään toimiin.
Ihmiset ovat tottuneet seuraamaan tarinoita, sekä verkossa että pois, joten tällä on ilmeisiä käyttökokemuksia. Olemme lukeneet ja kuulleet tarinoita, koska olimme lapsia, joten se on luonnollisesti meille ominaista.
Helppo järjestää
Järjestelemään sivuja ja alisivuja ei ole loputonta. Ei enää mietin, pitäisikö tämä sivu tai sivu olla vanhempi tai lapsi. Ei enää valtavia navigointivalikoita ja alavalikoita. Kaikki on yhdellä sivulla. Haluatko sisällyttää navigointiyhteyksiin tai yksinkertaisesti antaa käyttäjien vierittää, riippuu sinusta ja luuletko, että se lisää käyttäjäkokemusta vai ei. Tämä ei ole vaihtoehto, jos sivustolla on useita sivuja.
Vähennetty kaistanleveys
Vaikka tämä ei ole yhtä paljon kysymys hosting-päästä enää, ota huomioon, kuinka monta käyttäjää tällä hetkellä käyttää sivustoasi mobiililaitteilla. Kaistanleveyden pienentäminen sivustosi suhteen on arvostettu käyttäjiltä, joilla on rajalliset tietosuunnitelmat.
Poista mobiilisivustoja
Responsive design ei tietenkään ole rajoitettu yksittäisten sivujen sivustoille. Mutta monimutkaisempi sivusto on, sitä vaikeampi on tehdä se toimimaan hyvin pienemmällä näytöllä, vaikka siinä olisi myös reagoiva muotoilu. Yksisivuinen sivusto ei välttämättä ole monimutkainen. Suunnittelun toteuttaminen on yleensä helpompaa. Yksinkertaistettu navigointi ja vastaavat muutokset tekevät myös suunnittelun, joka toimii hyvin pienillä näytöillä helpommin.
Parallaksi tai parallaksi?
Riippuen näkökulmastasi, parallaksin vieritys on joko paras tapa koskaan tapahtua Internetiin tai surullisen, kimmeltävän vitsauksen selaimissamme. Mutta riippumatta siitä, missä olet, se ei näytä siltä, että se katoaa pian.
Henkilökohtaisesti minusta tuntuu, että aika ja paikka on parallaksen vieritys. Jotkut sivun sivustot voivat todella hyötyä vaikutuksesta, kun taas toiset kohtaavat kimmeltävänä tai pahempaa: vaikea käyttää. Avain on päättää, haluatko käyttää parallaaksiruutuefektiä, joka todella parantaa sivuston käytettävyyttä vai haluatko vain käyttää sitä, koska se näyttää hyvältä.
Toinen asia harkita, jos päätät haluat käyttää parallaaksia vieritys on käyttää JavaScript tai pelkkä CSS tekniikka tehdä niin. Lisätietoja resursseista on lisätietoja molemmista vaihtoehdoista.
Milloin yhden sivun sivustoa käytetään ja milloin ei
Vaikka yksittäisille sivuille on paljon hyötyä, ne eivät ole täydellinen, yhden kokoinen ratkaisu. On paljon aikaa, jolloin sinun ei pitäisi käyttää yhden sivun muotoilua, mutta on paljon muitakin aikoja, jolloin yhden sivun sivusto on paljon järkevämpää kuin monisivuinen.
Jos olet määrittänyt sivuston, jossa on vain kourallinen sivua, niin yhden sivun sivusto saattaa olla täydellinen. Yhden sivun tiivistäminen voi antaa koko sivustolle nykyaikaisemman ulkonäön, ja jos se on kevyt sisällöstä joka tapauksessa, yhden sivun sivustolla voi näyttää siltä, että sillä on enemmän sisältöä.
Toinen yleinen esimerkki yhden sivun sivustosta on esilataus verkkosivusto. Nämä ovat useimmiten yhtä ainoaa sivua, usein lomakkeen uutiskirjeen kirjautumiseen. Useimmissa tapauksissa tiedot julkistettavaksi esittelyn aikana voidaan helposti järjestää yhdelle sivulle, joten on järkevää tarkastella tätä tyyliä ensin suunnittelemalla näitä sivuja.
Yhden tuotteen verkkokauppasivut ovat toinen paikka, jossa yhden sivun sivustot voivat olla hyviä. Jos myyt vain yhden tuotteen, oli kyseessä sitten fyysinen tuote tai digitaalinen, niin miksi vaivautua useilla sivuilla? Yksinkertainen, yhden sivun sivusto voi olla paljon parempi myynti työkalu.
Saatat ajatella, että monimutkaisemmalla verkkokauppasivustolla ei ole sopivaa yhtä sivupohjaa, mutta se voi silti olla. Hyväksyisin, vältän sen sivustoille, joilla on yli kymmenkunta tuotetta, mutta yksinkertainen verkkokauppaan voi helposti sijoittaa yhdelle sivulle, jossa on modaaliset ikkunat tuotetietojen lataamiseen ja kassaprosessiin.
Jos yksittäisen sivun käyttö ei ole helppoa: suuret, monimutkaiset tai oletuksena tarvitsevat suuret määrät tiedot eivät sovi yhteen sivuasemaan. Näissä tapauksissa sinun on paljon parempi perinteisen sivustorakenteen ansiosta.
Hybridisivustoja
Vaikka siellä on paljon erinomaisia yhden sivun sivustoja, siellä on myös paljon hybridityyppisiä sivustoja. Ne antavat vaikutelman yhdestä sivusta, mutta käyttämällä ajaxia, modaalisia ikkunoita ja vastaavia, ne sisältävät itse asiassa useita sivuja sisältöä.
Dang & Blast-sivusto on erinomainen esimerkki tästä.
Nämä voivat olla erinomainen ratkaisu, jos et voi vain saada kaiken sopivaksi yhdelle sivulle.
Jotkut sivustot lajitellaan "huijaukseksi", kun kyse on yhdestä sivusta. Heillä on yksi sivu pääsivustoilleen, mutta sitten heillä on blogi toisella verkkotunnuksella (joskus Tumblr- tai WordPress.com-isännöity sivusto). Tällä ei ole mitään vikaa, ja se voi olla keino pitää viestisi tärkeimmillä sivustoillasi keskittyen antamatta etuja blogin käytöstä.
Parhaat käytännöt yhden sivun sivustoille
Suurin osa hyvän suunnittelun periaatteista on edelleen sovellettavissa yksittäisten sivujen sivustoissa, koska ne ovat hyvien verkkosivujen suunnittelussa. Mutta on joitain lisäosia, jotka sinun pitää muistaa, joista osa on jo kosketettu edellä.
Pidä se yksinkertaisena
Yritetään tehdä liian monimutkaista muotoilua esittelemäsi sisältöä varten, eikä tee sinä tai käyttäjillesi mitään etuja. Sen sijaan voit yksinkertaistaa sekä muotoilua että sisältöä niin paljon kuin mahdollista.
Navigointiyhteydet ovat edelleen hyödyllisiä
Vain siksi, että käyttäjät voivat selata Web-sivustoosi, se ei tarkoita sitä, että se olisi käyttäjäystävällisin tapa tehdä niin. Tämä pätee erityisesti, jos sinulla on pitkä sivu, jossa on useita osioita. Jollei ole hyvää syytä olla sisällyttämättä niitä, navigointi linkkien lisääminen tiettyihin osiin tekee sivustostasi käyttäjäystävällisempi.
Jaa sisältösi
Yksi sivu ei tarkoita, että kaiken on oltava yksi pitkä osa. Itse asiassa sen ei pitäisi olla. Jaa sisältösi loogisiin paloihin ja osioihin, jotta käyttäjät voivat paremmin löytää etsimänsä.
Tee jotain kaikella taustalla
Yksisivuisilla sivustoilla on yleensä suuria taustoja. Hyväksytty, joskus taustat jäävät tavallisiksi tai toistuvalla kuvioinnilla; mutta toiset sivusivustot hyödyntävät kaikkea tilaa tekemään jotain luovaa. Tämä voi myös auttaa jakamaan sisältösi, kuten jo mainittiin. Taustasi ei tarvitse olla yksi yksittäinen kuva. Se voi olla sarja kuvia, jos se sopii sisältösi paremmin.
Resurssit yksittäisille sivuillemme
On olemassa satoja resursseja, kuten malleja, yhden sivun sivustoille; mutta tässä keskitymme niihin, jotka erottuvat.
Pure CSS Parallax Vieritys : Tämä Keith Clarkin artikkeli kertoo, kuinka voit luoda parallaksin vieritysmenetelmän käyttäen vain CSS: ää. Tämä on hieno vaihtoehto, jos et halua käyttää JavaScriptia (tai et oikein tiedä miten).
Skrollr : "Parallaikki rullataan muille meille". Se on erillinen kirjasto, joka toimii mobiililaitteilla ja työpöydällä. Ei vaadita jQueryä, pelkkä vanha JavaScript.
Stellar.js : Stellar.js on toinen helppokäyttöinen parallaksin vieritys kirjasto. Se tarjoaa paljon kokoonpanoasetuksia ja iOS-tukea.
Yhden sivun verkkosivustot : Tämä yhden sivumallin wireframe-sarja voi olla hyvä lähtökohta, jos et ole varma sivustosi rakenteen luomisesta. He voivat ladata. Voit ladata toisen joukon tässä .
Yksi sivu rakkaus : Yksi sivu Rakkaus on johtava yhden sivun verkkosivujen galleria, jossa on yli 5000 esimerkkisivustoa ja lisäämällä koko ajan. Niissä on myös runsaasti malleja ja muita resursseja.
Käynnistä Bootstrap : Start Bootstrap on laaja valikoima ilmaisia yhden sivun Bootstrap-teemoja. On aiheita virastoille, freelancereille, salkkuille, aloitussivuille ja muille.
Yksi sivu rakkausmallit : Laaja-alaisen galleriansa lisäksi One Page Love tarjoaa sekä ilmaisia että premium-malleja.
Yksi sivu mania : Yksi sivu Mania tarjoaa galleriaa sekä ainutlaatuisista sivustoista että malleista, joita voit ladata tai ostaa.
johtopäätös
Yksisivuiset mallit voivat olla erinomainen vaihtoehto monille eri verkkosivustoille. Vaikka he eivät ole kaikkien ja kaikkien pienien sivustojen suunnittelua, heitä kannattaa harkita useissa projekteissa. Tarkastele syitä yhden sivun käyttämiseen ja harkitse syitä, joihin ei päästä, ja päätä sinne.