Sivuston mobiiliversio: miten se tehdään? Mukautuva muotoilu

Sisällysluettelo:

Sivuston mobiiliversio: miten se tehdään? Mukautuva muotoilu
Sivuston mobiiliversio: miten se tehdään? Mukautuva muotoilu
Anonim

Nykyään useimmat ihmiset menevät verkkoon mobiililaitteiden - tablettien, puhelinten - kautta, tässä suhteessa myös verkkosivujen optimointi on saavuttamassa uuden tason. Jos käyttäjä tulee sisään ja huomaa, että sivustoa ei ole optimoitu mobiililaitteille: kuvaa ei voi katsoa, painikkeet ovat siirtyneet pois, fontit ovat pieniä ja lukukelvottomia, ulkoasu on vinossa - 99/100 %, että hän poistuu ja ala etsiä toista kätevämpää. Ja hakurobotti tarkistaa ruudun, että resurssi on epäolennainen, eli se ei vastaa hakukyselyä. Siksi sivun ulkoasu on mukautettava erilaisiin mobiililaitteisiin. Mikä on sivuston mobiiliversio, miten se tehdään ja mikä on paras tapa käyttää sitä? Lue lisää tästä artikkelista.

On siis neljä keskeistä tapaa tehdä sivustostasi mobiiliystävällinen.

kuinka tehdä mobiiliversio sivustosta
kuinka tehdä mobiiliversio sivustosta

Tapa yksi – reagoiva suunnittelu

Responsiiviset mallit muuttavat sivuston kuvaa näytön koon mukaan. Yleensä ne on asetettu vakiokokoisiksi 1600, 1500, 1280, 1100, 1024 ja 980 pikseliä. Toteutuksessa käytetään CSS3-mediakyselyitä. Sivuston ulkoasu itsessään ei muutu.

Tämän menetelmän etuja ovat:

  • kätevä kehitys,koska rakenne itsessään mukautuu näytön parametreihin, eikä mikään päivitys vaadi suunnittelun kehittämistä tyhjästä, riittää CSS:n ja HTML:n säätäminen;
  • yksi URL-osoite – käyttäjän ei tarvitse muistaa useita nimiä, ei tarvita uudelleenohjausta (uudelleenohjaus osoitteesta toiseen), mikä voi vaikeuttaa verkkovastaavan työtä ja haku on helpompaa moottori resurssien lajitteluun ja asettamiseen yhdellä osoitteella.

Tietenkin mukautuvilla malleilla on haittapuolensa, jotka muuten ovat enemmän kuin etuja. Siitä huolimatta monet kehittäjät noudattavat tätä käsitettä, esimerkiksi Google Corporation, jonka mobiiliversiossa sivustosta on mukautuva muotoilu. Joten haitat:

  • Responsiivinen suunnittelu ei tue samoja tehtäviä mobiililaitteella kuin PC:llä. Jos kyseessä on esimerkiksi pankin verkkosivuston mobiiliversio, jossa valuuttakurssitiedot tai lähimmät pankkiautomaatit ovat käyttäjälle todennäköisemmin tärkeitä, niin tämä muotoilu riittää. Mutta jos tämä on monimutkainen jäsennelty resurssi, jossa on monia osioita ja alaosastoja, kävijät tuskin pitävät mukautuvasta asettelusta.
  • Hidas latautuminen muuttaa suosikkisivuston vihamieliseksi. Tämä pätee erityisesti resursseihin, joissa animaatioita, videoita, ponnahdusikkunoita ja muita aktiivisia elementtejä on runsaasti. Suuren painon vuoksi sivu yksinkertaisesti "hidastuu", käyttäjä suuttuu ja lähtee, ja sivuston hakupaikat laskevat.
  • Toinen merkittävä haittapuoli on se, että mobiiliversiota ei voi sammuttaa. Jos jokin elementti on piilotettu tällaisella asettelulla, sinäsen avaamiseksi ei voi tehdä mitään, toisin kuin sivustot, joissa voit sammuttaa sen ja vaihtaa tavalliseen verkkotunnukseen.

Tällaisen sivuston mobiiliversion avulla voit kuitenkin mukauttaa resurssin nopeasti, ilman erityisiä taitoja ja kustannuksia mihin tahansa vempaimeen. Mutta ottaen huomioon luetellut puutteet, se sopii pieniin, yksinkertaisiin resursseihin, joissa on mahdollisimman vähän tietoa ja multimediaa, ilman monimutkaista navigointia ja animaatiota. Monimutkaiselle paikalle sopii 2 muuta menetelmää.

sivuston suunnittelu
sivuston suunnittelu

Toinen menetelmä – sivuston erillinen versio

Tämä menetelmä on hyvin yleinen ja onnistuu usein tekemään sivustosta luettavamman mobiililaitteella. Sen ydin on luoda sivusta erillinen versio, joka on piirretty sovellukselle ja joka sijaitsee erillisessä URL-osoitteessa tai aliverkkotunnuksessa, esimerkiksi m.vk.com. Samalla tärkeimmät toiminnot säilyvät, sivuston suunnittelu näyttää vain erilaiselta. Tämän menetelmän edut ovat ilmeiset:

  • käyttäjäystävällinen käyttöliittymä;
  • helppo muuttaa ja muokata, koska versio on olemassa erillään pääresurssista;
  • keveyden vuoksi sivuston erillinen versio toimii paljon nopeammin kuin mukautuva malli;
  • useimmiten sivun pääversioon pääsee kännykällä.

Mutta tässäkin oli joitain haittoja:

  • Useita osoitteita – sivuston työpöytä- ja mobiiliversio. Kuinka saada käyttäjä muistamaan kaksi vaihtoehtoa? Webmasterit määräävät usein uudelleenohjauksen (uudelleenohjauksen) työpöytäversiosta mobiiliversioon, mutta samaan aikaan, jos tämä sivu on mobiilissaversiota ei ole olemassa, käyttäjä saa virheilmoituksen. Tässä on ongelmia hakukoneiden kanssa, joiden on vaikea asettaa paremmuusjärjestykseen 2 identtistä resurssia, ja tämä vaikuttaa suoraan promootioon.
  • Sivuston mobiiliversio tietokoneelta, jos käyttäjä vierailee sillä vahingossa, näyttää naurettav alta, mikä voi myös vaikuttaa liikenteeseen.
  • Tämä versio on usein voimakkaasti rajoitettu, työpöytäversio, joten käyttäjä saa hyvin rajalliset toiminnot. Mutta samalla, jos jotain puuttuu, vierailija voi siirtyä sivun täysversioon.

Yleensä erillinen mobiilisivusto oikeuttaa itsensä ja on yleisin tapa mukauttaa resurssia mobiililaitteisiin. Se on suosittu suurten verkkokauppojen, kuten Amazonin, keskuudessa.

mukautuvat mallit
mukautuvat mallit

Kolmas tapa - RESS-suunnittelu

Google-hakukone tukee aktiivisesti tätä mobiilisuunnittelun suuntaa. Tämä on monimutkaisin, kallein mutta tehokkain tapa mukauttaa sivusto puhelimeen tai tablettiin. Sen nimi on RESS. Tämä kohdistaa resurssin mobiilisovellukseen, joka voidaan ladata jokaiselle laitteelle erikseen. Androidille - GooglePlaylla ja Applelle - iTunesilla.

Tällaiset sovellukset ovat nopeita, ilmaisia, käteviä, niihin mahtuu monenlaista tietoa, mutta puhelimen muistia ja Internet-liikennettä ei syötetä kuten selaimen kautta vieraillessa. Niitä on helppo käyttää, koska linkki on aina näytöllä käsillä, eikä sinun tarvitse kirjoittaa monimutkaista nimeä selaimen osoiteriville.

Täällä on tietysti jasen puutteet, kuten kehityksen monimutkaisuus, suuren määrän ohjelmoijien korkeat työkustannukset, tarve tehdä useita asetteluvaihtoehtoja. Joskus sovellus ei tunnista mobiililaitetta. Säännöllinen tekninen tuki, puutteiden korjaaminen on tarpeen. Tästä huolimatta tätä vaihtoehtoa pidetään parhaana kolmesta ehdotetusta vaihtoehdosta sen tuottavan, keskeytymättömän toiminnan vuoksi.

google mobiilisivusto
google mobiilisivusto

Halvin tapa tehdä mobiilisivusto

Kaikki edellä mainitut menetelmät sisältävät, vaikkakaan ei aina pitkää ja vaikeaa, mutta silti palkattua verkkovastaavan työtä. Jos et näe kiireellistä tarvetta tällaiselle kehitykselle, sivuston yksinkertainen ja ilmainen mobiiliversio sopii sinulle. Mikä on helpoin tapa tehdä se?

Lataa erityisiä malleja (laajennuksia) responsiivista suunnittelua varten. Esimerkiksi WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile ja muut. Ne auttavat näyttämään sivuston paremmin puhelimessa, kun taas saat muutamia vinkkejä siitä, mitä pitäisi korjata, jotta sivu mukautuu paremmin mobiiliversioon.

Tietenkin tämä menetelmä tuskin sopii vakaviin resursseihin. Pikemminkin tämä ilmainen ominaisuus on tarkoitettu pienille ja yksinkertaisille sivustoille, blogeille ja uutissyötteille. Älä unohda, että Google-hakukone ja Yandex asettavat nykyään vakavia vaatimuksia mobiiliversioille, joten on v altava mahdollisuus alentaa asemaasi tällä menetelmällä.

Tällä menetelmällä mainokset ja ponnahdusikkunat todennäköisesti leikataan poisbannereita, mutta sivu latautuu nopeasti ja ilman viiveitä.

Android-sivuston mobiiliversio
Android-sivuston mobiiliversio

Mobiiliversioiden luomisen periaatteet

Sillä ei ole väliä, luotiinko sivuston mobiiliversio ilmaiseksi vai verkkovastaavien avustuksella, se tehtiin RESS-järjestelmässä tai mukautuvaa mallia käyttäen. Mikä tärkeintä, sen tehokkaan toiminnan varmistamiseksi sen on noudatettava useita erittäin tärkeitä periaatteita. Joten mikä pitäisi olla sivuston mobiiliversio? Kuinka tehdä siitä tuottava, tehokas ja tuottava?

sivuston mobiiliversio tietokoneelta
sivuston mobiiliversio tietokoneelta

Poista kaikki tarpeeton

Sivuston mobiiliversion kehittäjän tulee pyrkiä minimalismiin. Kuvittele kuinka vaikeaa on havaita tietoa, joka on täynnä värejä, painikkeita, bannereita ja jota sinun on selattava loputtomasti oikean materiaalin etsimiseksi. Mobiilisuunnittelun tulee olla yksinkertaista ja puhdasta. Valitse 2-3 väriä tilan jakamiseksi (esimerkiksi merkki). Parempi, jos yksi niistä on valkoinen. Jaa pienen näytön tila ymmärrettäviin ja luettavissa oleviin vyöhykkeisiin. Virtuaalinäppäimien tulee olla näkyvissä, jotta käyttäjä tietää selvästi mistä painaa ja näkee - tässä tuote, tässä lomake tietojen täyttöä varten, tässä toimitus- ja maksutiedot.

Kaikki lisäasetukset, jotka olisivat hyödyllisiä työpöytäversiossa ja helpottaisivat käyttäjän elämää, tuovat vain hankaluuksia tähän. Jätä vain tärkeimmät elementit. Animaatio, mainosbannerit, multimedia todennäköisesti vain hidastaa sivuston tai sovelluksen toimintaa ja häiritseetärkein.

Alignment

Kohdistuskysymys ei ole yhtä akuutti, koska jos se tehdään väärin, käyttäjä saa vain tärkeiden sanojen päätteet. Vasemmalle kohdistettu ja pystysuuntainen kohdistus hyväksytään yleisesti. Kuvittele itsesi selaamassa puhelimesi uutissyötettä. Teet sen ylhäältä alas, et vasemmalle tai oikealle.

Yhdistäminen

Kun ei ole mahdollista pitkälle siirtymäketjulle, yritä yhdistää useita vaiheita yhdeksi. Esimerkiksi sivusto vaatii tietojen syöttämistä useissa vaiheissa - nimi, sitten osoite, jossa jokaisessa yksittäisessä solussa on erillinen talo, katu, asunto jne. Jotta käyttäjä ei pakota yrittämään lyödä monia pieniä soluja, pyydä häntä täyttämään vain 2 - nimi ja osoite.

Ja yhteyden katkeaminen

Joskus päinvastoin on tarpeen erottaa liikaa tietoa. Esimerkiksi avattavassa valikossa on luettelo yli 80 kaupungista, joissa toimitus tapahtuu. Ryhmittele ne alueen mukaan, jotta käyttäjän ei tarvitse selata tätä v altavaa luetteloa. Kun hän vie hiiren osoittimen aluekeskuksen tai alueen päälle, toinen kaupunkiluettelo putoaa pois.

listaukset

Muuten, luetteloista. Niitä on kaksi - kiinteä aakkosjärjestyksessä tai muussa järjestyksessä ja korvaamalla. Heidän valintansa riippuu siitä, mitä luetteloon tulee.

Kiinteä on hyödyllinen, jos käyttäjä tietää tarkalleen mitä etsii. Esimerkiksi kaupunki, numero tai päivämäärä. Toinen vaihtoehto sopii pitkille monimutkaisille nimille tai tapauksiin, joissa yhdestä ja samasta on useita muunnelmiasama nimi, ja jokainen avattava luettelo tuo käyttäjän askeleen lähemmäs tavoitetta. Automaattista korvausvaihtoehtoa käytetään useammin, kun vierailija tarvitsee apua. Esimerkiksi neulesivusto tarjoaa ostaa neulepuikot. Käyttäjä syöttää hakulausekkeen "Metalliset neulepuikot", ja työkaluvihjeessä hän näkee "Neulepuikot 5 mm", "Neulepuikot 4,5 mm" jne.

Automaattinen täyttö

Tämä kohde on erityisen tärkeä sivustoille, jotka myyvät jotain verkossa, ja sinun on täytettävä vakiolomakkeet maksua, toimitusta varten jne. Jos henkilö tekee ostoksen puhelimella, hänellä ei todennäköisesti ole aikaa päästä tietokoneelle, mikä tarkoittaa, että ostoprosessi tulee tehdä mahdollisimman nopeasti ja kätevästi.

Tätä varten lomakkeet voivat sisältää jo täytettyjä tietoja, voit turvautua suosituimpiin vastauksiin. Syötä esimerkiksi tämän päivän päivämäärä, käteismaksutapa, kaupunki, jos työskentelet samalla alueella. Niitä voidaan muuttaa, mutta jos osut kohteeseen, käyttäjän aika säästyy.

Kaikki luetaan, kaikki katsotaan

Kun suunnittelet sivuston mobiiliversiota, muista, että jokaisen puhelimet ovat erilaisia, samoin kuin heidän näkönsä. Ehkä sivustoasi tarkastellaan pieneltä näytöltä, joten fonttien tulee olla yksinkertaisia ja luettavia, painikkeiden tulee olla riittävän suuria, jotta niitä voidaan napsauttaa ilman siirtymistä toiselle sivulle ja kuvien tulee avautua erikseen, suuriksi, varsinkin kun se tulee Internetiin. Store.

Jotkut tilastot

Puhuttaessa sivuston mukauttamisesta mobiililaitteisiin, ei voi muuta kuin turvautua tilastoihin ymmärtääkseen, kuinka tärkeä tämä prosessi ononline-kampanja.

Numerot ovat seuraavat. Nykyään 87 % väestöstä käyttää laitteita, lukuun ottamatta pienimpiä lapsia ja joitain vanhuksia. Ekonomistit ennustavat mobiilikaupan kasvavan 100-kertaiseksi seuraavien viiden vuoden aikana. Samaan aikaan vain 21 % sivustoista on mukautettu toimimaan mobiililaitteiden kanssa. Tämä tarkoittaa, että vain pieni viides osa Internet-liikenteestä ja verkkokaupan markkinoista on varattu.

Ajattele näitä lukuja. Onko järkevää mukauttaa resurssiasi? Tietysti kyllä. Lisäksi, vaikka näillä markkinoilla on niin paljon tilaa, voit luoda oman segmenttisi niiltä.

sivuston mobiiliversio ilmaiseksi
sivuston mobiiliversio ilmaiseksi

Missä tarvitset mobiiliversion

Mobiiliversion käyttäminen on järkevää millä tahansa alustalla, jonka tavoitteena on saada korkea sijoitus. Loppujen lopuksi tämä vaikuttaa suoraan käyttäjään ja luo hänelle mukavat olosuhteet pysyä sivustossasi.

Ei voi olla olemassa ilman mobiiliversiota:

  • uutisportaalit, koska suurin osa niistä katsotaan puhelimesta matkalla töihin tai kouluun;
  • sosiaaliset verkostot - samasta syystä, ja lisäksi on olemassa online-viestintätekijä, mikä tarkoittaa, että tätä varten pitäisi luoda kätevä, ymmärrettävä chat;
  • viitteet, navigointisivustot jne., joille ihmiset menevät etsiessään jotain;
  • verkkokaupat - mahdollisuus houkutella asiakkaita, jotka eivät tuhlaa aikaa ostoksille, vaan ostavat kaiken mobiili-Internetin kautta.

Päätelmän sijaan

Tänään mobiiliteknologiat ovat mukanaaktiivista kasvua ja kehitystä, joten johtajuuteen markkinoilla pyrkien jokaisen yrityksen on varmistettava, että sen Internet-resurssi täyttää vaatimukset. Käyttäjän kasvavien vaatimusten vuoksi sivustoja on jatkuvasti päivitettävä ja mukautettava erilaisiin laitteisiin. On selvää, että jos henkilön on hankalaa olla tietyllä resurssilla, hän ei voi saada sieltä tietoa tuotteesta tai hinnasta, tehdä tilausta, ottaa selvää toimituksesta, niin hän löytää sivuston, jossa tämä kaikki on mahdollista. Siksi kilpailun voittamisen kann alta on tärkeää, että sinulla on joustava, kätevä, toimiva ja mielenkiintoinen resurssi.

Android- tai Ios-verkkosivuston mobiiliversio auttaa tässä. Tätä varten sinun on valittava yksi yllä olevista uudelleensuunnittelumenetelmistä - mukautuva malli, uuden sivuston luominen aliverkkotunnukseen ja uudelleenohjautuminen siihen, ilmaisten mallien avulla tai mobiilisovelluksen luominen, joka helpottaa käyttäjän pääsyä sisään. ja ole sivulla.

Tämä lähestymistapa ei ainoastaan auta ylläpitämään nykyisten asiakkaiden uskollisuutta, vaan tarjoaa myös mahdollisuuden houkutella uusia kävijöitä.

Suositeltava: