Útmutató a rugalmas webdesignhoz és a legjobb gyakorlatokhoz

Tudjon meg többet az adaptív webdesignról és arról, hogyan lehet a legjobb gyakorlatokat alkalmazni, hogy a legtöbbet hozhassa ki az online üzleti vállalkozások számára.


Rugalmas webdesign tervezés

Most többen böngészik az internetet mobil eszközökkel, mint asztali vagy laptopokkal. A webhely forgalmának kb. 51% -a jön valamelyik mobil eszközön keresztül. Ilyen nagy számú mobilfelhasználó esetén elengedhetetlen, hogy az online vállalkozások biztosítsák, hogy webhelyük érzékeny webdesignot (RWD) használjon, és naprakészek legyenek a legújabb RWD bevált gyakorlatokkal.

Mi az a rugalmas webdesign??

Egyszerűen fogalmazva: az RWD a tervezésből áll egy weboldal amely folyékonyan alkalmazkodik bármilyen képernyőmérethez – legyen az a legújabb 272 pixel széles Apple Watch vagy egy plazmatelevízió, köztük normál PC-k, táblagépek és mobil eszközök.

Rugalmas webdesign példa

Az alábbiakban a magyarázat elősegítésére szolgál, mint megfelelő reagáló webdesign a alma weboldal. Az alábbiakban összehasonlítjuk a webhely asztali és okostelefon nézetét egymás mellett:

Asztali és okostelefonok képernyőképeinek RWD-összehasonlítása

A tartalom mindkét nézetben azonos, de az elrendezés és a felhasználói felület kialakítása különbözik. Az okostelefon képernyőjén a weboldal szakaszai egymásra vannak rakva, hogy megkönnyítsék a függőleges görgetést, és a navigációs menü egy már ismert ismerős hamburger ikon mögé kerül. Az oldal alján található kattintható linkek szintén szélesek és magasak ahhoz, hogy az ujjal történő érintéses gesztusokat beilleszthessék.

Az RWD középpontjában a mély aggodalomra ad okot webes felhasználói élmény. Manapság a legtöbb ember különböző helyeken látogatja meg webhelyét sokféle eszköz segítségével – a munkahelyi asztali számítógéppel, az okostelefonnal, amikor a metróban van, és a táblagépet lefekvéskor. Függetlenül attól, hogy milyen eszközt használnak abban az időben, amikor a webhelyén vannak, a felhasználók elvárják, hogy ez csak működjön. Az RWD helyes használata azt jelenti, hogy az Ön webhelyén a felhasználói élmény következetes és kellemes marad, függetlenül attól, hogy melyik eszköz felhasználóját használja.

A Responsive Web Design teljes potenciáljának felhasználása

Bár egy olyan képernyő kialakítása, amely minden képernyőméreten jól néz ki, nagy lépés a helyes irányba, döntő fontosságú, hogy ne álljon meg itt. Ahhoz, hogy vállalkozása teljes mértékben kihasználhassa az RWD előnyeit, az RWD-t átfogóbb stratégiába kell helyeznie több eszköz fogyasztó középpontjában. Ez azt jelenti, hogy:

  • Ne felajánlja a mobil felhasználók számára az asztali webhely eltávolított változatát, ahol korlátozottan használják őket. Tipp: kövesse nyomon a mobil felhasználók műveleteit az Ön webhelyén. Ha észreveszi a felhasználókat, akik a webhelyén landolnak, de alig fogyasztják el a tartalmat, vagy nem töltenek rá időt, valószínű, hogy valamiféle akadályba kerülnek.
  • Ne gondoskodjon a mobil felhasználókról pontosan ugyanúgy, mint az asztali felhasználók. Használja ki teljesen a mobil eszköz által kínált lehetőségeket. Például, ha étterme van, tegye rendkívül egyszerűvé a mobil ügyfelek számára, hogy üzleti helyüket megtalálják, vagy foglalást tegyenek a technológiák, például HTML5 földrajzi helymeghatározás és telefonszám-bemenetek a webhelyén.
  • Vigyázz! oldal sebesség. A kutatás szerint Nielsen Norman Group, vezető felhasználói élményt képviselő tanácsadók, a látogatók 47% -a azt várja el, hogy a weboldal kevesebb mint 2 másodperc alatt töltődik be, és a látogatók 40% -a távozik a webhelyről, ha a betöltési folyamat több, mint 3 másodpercig tart. Ez annál is inkább igaz, amikor a mobil használókról van szó, akik mozgásban vannak és gyakran sávszélesség korlátozottak.
  • Tudatában kell lennie nem lejátszható tartalom. Egyes technológiák, mint például a Flash Player, nem élvezik széles körű támogatást a mobil eszközökön. Ezért tanácsos, hogy ne használja őket a webhelyén, és kerülje el az oldalaira való hivatkozást. A HTML5 video és audio minden bizonnyal sokkal jobb megoldás a szabadalmaztatott technológiákhoz képest. Az is jó ötlet, hogy hozzáadja a videotartalmának átiratát. Valójában számos felhasználó inkább az írott tartalmat részesíti előnyben a videó vagy a hang mellett, néhány segítő technológia csak írott anyagon tud működni, és a Google jobban tud adatokat szerezni arról, hogy mi a videó vagy audio tartalom..
  • Kerülje a használatát párbeszédablakok és pop-upok amelyek megakadályozzák a felhasználókat abban, hogy láthassák vagy interakcionálják az Ön tartalmát. Ezeket néha nehéz bezárni olyan mobileszközökön is, ahol a képernyőn megjelenő ingatlan korlátozott, ez ügyfelek számára csalódást okozva.
  • Fizetés figyelem az érintésre! Ha webhelye az egér lebegő eseményeire támaszkodik a rejtett tartalom feltárására, akkor ez a funkció nem működik a mobiltelefonon. A mobil eszközök nem működnek egérrel. Ehelyett a felhasználók interakcióba lépnek a tartalommal érintő gesztusok segítségével, például megérintés és ellop. Ezért válassza a rejtett tartalom kattintással történő felfedését, az egér lebegtetése helyett. Gondoskodjon arról is, hogy webhelyének kialakítása figyelembe veszi azt a tényt, hogy az ujjhegyek nagyobbak, mint az egérmutató, azáltal, hogy elegendő hely van az oldal hivatkozásainak kényelmes és zökkenőmentes kezelésére..

Az RWD webhely előnyei

Egyrészről, Google kifejezetten javasolja az RWD megközelítést egy mobilbarát weboldalhoz. Az RWD további előnyei:

  • Az egyetlen URL megkönnyíti a felhasználók számára a tartalmak megosztását és összekapcsolását;
  • Egy weboldal fenntartása költséghatékonyabb, mint több oldal ugyanazon tartalom számára történő fenntartása;
  • A mobil webhelyre történő átirányítás befolyásolja az oldalak betöltése sebességét a mobil eszköz felhasználói számára. Ezenkívül a böngésző észlelésén alapuló átirányítás hibára hajlamos, amely ronthatja webhelyének felhasználói élményét. Az RWD elfogadása megoldja ezeket a kérdéseket egyszerűen azért, mert ha ugyanazt a weboldalt használja mind asztali, mind mobil nézetekre, akkor nem kell átirányítania a felhasználókat egy mobilspecifikus webhelyre;
  • A különböző eszközök gyorsan változó tájképe mellett lehetetlen elkészíteni és frissíteni ugyanazon weboldal több verzióját, kifejezetten az egyes képernyő méretének és jellemzőinek megfelelően..

Az Ön weboldala érzékeny? Próbáld ki!

Használja a Google mobilbarát teszt gyorsan tesztelheti, hogy webhelye reagál-e. Csak másolni & illessze be webhelye URL-jét a szövegmezőbe, és ellenőrizze az eredményt.

Következtetés

Annak érdekében, hogy webhelyét jobban fel lehessen szerelni a több eszköz ökoszisztémájára, elengedhetetlen az adaptív webdesign. Az önállóan kihirdetett válaszadó téma telepítése azonban nem elegendő annak biztosításához, hogy webhelye jól működjön, és ügyfelei boldogok maradjanak. Be kell vonnia az RWD-t az online üzleti stratégiájába, és a több eszköz fogyasztóját magában foglalja. Ha így tesz, akkor az online vállalkozása az ügyfelek és a Google kedvencévé válik.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me