Crearea unui site cu lățime fixă ​​prietenos cu dispozitivele mobile

Ultima actualizare pe 22 mai 2020

Construire prietenos cu dispozitivele mobile. A fost o vreme când cea mai mare grijă a mea ca designer grafic și dezvoltator web era să-mi fac funcția CSS în Internet Explorer. Nu numai că IE este încă o durere în spate, dar acum trebuie să ne facem griji pentru numeroasele dimensiuni ale ecranului și sisteme de operare.

Va fi un moment în care mobilul va depăși navigarea pe desktop. Deoarece mobilul a devenit atât de important în viața noastră de zi cu zi, există momente când noi, designerii web, avem nevoie de rezultate imediate. Dacă sunteți unul dintre acei designeri sau programatori care pur și simplu nu au timp să transforme un site web static într-o temă WordPress, una care este prietenoasă cu dispozitivele mobile, există speranță pentru tine, prietene. Când vine vorba de vizualizarea întregului conținut pe dispozitivele mobile, puteți realiza acest lucru cu puțină optimizare CSS și HTML.

http://www.smartinsights.com/wp-content/uploads/2017/03/Mobile-share-of-online-time-percent-2017.png

La nivel global, dispozitivele mobile reprezintă mai mult de jumătate din minutele petrecute online, potrivit comScore

Site-urile web prietenoase sau receptive au capacitatea de a configura automat lățimea site-ului dvs. web, pentru a se potrivi dispozitivului spectatorului. Barele de defilare orizontale sunt un nu-nu în designul receptiv. Dacă vizualizați site-ul dvs. actual pe un dispozitiv mobil și vedeți o bară de defilare în partea de jos a telefonului sau a tabletei, este posibil ca site-ul dvs. (sau elementele site-ului) să nu fie compatibile cu dispozitivele mobile. Aceste bare de defilare orizontale ruinează experiența utilizatorului și, cel mai probabil, vor face clic pe butonul Înapoi. Oamenii sunt atât de obișnuiți să defileze pe verticală pe dispozitivele lor, încât atunci când utilizatorii sunt nevoiți să deruleze atât pe verticală, cât și pe orizontală pentru a vedea conținutul, devin incomozi și părăsesc site-ul.

Este all-inclusive din acest punct în continuare, site-urile web de design au clase CSS și ID-uri pentru orice și mă refer la toate.

De la antetul și div-urile meniului la etichetele <p> din subsol. Veți dori să ajustați dimensiunea tuturor acestor lucruri în funcție de lățimea ecranului. Mutarea, dimensionarea și scalarea sunt mult mai ușoare atunci când elementul poate fi vizat prin CSS.

Interogările media CSS sunt mai ușor de utilizat decât credeți.

Prima dată când mi-au fost aduse în atenție interogări media, am crezut că face parte dintr-un limbaj de programare și nu o formă de CSS. Am fost copleșit de un sentiment de ușurare, când am aflat ce este cu adevărat, și de atunci îl folosesc în TOATE proiectele mele web.

Interogările media sunt practic reguli CSS. Dacă ecranul dvs. are această lățime, atunci aplicați acest CSS numai acestor elemente. Aruncă o privire mai jos.

Deci, codul de mai sus spune pur și simplu că, dacă ecranul utilizatorului are o lățime între 100 și 699 pixeli, atunci schimbați culoarea de fundal a corpului în albastru. Acesta este locul în care etichetarea fiecărui div și interval de pe site-ul dvs. devine crucială. Manipularea acestor elemente pentru diferite lățimi de ecran devine mai ușoară cu etichetarea adecvată.

Css-tricks.com listează multe lățimi mobile pentru noi ca referință rapidă.

Exemplu de cod CSS

/* ———– HTC One ———– */
/* Portret și peisaj */

ecran @media

și (lățimea dispozitivului: 360 px)

și (înălțimea dispozitivului: 640px)

și (-webkit-device-pixel-raport: 3) {

/******CODUL TĂU AICI*****/

}

Există mult mai mult cod de interogare media pentru telefoanele Galaxy, HTC și Apple. În plus, sunt enumerate lățimile pentru lățimile tabletelor Ipad, Galaxy și Nexus. Tot ce trebuie să faci este să introduci acest cod în fișierul CSS al site-ului tău și să completezi parantezele CSS goale cu propriul tău cod! Terminat!

Site-ul dvs. este receptiv, dar încă nu se simte deloc corect

Este posibil să începeți să observați că unele elemente de pe site-ul dvs. ocupă destul de mult spațiu pe dispozitivele mobile, cum ar fi meniul principal. Pentru a-l face receptiv, cel mai probabil ați aplicat „float: none” pe etichetele <li> din meniu. Dar acum meniul ocupă o bucată uriașă de imobiliare din partea de sus a site-ului tău. Va trebui să convertiți meniul principal într-un meniu drop-down cu jQuery și interogări media CSS. Css-tricks.com explică și cum să faci asta.

De asemenea, puteți considera anumite elemente ca fiind nesemnificative, cele care pot fi găsite atât pe desktop, cât și pe dispozitive mobile. . Puteți scăpa de ele folosind CSS:

Aceste ajustări ale site-urilor au tendința de a face site-urile web foarte lungi, convingând utilizatorii să deruleze mult. Aici textul ancora (pentru utilizatorii văzători) sau linkurile de ignorare (pentru cititoarele de ecran) devin prietenul tău.

Textul ancora este un link pe care se poate face clic care permite utilizatorilor să sară la o anumită secțiune a paginii dvs. web, fără a fi nevoie să deruleze. Este o metodă la îndemână pentru site-urile prietenoase cu dispozitivele mobile. Codul de mai jos este un exemplu de legare a textului ancora.

<a href="#skip”>Faceți clic aici pentru a trece la Conținutul principal</a>

<a id="skip"></a>Conținutul principal începe aici

Skip Links sunt utilizate în principal pentru cititoarele de ecran și permit utilizatorilor cu dizabilități să ocolească sau să omite conținutul web repetitiv, cum ar fi navigarea prin meniu, și să ajungă direct la informațiile care îi interesează.

Dacă linkurile de ignorare au o regulă CSS de „display:none”, cititoarele de ecran, linkul devine „inaccesibil”. Deci, o modalitate de a evita acest lucru este să poziționați linkurile în afara ecranului, astfel încât cititorii de ecran să vă poată recunoaște în continuare linkurile și să le permită să sară peste noul dvs. site mobil.

Așadar, acesta este modalitatea rapidă și ușoară de a vă converti site-ul web cu lățime fixă ​​într-unul adaptat pentru dispozitive mobile. De asemenea, nu uitați să setați toate imaginile la „lățime: 100%; înălțime: auto.” Orice imagini, div-uri sau intervale care au o lățime setată în pixeli, se vor crea în bara de defilare orizontală pe dispozitivele mobile, așa că nu uitați să le setați fie la procente, fie la lățimi diferite pentru diferite dispozitive folosind interogări media.

Poate consuma puțin timp, dar crede-mă, odată ce îl înveți, îl vei folosi pentru totdeauna. Veți folosi această metodă pe fiecare site web pe care îl veți face vreodată, deoarece chiar și cele mai noi teme și șabloane responsive WordPress sau Joomla necesită puțină pregătire pentru a le face să arate așa cum doriți. Acest lucru este valabil mai ales, cu piața în continuă schimbare a dispozitivelor mobile.

-Izzak Hale, designer grafic senior