De ce trebuie să începi să exersezi dezvoltarea în primul rând pe mobil

Dacă ați încercat să codificați un site web receptiv, ați întâlnit această problemă: schimbați o proprietate CSS mică și simplă și modifică aspectul pe diferite dimensiuni de ecran.

Acest lucru vă obligă să verificați și să verificați din nou dacă cea mai nouă valoare a marjei nu a distrus site-ul pentru tablete sau telefoane. Desigur, puteți rezolva cu ușurință această problemă cu modificări specifice pentru diferite dimensiuni de ecran. Dar pe parcursul unui proiect, fișierele CSS devin umplute cu excepții de la probleme. Apoi există excepții pentru excepții, care mai târziu au o excepție pentru excepția excepției.

Se complică repede și ajungi să te lupți cu propriul tău cod, să consumi o mulțime de ore de proiect și să-ți pierzi încet mințile.

Dar nu te teme! Mobile first development este aici pentru a vă salva de dureri de cap, excepții ale excepțiilor și încărcări lente ale paginilor.

Ce se întâmplă cu desktop-first dev

Dezvoltarea inițială pentru versiunea desktop a unui site web responsive contravine fluxului natural al unui document CSS. Fișierele CSS se citesc liniar de sus în jos, astfel încât fiecare proprietate CSS este suprascrisă de orice stil nou aplicat mai jos în document.

Prin dezvoltarea pentru ecrane mari și apoi adăugarea stilurilor mobile mai jos în documentul CSS, apar două probleme:

1. Orice modificare făcută în stilul desktopului (mai sus în document) va schimba modul în care apare site-ul mobil dacă noul stil nu este suprascris în mod explicit pentru site-ul mobil. Crearea de linii suplimentare de CSS frivole consumă o mulțime de ore de proiect și contravine principiului codului DRY.
2. Dispozitivele mobile încep să încarce o pagină prin redarea întregului stil de desktop. Odată ce versiunea de desktop voluminoasă a terminat de redat, se aplică stilul mobil. Acest lucru încarcă resurse suplimentare, ceea ce înseamnă că dispozitivele mobile durează și mai mult să livreze o pagină complet încărcată.

Aici intervine dezvoltarea pe primul loc pentru mobil pentru a salva situația. Această metodă încurajează ordinea CSS corectă (de la mobil la desktop de sus în jos), asigurându-se că un dispozitiv aplică informațiile de care are nevoie doar atunci când are nevoie.

Să aruncăm o privire la câteva soluții la aceste probleme.

Cum arată redarea dispozitivului mobil

Imaginile sunt cu ușurință cele mai mari contribuții la dimensiunea unui site web, iar descărcarea durează o veșnicie dacă un dispozitiv nu este conectat la wifi. Eliminarea imaginilor suplimentare din stilul mobil este cel mai bun lucru pe care îl puteți face pentru a îmbunătăți viteza unui site.

Trecerea mai întâi pe mobil înseamnă difuzarea doar a câtorva imagini mici pe dispozitivele mobile. În exemplul de mai jos, am creat același document CSS implementat atât cu metode desktop, cât și pe dispozitive mobile.

Dacă utilizați metoda desktop-first, dispozitivele mobile se vor afișa în următoarea ordine:

1. Citiți primul stil.
2. Descărcați imaginea mare (care va fi înlocuită în curând).
3. Redați elementul.
4. Citiți stilul mobil.
5. Descărcați imaginea mică (înlocuind-o pe cea mare).
6. Redați elementul.

Cu toate acestea, dacă se folosește metoda de pe mobil primul, dispozitivul redă în această ordine:

1. Citiți primul stil.
2. Descărcați imaginea mică.
3. Omite stilul doar pentru desktop (din moment ce nu se aplică).
4. Redați elementul o dată.

Nu numai că site-ul are mai puțini pași de parcurs înainte de a difuza o pagină finalizată în browser, dar elimină și apelurile suplimentare către imagini frivole care nu sunt folosite!

Rețineți că interogările media se vor schimba de la lățimea maximă la lățimea minimă odată cu dezvoltarea pe mobil. Interogările cu lățimea maximă se vor aplica tuturor dispozitivelor mai mici de 1000 px, în timp ce interogările cu lățime minimă se vor aplica dispozitivelor mai mari de 1000 px.

Schimbarea la lățimea minimă creează o barieră care împiedică noul stil pe care îl scriem pentru dispozitivele mai mari să afecteze vreodată felul în care arată site-ul pe dispozitivele mai mici. Acest lucru crește viteza de încărcare a site-urilor dvs. web responsive, asigurându-vă în același timp că orice modificați în interogarea media numai pentru desktop nu va afecta aspectul mobil. Este un câștig-câștig!

Nu te mai lupta cu tine

Să presupunem că lucrăm la un proiect care are fișierul CSS comentat în trei părți principale: desktop, tabletă și mobil.

Din păcate, am urmat metoda desktop-first, iar site-ul se încarcă lent pentru telefoane. Am încercat să micșorăm imaginile, să adăugăm cache în browser și chiar să reducem codul HTML (brut). Însă site-ul încă se bucură de vizitatori pentru prima dată și trebuie remediat.

Deoarece am construit site-ul nostru cu metoda desktop-first, CSS-ul nostru ar arăta astfel pentru elementul nostru .header:

Scopul nostru este să reducem cantitatea de stil care este trimisă pe mobil. Pentru început, trebuie să facem un inventar a ceea ce este aplicat unui element, luând notă când ne suprascriem propriile stiluri.

În primul rând, să trecem la o abordare bazată pe mobil. Vom face mobilul nostru implicit, care nu este interogat media (notă: nu faceți acest lucru în producție, acesta va distruge site-ul și va face clienții morocănos).

Să aruncăm o privire din nou la imaginile noastre, deoarece acestea au cel mai mare impact asupra vitezei site-ului nostru.

Deoarece nu încărcăm un fundal pe dispozitivele mobile, putem șterge acea proprietate. Vom adăuga imaginile pentru dispozitive mai mari mai târziu, când este cu adevărat necesar. Același lucru este valabil și pentru proprietatea cu marginea de jos, lăsându-ne doar cu două proprietăți care de fapt trebuie aplicate pentru mobil!

Trecând la secțiunea tabletă, va trebui să mutăm atributele de fundal și umplutura din stilul desktopului în stilul tabletei, deoarece tableta este următoarea secțiune care va fi redată.

Amintiți-vă, scopul nostru este să suprascriem o proprietate numai dacă se modifică și să adăugăm noi proprietăți numai atunci când trebuie să se producă modificarea, așa cum se arată în imaginea de mai jos:

Mult mai bine! Examinând modul în care un dispozitiv mobil ar reda CSS-ul nostru proaspăt optimizat, devine rapid evident cât de mult impactul dezvoltării mobile-first are asupra dispozitivelor mai mici în comparație cu metoda desktop-first.

Lucrează mai inteligent, nu mai greu

Dezvoltarea desktop-first creează mai multe probleme decât rezolvă. „Trebuierea la o metodă de dezvoltare pe mobil, vă permite să lucrați inteligent, nu din greu. ”

Când dezvoltați site-uri receptive, rețineți că, în mod implicit, se va afișa tot ceea ce nu se află în interiorul unei interogări media. Făcând ca stilul implicit (neinterogat media) să se adreseze dispozitivelor mobile, permitem ca cea mai mică cantitate de informații posibilă să fie trimisă către dispozitivul care este cel mai ușor afectat de dimensiunea site-urilor web.

Desktopul și tabletele sunt conectate la o conexiune rapidă la internet 99,999 la sută din timp, permițând transmiterea unor cantități mari de informații la viteze mari. Telefoanele sunt cel mai probabil să încarce informații prin conexiuni lente la internet. Adaptarea foilor de stil pentru a găzdui cele mai sensibile dispozitive vă permite să oferiți clienților cel mai bun site web posibil.