Melyek a legjobb képernyőméretek az adaptív webtervezéshez?

Közzététel: “Ez a cikk személyes vélemény a kutatásról, közel 20 éves tapasztalatom alapján. Ezen az oldalon harmadik fél nem hirdet vagy bármilyen típusú monetizált linkek. A harmadik fél webhelyeire mutató külső linkeket én moderálom. Jogi nyilatkozat. “Shaun Anderson, Hobo

Nincs senki a legjobb képernyőméret számára, amelyet meg lehet tervezni. A webhelyeknek reagálva és gyorsan kell átalakulniuk minden képernyőfelbontás mellett, különböző böngészőkben és platformokon. Hozzáférhető. Mobilbarát. Először a közönség számára tervezzen. Tervezés 360 × 640 és 1920 × 1080 között.

• Asztali kijelzők tervezése 1024 × 768 és 1920 × 1080 között
• Mobil kijelzők kialakítása 360 × 640–414 × 896
• 601 × 962 és 1280 × 800 közötti méretű táblagép-kijelzők kialakítása
• Ellenőrizze a Google Analytics szolgáltatást, és optimalizálja a célközönség leggyakoribb felbontási méreteihez
• Ne tervezzen egy monitormérethez vagy képernyőfelbontáshoz. A képernyő mérete és a böngészőablak állapota a látogatók szerint eltérő lehet.
• A kialakításnak reagálónak és gyorsnak kell lennie. Használjon folyékony vagy érzékeny elrendezést, amely átalakul az aktuális felhasználó ablakméretéhez.
• Figyelje a Google Search Console mobilbarát és használható figyelmeztetéseit

Ennek még mindig jól kell kinéznie és működnie kell jól minden méretben, ezért ajánlottam * egy jól hozzáférhető folyékony elrendezést, százalékos szélességet használva az elrendezés ellenőrzéséhez. Most az ajánlás egy adaptív webhelysablon.

Az oldalelrendezés bizonyos képernyőméretre történő optimalizálásának három fő kritériuma a következő:

• Weboldal kezdeti láthatósága: Minden kulcs a hajtás felett látható információk, hogy a felhasználók görgetés nélkül láthassák? Ez egy kompromisszum, hogy hány elem jelenik meg, és mennyi részlet jelenik meg az egyes elemeknél.
• Weboldal olvashatóság: Mennyire könnyű elolvasni a szöveget különféle oszlopokban, figyelembe véve a hozzájuk rendelt szélességet?
• Weboldal esztétika: Mennyire jól néz ki az oldala, ha az elemek ennek a képernyőméretnek megfelelő méretben és helyen vannak? Minden elem megfelelõen sorakozik-e – vagyis közvetlenül a fényképek mellett vannak-e feliratok stb.?

A használhatósági irányelvek azt is ajánlják, hogy vegye figyelembe mindhárom kritériumot a teljes mérettartományban. Ellenőrizze a böngészőablakot 360 × 640 és 1920 × 1080 képernyőfelbontások között.

Az oldalának minden szempontból magasnak kell lennie a teljes felbontási tartományban.

Az oldalának egyenletesen is működnie kell. kisebb és nagyobb méretek, bár az ilyen szélsőségek kevésbé fontosak.

Bár az ilyen felhasználóknak biztosan be kell tudniuk érni az Ön webhelyét, olykor elfogadható kompromisszumot ad nekik a remeknél kisebb dizájn.

A tíz leggyakoribb képernyőfelbontás

Csaknem félmillió látogató látogatóinak elemzése 2020 első 6 hónapjában:

Az adaptív webhelysablon jó fogadás

QUOTE: “Reszponzív webdesign: Ugyanazt a HTML-kódot szolgálja ugyanazon az URL-en, a felhasználó eszközétől függetlenül (például asztali, táblagépes, mobil, nem vizuális böngésző), de a megjelenítést a képernyő méretétől függően másképp tudja megjeleníteni. A Google az adaptív webdizájnt javasolja, mert ez a legkönnyebben megvalósítható és fenntartható tervezési minta. ” Google Developer Guides, 2020

A mai világban sokan kézi eszközöket (táblagépeket és okostelefonokat) használnak az internet böngészéséhez és az adaptív weboldal tervezéséhez ( RWD) nagyon valószínű megoldásként jelent meg (a rajongók még mindig vitatják) a méretméret kihívásainak kiszűrésére.

Ez a módszer eltávolodik a rögzített szélességű weboldalaktól, és ehelyett a Media Queries-et használja a CSS stíluslapokban egy webhely, amely méretben reagál a kézi eszközök és az emberek által használt kisebb képernyők különböző nézetablakaira.

Tehát bármilyen eszközt használ egy személy, hogy megtekinthesse a webhelyét, a lehető legteljesebb élményt tudja nyújtani számukra.

Tartalomjegyzék

A Google a mobilbarát webhelyeket részesíti előnyben

A Google diktálja az online kereskedelem apadását és áramlását, és csak azt diktálták, hogy több eszközön kielégítő felhasználói élményt kell kialakítania, HA azt szeretné, hogy a Google versenyképes kulcsszavai szerint magas helyezést érjen el.

QUOTE: “A Google két különböző robotot használ a webhelyek feltérképezéséhez: egy mobil és egy asztali robotot. Minden bejárótípus szimulálja a felhasználó látogatását az Ön oldalára egy ilyen típusú eszközzel. A Google egy robotot (mobil vagy asztali számítógépet) használ elsődleges robotként a webhelyén. Webhelyének minden olyan oldalát, amelyet a Google feltérképezett, az elsődleges robot segítségével térképezi fel. Az összes új webhely elsődleges bejárója a mobil bejáró. Ezenkívül a Google újrafeltérképez néhány oldalt a webhelyén a másik robot (mobil vagy asztali) típusával.Ezt másodlagos feltérképezésnek hívják, és meg kell vizsgálni, hogy webhelye milyen jól működik a másik eszköztípussal. ” A Google webmestereknek szóló irányelvei, 2020

2015. április 21. óta globálisan mennyire befolyásolja egy webhely a mobilbarát webhelyek rangsorolását a különböző eszközökön.

Ha kisvállalkozások számára készít webhelyeket – tudhatja, hogy olyan webhelyet szeretne, amely jól teljesít a Google organikus listáin -, akkor tudja, hogy érdekli őket a keresőmotorok optimalizálása:

Quote: “20 éves tapasztalattal rendelkezem a professzionális SEO gyakorlása terén. Ez a SEO oktatóanyag a tippjeim és a SEO-val kapcsolatos legjobb gyakorlatok gyűjteménye, amelyet a webhelyek rangsorolásához használok a Google-ban.” Shaun Anderson, Hobo 2020

A SEO most részben a jó UX webhelyen alapul, mivel a Google számszerűsíti, legalábbis a mobil felhasználók számára.

QUOTE: “Mivel a mobil keresések meghaladják az asztali kereséseket, fontos, hogy webhelye mobilbarát legyen. A Googlebot most egy mobil robotot használ alapértelmezett robotként a webhelyeknél. ” A Google webmester irányelvei, 2020

Jelenleg – ez lényegében ma már rugalmas weboldalt és mobilbarát megoldást jelent, különösen azzal, hogy a Google “az indexünket mobilra helyezi “.

Asztali képernyők felbontásának statisztikái 2019. május – 2020. május világszerte

Tájékoztatásul itt találunk egy listát a legutóbbi (2020) világszerte aktuális legfrissebb képernyőfelbontásokról:

A leggyakoribb asztali képernyő felbontásméretek világszerte

• 1366 × 768 – 23,49%
• 1920 × 1080 – 19,91%
• 1536 × 864 – 8,65%
• 1440 × 900 – 7,38%
• 1280 × 720 – 4,89%
• 1600 × 900 – 4,01%
• 1280 × 800 – 3,33%

A mobil képernyő felbontásának statisztikái 2019 májusában – 2020 májusában világszerte

A leggyakoribb mobil képernyőfelbontási méretek világszerte

• 360 × 640 – 17,91%
• 375 × 667 – 7,61%
• 414 × 896 – 6,52%
• 360 × 780 – 5,56%
• 360 × 760 – 5,06%
• 414 × 7 36 – 3,74%

A táblagép képernyőjének felbontási statisztikái világszerte 2019 májusa – 2020 május

A táblagép képernyőjének leggyakoribb méretei világszerte

• 768 × 1024 – 51,98%
• 1280 × 800 – 7,11%
• 800 × 1280 – 5,34%
• 601 × 962 – 4,47%
• 600 × 1024 – 2,85%
• 1024 × 1366 – 1,96%

Asztali képernyők felbontásának statisztikái az Egyesült Államokban 2019. május – 2020. május

A legnépszerűbb képernyőfelbontások az Egyesült Államokban (2020)

A leggyakoribb asztali képernyő-felbontás az Amerikai Egyesült Államokban

• 1920 × 1080 – 19,15%
• 1366 × 768 – 14,91%
• 1440 × 900 – 9,59%
• 1536 × 864 – 7,7%
• 1280 × 720 – 4,89%
• 1600 × 900 – 4,28%
• 1280 × 800 – 3,92%

A mobil képernyő felbontásának statisztikája az Egyesült Államokban 2019. május – 2020. május

A leggyakoribb mobil képernyő felbontás az Amerikai Egyesült Államokban

• 414 × 816 – 17,89%
• 375 × 667 – 14,2%
• 375 × 812 – 11,97%
• 360 × 640 – 8,55%
• 414 × 736 – 8,54%
• 412 × 846 – 4,7%
• 360 × 740 – 4,39%

A táblagép képernyőjének statisztikája az Egyesült Államokban 2019. május – 2020. május

A táblagép képernyőjének leggyakoribb mérete az Amerikai Egyesült Államokban

• 768 × 1024 – 54,68%
• 800 × 1280 – 5,75%
• 1280 × 800 – 5,73%
• 601 × 962 – 5,41%
• 1024 × 1366 – 3,06%
• 600 × 1024 -2,57%

Asztali képernyők felbontásának statisztikái az Egyesült Királyságban 2019. május – 2020. május

A legjobb képernyőfelbontások az Egyesült Királyságban (2020)

A leggyakoribb asztali képernyő felbontás mérete az Egyesült Királyságban

• 1920 × 1080 – 20,62%
• 1366 × 768 – 17,32%
• 1440 × 900 – 11,65%
• 1536 × 864 – 8,38%
• 1280 × 720 – 5,2%
• 1280 × 800 – 4,73%

A mobil képernyő felbontásának statisztikája az Egyesült Királyságban 2019. május – 2020. május

Az Egyesült Királyság leggyakoribb mobil képernyőfelbontási mérete

• 375 × 667 – 16,66%
• 414 × 816 – 14,11%
• 360 × 640 – 9,95%
• 375 × 812 – 8,55%
• 360 × 740 – 5,67%
• 360 × 780 – 5,39%
• 414 × 736 – 4,75%

táblagép-képernyő felbontási statisztikák az Egyesült Királyságban 2019. május – 2020. május

A táblagép képernyőjének leggyakoribb méretei az Egyesült Királyságban

• 768 × 1024 – 58,31%
• 1280 × 800 – 6,92%
• 800 × 1280 – 6,02%
• 601 × 962 – 3,68%
• 600 × 1024 – 3,26%
• 1024 × 1366 – 1,71%

Asztali és mobil vs táblagépek piaci részesedése világszerte

Asztali és mobil vs táblagépek piaci részesedése világszerte

1. Mobil – 50,48%
2. Asztali számítógép – 46,51%
3. Táblagép – 3.0%

* Megjegyzés – a fenti statisztikák egy (bár hiteles) forrásból származnak, így torzulhatnak olyan módszerekkel, amelyeket esetleg nem ismerünk. A http://statcounter.com/ által szolgáltatott grafikonok.

Hogyan tervezhetek olyan webhelyet, amely minden böngészőben ugyanúgy néz ki & felbontásban?

Nem lehet.

Lehetetlen egy weboldalt úgy tervezni, hogy minden böngészőben, platformon és képernyőfelbontásban ugyanúgy nézzen ki, ezért kerülje a próbálkozást.

Kiválaszthatja a gördülékeny elrendezést táblázatok nélkül a tervezéséhez,% -os szélességgel, amelyek kibővülnek és összehúzódnak, hogy illeszkedjenek a látogatói böngésző beállításaihoz VAGY megfontolhatja olyan reszponzív tervezési megoldások megvizsgálását, amelyek nagyjából ugyanazt fogják elérni.

A Google az adaptív dizájnokat támogatja, ami jó hír azok számára, akik elfogadták:

QUOTE: “Azok a webhelyek, amelyek az adaptív webdizájnt használják és helyesen valósítják meg a dinamikus kiszolgálásnak (amely magában foglalja az összes asztali tartalmat és jelölést) általában semmit sem kell tennie. ” Google NOV 2017

A MOBIL FELKERÜL – tehát ha új weboldalt fejlesztesz ki – kezdettől fogva gondolkodnod kell abban, mennyire mobilbarát a webhelyed.

Arra törekszem, hogy a dolgokat egyszerűbbé tegyem, amikor ténylegesen kódolom a dolgokat.

Nem fog – nem lehet – kérem mindenkit – és a kérdés, hogy melyik weboldal a legjobb, még mindig aktuális téma vita a tervezők részéről, több használhatósággal és UX-szakértelemmel, mint én.

Tapasztalatból tudom, hogy kritikus fontosságú számodra a közönség és az általuk használt eszközök azonosítása, valamint a webhelyed felépítése ( az egész), hogy megfeleljen annak a közönségnek.

És ez a közönség magában foglalja a GOOGLEBOT-ot is.

Átirányítja-e a mobil webhelyét egy másik URL-re & Az Ön webhelye?

Nos, ez nem ideális. Soha nem volt az. Sőt.

Vissza a nap folyamán – egyes emberek tartalom előállításához CSAK egy weboldal szövegét használták. azoknak a felhasználóknak / böngészőknek, akik nem támogatták webük elemeit webhelyek – egy (általában hiábavaló) kísérlet során, hogy tartalmukat hozzáférhetőbbé tegyék.

A W3C még azt is javasolta, hogy szerintem ha minden más kudarcot vallott:

Csak szöveges oldalt kell megadni, azzal egyenértékű információval vagy funkcióval, hogy a weboldal megfeleljen e rész rendelkezéseinek, ha a megfelelés más módon nem érhető el. A csak szöveges oldalak tartalmát frissíteni kell, amikor az elsődleges oldal megváltozik. 508. SZAKASZ

MINDIG ideális volt egy URL-t eljuttatni a látogatókhoz akadálymentesség céljából, és nincs különbség a mobil- vagy okostelefon-tartalom szállításakor, ha Ön gondolkodni a webhely “mobil” változatának létrehozásán. Ez természetesen még FONTOSABB lehet, ha a Google MOBIL FIRST INDEX-re áll át.

A Google nagyon jól értékelheti Önt ELSŐDIG a mobilján tapasztalat a közeljövőben – tehát mindannyiunknak tisztában kell lennünk a nagy változásokkal, amelyeket hamarosan tapasztalhatunk a Google SERP-jében.

Amikor a Google a „látogató”, általában még fontosabb, hogy csak egy URL a keresőmotorok kanonikus URL-es kihívásai miatt – és ez a kanonikus linkelem valamikor korábbi bevezetése előtt is megtörtént.

Tehát az ideális helyzet az, ha mindig egy URL-t adunk meg.

Ha “okostelefonos” tartalma van (amit normál webtartalomnak tekintünk, mivel általában norma l HTML oldal, csak kisebb elrendezésben módosítva az elrendezésben) használhatja a rel = canonical-t az asztali verzióra való mutatáshoz. Ez segít abban, hogy a webes keresés asztali verziójára összpontosítsunk. Amikor a felhasználók okostelefonnal keresik fel az asztali verziót, átirányíthatja őket a mobil verzióra. Ez az URL-felépítéstől függetlenül működik, ezért nem kell aldomaineket / alkönyvtárakat használni az okostelefon-mobil webhelyek számára. Még jobb, ha ugyanazokat az URL-eket használja, és a tartalom megfelelő verzióját átirányítás nélkül jeleníti meg John Mueller, Google

A Google ajánlásainak figyelmen kívül hagyása gyakran nem intelligens lépés az oldal tartalmának változata, ami problémákat okozhat a mobil keresők számára, ha ez a verzió jelentősen eltér a mobil verziójától. A mobil-első indexelés azt jelenti, hogy a tartalom mobil változatát használjuk indexeléshez és rangsoroláshoz, hogy jobban segítsük – elsősorban mobil – felhasználóinkat abban, amit keresnek. A webmesterek jelentősen megnövekedett feltérképezést fognak látni az Smartphone Googlebot részéről, és az eredmények kivonatai, valamint a Google gyorsítótár-oldalainak tartalma az oldalak mobil változatából származik.Google 2017. november

A Google az alábbi tippeket kínálja annak ellenőrzésére, hogy webhelye felkészült-e a mobilindexre, de lényegében, ha adaptív webdesignt használ sablon a webhelyéhez, minimális problémát kell okoznia ezzel a változtatással:

• Győződjön meg arról, hogy a webhely mobil verziójának is van fontos , jó minőségű tartalom. Ez magában foglalja a szöveget, képeket (alt-attribútumokkal) és videókat – a szokásos feltérképezhető és indexelhető formátumokban.

• A strukturált adatok fontosak a felhasználók által kedvelt indexeléshez és keresési funkciókhoz: a webhely mobil- és asztali változatának egyaránt tartalmaznia kell. Győződjön meg arról, hogy a strukturált adatok URL-jei frissülnek a mobil oldalak mobil verziójára.

• A metaadatoknak a webhely mindkét verziójában jelen kell lenniük. Tippeket ad az oldal tartalmához indexeléshez és megjelenítéshez. Például ellenőrizze, hogy a címek és a metaleírások egyenértékűek-e a webhely összes oldalának mindkét verziójában.

• Nincs szükség változtatásokra a külön mobil URL-ekkel (m.-dot webhelyek) való összekapcsoláshoz. Külön mobil URL-t használó webhelyeknél tartsa meg a meglévő rel = canonical és link rel = alternate elemeket ezek között a verziók között.

• Ellenőrizze a hreflang linkeket külön mobil URL-címeken. Ha a rel = hreflang elemeket használja a nemzetközivé, akkor külön kapcsolja össze a mobil és az asztali URL-eket. A mobil URL-ek hreflangjának a többi mobil URL-en található többi nyelv / régió verzióra kell mutatnia, és hasonlóképpen össze kell kapcsolnia az asztalt más asztali URL-ekkel, ott hreflang linkelemekkel.

• Győződjön meg arról, hogy a webhelyet kiszolgáló szerverek elegendő kapacitással rendelkeznek a potenciálisan megnövelt feltérképezési sebesség kezeléséhez. Ez nem érinti azokat a webhelyeket, amelyek adaptív webdizájnt és dinamikus szolgáltatást használnak, csak azokat a webhelyeket, ahol a mobil verzió külön gazdagépen van, például az m.example.com.

A felhasználók egy oldal lefelé görgetését várják

Amint azt az első kritérium feltételezi, a görgetés mindig kulcsfontosságú szempont. A felhasználók általában nem szerettek görgetni, ha nincs rá szükségük – bár ez az évek során megváltozott.

Tehát a tervezés során mérlegelnie kell, hogy a felhasználók mennyit láthatnak, ha csak egy képernyő teljes vagy kettő. Az ötnél hosszabb képernyők bármelyike jelezheti Önnek, hogy túl sok másolat lehet az oldalon. Természetesen ez kiegyensúlyozott azzal a nézettel, hogy egyes cikkeket mélyreható információs daraboknak szánnak, és a felhasználók elvárják, hogy még egy kicsit várakozzanak bizonyos oldalak és tartalomtípusok megtekintésére.

Mind a görgetés, mind az indítás a láthatóság nyilvánvalóan a képernyő méretétől függ: A nagyobb képernyők több tartalmat jelenítenek meg a hajtás felett, és kevesebb görgetést igényelnek.

Lecserélhető-e egy adaptív mobilwebhelyre az eredmény, sokkal több forgalommal a Google-tól?

Nem feltétlenül, de talán.

A Google-optimalizáláshoz hasonlóan sok dolog – a mobilbarát webhely birtoklása nagyjából biztosítja, hogy a már megkapott forgalmat megtartsa, és nem feltétlenül ad további ingyenességet. forgalom a Google-tól.

Ha még nem kap nagy forgalmat a mobil látogatóktól – nem vagyok biztos benne, hogy a Google ezen frissítése érezhetően befolyásolja-e a forgalmi szintjét (legalábbis az elemzésben) ) a kezdetektől fogva – de idővel – valószínűleg rendkívül fontos kihívást jelent a navigáció.

A minőségi Az új mércét a Google és a felhasználói emelik ismét – és ha egyre versenyképesebb organikus SERP-ben akarsz versenyezni, ez még egy akadályt jelent a kisvállalkozások számára a túljutásban.

HOSSZÚ távon – ez a mobilkonverzió csak jó dolog lehet a felhasználók számára – de rövid távon – érdekes lesz megnézni, milyen hatása van a kisvállalkozások konverziós arányára – mivel a mobilon keresztüli konverziós arányok gyakran alacsonyabbak, mint az asztali számítógépeken.

A Google azt mondta, hogy ez a mobilbarát algoritmus nagyobb hatással lesz a SERP-kre, mint a Google Penguin és a Google Panda algoritmusok – és az idő múlásával többet megtudunk.

Hogyan Fontos mobilhasználati problémák ellenőrzése a webhelyén

Google Search Console

Képesnek kell lennie nyomon követni a mobilhibákat a Google Search Console-ban (AKA Google Webmestereszközök), és látni kell, hogy a hibák eltűnnek idő, ha webhelye megfelelően van konfigurálva.

Eszköz a webhely mobilbarátságának tesztelésére

• Search Console URL-ellenőrző eszköz
• Pagespeed Insights
• Think With Google
• Mobilbarát teszt

Hogyan lehet webhelyét mobilbaráttá tenni

1. rész – PageSpeed Insights, mobilbarát teszt és mobil használhatóság

2. rész – Nézetablakok, nagyítás és nagyítás beépülő modulok

3. rész – Érintse meg a célokat, margókat és betűméreteket

4. rész – Átirányítások

A webfejlesztőknek meg kell találniuk a másik közelmúltomat hasznos üzenet most, hogy a webhely sebessége rangsoroló tényező a Google-ban:

QUOTE: “A webhely mobil verziójának ideális esetben 3 másodperc alatt be kell töltődnie, és a gyorsabban, annál jobb. A NAGYON LASSÚ SITE NEGATÍV Ranglista tényező lehet (a Google megerősíti). Nincs meghatározott küszöbérték vagy sebességi pontszám, amelyet teljesítenie kell, ju st, hogy az oldalad a lehető leggyorsabban elkészüljön. ” Shaun Anderson, Hobo 2020

Jogi nyilatkozat

Jogi nyilatkozat: “Amíg van mindent megtett annak érdekében, hogy az általam megadott információk helytállóak legyenek, ez nem tanács; Nem vállalok felelősséget semmilyen hibáért vagy mulasztásért. A szerző nem kezeskedik harmadik fél webhelyeivel vagy bármely harmadik fél szolgáltatásával. Látogasson el harmadik fél webhelyeire saját felelősségére. Nem vagyok közvetlen kapcsolatban a Google-lal vagy más harmadik féllel. Ez a weboldal cookie-kat csak elemzéshez és az alapvető webhelyfunkciókhoz használ. Ez a cikk nem minősül jogi tanácsadásnak. A szerző nem vállal semmilyen felelősséget, amely az ezen a oldalon bemutatott adatokhoz való hozzáférésből eredhet. A belső oldalakra mutató linkek saját tartalmaimat és szolgáltatásaimat népszerűsítik. ” Shaun Anderson, Hobo