Proiectarea paginilor web pentru dispozitive mobile

click fraud protection

Sunt șanse să fi văzut cum iPhone-ul poate răsfoi și extinde paginile web. Vă poate arăta întreaga pagină web dintr-o privire sau poate mări pentru a face textul care vă interesează să fie lizibil. Într-un sens, din moment ce iPhone folosește Safari, designerii de web nu ar trebui să facă nimic special pentru a crea o pagină web care să funcționeze pe iPhone. Dar chiar vrei ca pagina ta să funcționeze - sau să iasă în evidență și să strălucească?

Cand tu construiește o pagină web, trebuie să vă gândiți la cine îl va vizualiza și cum îl vor vedea. Unele dintre cele mai bune site-uri țin cont de tipul de dispozitiv pe care pagina este vizualizată, inclusiv rezoluția, opțiunile de culoare și funcțiile disponibile. Nu se bazează doar pe dispozitiv pentru a-și da seama.

Instrucțiuni generale pentru construirea unui site pentru dispozitive mobile

  • Testați pe cât mai multe dispozitive. Primul lucru pe care trebuie să-l faceți este să vă vizualizați site-ul pe un iPhone și la fel de multe dispozitive mobile
    instagram viewer
    sau emulatoare după cum puteți. Deși puteți utiliza emulatoare pentru toate testele, ele nu vă dau aceeași senzație ca și încercarea de a naviga printr-un site web pe micul ecran. Ar trebui să testați pe dispozitive reale cât mai mult posibil.
  • Faceți ca paginile dvs. să se degradeze cu grație. Puteți scrie paginile pentru Activat cu bliț, browsere cu ecran lat, dar asigurați-vă că informațiile critice sunt vizibile chiar și pe un monitor mic care nu poate gestiona nicio caracteristică specială (cum ar fi cookie-uri, Ajax, Flash, JavaScript etc.). Orice lucru dincolo de XHTML Basic va fi dincolo de unele telefoane mobile. În timp ce majoritatea smartphone-urilor pot gestiona toate aceste lucruri, alte dispozitive mobile nu pot.
  • Construiți o pagină specifică pentru wireless - și faceți-o mai ușor de găsit. Dacă aveți de gând să creați o pagină specifică pentru clienții dvs. de telefonie mobilă și wireless - puneți-o la dispoziție. O modalitate excelentă este de a pune linkul către pagina fără fir chiar în partea de sus a documentului și apoi să ascundeți linkul de la dispozitive care nu sunt portabile folosind tipul de suport portabil. La urma urmei, majoritatea oamenilor vin la pagina dvs. de pornire, chiar și pe telefoanele mobile - și dacă linkul către pagina dvs. fără fir nu este acolo, vor pleca dacă pagina este prea greu de utilizat.

Aspect pagină web pentru smartphone-uri

Primul lucru pe care ar trebui să-l amintiți atunci când scrieți pagini pentru piața smartphone-urilor este că nu trebuie să faceți modificări dacă nu doriți. Lucrul grozav despre majoritatea smartphone-urilor disponibile este că utilizează browsere Webkit (Safari pe iOS și Chrome pe Android) pentru afișează pagini web, deci dacă pagina ta arată în Safari sau Chrome, va arăta bine pe majoritatea smartphone-urilor (doar mult mai mica). Dar există lucruri pe care le puteți face pentru a face experiența de navigare mai plăcută:

  • Amintiți-vă că ecranul este mic. Smartphone-urile vor condensa toate acele coloane în fereastra mică, iar acest lucru le poate face foarte greu de citit fără a mări. Majoritatea utilizatorilor sunt obișnuiți cu zoom-ul, dar poate obosi. O coloană lungă de text este mai ușor de citit.
  • Împărțiți paginile în bucăți mai mici. Poate fi dificil să citești segmente lungi de text pe un telefon mobil, așa că plasarea lor pe mai multe pagini le face mai ușor de citit.

Link-uri și navigare pe iPhone

  • Cu cât sunt mai scurte adresele URL, cu atât mai bine. Dacă ați încercat vreodată să introduceți o adresă URL pe un telefon mobil, veți ști că este o problemă (cu excepția, probabil, a adolescenților care sunt obișnuiți să trimită o mulțime de mesaje text). Chiar și pe iPhone, este obositor să introduci adrese URL lungi. Ține-le scurte.
  • Dar textul legăturii lungi este mai ușor de atins. Atunci când pe o pagină în care mai multe cuvinte separate sunt legate de articole diferite, unul lângă celălalt, poate fi foarte dificil să-l atingi pe cel corect fără a mări. Mulți oameni vor renunța și vor merge în altă parte. Linkurile cu 3 până la 5 cuvinte în ele sunt mai ușor de făcut clic pe telefon decât linkurile cu 1 cuvânt.
  • Nu puneți navigarea în partea de sus a ecranului. Nu este nimic mai enervant decât să parcurgeți ecranele și ecranele linkurilor pentru a găsi informațiile dorite. Dacă v-ați uitat la paginile web concepute pentru telefoanele mobile, veți vedea că primele lucruri care apar sunt conținutul și titlul. Apoi, sub aceasta se află navigarea.
  • Nu vă fie teamă să vă ascundeți navigarea.Ascunderea legăturilor de navigare folosind CSS sau JavaScript și făcându-le să apară numai atunci când utilizatorul solicită acest lucru, este o modalitate de a face pagina mai ușoară pentru utilizatorii de smartphone-uri.

Sfaturi pentru imagini pe smartphone-uri

  • Imaginile trebuie să fie mici. Da, Android și iPhone pot mări și micșora imaginile, dar cu cât sunt mai mici, atât în ​​dimensiuni, cât și în timp de descărcare, cu atât vor fi mai fericiți clienții dvs. wireless. Optimizarea imaginilor este întotdeauna o idee bună, dar pentru paginile de telefon mobil este esențială.
  • Imaginile trebuie să se descarce rapid. Imaginile ocupă mult spațiu pe paginile web atunci când le vizualizați de pe un dispozitiv mobil. Și, deși sunt adesea foarte drăguțe și fac ca paginile să arate mai bine atunci când sunt vizualizate pe un browser web cu ecran complet, deseori le împiedică pe un dispozitiv mobil. În plus, atunci când un utilizator de smartphone este în rețeaua celulară, ultimul lucru pentru care doresc să plătească este descărcarea unei grămezi de imagini uriașe sau pictograme de navigare.
  • Nu puneți imagini mari în partea de sus a paginii. La fel ca în cazul navigației, poate fi foarte obositor să aștepți ca o imagine care ocupă între 3 și 4 ecran să se încarce chiar în partea de sus a paginii. Și acest lucru este extrem de comun pe paginile web. Singura excepție este că cititorul știe că va obține o imagine atunci când face clic, să zicem într-o galerie foto.

Ce trebuie evitat atunci când proiectați pentru mobil

Există mai multe lucruri pe care ar trebui să le evitați atunci când creați o pagină compatibilă cu dispozitivele mobile. După cum sa menționat mai sus, dacă doriți cu adevărat să le aveți pe pagina dvs., puteți, dar asigurați-vă că site-ul funcționează fără ele.

  • Flash: Majoritatea telefoanelor mobile nu acceptă Flash, deci nu este o idee bună să îl includeți în paginile dvs. fără fir.
  • Cookie-uri: Multe telefoane mobile nu au suport pentru cookie-uri. iPhone-urile au suport pentru cookie-uri.
  • Rame: Chiar dacă browserul le acceptă, gândiți-vă la dimensiunile ecranului. Cadrele pur și simplu nu funcționează pe dispozitivele mobile - sunt foarte greu sau imposibil de citit.
  • Mese: Nu utilizați tabele pentru aspect pe o pagină mobilă. Și încercați să evitați tabelele în general. Nu sunt acceptate pe fiecare telefon mobil (deși iPhone-urile și alte smartphone-uri le acceptă) și puteți ajunge la rezultate ciudate.
  • Tabelele imbricate: Dacă trebuie să utilizați un tabel, asigurați-vă că nu îl cuibăriți în alt tabel. Acestea sunt greu de acceptat pentru browserele desktop și, în cel mai bun caz, fac ca pagina să se încarce mai încet.
  • Măsuri absoluteCu alte cuvinte, nu definiți dimensiunile obiectelor în dimensiuni absolute (cum ar fi pixeli, milimetri sau inci). Dacă definiți ceva ca 100px lățime, pe un dispozitiv mobil care ar putea avea jumătate din ecran și pe altul ar putea avea o lățime de două ori mai mare. Dimensiunile relative (cum ar fi ems și procente) funcționează cel mai bine.
  • Fonturi: Nu presupuneți că oricare dintre fonturi sunteți obișnuiți să aveți acces la va fi disponibil pe telefoanele mobile.
instagram story viewer