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

Cuprins:

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

Astăzi, majoritatea oamenilor intră online prin gadget-uri mobile - tablete, telefoane, în acest sens, optimizarea site-ului ajunge și ea la un nou nivel. Dacă intră un utilizator și vede că site-ul nu este optimizat pentru dispozitive mobile: imaginea nu poate fi vizualizată, butoanele s-au mutat, fonturile sunt mici și imposibil de citit, designul este denaturat - 99 din 100% că va ieși și începeți să căutați altul mai convenabil. Și robotul de căutare va bifa caseta că resursa este irelevantă, adică nu se potrivește cu interogarea de căutare. Prin urmare, designul paginii trebuie adaptat diverselor dispozitive mobile. Ce este o versiune mobilă a site-ului, cum se realizează și care este cel mai bun mod de ao aplica? Citiți mai multe în acest articol.

Deci, există patru moduri cheie de a face site-ul dvs. prietenos pentru dispozitive mobile.

cum să faci o versiune mobilă a site-ului
cum să faci o versiune mobilă a site-ului

Metoda 1 - Design responsiv

Șabloanele receptive modifică imaginea 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, sunt utilizate CSS3 Media Queries. Designul site-ului în sine nu se schimbă.

Avantajele acestei metode includ:

  • dezvoltare convenabilă,deoarece structura în sine se adaptează la parametrii ecranului și orice actualizare nu necesită dezvoltarea designului de la zero, este suficient să modifici CSS și HTML;
  • o adresă URL – utilizatorul nu are nevoie să-și amintească mai multe nume, nu este nevoie de o redirecționare (redirecționare de la o adresă la alta), ceea ce poate complica munca unui webmaster și este mai ușor pentru o căutare motor pentru a sorta și clasa o resursă cu o singură adresă.

Desigur, șabloanele adaptive au dezavantajele lor, care, apropo, sunt mai mult decât avantaje. Cu toate acestea, mulți dezvoltatori aderă la acest concept, de exemplu, Google Corporation, a cărei versiune mobilă a site-ului are un design adaptiv. Deci, dezavantaje:

  • Designul receptiv nu acceptă aceleași sarcini pe mobil ca și pe PC. Dacă aceasta este, de exemplu, o versiune mobilă a site-ului web al unei bănci, unde informațiile despre cursul de schimb sau despre cele mai apropiate bancomate sunt mai probabil să fie importante pentru utilizator, atunci acest design este suficient. Dar dacă aceasta este o resursă structurată complexă, cu multe secțiuni și subsecțiuni, atunci vizitatorilor nu le va plăcea aspectul adaptiv.
  • Încărcarea lentă transformă un site preferat într-unul plin de ură. Acest lucru este valabil mai ales pentru resursele în care animațiile, videoclipurile, ferestrele pop-up și alte elemente active sunt din abundență. Din cauza greutății mari, pagina pur și simplu va „încetini”, utilizatorul se va enerva și va pleca, iar pozițiile de căutare ale site-ului vor scădea.
  • Incapacitatea de a dezactiva versiunea mobilă este un alt dezavantaj semnificativ. Dacă un element este ascuns de un astfel de aspect, tunu poți face nimic pentru a-l deschide, spre deosebire de site-urile unde îl poți dezactiva și comuta 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 gadget. Dar, având în vedere deficiențele enumerate, se va potrivi cu resurse mici, simple, cu un minim de informații și multimedia, fără navigare și animație complexe. Pentru un site complex, sunt potrivite alte 2 metode.

proiectarea site-ului
proiectarea site-ului

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

Această metodă este foarte comună și are adesea succes în a face site-ul mai lizibil pe un dispozitiv mobil. Esența sa este de a crea o versiune separată a paginii, desenată pentru aplicație și situată pe un URL sau subdomeniu separat, de exemplu, m.vk.com. În același timp, funcționalitatea principală este păstrată, designul site-ului pur și simplu arată diferit. Avantajele acestei metode sunt evidente:

  • interfață ușor de utilizat;
  • ușor de schimbat și editat, deoarece versiunea există separat de resursa principală;
  • din cauza greutății reduse, o versiune separată a site-ului funcționează mult mai rapid decât un șablon adaptiv;
  • cel mai des este posibil să accesați versiunea principală a paginii de pe mobil.

Dar au existat și aici câteva dezavantaje:

  • Adrese multiple - versiunea pentru desktop și mobilă a site-ului. Cum să faci utilizatorul să-și amintească două opțiuni? Webmasterii prescriu adesea o redirecționare (redirecționare) de la versiunea desktop la versiunea mobilă, dar în același timp, dacă această pagină este în mobilversiunea nu există, utilizatorul va primi o eroare. Aici apar dificultăți cu motoarele de căutare, cărora le este dificil să clasifice 2 resurse identice, iar acest lucru afectează direct promovarea.
  • Versiunea mobilă a site-ului de pe computer, dacă utilizatorul o vizitează din greșeală, va arăta ridicolă, ceea ce poate afecta și traficul.
  • Această versiune este adesea restrânsă foarte mult, desktop, astfel încât utilizatorul va obține funcționalități foarte limitate. Dar, în același timp, dacă ceva lipsește, vizitatorul poate accesa versiunea completă a paginii.

În general, un site mobil separat se justifică și este cel mai comun mod de a adapta o resursă pentru dispozitive mobile. Este popular printre magazinele online mari, cum ar fi Amazon.

șabloane adaptive
șabloane adaptive

A treia cale - design RESS

Motorul de căutare Google sprijină în mod activ această direcție a designului mobil. Aceasta este cea mai complexă, costisitoare, dar eficientă metodă de a adapta site-ul la un telefon sau tabletă. Se numește RESS. Aceasta vizează o resursă într-o aplicație mobilă care poate fi descărcată pentru fiecare dispozitiv separat. 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 de internet nu sunt consumate ca atunci când vizitați un site prin intermediul unui browser. Acestea sunt ușor de accesat, deoarece linkul 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 șideficiențele sale, cum ar fi complexitatea dezvoltării, costul ridicat al forței de muncă al unui număr mare de programatori, necesitatea de a face mai multe opțiuni de aspect. Uneori dispozitivul mobil nu este recunoscut de aplicație. Asistență tehnică regulată, corectarea deficiențelor este necesară. Cu toate acestea, această opțiune este considerată cea mai bună dintre cele trei propuse datorită funcționării productive și neîntrerupte.

site-ul google mobil
site-ul google mobil

Cea mai ieftină modalitate de a crea un site web mobil

Toate metodele de mai sus implică, deși nu întotdeauna lungă și dificilă, dar totuși munca plătită a unui webmaster. Dacă nu vedeți o nevoie urgentă pentru o astfel de dezvoltare, o versiune mobilă simplă și gratuită a site-ului vi se va potrivi. Care este cel mai simplu mod de a o face?

Descărcați șabloane speciale (plugin-uri) pentru design responsive. De exemplu, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile și altele. Acestea vor ajuta la afișarea mai corectă a site-ului pe telefon, în timp ce veți primi câteva sfaturi despre ceea ce ar trebui corectat pentru a adapta mai bine pagina la versiunea mobilă.

Desigur, această metodă nu este potrivită pentru resurse serioase. Mai degrabă, această funcție gratuită este destinată site-urilor mici și simple, blogurilor, fluxurilor de știri. Nu uitați că motorul de căutare Google, la fel ca și Yandex, solicită astăzi versiunile mobile, așa că există o șansă imensă să vă reduceți pozițiile folosind această metodă.

Cu această metodă, cel mai probabil, anunțurile și ferestrele pop-up vor fi întreruptebannere, dar pagina se va încărca rapid și fără „întârzieri”.

versiunea mobilă a site-ului Android
versiunea mobilă a site-ului Android

Principii pentru crearea versiunilor mobile

Nu contează dacă versiunea mobilă a site-ului a fost creată gratuit sau cu ajutorul unui staff de webmasteri, a fost realizată pe sistemul RESS sau folosind un șablon adaptiv. Cel mai important, pentru funcționarea sa eficientă, este necesar să se respecte câteva principii extrem de importante. Deci, care ar trebui să fie versiunea mobilă a site-ului? Cum să-l faci productiv, eficient și productiv?

versiunea mobilă a site-ului de pe computer
versiunea mobilă a site-ului de pe computer

Eliminați tot ce nu este necesar

Minimalismul este ceea ce dezvoltatorul versiunii mobile a site-ului ar trebui să încerce. Imaginează-ți cât de greu este să percepi informații care sunt pline de culori, butoane, bannere și pe care trebuie să le defilezi la nesfârșit în căutarea materialului potrivit. Designul mobil ar trebui să fie simplu și curat. Alegeți 2-3 culori pentru a împărți spațiul (de exemplu, de marcă). Mai bine dacă unul dintre ei este alb. Împărțiți spațiul unui mic ecran în zone ușor de înțeles și de citit. Tastele virtuale ar trebui să fie vizibile, astfel încât utilizatorul să știe clar unde să apese și să vadă - aici este produsul, aici este formularul de completare a datelor, aici sunt informațiile despre livrare și plată.

Toate opțiunile suplimentare care ar fi utile în versiunea desktop și ar face viața mai ușoară utilizatorului vor aduce doar dificultăți aici. Lăsați doar elementele cele mai importante. Animația, bannere publicitare, multimedia, cel mai probabil, nu vor decât să încetinească activitatea site-ului sau al aplicației și să distrage atenția de laprincipal.

Aliniere

Problema alinierii nu este mai puțin acută, deoarece, dacă este făcută incorect, utilizatorul va primi doar terminațiile cuvintelor importante. Alinierea la stânga și alinierea verticală este în general acceptată. Imaginați-vă că defilați prin fluxul de știri de pe telefon. O faci de sus în jos, nu la stânga sau la dreapta.

Unificare

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 necesită introducerea datelor în mai multe etape - un nume, apoi o adresă, unde în fiecare celulă individuală există o casă, stradă, apartament separat, etc. Pentru a nu forța utilizatorul să încerce să lovească multe celule mici, cereți-i să completeze doar 2 - numele și adresa.

Și deconectare

Uneori, dimpotrivă, este necesar să separați prea multe informații. De exemplu, în meniul derulant aveți o listă cu peste 80 de orașe în care se efectuează livrarea. Grupați-le după regiune, astfel încât utilizatorul să nu fie nevoit să defileze prin această listă uriașă. Când trece cu mouse-ul peste centrul sau regiunea regională, o altă listă de orașe va fi eliminată.

Listings

Apropo, despre liste. Există două dintre ele - fixate în ordine alfabetică sau altă ordine și cu substituție. Alegerea lor depinde de ceea ce va fi listat.

Fixed este util dacă utilizatorul știe exact ce caută. De exemplu, oraș, număr sau data. A doua opțiune este potrivită pentru nume lungi și complexe sau pentru cazurile în care există multe variații ale unuia și acelașiacelași nume și fiecare listă derulantă aduce utilizatorul cu un pas mai aproape de obiectiv. Opțiunea de înlocuire automată este folosită mai des atunci când un vizitator are nevoie de ajutor. De exemplu, un site de tricotat oferă să cumpere ace de tricotat. Utilizatorul introduce interogarea de căutare „Ace de tricotat metalice”, iar în sfatul instrumentului vede „Ace de tricotat 5 mm”, „Ace de tricotat 4,5 mm”, etc.

Completare automată

Acest articol este relevant în special pentru site-urile care vând ceva online și trebuie să completați formulare standard pentru plată, livrare etc. Dacă o persoană face o achiziție de pe un telefon, atunci cel mai probabil nu are timp pentru a ajunge la un computer, ceea ce înseamnă că procesul de cumpărare ar trebui să fie cât mai rapid și comod posibil.

Pentru aceasta, formularele pot 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 în aceeași regiune. Acestea pot fi modificate, dar dacă atingeți ținta, timpul utilizatorului va fi salvat.

Totul este citit, totul este vizualizat

Când proiectați versiunea mobilă a site-ului, amintiți-vă că telefoanele fiecăruia sunt diferite, la fel și vederea lor. Poate că site-ul dvs. va fi vizualizat de pe un ecran mic, deci fonturile ar trebui să fie simple și lizibile, butoanele să fie suficient de mari încât să poată fi apăsate fără a fi duse pe altă pagină, iar imaginile să se deschidă separat, mari, mai ales când vine la internet. magazin.

Câteva statistici

Vorbind despre adaptarea site-ului la dispozitivele mobile, nu se poate să nu recurgă la statistici pentru a înțelege cât de important este acest proces pentrupromovare online.

Numerele sunt după cum urmează. Astăzi, gadgeturile sunt folosite de 87% din populație, se pare, cu excepția celor mai mici copii și a unor persoane în vârstă. Economiștii prevăd că comerțul mobil va crește de 100 de ori în următorii 5 ani. În același timp, doar 21% dintre site-uri sunt adaptate să funcționeze cu dispozitive mobile. Aceasta înseamnă că doar o mică parte din traficul de internet și piața de comerț electronic este ocupată.

Gândiți-vă la aceste numere. Are sens să vă adaptați resursa? Desigur ca da. În plus, deși există atât de mult spațiu pe această piață, îți poți crea propriul segment în ea.

versiunea mobilă a site-ului gratuit
versiunea mobilă a site-ului gratuit

Unde aveți nevoie de o versiune mobilă

Folosirea versiunii mobile are sens pentru orice platformă care își propune să obțină un clasament în alt. La urma urmei, acesta este un impact direct asupra utilizatorului, creând condiții confortabile pentru ca acesta să rămână pe site-ul tău.

Nu poate exista fără versiunea mobilă:

  • portale de știri, deoarece majoritatea sunt vizualizate de pe telefon în drum spre serviciu sau spre școală;
  • rețele sociale - din același motiv, plus că există un factor de comunicare online, ceea ce înseamnă că ar trebui creat un chat convenabil și ușor de înțeles pentru asta;
  • referință, site-uri de navigare etc., unde merg oamenii când caută ceva;
  • magazine online - o oportunitate de a atrage clienți care nu pierd timpul la cumpărături, ci cumpără totul prin internetul mobil.

În loc de o concluzie

Astăzi, tehnologiile mobile sunt încreștere și dezvoltare activă, prin urmare, străduindu-se pentru leadership pe piață, orice companie trebuie să se asigure că resursa sa de Internet îndeplinește cerințele. Datorită cerințelor tot mai mari ale utilizatorului, site-urile trebuie să fie actualizate în mod constant și adaptate la diferite dispozitive. Este clar că, dacă o persoană este incomod să fie pe o anumită resursă, nu poate obține informații despre un produs sau preț acolo, să plaseze o comandă, să afle despre livrare, atunci va găsi site-ul unde toate acestea vor deveni posibile. Prin urmare, pentru a câștiga competiția, este important să aveți o resursă flexibilă, convenabilă, funcțională și interesantă.

Versiunea mobilă a site-ului web pentru Android sau Ios vă va ajuta să faceți acest lucru. Pentru a face acest lucru, trebuie să alegeți una dintre metodele de reproiectare de mai sus - un șablon adaptiv, crearea unui site nou pe un subdomeniu și redirecționarea către acesta, folosind șabloane gratuite sau crearea unei aplicații mobile care va facilita intrarea utilizatorului. și fii pe pagină.

Această abordare nu numai că va ajuta la menținerea loialității clienților existenți, ci va oferi și o oportunitate de a atrage noi vizitatori.

Recomandat: