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

Astăzi, cei mai mulți oameni merg online, prin gadget-uri mobile - tablete, telefoane, în acest sens, optimizarea site-ului, de asemenea, ajunge 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. A robot de căutare

Deci, există patru moduri-cheie pentru a adapta site-ul la o versiune mobilă.

Primul mod - design adaptiv

Șabloanele adaptive implică modificarea imaginii 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, aplicați Interogări media CSS3. Designul site-ului nu se modifică în același timp.

Avantajele acestei metode sunt:

• design convenabil, deoarece structura se adaptează parametrilor ecranului, iar orice actualizare nu necesită dezvoltarea de design de la zero, doar corecte CSS și HTML;
• unul la URL - utilizatorul nu are nevoie să-și amintească câteva nume, nu este nevoie de redirecționare (redirecționarea de la o adresă la alta), care poate complica activitatea webmasteri, și motor de căutare mai ușor pentru a sorta și rangul o resursă cu o singură adresă.

Desigur, șabloanele adaptive au, de asemenea, propriile neajunsuri, 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 adaptiv nu suportă aceleași sarcini pe un dispozitiv mobil ca pe un PC. Dacă aceasta este, de exemplu, o versiune mobilă a site-ului băncii, unde utilizatorul are mai multe șanse de a avea informații despre cursul de schimb sau cele mai apropiate bancomate, atunci acest design este destul de bun. Dar dacă este o resursă structurată complexă cu mai multe secțiuni și subsecțiuni, atunci aspect adaptabil este puțin probabil să vă mulțumim vizitatorilor.
• Încărcarea lentă transformă site-ul dvs. preferat într-unul plin de ură. 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.
• Imposibilitatea dezactivării versiunii mobile este un alt 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 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 adesea face cu succes un site pe un dispozitiv 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, principala funcționalitate este păstrată, designul site-ului pare 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:

• Mai multe adrese - versiune desktop și mobil a site-ului. 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 singur site mobil se justifică și este cel mai comun mod de a adapta o resursă pentru 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 această direcție de design 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 diverse tipuri de informații, în timp ce memoria telefonului și traficul pe Internet nu sunt consumate ca atunci când vizitezi 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 sale, cum ar fi complexitatea dezvoltării, costul ridicat al muncii unui număr mare de programatori, necesitatea de a face mai multe versiuni ale layout-ului. 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, deși nu întotdeauna o activitate lungă și complexă, dar totuși plătită 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) pentru un design adaptabil. 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ă nu este potrivită pentru 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ă dacă ați creat gratuit o versiune mobilă a site-ului sau cu ajutorul personalului webmaster, a fost făcută pe sistemul RESS sau utilizând un șablon adaptiv. Cel mai important lucru este că, pentru munca sa eficientă, este necesar să adere la 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 un lucru pe care dezvoltatorul versiunii mobile a site-ului ar trebui să se străduiască. 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ă.

Toate opțiunile suplimentare care ar fi utile în versiunea de desktop și de a face viața mai ușoară pentru utilizator va aduce numai complicații. Lăsați doar cele mai importante elemente. Animație, bannere publicitare, multimedia, cel mai probabil, va încetini doar site-ul sau aplicația și va distrage atenția de la lucrul principal.

aliniere

Problema de egalizare este la fel de acută, deoarece dacă o faceți în mod incorect, utilizatorul va primi numai terminațiile 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

Când nu există posibilitățile unui lanț lung de tranziții, încercați să combinați mai mulți pași într-unul. 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, din contră, trebuie să deconectați prea multe 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 care utilizatorul știe exact ceea ce caută. De exemplu, un oraș, un număr sau o dată. A doua opțiune este potrivită pentru nume lungi complexe sau pentru cazuri în care există multe variații cu același nume și fiecare lista drop-down aduce utilizatorului un pas mai aproape de obiectiv. O variantă cu înlocuire automată este folosită mai des atunci când un vizitator are nevoie de ajutor. De exemplu, un site pentru tricotat oferă să cumpere ace de tricotat. Utilizatorul introduce interogarea de căutare "Ace de tricotat metalic", iar în tooltip se vede "Spui 5 mm", "Spui 4,5 mm" etc.

AutoComplete

Acest punct este valabil mai ales pentru site-urile care vând ceva online și va trebui să completați formularul standard de plată, livrare și așa mai departe. N. Dacă o persoană face o achiziție de la telefon, atunci cel mai probabil, el nu are timp pentru a ajunge la un calculator, ceea ce înseamnă că procesul de trebuie să faceți cumpărături cât mai rapid și mai convenabil posibil.

Pentru că acest formular poate conține date deja completate, puteți apela 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

Creând designul versiunii mobile a site-ului, amintiți-vă că toate telefoanele sunt diferite și viziunea prea. 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ă?

Utilizarea versiunii mobile este recomandată pentru orice platformă care urmărește obținerea unui rating ridicat. La urma urmei, acesta are un impact direct asupra utilizatorului, creând pentru el condiții confortabile pentru a rămâne pe site-ul dvs.

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

• portaluri de știri, deoarece majoritatea dintre aceștia se uită prin telefon pe calea de a munci sau de a studia;
• 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;
• magazine online - o oportunitate de a atrage cumpărătorii care nu petrec timp pe călătorii la cumpărături, dar cumpără totul prin intermediul internetului mobil.

În loc să încheiem

Astăzi, tehnologiile mobile sunt în faza de creștere activă și de dezvoltare, prin urmare, străduindu-se să fie un lider pe piata, orice companie trebuie să se asigure că resursele sale online, să îndeplinească 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ă.

O versiune mobilă a site-ului Android sau Ios va contribui la acest lucru. 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.