cum să construiești un site mobil (în 4 pași simpli)
în octombrie 2016, numărul utilizatorilor de internet mobil și tabletă a depășit pentru prima dată numărul utilizatorilor de computere desktop. Această schimbare de paradigmă a servit ca un apel la acțiune pentru dezvoltatori pentru a începe să-și regândească întreaga industrie. De atunci, utilizarea mobilă a continuat să crească și să devină și mai răspândită și există multe soluții elegante de dezvoltare a site-urilor web folosite astăzi pentru a servi acești utilizatori.
aceste soluții sunt capabile să ofere utilizatorilor o experiență similară pe care ar obține-o pe un desktop fără a compromite conținutul sau funcția site-ului dvs. web. În timp ce construirea unui site care este capabil să creeze această experiență poate părea descurajantă, este mult mai ușor decât crezi.
este atât de simplu, de fapt, că am compilat un ghid ușor de urmat 4 pas pentru a crea un site web mobil pentru a obține ai început.
alegeți abordarea dvs. de Design Web
există mai multe soluții pe care le puteți utiliza pentru a crea un site web prietenos pentru Dispozitive mobile. În timp ce fiecare abordare de design web are proprii adepți care vă vor spune că este cea mai bună, ar trebui să determinați care se potrivește nevoilor dvs. pe baza propriei dvs. considerații a informațiilor.
Responsive Web Design
Responsive Web design (RWD) utilizează machete adaptabile, care sunt posibile prin utilizarea de mass-media bazate pe proporție, extensii, și grile backend. Aceasta înseamnă că, dacă o fereastră de browser este extinsă sau contractată, conținutul o va urma și se va adapta după caz. Rezultatul este un site web care arată similar atât pe desktop, cât și pe mobil.
această interfață de utilizator din plastic este adesea comparată cu apa. Puteți turna o ceașcă de apă într-un pahar, o oală sau o cană și volumul de apă va rămâne același, în ciuda schimbării vasului.
web design adaptiv
spre deosebire de RWD, web design adaptiv (AWD) nu se bazează pe un singur aspect în schimbare. În schimb, folosește machete distincte pentru diferite dispozitive și dimensiuni de ecran. Aceasta înseamnă că atunci când vă conectați la un site web, vi se oferă pagina care satisface cel mai bine nevoile dispozitivului pe care îl utilizați în prezent.
de exemplu, unii pot alege să creeze trei site-uri web: unul pentru smartphone-uri, unul pentru tablete și unul pentru desktop-uri. Acest lucru ar necesita trei modele diferite, care ar rămâne „în așteptare” până când vor fi solicitate de fiecare vizitator. În loc de un site web unic, un AWD acționează ca un gateway personalizat pentru toți utilizatorii.
abordarea pe care o alegeți pentru crearea site-ului dvs. mobil este doar începutul procesului de proiectare.
utilizați un constructor de site-uri web sau un CMS
odată ce determinați cum doriți ca site-ul dvs. să funcționeze pe diferite dispozitive, sunteți gata să începeți să îl construiți! Platforma pe care vă creați site-ul dvs. este esențială pentru utilizarea planului dvs. de proiectare mobilă. Pentru utilizatorii de bază, există două opțiuni de luat în considerare.
Website Builders
Website builders ia toate presupunerile din web design și vă permit să creați un site complet personalizabil și feature-bogat în doar câteva minute. Acestea realizează acest lucru, permițând utilizatorilor să aleagă o temă sau un șablon și pur și simplu să tragă și să plaseze funcții care le plac pe paginile lor web și să le elimine cu ușurință pe cele pe care nu le fac.
majoritatea constructorilor de site-uri web, inclusiv standardul de aur Wix, permit utilizatorilor să determine pur și simplu modul în care site-urile lor vor reacționa pe mobil. Platforma Wix se bazează în cea mai mare parte pe site-uri web adaptive, în timp ce alte servicii precum Weebly se bazează în cea mai mare parte pe un design receptiv. În funcție de tipul de abordare pe care ați imaginat-o pentru site-ul dvs., puteți decide să mergeți cu un constructor de site-uri web care vă poate satisface nevoile.
sisteme de gestionare a conținutului
un sistem de gestionare a conținutului (CMS) este cea mai bună alternativă la un constructor de site-uri dedicat. CMS-urile, cum ar fi WordPress, se bazează pe puțin mai multe cunoștințe despre computer și internet, dar pot oferi mai multe funcții decât constructorii de site-uri web. În plus, un CMS oferă atât modele RWD, cât și AWD.
Similar cu constructorii de site-uri web, un CMS poate profita de oricare dintre abordările de proiectare mobilă, integrându-le în multitudinea de teme disponibile utilizatorilor. Aceste teme pot fi la fel de bogate ca cele găsite pe constructorii de site-uri web, dar le servesc mai bine celor care nu le deranjează să-și murdărească puțin mâinile și să învețe un pic despre designul web.
dacă decideți să utilizați un CMS, puteți descărca pur și simplu o temă pregătită pentru mobil, fie gratuit, fie contra cost, și o puteți utiliza pentru a vă crea site-ul web. Majoritatea acestor teme vin cu suport complet și actualizări regulate, deci nu trebuie să vă faceți griji cu privire la întreținerea și gestionarea site-ului dvs. web.
proiectați un site web mobil
după ce ați stabilit pe ce platformă veți construi site-ul dvs., sunteți gata să proiectați și să creați site-ul dvs. web. Indiferent dacă creați un blog, un portofoliu, un site de afaceri sau chiar un magazin de comerț electronic, puteți face acest lucru folosind principiile standard necesare pentru orice design al site-ului. Odată ce ați finalizat designul, va trebui fie să testați pur și simplu site-ul dvs. pentru a vedea dacă acesta răspunde corect (RWD), fie să creați un alt design pentru mobil (AWD).
proiectarea unui site web mobil este aproape la fel de simplă ca proiectarea unui site desktop, dar există câteva lucruri pe care poate doriți să le țineți minte.
a. Utilizatorii de telefonie mobilă au, în general, lățime de bandă limitată
trebuie să rețineți întotdeauna că majoritatea vizitatorilor mobili folosesc rețele mobile care le limitează lățimea de bandă. Drept urmare, este crucial să păstrați site-ul dvs. mobil ușor și fără prea mult conținut care poate mânca la acei octeți cruciali.
b. Utilizatorii de telefonie mobilă Doresc rapid informații relevante
de multe ori utilizatorii de telefonie mobilă vizitează un site pentru a obține informații pertinente despre locațiile pe care le vizitează, cum ar fi orele de magazin sau numerele de telefon. Dacă aceste informații relevante nu sunt disponibile rapid și clar, aceasta poate duce la pierderea unui client. Asigurați-vă că site-ul dvs. mobil are legături rapide către informații de contact și alte date relevante.
c. dispozitivele Mobile sunt mai puțin puternice
computerele Desktop și laptop sunt construite cu plăci grafice și procesoare care sunt capabile să facă față unei sarcini grele. În timp ce dispozitivele mobile sunt extrem de puternice, ele nu sunt construite în același mod. În schimb, își pierd funcția pentru formă și, ca urmare, nu pot gestiona conținutul greu al procesorului la fel cum poate un computer.
dacă site-ul dvs. desktop necesită acest tip de dedicare a resurselor, poate doriți să vă gândiți de două ori la servirea unui public mobil același tip de site.
organizați conținutul
când creați un site mobil, este important să vă asigurați că utilizatorii dvs. pot accesa totul de pe site-ul desktop, păstrând în același timp capacitatea de a lucra pe un ecran mai mic. Există mai multe considerente pe care ar trebui să le țineți cont atunci când vă organizați conținutul.
a. Mobile First
mobile First este una dintre cele mai noi mișcări din lumea designului. Acesta stipulează că trebuie să proiectați mai întâi site-ul dvs. mobil înainte de a vă extinde în pagini pentru desktop-uri și tablete. Conținutul pe care îl creați pentru site-ul dvs. mobil poate fi încărcat și pe versiunea desktop.
prin urmare, această abordare este utilă pentru site-urile web difuzate dinamic și receptive, unde conținutul de pe versiunea dvs. mobilă este identic cu cel de pe site-ul dvs. desktop.
b. Mobile Second
dacă aveți deja un site desktop, organizarea conținutului ar putea fi un pic mai dificil, deși nu cu totul imposibil. Mai întâi, aflați elementele site-ului desktop pe care trebuie să le afișați pe versiunea mobilă.
colectați date de utilizator prin instrumentele de analiză standard pe care le utilizați și aflați:
- conținutul cel mai important pentru vizitatorii dvs.Ceea ce utilizatorii de telefonie mobilă tind să ignore.Calea pe care vizitatorii dvs. o iau de obicei.
folosiți informațiile pe care le adunați pentru a ști ce ar trebui și ce nu ar trebui să meargă pe site-ul mobil. Acest lucru vă va ajuta să vă curățați site-ul desktop. Apoi, cartografiați calea de conținut pe care o vor lua vizitatorii dvs.
după ce aveți o idee bună despre fluxul vizual al site-ului dvs., puteți stabili cu ușurință designul inițial pentru ecrane mobile și puteți intra direct în dezvoltarea site-ului mobil.
c. navigare
ecranele telefoanelor Mobile sunt mici. Aceasta înseamnă că ar trebui să minimalizați opțiunile de navigare mobilă. Luați în considerare utilizarea unei lupe sau a meniului cu trei linii (hamburger) navicon. După ce ați terminat, testați-vă site-ul web pe dispozitivele populare utilizate de până la 90% dintre vizitatorii dvs. mobili.
d. Design pentru atingere
deoarece este imposibil să faceți clic dreapta sau să treceți cu degetele pe un dispozitiv mobil, trebuie să spațiați link-uri pe site-ul dvs. mobil pentru a vă asigura că utilizatorii dvs. nu fac clic accidental pe link-uri greșite. Faceți acest lucru prin:
- oferind feedback ori de câte ori ecranul este atins.Utilizarea butoanelor pentru a defini unde utilizatorii pot și nu pot face clic.Redesign meniurile drop-down.Minimizarea introducerii textului.
și iată-l! Utilizați aceste informații data viitoare când trebuie să reproiectați complet site-ul desktop pentru vizualizare pe dispozitive mobile sau când creați un nou site mobil de la zero.