Versiunea mobilă a site-ului: cum se face? Proiectare adaptivă

Astăzi, majoritatea oamenilor merg onlinegadget-uri mobile - tablete, telefoane, în legătură cu aceasta, optimizarea site-ului ajunge, de asemenea, la un nou nivel. Dacă un utilizator vine și vede că site-ul nu este optimizat pentru dispozitive mobile: Nu se poate vizualiza imaginea, tras de pe un buton, fonturi mici și imposibil de citit, design înclinat - 99 din 100% că va ieși și va începe să caute un alt mai convenabil. Un robot de căutare va bifa faptul că resursa este irelevantă, adică nu se potrivește cu interogarea de căutare. Prin urmare, designul paginii trebuie adaptat în mod necesar la diverse dispozitive mobile. Ce este o versiune mobilă a site-ului, cum să o faceți și care este cea mai bună modalitate de a-l aplica? Citiți mai multe în acest articol.

Deci, există patru modalități cheie de a adapta site-ul la o versiune mobilă.

Primul mod - design adaptiv

Șabloanele adaptive sugerează o modificareimagini ale site-ului în funcție de dimensiunea ecranului. De regulă, acestea sunt setate la standard 1600, 1500, 1280, 1100, 1024 și 980 de pixeli. Pentru implementare, utilizați CSS3 Media Queries. Designul site-ului nu se modifică în același timp.

Avantajele acestei metode sunt:

• design convenabil, structura însăși fiind adaptată la parametrii ecranului, iar orice actualizare nu necesită dezvoltarea de design de la zero, doar corecte CSS și HTML;
• o adresă URL - utilizatorul nu are nevoie să-și aminteascămai multe nume, nu este nevoie de o redirecționare (redirecționarea de la o adresă la alta), ceea ce poate complica activitatea webmasterului și motorul de căutare este mai ușor de sortare și clasare a resursei cu o singură adresă.

Desigur, șabloanele adaptive au propriile lordezavantaje, care, apropo, sunt mai mult decât merite. Cu toate acestea, mulți dezvoltatori aderă la acest concept, de exemplu, compania Google, a cărei versiune mobilă a site-ului are un design adaptabil. Astfel, dezavantajele sunt:

• Proiectul adaptat nu suportă aceleași sarcini pentrudispozitiv mobil, ca pe PC. Dacă este, de exemplu, o versiune mobilă a site-ului băncii, în cazul în care utilizatorul este probabil să fie informații importante cu privire la cursul de schimb sau la cel mai apropiat ATM, atunci acest design este destul de mult. Dar dacă este o resursă complexă structurată cu o mulțime de secțiuni și subsecțiuni, aspectul adaptiv cu greu va apela la vizitatori.
• O descărcare lentă transformă site-ul dvs. preferat într-unurât. Acest lucru este valabil mai ales în ceea ce privește resursele, unde animațiile, clipurile video, ferestrele pop-up și alte elemente active sunt abundente. Din cauza greutății mari, pagina va "încetini", utilizatorul se va supăra și va pleca, iar pozițiile de căutare ale site-ului vor cădea.
• Incapacitatea de a dezactiva versiunea mobilă - mai multun dezavantaj semnificativ. Dacă un element este ascuns de un astfel de aspect, nu puteți face nimic pentru al deschide, spre deosebire de site-urile în care acesta poate fi dezactivat și pentru a merge la un domeniu obișnuit.

Cu toate acestea, o astfel de versiune mobilă a site-ului este rapidă,fără abilități și costuri speciale vă permite să adaptați resursa la orice obiect gadget. Dar, având în vedere deficiențele enumerate, este adecvat pentru resurse mici, simple, cu un minim de informații și multimedia, fără navigație și animație complicată. Pentru un sit complex, sunt potrivite alte două metode.

A doua metodă este o versiune separată a site-ului

Această metodă este foarte comună și de multe ori cu succesface site-ul de pe dispozitivul mobil mai convenabil pentru percepție. Esența sa este să creeze o versiune separată a paginii, desenată pentru aplicație și localizată pe o adresă sau un subdomeniu separat, de exemplu, m.vk.com. În același timp, funcția principală este păstrată, designul site-ului este pur și simplu diferit. Avantajele acestei metode sunt evidente:

• interfață ușor de utilizat;
• este ușor să se schimbe și să se editeze, deoarece versiunea există separat de resursa principală;
• datorită greutății reduse a unei versiuni separate a site-ului este mult mai rapid decât șablonul adaptiv;
• cel mai adesea există posibilitatea de a merge la versiunea principală a paginii cu un telefon mobil.

Dar și aici au existat deficiențe:

• Adrese multiple - versiune desktop și mobilsite-ul. Cum fac utilizatorul să-și amintească două opțiuni? Comandanții web prestează de multe ori redirecționare (redirecționare) de la versiunea de dext la telefon mobil, dar, în același timp, dacă această pagină nu există în versiunea mobilă, utilizatorul va primi o eroare. Aici există dificultăți cu motoarele de căutare, care sunt dificil de clasificat 2 resurse identice, iar acest lucru afectează în mod direct progresul.
• Versiunea mobilă a site-ului de pe computer, în cazul în care utilizatorul merge în mod greșit la acesta, va arăta ridicol, ceea ce poate afecta, de asemenea, prezența.
• Această versiune este adesea foarte curtailed, desktop, astfel încât utilizatorul va avea o funcționalitate foarte limitată. Dar, în același timp, dacă ceva lipsește, vizitatorul poate merge la versiunea completă a paginii.

În general, un site mobil separat se justificăși este cel mai comun mod de adaptare a resurselor la dispozitivele mobile. Este popular cu magazine online mari, de exemplu, Amazon.

Cea de-a treia cale este RESS-design

Motorul de căutare Google acceptă în mod activ acest lucrudirecția designului mobil. Aceasta este metoda cea mai complexă, costisitoare, dar eficientă pentru a adapta site-ul la un telefon sau la o tabletă. Se numește RESS. Aceasta este o direcționare a resurselor într-o aplicație mobilă, care poate fi descărcată separat pentru fiecare dispozitiv. Pentru Android - cu GooglePlay, și pentru Apple - cu iTunes.

Astfel de aplicații sunt rapide, gratuite, convenabile,au capacitatea de a găzdui diferite tipuri de informații, în timp ce memoria telefonului și traficul pe Internet nu sunt consumate așa cum este atunci când vizitează un site prin browser. Ele sunt ușor de accesat, deoarece link-ul va fi întotdeauna pe ecranul la îndemână și nu este nevoie să introduceți un nume complex în bara de adrese a browserului.

Există, desigur, aici și neajunsurile lor, cum ar ficomplexitatea dezvoltării, costul ridicat al muncii unui număr mare de programatori, necesitatea de a face mai multe variante de aspect. Uneori, un dispozitiv mobil nu este recunoscut de aplicație. Suportul tehnic periodic este necesar, corectarea deficiențelor. Cu toate acestea, această opțiune este considerată cea mai bună dintre cele trei oferite datorită funcționării sale productive și fără probleme.

Cea mai ieftină modalitate de a crea un site mobil

Toate metodele de mai sus presupunși nu întotdeauna o muncă lungă și complexă, dar plătită în continuare de webmaster. Dacă nu vedeți necesitatea urgentă a unei astfel de dezvoltări, puteți utiliza o versiune mobilă gratuită a site-ului. Cum se face mai ușor?

Descărcați șabloane speciale (pluginuri) pentruproiectare adaptivă. De exemplu, detectorul WP mobil, WordPress Mobile Pack, WPSmart Mobile și altele. Acestea vor ajuta la afișarea corectă a site-ului în telefon, în același timp veți primi mai multe sfaturi care ar trebui corectate pentru o mai bună adaptare a paginii la versiunea mobilă.

Desigur, această metodă este greu de potrivităresurse serioase. Mai degrabă, această oportunitate gratuită este destinată site-urilor mici și simple, blogurilor, fluxurilor de știri. Nu uitați că motorul de căutare Google, ca Yandex, face astăzi serioase cerințe în versiunile mobile, deci există o șansă mare de a vă reduce posturile folosind această metodă.

Prin această metodă, cel mai probabil, bannerele publicitare și pop-up vor fi tăiate, însă pagina se va încărca rapid și fără "întârzieri".

Principii de creare a versiunilor mobile

Nu contează, o versiune mobilă a site-ului este creată gratuitsau de către statul de webmasteri, este făcută la sistemul RESS sau folosind modelul adaptiv. Cel mai important lucru pentru activitatea ei eficientă este obligată să urmeze câteva principii foarte importante. Deci, care ar trebui să fie versiunea mobilă a site-ului? Cum sa o faceti productiv, eficient si productiv?

Eliminăm toate inutile

Minimalismul este ceva pentru care trebuie să se străduiascădezvoltator al versiunii mobile a site-ului. Imaginați-vă cât de greu este să percepeți informații pline de culori, butoane, bannere și pe care trebuie să le derulați fără sfârșit în căutarea materialului potrivit. Designul mobil ar trebui să fie simplu și curat. Selectați 2-3 culori pentru a separa spațiul (de exemplu, marcaje). Este mai bine dacă unul dintre ele este alb. Împărțiți spațiul unui mic ecran în zone clare și lizibile. Cheile virtuale ar trebui să fie vizibile, astfel încât utilizatorul să știe exact unde să facă clic și a văzut - că este bunurile, iată formularul pentru completarea datelor, aici sunt informațiile despre livrare și plată.

Orice opțiuni suplimentare care ar fi utileîn versiunea desktop și pentru a face viața mai ușoară pentru utilizator, aici aduc numai dificultate. Lăsați doar cele mai importante elemente. Animație, bannere publicitare, multimedia, cel mai probabil, va împiedica doar locul de muncă sau aplicarea și distrage atenția de la punctul principal.

aliniere

Problema egalizării nu este mai puțin acută,deoarece dacă îl faci incorect, utilizatorul va primi doar terminații ale cuvintelor importante. Alinierea la stânga și pe verticală este considerată ca fiind comună. Imaginați-vă cum treceți prin linia de știri din telefon. Faceți acest lucru din partea de sus în jos, dar nu în stânga sau în dreapta.

uniune

Atunci când nu există posibilitatea unui lanț lung de tranziții,Încercați să combinați mai mulți pași într-unul singur. De exemplu, site-ul trebuie să introduceți date în mai multe etape - .. Numele, atunci adresa în cazul în care, în fiecare celulă sunt casă separată, stradă, apartament, etc. Pentru a nu pentru a forța utilizatorul să încerce să ajungă pe setul de celule mici, cere-le să completeze doar 2 - numele și adresa.

Și dezangajarea

Uneori, dimpotrivă, trebuie să vă deconectați de asemeneao mulțime de informații. De exemplu, în meniul drop-down aveți o listă cu peste 80 de orașe în care are loc livrarea. Grupează-le pe regiuni, astfel încât utilizatorul să nu treacă prin această listă imensă. Când se îndreaptă spre centrul sau regiunea regională, o altă listă de orașe va renunța.

liste

Apropo, despre listele. Cele două sunt fixate în ordine alfabetică sau de altă natură și cu substituire. Alegerea acestora depinde de ce vor fi enumerate.

Fixat este convenabil în cazul în careutilizatorul știe exact ce caută. De exemplu, un oraș, un număr sau o dată. A doua opțiune este potrivită pentru nume lungi sau complicate, în cazurile în care există o serie de variații într-unul și același nume, și fiecare listă derulantă a unui utilizator aduce cu un pas mai aproape de gol. Opțiunea cu autosubstitution folosit de multe ori atunci când un vizitator nevoie de ajutor. De exemplu, un site pentru tricotat oferă să cumpere ace de tricotat. Utilizatorul introduce interogarea de căutare „spițe metalice“, iar în punctele vârf „spițe 5 mm“ „Spite 4,5 mm“ și t. D.

AutoComplete

Acest paragraf este deosebit de relevant pentru site-urile în care există cevavindeți online și trebuie să completați formularele standard de plată, de livrare etc. Dacă o persoană face o achiziție de la un telefon, atunci cel mai probabil nu are timp să ajungă la computer, ceea ce înseamnă că procesul de cumpărare trebuie făcut cât mai rapid și mai convenabil posibil.

Pentru aceasta, formularele pot conține deja completatedatele, puteți recurge la cele mai populare răspunsuri. De exemplu, introduceți data de astăzi, metoda de plată în numerar, orașul, dacă lucrați într-o singură regiune. Ele pot fi schimbate, dar dacă ați lovit ținta, timpul utilizatorului va fi salvat.

Totul este citit, totul este vizibil

Când creați o versiune mobilă a unui site, amintiți-văcă toate telefoanele sunt diferite, dar și vederea. Poate că site-ul dvs. va fi vizualizate cu un ecran mic, astfel încât font trebuie să fie simplă și ușor de citit, un buton - suficient de mare încât acestea ar putea atinge și nu ajunge la pagina următoare, iar imaginile trebuie să fie deschise separat, mare, mai ales atunci când vine vorba de internet la magazin.

Unele statistici

Vorbind despre adaptarea site-ului la dispozitivele mobile, nu puteți recurge la statistici pentru a înțelege cât de important este acest proces pentru a promova rețeaua.

Cifrele sunt după cum urmează. Dispozitivele de astăzi sunt folosite de 87% din populație, aparent, cu excepția celor mai mici copii și a unor persoane în vârstă. Economiștii prevăd creșterea comerțului mobil de 100 de ori pentru următorii 5 ani. În același timp, numai 21% dintre site-uri sunt adaptate pentru a lucra cu dispozitive mobile. Prin urmare, traficul pe Internet și piața de comerț electronic sunt ocupate doar de o mică parte a 5-a.

Gândiți-vă la aceste cifre. Are sens să vă adaptați resursele? Desigur, da. Mai mult, atâta timp cât există atât de mult spațiu liber pe această piață, puteți lua propriul dvs. segment pe ea.

Unde este versiunea mobilă necesară?

Utilizați versiunea mobilă potrivită pentruorice platformă care încearcă să obțină un rating ridicat. La urma urmei, acesta este un impact direct asupra utilizatorului, creând pentru el un mediu confortabil pentru a rămâne pe site.

Fără o versiune mobilă, nu poate exista:

• portaluri de știri, deoarece este telefonul lor cele mai văzute în drum spre serviciu sau la școală;
• rețele sociale - din același motiv, plus există un factor de comunicare on-line, ceea ce înseamnă că ar trebui creat un chat convenabil și inteligibil pentru acest lucru;
• site-uri de referință, site-uri cu navigație etc., unde oamenii se întorc atunci când caută ceva;
• cumpărături on-line - capacitatea de a atrage clienții care nu petrec timp în excursii de cumpărături și cumpăra toate prin intermediul internetului mobil.

În loc să încheiem

Astăzi, tehnologiile mobile se află încreștere și dezvoltare activă, prin urmare, lupta pentru leadership pe piață, orice companie ar trebui să se asigure că resursa sa de Internet îndeplinește cerințele. Datorită cererilor crescânde de utilizatori, site-urile trebuie să fie în mod constant modernizate și adaptate la diferite dispozitive. Este clar că, dacă o persoană este inconfortabil să fie într-o anumită resursă, nu poate fi acolo pentru a obține informații despre un produs sau un preț, plasați o comandă, întreba despre livrare, el va găsi site-ul, în cazul în care toate acestea vor fi posibile. Prin urmare, pentru a câștiga competiția, este important să aveți o resursă flexibilă, convenabilă, funcțională și interesantă.

Faceți această versiune mobilă a site-uluiAndroid sau Ios. Pentru a face acest lucru, selectați unul dintre modurile de mai sus de reproiectare - șablonul adaptiv, crearea unui nou site pe un subdomeniu și trecerea la ea prin redirecționarea utilizarea de template-uri gratuite sau pentru a crea o aplicație mobilă prin care un utilizator poate intra în mod convenabil și să rămână pe pagină.

O astfel de abordare va ajuta nu numai să mențină loialitatea clienților existenți, ci va oferi și o oportunitate de a atrage noi vizitatori.