Reszponzív webdesign - Hogyan készítsünk egy weboldalt jól a telefonokról és a táblagépekről

A csatlakoztatott eszközök gyorsan fejlődő táján az adaptív webdesign továbbra is döntő fontosságú a webfejlesztésben.

Nem sokkal ezelőtt nem létezett az "adaptív webdesign" kifejezés. De manapság a legtöbbünknek bizonyos mértékig el kellett fogadnia.

A Statistica adatai szerint 2019-től az összes Google keresési látogatás 61% -a mobil eszközön történik. 2020 szeptemberében a Google megváltoztatja keresési algoritmusát, hogy kiemelten kezelje a mobilbarát webhelyeket.

Ebben a bejegyzésben a következőkre térek ki:

  • Mi az adaptív webdesign?
  • A nézetablak metacímke és mit csinál
  • Hatékony technikák, amelyeket az adaptív webtervezés során használnak a mobil és táblagépek befogadására
  • Eszközök a mobil és táblagép felhasználói élményének szimulálásához és monitorozásához

Mi az adaptív webdesign? (RWD)

Az adaptív webdesign olyan megközelítés, amely a weboldal felhasználójának környezetére összpontosít. A felhasználó környezete attól függ, hogy melyik eszközt csatlakoztatta az internethez.

Számos eszközjellemző kínál lehetőséget a felhasználó-központú fókuszálásra. Ezek egy része a következőket tartalmazza:

  • internetkapcsolat
  • kijelzo méret
  • interakció típusa (érintőképernyők, nyomópadok)
  • grafikus felbontás.

Mielőtt az adaptív webdesign népszerű lett volna, sok vállalat teljesen külön weboldalt kezelt, amely a felhasználói ügynök alapján továbbított forgalmat fogadott.

De az adaptív web tervezés során a szerver mindig ugyanazt a HTML kódot küldi az összes eszközre, és a CSS-t használják az eszköz megjelenítésének megváltoztatására.

A fenti két stratégiától függetlenül a telefonhoz vagy táblagéphez való weboldal létrehozásának első lépése annak biztosítása, hogy a böngésző tudja a szándékot. Itt jelenik meg a nézetablak metacímke.

A Viewport metacímke a mobil webhely azonosításához

A meta nézetablak címke utasítja a böngészőt, hogyan állítsa be az oldalt az egyes eszközök szélességéhez.

Ha a meta nézetablak eleme nincs, a mobil böngészők az alapértelmezett asztali beállításokkal rendelkező weboldalakat jelenítik meg. Ennek eredményeként látszólag kicsinyített, reagálatlan élményt kapunk.

Az alábbiakban bemutatjuk a szokásos megvalósítást:

Most, hogy a böngésző tudja, mi folyik itt, népszerű technikákat használhatunk arra, hogy weboldalunkat rugalmasabbá tegyük. ?

CSS média lekérdezések különböző képernyőméretekhez és tájoláshoz

Ha még nem ismeri az adaptív webtervezést, akkor a média lekérdezések az első, legfontosabb CSS-funkciók, amelyeket meg kell tanulnia. A média lekérdezések lehetővé teszik az elemek stílusát a nézetablak szélessége alapján. Az egyik legnépszerűbb CSS stratégia az, hogy először mobil stílusokat írunk, és azok tetejére építünk összetettebb, asztali stílusokkal.

A média lekérdezések fontos részét képezik a reszponzív webdesignnak, amelyet általában a rács elrendezéséhez, a betűméretekhez, margókhoz és kitöltésekhez használnak, amelyek eltérnek a képernyő méretétől és tájolásától.

Az alábbiakban bemutatunk egy példát a mobil első stílus gyakori használatára, amelyben az oszlop 100% szélességű kisebb eszközöknél, de nagyobb nézetablakokban 50%.

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

A fenti kód egyszerű példa, de hogy valójában mit csinál, az nagyon érdekes.

  1. Először a mobil figyelembevételével az "oszlop" elem 100% szélességűre van beállítva;
  2. min-widthMédia lekérdezés használatával kifejezetten a nézetablakokra vonatkozó szabályokat határozunk meg, amelyek minimális szélessége 600px(szélesebb a nézetablakoknál 600px). Tehát, a szélesebb nézetablakok 600pxesetén az oszlopelem szélessége a szülőjének 50% -a lesz.

Noha a média lekérdezések elengedhetetlenek az adaptív webtervezéshez, számos más új CSS-szolgáltatás is széles körben elfogadott és támogatott a böngészőkben. A Flexbox egyike ezeknek az új, fontos CSS-funkcióknak az érzékeny web-tervezés szempontjából.

Mi a Flexbox?

Lehet, hogy kíváncsi vagy - "mit csinál a Flexbox"? A jobb kérdés: "mit nem tehet a Flexbox?" Mi a legegyszerűbb módja a függőleges középre állításnak a CSS segítségével? Flexbox. Hogyan készíthet reszponzív rács-elrendezést? Flexbox. Hogyan érhetjük el a globális békét? Flexbox.

A Flexbox Layout (Flexible Box) modul hatékonyabb módot kínál a tárolóban lévő elemek elrendezésére, igazítására és elosztására, még akkor is, ha méretük dinamikus (ezért a „flex” szó).

Az alábbi példában a fentiekben ismertetett módon kombináljuk a média lekérdezéseket egy reszponzív rács létrehozásához.

 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%; } } 

Ezzel a kóddal a következőket hajtjuk végre:

  1. Hozzon létre egy flexbox elrendezést display: flexa maintároló elemünkben .
  2. Először a mobil stílusa. Beállítottuk azt az mainelemet, flex-wrap: wrapamely lehetővé teszi a gyermek elemek számára, hogy beburkolhassanak a flexbox elrendezésünkbe, amint az az 1. ábrán látható. Beállítottuk flex-basis: 100%az divelemeinket, hogy biztosítsuk, hogy a flexbox elrendezésben a szülő szélességének 100% -át lefedjék (1. ábra).
  3. Stílus nagyobb eszközökhöz, például táblagépekhez és asztali gépekhez. Az előző szakaszban szereplő példához hasonló média lekérdezést használunk a tároló mainelemünk beállítására flex-wrap: nowrap. Ez biztosítja, hogy a gyermekelemek ne tekerjenek be és oszlopot tartsanak fenn az elrendezés egy sortípusán belül. Azáltal div, hogy flex-basis: 33%a média lekérdezés - megállapítjuk oszlopok, amelyek 33% a szélessége a szülő.
  4. Ebben a példában a varázslat nagyobb eszközökben jelenik meg kombinált média lekérdezési és flexbox szabályainkkal. Mivel definiáltuk display: flex, és mivel a média lekérdezésen belül nem írtuk felül a szabályt, flexbox elrendezéssel rendelkezünk mobil, táblagép és asztali számítógép számára. A média lekérdezés flex-basis: 33%és az öröklött display: flexszabályok felismerhető flexbox elrendezést kapnak, amint az a 2. ábrán látható. A múltban ennek az oszloptípusnak megfelelő elrendezés eléréséhez komoly nehézségekkel kellett számolnunk, és gubancokat kellett írnunk a CSS-ről.

A Flexbox nagyszerű módot kínál a változó, folyékony elrendezések elérésére. Bizonyos esetekben lehet, hogy nincs ilyen szabadságunk a vertikális térben. Előfordulhat, hogy egy elemet rögzített magasságon belül kell elhelyeznünk. Ebben a helyzetben egy másik technika áll rendelkezésünkre - vízszintes görgetés.

Vízszintes görgetés a túlcsordulás görgetésével

Eljöhet az idő, amikor a tartalom túlcsordul a nézetablakon anélkül, hogy kecses kezelése lenne. Íme ... túlcsordulás görgessen a mentéshez. ?

Ennek a technikának a gyakori felhasználási lehetőségei közé tartozik a görgethető menük és táblázatok. Az alábbiakban látható egy példa egy görgethető menüre.

Reszponzív Web Design RWD Reszponzív menü Túlcsordulás görgetési példa Ez egy csomó tartalom! Igen, van még egy tételünk
 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; }   Responsive Web Design RWD Responsive menu Overflow scroll example This is a lot of content! Yes we have another item 

Hogy csinálta ezt !? Vessünk egy mélyebb merülést.

  • overflow-y: scrollennek a receptnek a legfontosabb összetevője. Megadásával a gyermekelemek gördülési magatartással fogják túlcsordítani a vízszintes tengelyt.
  • Nem olyan gyorsan! Bár úgy gondolja overflow-y, hogy elegendő lenne, azt is meg kell mondanunk a böngészőnek, hogy ne csomagolja be a gyermek elemeket white-space: nowrap?

Now that we have a few RWD layout techniques up our sleeve, let's take a look at elements that pose challenges specific to their visual nature - images and video.

Responsive Images

By using modern image tag attributes we can accommodate a range of devices and resolutions. Below is an example of a responsive image.

 img { max-width: 100%; }     

This is doing a lot of things. Let's break it down:

  1. By setting max-width: 100% the image will scale up or down based on its container width.
  2. By using a combination of picture, source, and img tags we are actually only rendering one image and are only loading the best fitting image based on the user's device.
  3. WebP is a modern image format that provides superior compression for images on the web. By utilizing source we can reference a WebP image to use for browsers that support it, and another source tag to reference a PNG version of the images that don't support WebP.
  4. srcset is used to tell the browser which image to use based on the device's resolution.
  5. We establish native lazy loading by utilizing the loading="lazy" attribute / value pair.

Responsive Video

Responsive video is another subject that has inspired a large number of articles and documentation.

One key strategy to establish responsive images, video, iframes and other elements involves the use of aspect-ratio. The aspect ratio box is not a new technique and quite a useful tool to have up your sleeve as a web developer.

This article provides a solid demonstration about how to achieve "fluid" width videos. Let's take a look at the code and break it down.

 .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }  

In this example we have a YouTube video embed as an iframe and a div container with videoWrapper class. This code is doing a lot... let's dig in.

  • position: relative on the container element allows child elements to utilize absolution positioning relative to it.
  • height: 0 combined with padding-bottom: 56.25% is the key ingredient here which establishes a dynamic behavior, enforcing a 16:9 aspect ratio.
  • position: absolute, top: 0 and left: 0 set on the iframe creates a behavior in which the element positions itself absolutely relative to its parent... sticking it to the top left.
  • And finally width and height of 100% makes the child, iframe element 100% of its parent. The parent, .videoWrapper takes full control of establishing this aspect ratio layout.

I know... it's a lot. There's more we can do to make video and images look the best on phones and tablets. I'd encourage research on those topics independently in addition to this.

Okay, now that we're masters of responsive web design, how can we test what we've done? Fortunately, we have a number of tools to simulate and monitor user experience on a variety of devices.

Tools to Simulate and Monitor Responsive Websites

There are a variety of useful tools to help us create websites with responsive web design. Below are a couple that I find especially useful.

Chrome DevTools Mobile Emulation

Chrome's DevTools provides mobile emulation of a range of tablet and mobile devices. It also provides a "responsive" option which allows you to define a custom viewport size.

Monitoring Mobile Website Performance with Foo

Lighthouse is an open-source tool that provides a way of analyzing website performance specific to a device.

Foo uses Lighthouse behind the scenes to monitor website performance and provides feedback for analysis. You can setup monitoring for both desktop and mobile devices to get continuous feedback about how responsive your website is.

For example, a Lighthouse report will callout images that are improperly loaded based on device.

Conclusion

Responsive web design will continue to rapidly evolve, but if we stay on top of current trends we can provide the best experience for our users. I hope these tools and techniques are helpful!

Not only will our website users benefit from a versatile design but also search engines will rank our web pages higher.