Mobilna različica spletnega mesta: kako narediti? Prilagodljivo oblikovanje

Danes večina ljudi na spletu prehaja preko mobilnih pripomočkov - tabličnih računalnikov, telefonov, zato optimizacija spletnega mesta prinese tudi novo raven. Če uporabnik pride in vidi, da je spletna stran ni optimizirana za mobilne naprave: ne morete videti sliko, potegnil off gumb, malih in neberljivi pisave, oblikovanje špila - 99 od 100%, da bo prišel ven in se bo začel iskati drugo bolj udoben. A pajka

Tako je na voljo štiri načine za prilagajanje spletnega mesta mobilni različici.

Prva pot - adaptivna oblika

Adaptivne predloge vključujejo spreminjanje slike mesta, odvisno od velikost zaslona. Praviloma so nastavljeni na standardne 1600, 1500, 1280, 1100, 1024 in 980 slikovnih pik. Za izvedbo uporabite Media Queries v CSS3. Oblika spletnega mesta se ne spremeni istočasno.

Prednosti te metode so:

• priročno oblikovanje, saj se struktura prilagaja parametrom zaslona in vsaka posodobitev ne zahteva razvoja zasnove iz nič, samo popravite CSS in HTML;
• ena na URL - uporabnik ne potrebuje, da se spomnimo nekaj imen, ni potrebe za preusmeritev (posredovan iz enega naslova na drugega), ki se lahko zaplete delo webmastere in iskanje lažje motor za razvrščanje in uvrstitev vir z enim naslovom.

Seveda imajo prilagodljive predloge tudi svoje pomanjkljivosti, ki so, na primer, več kot zaslug. Kljub temu se mnogi razvijalci držijo tega koncepta, na primer korporacije Google, katere mobilna različica spletnega mesta ima prilagodljiv dizajn. Torej, pomanjkljivosti so:

• Prilagodljiva zasnova ne podpira istih nalog na mobilni napravi kot na osebnem računalniku. Če je to na primer mobilna različica spletne strani banke, kjer je verjetneje, da ima uporabnik informacije o menjalnem tečaju ali najbližjih bankomatih, potem je ta oblika dovolj velika. Ampak, če gre za zapleten strukturiran vir z mnogimi deli in podpodročji, potem prilagodljiva postavitev malo je verjetno, da bodo obiskovalci zadovoljni.
• Počasno nalaganje postane priljubljeno spletno mesto v sovražno. To še posebej velja za vire, kjer so animacije, video posnetki, pojavna okna in drugi aktivni elementi bogati. Zaradi težke teže bo stran preprosto "upočasnila", uporabnik se bo razjezil in odšel, položaj za iskanje pa bo padel.
• Druga pomembna pomanjkljivost je onemogočiti onemogočanje mobilne različice. Če je neki element skrit s tako postavitvijo, ne morete storiti ničesar, da bi ga odprli, za razliko od spletnih mest, kjer je lahko onemogočen, in obiščite običajno domeno.

Kljub temu takšna mobilna različica spletnega mesta hitro, brez posebnih znanj in stroškov, vam omogoča, da prilagodite vir na kateri koli pripomoček. Vendar je zaradi pomanjkljivosti, ki so na seznamu, primerne za majhne, ​​preproste vire z najmanj informacijami in večpredstavnostmi brez zapletene navigacije in animacije. Za kompleksno spletno mesto so primerne druge metode.

Druga metoda je ločena različica spletnega mesta

Ta metoda je zelo pogosta in pogosto uspešno spletno stran mobilne naprave postane bolj primerna za percepcijo. Njegova bistvo je ustvariti ločeno različico strani, ki je potegnjena za aplikacijo, in ki se nahaja na ločenem URL-ju ali poddomenu, na primer m.vk.com. Hkrati se ohranja glavni funkcionalnost, oblikovanje mesta preprosto izgleda drugače. Prednosti te metode so očitne:

• uporabniku prijazen vmesnik;
• preprosto je spremeniti in urejati, ker različica obstaja ločeno od glavnega vira;
• zaradi majhne teže ločene različice spletnega mesta je veliko hitrejša od prilagoditvene predloge;
• najpogosteje obstaja možnost, da obiščete glavno različico strani z mobilnim telefonom.

Ampak tudi tukaj so bile pomanjkljivosti:

• Več naslovov - namizna in mobilna različica spletnega mesta. Kako uporabnik zapomni dve možnosti? Spletni mojstri pogosto predpisani preusmeritev (preusmeritev), da dekstopnoy različico za mobilne naprave, ampak če je ta stran v mobilni različici, ne obstaja, bo uporabnik prejel napako. Tukaj so težave z iskalniki, ki jih je težko oceniti 2 identičnih virov, kar neposredno vpliva na napredek.
• Mobilna različica spletnega mesta iz računalnika, če uporabnik zmotno preide na to, bo videti smešno, kar lahko vpliva tudi na prisotnost.
• Ta različica je pogosto močno skrajšana, namizna, zato bo uporabnik dobil zelo omejeno funkcionalnost. Toda ob istem času, če nekaj manjka, lahko obiskovalec obišče celotno različico strani.

Na splošno se posamezna mobilna stran opravičuje in je najpogostejši način prilagajanja vira za mobilne naprave. To je priljubljena pri velikih spletnih trgovinah, na primer Amazon.

Tretji način je RESS-design

Googlov iskalnik aktivno podpira to smer mobilnega oblikovanja. To je najbolj zapletena, draga, a učinkovita metoda za prilagajanje spletnega mesta telefonu ali tabličnemu računalniku. Imenuje se RESS. To je usmerjanje v mobilno aplikacijo, ki jo lahko prenesete za vsako napravo posebej. Za Android - z Googlom in za Apple - z iTunesom.

Takšne aplikacije so hitro, brezplačno, enostavno, imajo sposobnost, da sprejme različne vrste informacij, in pomnilnik telefona in internetnega prometa ni jedel kot takrat, ko obiščete spletno stran preko brskalnika. Preprosto jih je mogoče vnesti, ker bo povezava vedno na zaslonu in ni potrebe po vnosu kompleksnega imena v naslovno vrstico brskalnika.

Obstajajo seveda tu in njegove pomanjkljivosti, kot so zapletenost v razvoju, visoki stroški dela velikega števila programerjev, potrebo po več različicah postavitve. Včasih aplikacija ne prepozna mobilne naprave. Potrebna je redna tehnična podpora, odprava pomanjkljivosti. Kljub temu se ta možnost šteje za najboljšo od treh ponujenih zaradi njegovega produktivnega, nemotenega delovanja.

Najcenejši način ustvarjanja mobilnega spletnega mesta

Vse zgoraj navedene metode domnevajo, čeprav ne vedno dolgotrajno in zapleteno, a še vedno plačano delo spletnega skrbnika. Če ne vidite nujne potrebe po takem razvoju, lahko uporabite preprosto in brezplačno mobilno različico spletnega mesta. Kako olajšati?

Prenesite posebne predloge (vtičnice) za prilagoditveno obliko. Na primer, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile in drugi. Pomagali bodo prikazu spletne strani pravilno v telefonu, hkrati pa boste prejeli več nasvetov, ki bi jih bilo treba popraviti, da bi bolje prilagodili stran v mobilno različico.

Ta metoda seveda ni primerna za resne vire. Namesto tega je ta brezplačna priložnost namenjena majhnim in preprostim spletnim mestom, spletnim dnevnikom, novicam. Ne pozabite, da iskalnik Google, kot je Yandex, danes predstavlja resne zahteve za mobilne različice, zato je velika možnost, da z uporabo te metode znižate položaje.

S to metodo bodo najverjetneje prekinjene oglaševalske in pop-up pasice, vendar se bo stran naložila hitro in brez "zastave".

Načela ustvarjanja mobilnih različic

Ne glede na to, ali ste mobilno različico spletnega mesta ustvarili brezplačno ali s pomočjo osebja spletnega skrbnika, ste ga izdelali v sistemu RESS ali uporabili prilagoditveno predlogo. Najpomembnejše je, da mora za učinkovito delo upoštevati nekaj zelo pomembnih načel. Torej, kakšna naj bi bila mobilna različica spletnega mesta? Kako narediti produktivno, učinkovito in produktivno?

Odstranimo vse nepotrebne

Minimalizem je nekaj, za kar si mora prizadevati razvijalec mobilne različice spletnega mesta. Predstavljajte si, kako težko je zaznati informacije, ki so polne barv, gumbov, pasic in katere se morate brez težav pomikati po iskanju pravega gradiva. Mobilna zasnova mora biti preprosta in čista. Za ločevanje prostora (na primer z blagovno znamko) izberite 2-3 barve. Bolje je, če je eden od njih beli. Prostor majhnega zaslona razdelite na čiste in berljive cone. Virtualni ključi morajo biti vidni tako, da uporabnik jasno ve, kje naj klikne in videl - to je blago, tukaj je obrazec za izpolnjevanje podatkov, tukaj so podatki o dostavi in ​​plačilu.

Vse dodatne možnosti, ki bi bile uporabne v namiznih različicah in olajšale uporabniku, bodo prinesle le zaplete. Pustite le najpomembnejše elemente. Animacija, reklamne pasice, multimedije, najverjetneje bodo upočasnili spletno mesto ali aplikacijo in odvrnili od glavne stvari.

Poravnava

Problem izenačevanja je enako akuten, ker če to storite nepravilno, bo uporabnik prejel le zaključke pomembnih besed. Poravnava na levi in ​​navpično se šteje za običajnega. Predstavljajte si, kako v telefonu prelistate novico. To naredite od zgoraj navzdol, vendar ne na levi ali desni strani.

Združevanje

Kadar ni možnosti dolge verige prehodov, poskusite združiti več korakov v eno. Na primer, na mestu je treba vnesti podatke v več fazah - .. ime, nato pa naslov, kjer so v vsaki celici samostojna hiša, ulica, stanovanje, itd Da ne bi prisilili uporabniku, da bi poskušali priti na vrsto majhnih celic, jih prosite, naj izpolnijo samo 2 - ime in naslov.

In ločitev

Včasih, nasprotno, morate prekiniti preveč informacij. Na primer, v spustnem meniju imate seznam več kot 80 mest, kjer se dostava izvaja. Združite jih po regijah, tako da se uporabniku ni treba pomikati po tem ogromnem seznamu. Ko opozori na regionalni center ali območje, se bo spustil še en seznam mest.

Kontrolni seznami

Mimogrede, o seznamih. Dve sta fiksirani v abecednem ali drugem vrstnem redu in s substitucijo. Izbira je odvisna od tega, kaj bo našteto.

Popravljeno je, če je uporabnik natančno vedel, kaj išče. Na primer mesto, številka ali datum. Druga možnost je primerna za dolga zapletena imena ali za primere, kjer obstaja veliko različic istega imena in vsakega spustni seznam prinaša uporabniku korak bližje cilju. Različica z avtomatsko zamenjavo se pogosteje uporablja, če obiskovalec potrebuje pomoč. Na primer, mesto za pletenje ponuja kupiti pletilne igle. Uporabnik vpiše iskalno poizvedbo "Kovinske igle za pletenje", v opisu orodja pa se prikaže "Spoke 5 mm", "Spoke 4,5 mm" itd.

Samodejno izpolnjevanje

Ta točka je še posebej velja za strani, ki prodajajo nekaj na spletu in boste morali izpolniti standardni obliki plačila, dostave in tako naprej. N. Če oseba naredi nakup iz telefona, nato pa najverjetneje, da nima časa, da bi dobili z računalnikom, kar pomeni, da je proces morate kar najbolj hitro in udobno kupiti.

Za ta obrazec lahko vsebujejo že napolnjene podatke, lahko uporabite najbolj priljubljene odgovore. Na primer, vstavite današnji datum, način plačila v gotovini, mesto, če delate v eni regiji. Lahko jih spremenite, če pa zadete na tarčo, bo čas uporabnika shranjen.

Vse je prebralo, vse je vidno

Ustvarite oblikovanje mobilne različice spletnega mesta, ne pozabite, da so vsi telefoni drugačni in tudi vizijo. Mogoče se bo vaša stran vidna z majhnim zaslonom, tako da je pisava mora biti preprosta in berljivi, gumb - dovolj velika, da bi lahko dotaknete in ne priti na naslednjo stran, in slike je treba odpreti ločeno, velika, še posebej, ko gre za internet v trgovino.

Nekateri statistični podatki

Če govorimo o prilagoditvi spletnega mesta mobilnim napravam, ne morete uporabiti statistike, da bi razumeli, kako pomemben je ta proces promocija omrežja.

Številke so naslednje. Danes pripomočke uporablja 87% prebivalstva, očitno, razen najmlajših otrok in nekaterih starejših ljudi. Ekonomisti napovedujejo rast mobilne trgovine 100-krat v naslednjih 5 letih. Hkrati je samo 21% spletnih mest prilagojenih za delo z mobilnimi napravami. Zato je internetni promet in trg e-trgovine zaseden le majhen 5-ti del.

Razmislite o teh številkah. Ali je smiselno prilagoditi svoj vir? Seveda, da. Poleg tega, dokler je na tem trgu toliko prostega prostora, lahko na njej vzamete svoj segment.

Kje je potrebna mobilna različica?

Uporaba mobilne različice je priporočljiva za katero koli platformo, ki želi doseči visoko oceno. Navsezadnje je to neposreden vpliv na uporabnika, kar ustvarja zanj udobne pogoje za bivanje na vašem spletnem mestu.

Brez mobilne različice ne more obstajati:

• portala za novice, saj je večina med njimi gleda po telefonu na način dela ali študija;
• socialne mreže - iz istega razloga, poleg tega pa obstaja tudi dejavnik komunikacije na spletu, kar pomeni, da je za to treba ustvariti priročen in razumljiv klepet;
• referenčna spletna mesta, mesta z navigacijo itd., kjer se ljudje obrnejo, ko iščejo nekaj;
• spletne trgovine - priložnost, da pritegnete kupce, ki ne porabijo časa na nakupovalnih potovanjih, ampak kupijo vse prek mobilnega interneta.

Namesto sklepanja

Danes so mobilne tehnologije v fazi aktivne rasti in razvoja, zato si prizadevajo za vodstvo na trgu, katera koli družba mora zagotoviti, da spletni vir izpolnjuje zahteve. Zaradi naraščajočih zahtev uporabnikov morajo biti mesta nenehno nadgrajena in prilagojena različnim napravam. Jasno je, da če je oseba neudobno, da je na določenem viru, ne more dobiti informacij o izdelku ali ceni, naročiti naročilo, se seznaniti z dostavo, najde spletno mesto, kjer se vse to postane mogoče. Zato je za pridobitev konkurence pomembno, da je fleksibilen, priročen, funkcionalen in zanimiv vir.

To bo pripomogla mobilna različica spletnega mesta Android ali IOS. To storite tako, da izberete eno od zgornjih načinov za prenovo - prilagodljivo predlogo, ki ustvarja novo mesto na poddomeno in prehod, ki mu jih preusmeriti uporabo brezplačnih predlog ali ustvariti mobilno aplikacijo, prek katere lahko uporabnik udobno vstopijo in ostanejo na strani.

Tak pristop bo pripomogel k ohranjanju zvestobe obstoječih strank, hkrati pa bo tudi priložnost za privabljanje novih obiskovalcev.