Responsive Web Design – Cum să faci un site web să arate bine pe telefoane și tablete

În peisajul în evoluție rapidă al dispozitivelor conectate, designul web receptiv continuă să fie crucial în dezvoltarea web.

Nu cu mult timp în urmă, termenul „design web receptiv” era inexistent. Dar astăzi, majoritatea dintre noi a trebuit să o adopte într-o oarecare măsură.

Potrivit Statistica, începând din 2019, 61% din toate vizitele de căutare Google au loc pe un dispozitiv mobil. În septembrie 2020 Google își va schimba algoritmul de căutare pentru a acorda prioritate site-urilor mobile prietenoase.

În această postare voi acoperi următoarele:

• Ce este designul web receptiv?
• Metaeticheta vizualizării și ce face
• Tehnici eficiente utilizate în proiectarea web receptivă pentru a găzdui dispozitive mobile și tablete
• Instrumente care vă ajută să simulați și să monitorizați experiența utilizatorului de pe mobil și tabletă

Ce este Responsive Web Design? (RWD)

Proiectarea web receptivă este o abordare care se concentrează pe mediul utilizatorului unui site web. Mediul utilizatorului va depinde de dispozitivul conectat la internet.

Există multe caracteristici ale dispozitivului care oferă oportunități pentru focalizarea centrată pe utilizator. Unele dintre acestea includ:

• conexiune retea
• marimea ecranului
• tip de interacțiune (ecrane tactile, track pad-uri)
• rezoluție grafică.

Înainte ca designul web receptiv să fie popular, multe companii au gestionat un site web complet separat, care a primit trafic redirecționat pe baza agentului utilizator.

Dar în proiectarea web receptivă, serverul trimite întotdeauna același cod HTML către toate dispozitivele, iar CSS este utilizat pentru a modifica redarea paginii de pe dispozitiv.

Indiferent de cele două strategii de mai sus, primul pas în crearea unui site web pentru telefon sau tabletă este să vă asigurați că browserul cunoaște intenția. Aici intră în joc metaeticheta viewport.

Metaeticheta Viewport pentru identificarea unui site web mobil

Eticheta meta viewport instruiește browserul cum să regleze pagina la lățimea fiecărui dispozitiv.

Atunci când elementul meta viewport este absent, browserele mobile vor afișa pagini web cu setările implicite pentru desktop. Aceasta are ca rezultat o experiență aparent micșorată, care nu răspunde.

Mai jos este o implementare standard:

<meta name="viewport" content="width=device-width,initial-scale=1"/>

Acum că browserul știe ce se întâmplă, putem utiliza tehnici populare pentru a face site-ul nostru web să răspundă. ?

Interogări CSS Media pentru diferite dimensiuni și orientări ale ecranului

Dacă sunteți nou în designul web receptiv, interogările media sunt prima, cea mai importantă caracteristică CSS de învățat. Interogările media vă permit să stilizați elementele în funcție de lățimea ferestrei. O strategie CSS populară este de a scrie mai întâi stiluri mobile și de a construi deasupra acestora cu stiluri mai complexe, specifice pentru desktop.

Interogările media reprezintă o parte importantă a designului web receptiv utilizat în mod obișnuit pentru aspectele grilei, dimensiunile fonturilor, marginile și căptușeala care diferă între dimensiunea ecranului și orientare.

Mai jos este un exemplu de caz de utilizare obișnuit pentru primul stil mobil în care o coloană are o lățime de 100% pentru dispozitivele mai mici, dar în ferestrele mari este de 50%.

.column {
  width: 100%;
}

@media (min-width: 600px) {
  .column {
    width: 50%;
  }
}

Codul de mai sus este un exemplu simplu, dar ceea ce face de fapt este destul de interesant.

1. Atunci când considerăm mai întâi dispozitivul mobil, elementul „coloană” este setat să aibă o lățime de 100%;
2. Prin utilizarea unui min-width interogare media, definim reguli special pentru ferestrele cu o lățime minimă de 600px (vizualizări mai largi decât 600px). Deci, pentru vizualizări mai largi decât 600px, elementul nostru de coloană va avea o lățime care este de 50% din părintele său.

Deși interogările media sunt esențiale pentru proiectarea web receptivă, multe alte caracteristici CSS noi sunt, de asemenea, adoptate și acceptate pe scară largă în browsere. Flexbox este una dintre aceste caracteristici CSS noi, importante în ceea ce privește designul web receptiv.

Ce este Flexbox?

S-ar putea să vă întrebați – „ce face Flexbox”? Cea mai bună întrebare este – „ce nu poate face Flexbox”? Care este cel mai simplu mod de a centra vertical cu CSS? Flexbox. Cum creați un aspect de grilă receptiv? Flexbox. Cum putem realiza pacea globală? Flexbox.

Modulul Flexbox Layout (Cutie flexibilă) oferă o modalitate mai eficientă de a amplasa, alinia și distribui spațiul între articolele dintr-un container, chiar și atunci când dimensiunea lor este dinamică (de unde și cuvântul „flex”).

În exemplul de mai jos combinăm interogări media, așa cum s-a explicat mai sus, pentru a crea o grilă receptivă.

<style>
  main {
    background: #d9d7d5;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  div {
    background: #767775;
    flex-basis: 100%;
    height: 100px;
    margin-bottom: 0.5rem;
  }

  @media (min-width: 600px) {
    main {
      flex-wrap: nowrap;
    }

    div {
      flex-basis: 33%;
    }
  }
</style>
<main>
  <div></div>
  <div></div>
  <div></div>
</main>

Realizăm următoarele cu acest cod:

1. Stabiliți un aspect flexbox cu display: flex în a noastră main element container.
2. Stil pentru mobil mai întâi. Am setat main element pentru flex-wrap: wrap ceea ce permite elementelor copil să se înfășoare în aspectul nostru flexbox, așa cum este ilustrat mai jos în figura 1. Am setat flex-basis: 100% pe al nostru div elemente pentru a se asigura că cuprind 100% din lățimea părinte în aspectul flexbox (figura 1).
3. Stil pentru dispozitive mai mari, cum ar fi tablete și desktop. Utilizăm o interogare media similară cu exemplul nostru din secțiunea anterioară pentru a ne seta containerul main element pentru flex-wrap: nowrap. Acest lucru asigură faptul că elementele copil nu se înfășoară și că mențin o coloană într-un tip de rând de aspect. Prin setare div la flex-basis: 33% în cadrul interogării media – stabilim coloane care au 33% lățimea părintelui.
4. În acest exemplu, magia ar apărea pe dispozitive mai mari, cu regulile noastre combinate de interogare și flexbox. Pentru că am definit display: flex, și pentru că nu am anulat regula în interogarea media, avem un aspect flexbox pentru mobil, tabletă și desktop. Interogarea media flex-basis: 33% și moștenit display: flex regulile ne vor oferi un aspect flexbox recunoscut așa cum se vede în figura 2. În trecut, pentru a obține acest tip de coloană de aspect, ar trebui să facem niște greutăți serioase și să scriem încurcături de CSS.

Flexbox oferă o modalitate excelentă de a realiza planuri variate, fluide. În unele cazuri s-ar putea să nu avem o astfel de libertate în spațiul vertical. Este posibil să trebuiască să montăm un element la o înălțime fixă. În această situație, avem la dispoziție o altă tehnică – scroll orizontal.

Defilare orizontală cu defilare Overflow

S-ar putea să vină un moment în care să aveți conținut care revarsă fereastra de vizualizare fără un mod grațios de a o gestiona. Iată … defileu defilează la salvare. ?

Utilizările obișnuite pentru această tehnică includ meniuri și tabele care pot fi derulate. Mai jos este un exemplu de meniu derulant.

<style>
  menu {
    background: #d9d7d5;
    padding: 0.25rem;
    overflow-y: scroll;
    white-space: nowrap;
  }

  span {
    background: #767775;
    color: #ffffff;
    display: inline-block;
    margin: 0.25rem;
    padding: 0.5rem;
  }
</style>
<menu>
  <span>Responsive Web Design</span>
  <span>RWD</span>
  <span>Responsive menu</span>
  <span>Overflow scroll example</span>
  <span>This is a lot of content!</span>
  <span>Yes</span>
  <span>we</span>
  <span>have</span>
  <span>another</span>
  <span>item</span>
</menu>

Cum ai făcut asta !? Să facem o scufundare mai profundă.

• overflow-y: scroll este ingredientul cheie al acestei rețete. Specificându-l elementele copil vor revărsa axa orizontală cu comportament de derulare.
• Nu asa de repede! Deși s-ar putea să vă gândiți overflow-y ar fi suficient, trebuie să spunem și browserului să nu împacheteze elementele copil cu white-space: nowrap ?

Acum că avem câteva tehnici de layout RWD în mânecă, să aruncăm o privire asupra elementelor care prezintă provocări specifice naturii lor vizuale – imagini și videoclipuri.

Imagini receptive

Prin utilizarea atributelor moderne ale etichetei de imagine, putem găzdui o serie de dispozitive și rezoluții. Mai jos este un exemplu de imagine receptivă.

<style>
  img {
    max-width: 100%;
  }
</style>

<picture>
  <source type="image/webp" >
  <source type="image/png" >
  <img alt="my image" src="https://my-image.com/my-image-200.png" loading="lazy" width="100" height="100">
</picture>

Aceasta face multe lucruri. Să o descompunem:

1. Prin setare max-width: 100% imaginea se va ridica în sus sau în jos în funcție de lățimea containerului.
2. Prin utilizarea unei combinații de picture, source, și img etichete redăm de fapt o singură imagine și încărcăm doar cea mai potrivită imagine pe baza dispozitivului utilizatorului.
3. WebP este un format de imagine modern care oferă o compresie superioară pentru imaginile de pe web. Prin utilizarea source putem face referire la o imagine WebP pentru a o utiliza pentru browserele care o acceptă și la alta source eticheta pentru a face referire la o versiune PNG a imaginilor care nu acceptă WebP.
4. srcset este folosit pentru a spune browserului ce imagine să utilizeze pe baza rezoluției dispozitivului.
5. Noi stabilim încărcare leneșă nativă prin utilizarea loading="lazy" pereche atribut / valoare.

Video receptiv

Videoclipul receptiv este un alt subiect care a inspirat un număr mare de articole și documentație.

O strategie cheie pentru a stabili imagini receptive, video, iframe și alte elemente implică utilizarea raportului de aspect. Caseta cu raportul de aspect nu este o tehnică nouă și un instrument destul de util pentru a avea la îndemână ca dezvoltator web.

Acest articol oferă o demonstrație solidă despre cum să realizați videoclipuri cu lățime „fluidă”. Să aruncăm o privire la cod și să-l descompunem.

<style>
  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
  }

  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="https://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

În acest exemplu, avem un videoclip YouTube încorporat ca iframe și a div container cu videoWrapper clasă. Acest cod funcționează foarte mult … hai să intrăm.

• position: relative pe elementul container permite elementelor copil să utilizeze poziționarea absoluției în raport cu acesta.
• height: 0 combinat cu padding-bottom: 56.25% este ingredientul cheie aici care stabilește un comportament dinamic, impunând un 16:9 raportul de aspect.
• position: absolute, top: 0 și left: 0 setat pe iframe creează un comportament în care elementul se poziționează absolut relativ față de părintele său … lipindu-l în partea stângă sus.
• Și, în cele din urmă, lățimea și înălțimea de 100% fac din copil, element iframe 100% din părintele său. Parintele, .videoWrapper preia controlul deplin asupra stabilirii acestui aspect al raportului de aspect.

Știu … e mult. Putem face mai multe pentru ca videoclipurile și imaginile să arate cel mai bine pe telefoane și tablete. În plus, aș încuraja cercetarea pe aceste subiecte în mod independent.

Bine, acum că suntem stăpâni în designul web receptiv, cum putem testa ce am făcut? Din fericire, avem o serie de instrumente pentru a simula și monitoriza experiența utilizatorului pe o varietate de dispozitive.

Instrumente pentru simularea și monitorizarea site-urilor web responsive

Există o varietate de instrumente utile pentru a ne ajuta să creăm site-uri web cu design web receptiv. Mai jos sunt câteva care mi se par deosebit de utile.

Emulare Chrome DevTools Mobile

DevTools Chrome oferă emularea mobilă a unei game de tablete și dispozitive mobile. De asemenea, oferă o opțiune „receptivă” care vă permite să definiți o dimensiune personalizată a ferestrei.

Monitorizarea performanței site-ului mobil cu Foo

Lighthouse este un instrument open-source care oferă o modalitate de a analiza performanța site-ului web specifică unui dispozitiv.

Foo folosește Lighthouse în culise pentru a monitoriza performanța site-ului web și oferă feedback pentru analiză. Puteți configura monitorizarea atât pentru desktop, cât și pentru dispozitive mobile, pentru a obține feedback continuu despre cât de receptiv este site-ul dvs.

De exemplu, un raport Lighthouse va înregistra imagini încărcate incorect pe baza dispozitivului.

Concluzie

Proiectarea web receptivă va continua să evolueze rapid, dar dacă rămânem la curent cu tendințele actuale, putem oferi cea mai bună experiență utilizatorilor noștri. Sper că aceste instrumente și tehnici vă vor fi de ajutor!

Utilizatorii site-ului nostru web vor beneficia nu numai de un design versatil, ci și motoarele de căutare vor clasifica paginile noastre web mai sus.