How to Build a Mobile Website (In 4 Easy Steps)
lokakuussa 2016 mobile-ja tablet-Internetin käyttäjien määrä ylitti ensimmäistä kertaa pöytätietokoneiden käyttäjien määrän. Tämä paradigman muutos toimi kehotus toimia kehittäjille aloittaa uudelleen niiden koko teollisuuden. Sen jälkeen mobiilikäyttö on jatkanut kasvuaan ja yleistymistään, ja nykyään käytetään monia tyylikkäitä verkkosivustojen kehitysratkaisuja näiden käyttäjien palvelemiseen.
nämä ratkaisut pystyvät tarjoamaan käyttäjille samanlaisen kokemuksen, jonka he saisivat työpöydällä vaarantamatta verkkosivustosi sisältöä tai toimintoa. Vaikka rakentaa sivuston, joka pystyy luomaan tämän kokemuksen voi tuntua pelottava, se on paljon helpompaa kuin luulet.
se on itse asiassa niin yksinkertainen, että olemme koonneet helposti seurattavan 4 askeleen oppaan mobiilisivuston luomiseen, jotta pääset alkuun.
valitse Web Design-lähestymistapasi
on olemassa useita ratkaisuja, joilla voit luoda mobiiliystävällisen verkkosivuston. Vaikka jokainen web design lähestymistapa on oma kannattajia, jotka kertovat, että se on paras, sinun pitäisi määrittää, mikä sopii tarpeisiisi perustuu oman harkinnan tietoja.
Responsive Web Design
Responsive web design (RWD) käyttää mukautettavia asetteluja, jotka ovat mahdollisia suhteellisuuspohjaisten medioiden, laajennusten ja taustajärjestelmien avulla. Tämä tarkoittaa sitä, että jos selainikkunaa laajennetaan tai tehdään sopimus, sisältö seuraa sitä ja mukautuu tarpeen mukaan. Tuloksena on sivusto, joka näyttää samanlaiselta sekä työpöydällä että mobiililaitteella.
tätä muovista käyttöliittymää verrataan usein veteen. Voit kaataa kupillisen vettä lasiin, kattilaan tai kannuun ja vesitilavuus pysyy samana astian vaihdosta huolimatta.
Adaptive Web Design
toisin kuin RWD, adaptive web design (AWD) ei perustu yhteen muuttuvaan ulkoasuun. Sen sijaan, se käyttää erillisiä asetteluja eri laitteiden ja näytön koot. Tämä tarkoittaa, että kun kirjaudut verkkosivustolle, sinulle tarjotaan sivu, joka parhaiten vastaa käyttämäsi laitteen tarpeita.
esimerkiksi jotkut voivat halutessaan luoda kolme verkkosivustoa: yhden älypuhelimille, yhden tableteille ja yhden pöytätietokoneille. Tämä vaatisi kolme erilaista mallia, jotka pysyisivät ”valmiustilassa”, kunnes jokainen kävijä pyytää niitä. Yhden koon verkkosivuston sijaan äänimerkinantolaite toimii kaikille käyttäjille räätälöitynä yhdyskäytävänä.
mobiilisivuston luomiseen valitsemasi lähestymistapa on vasta suunnitteluprosessin alku.
käytä verkkosivuston rakentajaa tai CMS: ää
kun olet määrittänyt, miten haluat verkkosivustosi toimivan eri laitteilla, olet valmis aloittamaan sen rakentamisen! Alusta, jolla luot sivuston on keskeinen työllistävät mobiili suunnittelu suunnitelma. Peruskäyttäjille vaihtoehtoja on kaksi.
verkkosivujen rakentajat
verkkosivujen rakentajat ottavat kaikki arvailut pois verkkosivujen suunnittelusta ja antavat sinun luoda täysin muokattavan ja monipuolisen verkkosivuston muutamassa minuutissa. Ne saavuttavat tämän avulla käyttäjät voivat valita teeman tai mallin ja yksinkertaisesti vedä ja pudota ominaisuuksia he haluavat heidän verkkosivuillaan ja helposti poistaa ne, joita he eivät.
useimmat verkkosivujen rakentajat, mukaan lukien gold standard Wix, antavat käyttäjien yksinkertaisesti päättää, miten heidän sivustonsa reagoivat mobiiliin. Wix-alusta perustuu enimmäkseen mukautuviin verkkosivustoihin, kun taas muut palvelut, kuten Weebly, nojaavat enimmäkseen reagoivaan suunnitteluun. Riippuen siitä, millaista lähestymistapaa visioit sivustosi, voit päättää mennä sivuston rakentaja, joka mahtuu tarpeisiisi.
sisällönhallintajärjestelmät
sisällönhallintajärjestelmä (CMS) on paras vaihtoehto omistautuneelle verkkosivujen rakentajalle. CMSs kuten WordPress luottaa hieman enemmän tietokone-ja internet-tietoa, mutta ne voivat tarjota enemmän ominaisuuksia kuin sivuston rakentajat. Lisäksi CMS tarjoaa sekä RWD ja AWD malleja.
verkkosivujen rakentajien tapaan CMS voi hyödyntää kumpaakin mobiilimuotoilumallia integroimalla ne käyttäjien käytettävissä oleviin lukuisiin teemoihin. Nämä teemat voivat olla vain rikas kuin löytyy verkkosivuilla rakentajat, mutta ne on parempi palvella niitä, jotka eivät välitä saada kätensä hieman likainen ja oppia hieman web design.
jos päätät käyttää CMS: ää, voit ladata mobiilivalmiuden teeman joko ilmaiseksi tai maksua vastaan ja käyttää sitä verkkosivustosi luomiseen. Useimmat näistä teemoista tulevat täyden tuen ja säännölliset päivitykset, joten sinun ei tarvitse huolehtia ylläpitää ja hallita sivuston.
Suunnittele mobiilisivusto
päätettyäsi, mille alustalle rakennat sivustosi, olet valmis suunnittelemaan ja luomaan verkkosivustosi. Olitpa luoda blogin, portfolio, liiketoiminnan sivusto, tai jopa verkkokaupan myymälä, voit mennä siitä käyttäen perusperiaatteita tarpeen tahansa sivuston suunnitteluun. Kun olet suorittanut suunnittelusi, sinun on joko yksinkertaisesti testattava sivustosi nähdäksesi, vastaako se oikein (RWD) tai luotava toinen design mobile (AWD).
mobiilisivuston suunnittelu on lähes yhtä suoraviivaista kuin työpöytäsivuston suunnittelu, mutta on muutamia asioita, jotka kannattaa pitää mielessä.
a. mobiilikäyttäjillä on yleensä rajoitettu kaistanleveys
kannattaa aina pitää mielessä, että useimmat mobiilikäyttäjät käyttävät mobiiliverkkoja, jotka rajoittavat heidän kaistanleveyttään. Tämän seurauksena, on tärkeää pitää mobiili sivusto kevyt ja vapaa liikaa sisältöä, joka voi syödä pois näitä ratkaisevia tavuja.
s. Mobiilikäyttäjät haluavat relevanttia tietoa nopeasti
usein mobiilikäyttäjät käyvät sivustolla saadakseen relevanttia tietoa vierailemistaan paikoista, kuten kauppojen aukioloajoista tai puhelinnumeroista. Jos tätä olennaista tietoa ei ole saatavilla nopeasti ja selkeästi, se voi johtaa asiakkaan menetykseen. Varmista, että mobiilisivullasi on nopeat linkit yhteystietoihin ja muihin asiaankuuluviin tietoihin.
C. mobiililaitteet ovat vähemmän tehokkaita
pöytä-ja kannettaviin tietokoneisiin on rakennettu näytönohjaimet ja prosessorit, jotka kykenevät käsittelemään raskasta kuormaa. Vaikka mobiililaitteet ovat äärimmäisen tehokkaita, niitä ei ole rakennettu samalla tavalla. Sen sijaan he menettävät funktion form ja sen seurauksena, he eivät voi käsitellä prosessoripitoista sisältöä samalla tavalla kuin tietokone voi.
jos työpöytäsivustosi vaatii tällaista resurssien omistautumista, kannattaa miettiä kahdesti, miten voit palvella mobiiliyleisöä tällä samalla sivustolla.
Järjestä sisältöä
kun luot mobiilisivustoa, on tärkeää varmistaa, että käyttäjäsi voivat käyttää kaikkea työpöydälläsi samalla kun säilytät mahdollisuuden työskennellä pienemmällä näytöllä. On olemassa useita näkökohtia sinun pitäisi pitää mielessä, kun järjestät sisältöä.
a. Mobile First
Mobile First on muotoilumaailman uusimpia liikkeitä. Siinä säädetään, että sinun täytyy ensin suunnitella mobiilisivusto ennen laajentamista pöytätietokoneiden ja tablettien sivuille. Mobiilisivullesi luomasi sisältö voidaan ladata myös työpöytäversioon.
tästä lähestymistavasta on siis hyötyä dynaamisesti palvelluille ja reagoiville verkkosivustoille, joilla mobiiliversiosi sisältö on samanlaista kuin työpöytäsivustosi sisältö.
s. Mobile Second
jos sinulla on jo työpöytäsivusto, sisällön järjestäminen saattaa olla hieman vaikeampaa, joskaan ei täysin mahdotonta. Ensimmäinen, selvittää elementtejä työpöydän sivuston sinun täytyy näyttää mobiiliversion.
kerää käyttäjätietoja käyttämiesi analytiikkatyökalujen avulla ja selvitä:
- kävijöille tärkein sisältö.Mitä mobiilikäyttäjät yleensä sivuuttaa.Polku, jonka kävijät yleensä valitsevat.
käytä keräämiäsi oivalluksia tietääksesi, mitä mobiilisivustolla pitäisi ja mitä ei. Tämä auttaa sinua puhdistaa työpöydän sivuston. Sitten, kartoittaa sisältöpolku, että kävijät ottavat.
kun sinulla on hyvä käsitys sivustosi visuaalisesta virtauksesta, voit helposti hahmottaa mobiilinäyttöjen alustavan suunnittelun ja siirtyä suoraan mobiilisivuston kehittämiseen.
C. navigointi
matkapuhelinten näytöt ovat pieniä. Tämä tarkoittaa, että sinun pitäisi minimoida mobiilinavigointivaihtoehdot. Harkitse suurennuslasin tai kolmen rivin (hampurilainen) menu navicon. Kun olet valmis, testaa sivustosi suosituilla laitteilla, joita käyttää jopa 90% mobiilikävijöistäsi.
D. Design for Touch
koska mobiililaitteella ei voi hiiren kakkospainikkeella tai hivuttaa sormilla, täytyy mobiilisivuilla olla välilinkkejä, jotta käyttäjät eivät vahingossa klikkaa vääriä linkkejä. Tee näin:
- palautteen antaminen aina, kun näyttöä kosketetaan.Painikkeiden avulla voit määrittää, missä käyttäjät voivat ja eivät voi klikata.Suunnittele pudotusvalikot uudelleen.Tekstinsyötön minimointi.
ja siinä se on! Käytä näitä tietoja seuraavan kerran, kun sinun täytyy täysin uudistaa työpöytäsivuston katseltavaksi mobiililaitteissa, tai kun luot uuden mobiilisivuston tyhjästä.