Mobiilisivuston suunnittelu on monimutkainen, koska yksi sivuston mobiiliversio ei ehkä ole yhteensopiva kaikkien laitteiden kanssa. Suunnittelijoiden on oltava tietoisia parhaista suunnittelukäytännöistä, jotta mobiili-läsnäolo olisi mielekästä ja hyödyllistä.
Web-kehittäjien keskuudessa käydään jatkuvaa keskustelua siitä, millä tavalla paras mobiilipohjainen sivusto on paras. Mobiilisivuston kehittämisessä on kolme johtavaa menetelmää.
Nämä ovat:
- Reagoiva Web-suunnittelu.
- Omat mobiilisivustot.
- RESS: Palvelinpuolen ohjelmointi tekee CSS: stä ja HTML: stä laitteen tyypin mukaan.
Jokaisella menetelmällä on hyvät ja huonot puolensa. Web-kehittäjän on oltava tietoinen jokaisesta tekniikasta, jotta se voisi toteuttaa parhaan tilanteen.
3 tapaa suunnitella mobiilisivusto
Reagoiva Web-suunnittelu (RWD)
RWD perustuu CSS3-median kyselyihin kohdistamaan verkkosivun asettelu laitteen katselualueen koon kanssa. Samaa HTML-koodia käytetään esittämään erilaisia verkkosivujen asetteluita tableteille, mobiililaitteille, pöytätietokoneille ja muille gadgeteille.
Edut:
- Sivustollasi on samanlainen sisältö ja HTML-hinnoittelu, joten mobiilikäyttäjillä on sama kokemus riippumatta siitä, minkälaista laitetta he käyttävät.
- Yhden URL-osoitteen avulla käyttäjät voivat helpommin linkittää ja jakaa sisältöä. (Jos verkkosivusto on käytettävissä useammassa kuin yhdessä URL-osoitteessa, käyttäjät voivat sekoittaa.)
haittoja:
Mobiilisisällön optimointi ei ole mahdollista. Siksi RWD: tä käyttävä suunnittelija ei voi räätälöidä sisältöä erikseen mobiilikäyttäjille.
HTTP-arkiston tammikuun 2013 tietojen mukaan keskimääräinen verkkosivu on noin 1,3 Mt. Useimmat RWD-kohteet ovat kuitenkin suhteellisen suurempia. Tämä suurempi koko pienentää mobiilisivustojen suorituskykyä, mikä tekee niistä hitaampia.
Mobiilikäyttäjät ovat entistä paremmin sovitettuja mobiilisovelluksiin. Lisäksi mobiilikäyttäjät ovat tottuneet monitehtäviin. Ellei navigointirakennetta ole räätälöity tiettyihin laitteisiin, käyttäjät voivat kohdata ongelmia, kun ne yrittävät suorittaa useita tehtäviä samanaikaisesti.
Dedikoidut mobiilisivustot
Tämä menetelmä parantaa mobiilikäyttäjien kokemusta luomalla täysin erillisen verkkosivuston.
Edut:
- Johdon yksinkertaisuus: Mobiili- ja työpöydän sivustoille tarvitaan erillisiä muutoksia. Muutokset tehdään vain kullekin vastaavalle versiolle. Tämä tarkoittaa, että mobiilialustalle tarkoitettuja muutoksia ei voi käyttää työpöydältä.
- Kun kehität mobiilikohtaisia verkkosivustoja, on helpompi virtaviivaistaa ja optimoida sitä erityisesti kyseiselle yleisölle.
- Sisällön ja navigoinnin rakenne voidaan räätälöidä mobiilikäyttäjille.
haittoja:
Web-sivun jakaminen sosiaalisen median kautta vaikeutuu, koska omistetuilla mobiilisivustoilla on sivuja varten useita URL-osoitteita. Kun työpöydän käyttäjät napsauttavat sosiaalisen median alustoilla jaettuja mobiileja URL-osoitteita, ne voivat vahingossa vastaanottaa sivuston mobiiliversiota työpöydän version sijaan.
Jotta vältettäisiin päällekkäisiä sisältöongelmia, Web-kehittäjän on käytettävä rel = ”alternatiiveja” ja rel = ”canonical” metakoodeja. Jos mobiilikäyttäjä etsii Googlea ja napsauttaa työpöydän URL-osoitetta, käyttäjä tarkastelee joko työpöydän versiota tai ohjaa sen verkkosivun mobiiliversioon. Jos mobiiliversiota ei ole, käyttäjä saa virheilmoituksen.
Täysin toisen sivuston luominen mobiilikäyttäjille tarkoittaa, että sivusto räätälöidään erityisesti mobiilikäyttäjille. Täyttääkseen tämän tavoitteen, web-kehittäjien on kuitenkin leikattava pois toiminnallisuutta ja sisältöä, joka osoittautuu niille painajaiseksi.
Reagoiva Web-suunnittelu+ Palvelinpuolen osat (RESS)
Tämä menetelmä riippuu palvelinpuolen ohjelmoinnista, jotta eri laitteille saadaan mukautettu HTML ja CSS. Mobiilikäyttäjien koodi on erilainen kuin työpöytäkäyttäjien koodi.
Tämän täytäntöönpanon päätavoitteena on parantaa verkkosivuston suorituskykyä. Tämä menetelmä toimii hyvin, kun se yhdistetään reagoivaan Web-suunnitteluun. Siksi tätä toteutusta voidaan kutsua Responsive Web Design + palvelinpuolen komponenteiksi (RESS).
Edut:
- Navigointirakenne voidaan räätälöidä erilaisiin työpöytä- ja mobiilikäyttäjien suorittamiin tehtäviin.
- Kehittäjät voivat poistaa sivuelementtejä HTML: stä ja CSS: stä halutun näytön saavuttamiseksi.
- On mahdollista poistaa tarpeettomat JavaScript-koodit HTML: stä, joka vapauttaa CPU-resurssit, muistin ja mobiililaitteiden välimuistin.
haittoja:
- Dynaaminen HTML lisää palvelimen kuormitusta.
- Laitteen tunnistamista ei voida luottaa.
- HTML ja CSS on optimoitu mobiilin suorituskyvylle. Desktop-versio käyttää enemmän HTTP-pyyntöjä ja Java-komentosarjoja.
Mikä menetelmä valita?
Päätös mobiilioptimoidun sivuston suunnittelusta riippuu myytävistä tuotteista, kohderyhmästä, tarvittavista investoinneista, kilpailusta, muuntokursseista jne. Parhaiten vaikuttava suunnittelutapa riippuu suurelta osin näytön muodoista, käyttöjärjestelmistä, selaimista ja päätöslauselmia.
Useimmat reagoivat Web-sivustot eivät toteudu optimaalisesti ja tämän vuoksi nämä sivustot vievät enemmän aikaa lataamiseen. Koska kilpailu on kovaa, saatat menettää asiakkaita, jos sivustosi toimii hitaammin. Käyttäjä siirtyy yksinkertaisesti toiseen verkkosivustoon, jossa on vähemmän aikaa avata. Vaikka on mahdollista luoda sivustoja, joissa on lyhyempiä latausaikoja omilla mobiilisivustoillaan, tähän toteutukseen liittyy myös erilaisia haittoja.
RESS tarjoaa RWD: n etuja kahden tärkeimmän haittansa voittamiseksi. RESSin pääasiallinen haitta on se, että laitteen havaitseminen on epäluotettava. Sinun on testattava usein uusia laitteita varmistaaksesi, että prosessi toimii edelleen oikein.
On olemassa palveluita, kuten DeviceAtlas, WURFL ja muut, jotka voivat havaita uusia laitteita. Se on suuri apu uusien laitteiden päivittämiseen tietokantaan.
Mobile Web -suunnittelu onnistuu vain, kun verkkosivusto näkyy oikein mobiililaitteessa. Vaikka suunnittelijoilla on pelottava tehtävä edustaa kaikkia työpöydän olennaisia osia pienessä, liikkuvassa ikkunassa, päivittäin syntyy uusia tekniikoita, joiden avulla mobiilisivustot paranevat, nopeammin ja täydellisemmin.
Mobile Website Photo Shutterstockin kautta
15 Kommentit ▼
