Am organizat un sondaj pe Twitter cu ceva timp în urmă, iar rezultatele m-au surprins.

Nu numai că mă așteptam ca rezultatele să fie invers, Am crezut că primul mobil va obține cel puțin 80% din voturi.

Sondajul de pe Twitter arată că 61,5% dintre oameni scriu primul pe desktop, cu 2.212 voturi
Primul desktop câștigă cu mai mult de 61% din voturi!

În răspunsuri, unii oameni au explicat de ce scriu mai întâi pe desktop. Temele generale ale acestor motive:

  • Asta este tot ce a furnizat designerul
  • Așa a funcționat echipa lor
  • Au învățat CSS scriindu-l doar pe Desktop, deci acest lucru părea progresul natural
  • Clienții doresc să vadă versiunea desktop

Ce este primul mobil

Mobile-first este atunci când începem scriind CSS-ul nostru pentru dispozitive mobile și apoi folosiți interogări media pentru a adăuga stil pentru dimensiuni mai mari de ecran.

În general, asta înseamnă că interogările media utilizează un min-width. Folosim interogări media pentru a adăuga sau a suprascrie stiluri pentru un punct de întrerupere setat și mai mare, cum ar fi acest exemplu:

.sales-points {
  padding: 3em 0;
}

@media (min-width: 600px) {
  .sales-points {
    display: flex;
    justify-content: space-between;
  }
}

În acest exemplu, pentru ecrane mici, aplicăm pur și simplu niște umpluturi. Presupunând că această secțiune a site-ului conține copii, îi transformăm pe acei copii în coloane cu o lățime minimă de 600px.

Deci, atunci când este afișată 600px sau mai mare, vom avea coloane. În restul timpului, lucrurile se stivuiesc.

După cum probabil ați ghicit, o abordare bazată pe primul desktop este invers. CSS-ul nostru este scris pentru ecrane mari și apoi folosim interogări media pentru a face modificări pentru dimensiuni mai mici, în general folosind max-width interogări media.

De ce mobile-first este mai ușor

Site-urile web răspund în mod natural înainte de a scrie chiar o singură linie de CSS.

Dacă eliminați CSS din orice pagină de pe internet, chiar și un site creat pentru o dimensiune a ecranului foarte specifică în 2001, aveți acum un site web adaptabil, adaptat pentru mobil!

Stilurile de desktop tind să fie mai complexe

Când modelăm pentru desktop-primul, adăugăm lățimi, coloane și mișcăm lucrurile. Adăugăm complexitate. Facem acest lucru din motive întemeiate, deoarece avem mai multe bunuri imobiliare cu care să lucrăm.

Nu numai că vrem să profităm de acest lucru pentru a face lucrurile să pară mai interesante, dar dacă nu am face lucrurile mai complexe pe ecrane mai mari, lucrurile nu ar arăta foarte bine. Chiar dacă aveți un foarte site web simplu, nu doriți ca textul să se întindă de la o parte la alta.

Uită-te la cum ar arăta un articol de pe FCC News dacă textul ar merge dintr-o parte în alta.

1611959769 629 Cum sa adoptati abordarea corecta a proiectarii web responsive

Cu toții putem fi de acord că nu ați citi niciodată așa ceva, da? Trebuie să mișc capul puțin de la stânga la dreapta pentru a citi o linie completă pe ecran. Este teribil.

Aspectele mobile tind să fie foarte simple, ceea ce face foarte ușor să începeți de acolo

Pentru toți cei care mi-au răspuns spunând că clienții lor preferă să vadă versiunea desktop sau că primesc doar compeții desktop de către designerii lor, aș argumenta că este mai ușor să pornești mai întâi pe mobil.

Pentru multe site-uri, după ce ați configurat tipografia, sunteți 70% din drum. Lucruri ca:

  • font-family
  • font-size
  • font-weight
  • margin (pe elementele dvs. de text)

În continuare, puteți merge și face unele stiluri de bază foarte simple pentru elementele dvs. de aspect, cum ar fi:

  • padding
  • background-color
  • color
  • și poate câteva modificări cu margin

În acea etapă, lucrurile vor arăta destul de bine din perspectiva aspectului pe ecrane mici. Asta înseamnă că, fără a scrie o singură interogare media, aveți un site complet funcțional pe mobil.

Dacă te-ai simți deosebit de leneș sau ai un site foarte simplu, ai putea lipi un max-width pe containerul dvs. și fiți gata cu întregul lucru și nici măcar nu trebuie să vă faceți griji cu privire la o interogare media deloc!

De cele mai multe ori, totuși, vrem să îmbunătățim jocul la dimensiuni de ecran mai mari, și de aceea simt că mai întâi pe mobil este calea de urmat. Este progresia naturală în sus.

Comparând primul dispozitiv mobil cu cel desktop primul

Mai jos este un CodePen care are un foarte aspect simplu combinat folosind o abordare desktop-first și mobile-first.

Dacă deschideți stiloul și jucați cu dimensiunea ferestrei, veți vedea că rezultatul final este exact același.

Dar dacă rezultatul final care utilizează oricare dintre abordări este exact același, de ce contează ce abordare luați?

Primul desktop poate duce la cod redundant

În stiloul de mai sus, abordarea primul desktop utilizează următorul cod:

/*  desktop-first */
.desktop-first .sales-points {
  display: flex;
  justify-content: space-between;
}

.desktop-first .sales-point {
  width: 30%;
}

@media (max-width: 600px) {
  .desktop-first .sales-points {
    display: block;
  }

  .desktop-first .sales-point {
    width: 100%;
  }
}

După cum puteți vedea în CodePen, funcționează perfect, dar există o grămadă de cod aici care este redundantă atunci când folosim o abordare desktop-first.

Observați cum declarăm mai întâi a display: flex doar pentru a o readuce la valoarea implicită display: block în interogarea media. De asemenea, pentru coloanele noastre, modificăm width și apoi, din nou, reveniți la valoarea implicită mai târziu.

Abordarea pe primul dispozitiv mobil are un cod mult mai puțin redundant. Deoarece nu a existat un stil al textului sau culorilor de fundal, nu există niciun stil, cu excepția a ceea ce am nevoie în interogările mele media!

/*  mobile-first */
@media (min-width: 600px) {
  .mobile-first .sales-points {
    display: flex;
    justify-content: space-between;
  }

  .mobile-first .sales-point {
    width: 30%;
  }
}

Revenirea la valorile implicite ar trebui să fie un steag roșu

Îmi dau seama că unele lucruri sunt mai complexe decât aceasta (și vom ajunge acolo în curând), dar cea mai mare parte din ceea ce îmi fac griji aici este din perspectiva aspectului.

Pentru aspectul pe care l-am creat mai sus, nu am scris o linie de cod pentru abordarea pe primul dispozitiv mobil. M-am bazat doar pe modul în care documentul curgea de la început. În abordarea desktop-first, trebuie să le abordez pe amândouă, deoarece trebuie să resetez lucrurile la starea lor implicită.

Faptul că resetez lucruri de genul display și width la starea lor implicită, pentru mine, este un steag roșu. Înseamnă că scriu ceva care ar fi putut fi evitat. Asta înseamnă că îmi pierd timpul.

Unele lucruri nu sunt atât de simple

Unele componente arată complet diferite la diferite dimensiuni de ecran, cum ar fi meniurile de navigare. Alteori, ai stiluri pe mobil care trebuie suprascrise pentru desktop care ajung să fie redundante.

În videoclipul de mai jos, am dat peste acea problemă exactă în care trebuia să mut un element folosind position: absolute pentru ecrane mai mici. În loc să trebuiască să o poziționați, apoi resetați poziția înapoi la valoarea implicită la dimensiuni mai mari de ecran, părea o alegere logică pentru un max-width interogare media.

Dacă apăsați redarea videoclipului, ar trebui să înceapă chiar de unde abordez această problemă, dacă doriți să o vedeți în acțiune (17:41 doar în cazul în care nu începe la locul potrivit).

Deci, uneori, există excepții și nu este nimic în neregulă cu asta. Ideea mea aici nu este că ar trebui să fim roboți care fac lucrurile într-un fel. Există momente în care abordările diferite au sens, dar Îmi place să cred că are o regulă generală generală.

Așadar, data viitoare când proiectați un site, chiar dacă aveți doar o machetă pentru desktop, încercați mai întâi să porniți dispozitivul mobil. Nu mai durează deloc, iar pe termen lung pariez că vă va economisi o tonă de cod redundant. De asemenea, este destul de simplu!

  1. Începeți cu tipografia
  2. Adăugați culori și căptușeală
  3. Puneți orice aspect legat într-un min-width interogare media

Când ați terminat cu aspectul dvs., nu numai că veți fi eliminat acea versiune de desktop pe care clientul dvs. îl dorește să vadă, dar veți fi la 90% din drum acolo și în cea de pe telefonul mobil, fără să vă fi gândit chiar despre.

Vă luptați pentru a face lucrurile receptive?

Creșterea sensibilității site-urilor web este un subiect cu care mulți oameni îmi spun că se luptă. A ajuta, Am creat un curs gratuit numit Cucerirea aspectelor responsive. Este pus împreună ca o provocare de 21 de zile în care vom acoperi un subiect pe săptămână, fiecare adăugând la ceea ce am învățat deja.

Îmi dau seama că suntem cu toții ocupați cu copiii, familia, munca și multe altele, așa că fiecare zi va costa doar 10-30 de minute, cu 2-3 lecții pe săptămână. Între timp, veți avea mici provocări de finalizat, lucrând până la a vă simți confortabil realizând machete receptive.

Cursul se lansează pe 13 aprilie și, deoarece este un curs de 21 de zile, ușile se închid în acea zi. Faceți clic aici pentru a vă înscrie pentru a începe să cucerești machete receptive!

Dacă citiți acest lucru după fapt, puteți merge și vă înscrieți pentru următoarea lansare, dar nu se va deschide din nou timp de câteva luni.