Cum să faci orice site WordPress receptiv mai întâi mobil

De data aceasta, vă vom prezenta mai întâi cum să faceți orice site WordPress receptiv mobil și de ce trebuie să faceți asta.

Odată cu creșterea masivă a dispozitivelor mobile și a altor dispozitive portabile, precum și a jocurilor, aplicațiilor, platformelor de social media etc., designul web responsive a devenit ceva de necesitate și nu de lux pentru ca site-ul dvs. să iasă în evidență printre altele.

Au trecut vremurile în care designul responsiv sau prietenos cu dispozitivele mobile era perceput ca o calitate premium care este relevantă exclusiv pentru site-urile web bine dezvoltate și scumpe.

Astăzi, depozitul WordPress de șabloane este bogat în astfel de teme: atât gratuite, cât și premium. Toate șabloanele create de noi la SKT Themes au, de asemenea, acele calități, permițând ca orice parte bazată pe el să fie afișată cu acuratețe pe diferite dispozitive mobile și platforme.

Deci, dacă designul responsiv sau prietenos cu dispozitivele mobile este utilizat pe scară largă și pare să funcționeze fără probleme, ce rost are să încerci să faci orice site WordPress receptiv mai întâi mobil și care sunt beneficiile acestuia?

Pentru a vă clarifica toate lucrurile, să discutăm anumite puncte unul după altul, astfel încât să puteți vedea diferențele dintre cele două abordări de design.

Ce este responsive web design?

Pe scurt, designul web responsive este o tehnică modernă de creare a unui site web potrivit să funcționeze la fel de bine pe fiecare dispozitiv și să se potrivească cu orice rezoluție a ecranului. Înseamnă că nu sunteți obligat să creați o versiune mobilă separată a site-ului dvs. pentru a satisface nevoile utilizatorilor dvs. de mobil din mers sau din mișcare. Designul receptiv al site-ului dvs. se va ajusta automat și se va adapta oricărui dispozitiv mobil sau dispozitiv pentru aspectul perfect al site-ului dvs.
Având în vedere că milioane de oameni de pe tot globul folosesc internetul mobil și petrec ore întregi pe acesta, este o necesitate a avea un site web receptiv și compatibil cu mai multe dispozitive mobile.

Ce este primul design mobil?

Practic, mobile first este o abordare folosită în designul web modern și presupune proiectarea pentru ecranele mobile în primul rând, iar apoi trecerea la dezvoltarea altor ecrane, browsere și rezoluții.

Pentru a înțelege diferența dintre abordările de design responsive și mobile first, să menționăm că designul responsive începe cu tot felul de complexități necesare pentru o performanță desktop impecabilă și le elimină ulterior pentru dispozitive mobile și dispozitive mai mici.

În ceea ce privește designul mobil primul, sugerează că designul receptiv pentru dispozitive mobile și dispozitive mai mici ar trebui făcut mai întâi.

De ce trebuie să faceți mai întâi orice site WordPress receptiv pentru mobil?

Vă întrebați de ce trebuie să începeți proiectul cu considerente mobile sau să faceți mai întâi orice site WordPress receptiv pe mobil? Să aruncăm o privire la statisticile pentru consumul mobil.

Dacă nu ghiciți pe departe, căutați pe Internet procentele exacte și rapoartele care demonstrează prevalența imbatabilă a utilizatorilor de internet mobil față de cei de desktop.

În prezent, oamenii petrec din ce în ce mai mult timp navigând pe internet pentru informațiile necesare de la dispozitive mobile și dispozitive. Și, firește, această trecere de la utilizarea desktop-ului la cea mobilă va continua în viitorul apropiat.

Astfel, nu doriți să dezamăgiți majoritatea oaspeților site-ului dvs. și să faceți ca minoritatea utilizatorilor de desktop să se simtă confortabil pe site-ul dvs., nu?

În plus, odată ce adoptați practica abordării mobile, veți vedea că vă veți murdari mai puțin în codificare și veți putea crea design-uri web mai precise și mai compacte, care vor fi mai ușor de extins împreună.

Asigurarea potrivirii perfecte a pixelilor cu ecranele mai mici și apoi îngrijirea celor desktop poate fi o modalitate finală de a îmbunătăți performanța mobilă a site-ului dvs. și de a îmbunătăți mediul de utilizare pentru clienții dvs. înarmați cu dispozitive mobile.

Cum fac ca orice site WordPress receptiv să fie mai întâi mobil?

Dacă site-ul dvs. este deja receptiv și doriți să îl convertiți mai întâi în mobil, trebuie să urmați 2 pași de bază. În primul rând, trebuie să scrieți și să creați un stil implicit pentru ecranele mici.

Apoi, trebuie să adăugați o interogare media în timp ce utilizați lățime minimă și să copiați stilul implicit al șablonului dvs. receptiv.

Pe baza aspectului site-ului dvs., stilul aspectului poate fi ceva de acest fel:

antet,
.principal,
subsol {
  latime: 96%;
  lățime maximă: 1000px;
  marja: 10px automat;
  clar: ambele;
}
.conținut {
  latime: 60%;
  marja-dreapta: 5%;
  plutește la stânga;
}
.sidebar {
  latime: 35%;
  plutire: dreapta;
}

Și, deoarece site-ul dvs. este receptiv, acest stil ar trebui să includă și interogări media pentru ecrane mai mici:

Ecran @media și (lățime maximă: 500px) {

  antet,
  .principal,
  subsol,
  .conţinut,
  .sidebar {
    latime: 98%;
  }
  
  .conţinut,
  .sidebar {
    plutitor: nici unul;
    marja: 0 auto;
  }

}

După cum vedeți, există două blocuri: unul pentru desktop și unul pentru mobil.
Pentru a-l înlocui mai întâi cu mobil, ștergeți ambele și începeți cu un aspect definitoriu pentru ecranele mici:

antet,
.principal,
subsol {
  marjă: 10px 1%;
}

Acum, este timpul să creați interogarea media folosind min-width.

Ecran @media și (lățime minimă: 500px) {

  antet,
  .principal,
  subsol {
    latime: 96%;
    lățime maximă: 1000px;
    marja: 10px automat;
    clar: ambele;
  }
 
  .conținut {
    latime: 60%;
    marja-dreapta: 5%;
    plutește la stânga;
  }
  .sidebar {
    latime: 35%;
    plutire: dreapta;
  }
  
}

După cum puteți vedea, este practic același stil pe care l-ați avut în foaia de stil receptivă a site-ului dvs. Cu toate acestea, această rescriere și rearanjare în stil au de-a face cu o performanță mobilă mai bună, deoarece dispozitivele mai mici acum o vor neglija în loc să o parcurgă și apoi să o treacă cu elementele care au fost adăugate la interogarea media receptivă.

Teoretic, am terminat cu trecerea la designul mobil primul. În cazuri specifice, este posibil să aveți nevoie de ajustări și configurații suplimentare pentru ca lucrurile să funcționeze fără probleme.

Cu toate acestea, întregul proces de a face site-ul WordPress mai întâi mobil nu va fi un drum impracticabil pentru tine, chiar dacă nu ești un designer sau dezvoltator web experimentat.