Jaké jsou nejlepší velikosti obrazovky pro responzivní webový design?

Zveřejnění: „Tento článek je osobním názorem na výzkum založený na mé téměř 20leté zkušenosti. Na této stránce není žádná reklama třetích stran. nebo monetizované odkazy jakéhokoli druhu. Externí odkazy na weby třetích stran moderuji já. Zřeknutí se odpovědnosti. „Shaun Anderson, Hobo

Pro navrhování neexistuje žádná nejlepší velikost obrazovky. Webové stránky by se měly při všech rozlišeních obrazovky na různých prohlížečích a platformách reagovat rychle a rychle. Přístupný. Vhodné pro mobilní zařízení. Nejprve design pro vaše publikum. Design od 360 × 640 do 1920 × 1080.

• Design pro stolní displeje od 1024 × 768 do 1920 × 1080
• Design pro mobilní displeje od 360 × 640 do 414 × 896
• Návrh pro displeje tabletů od 601 × 962 do 1280 × 800
• Zkontrolujte Google Analytics a optimalizujte pro nejběžnější velikosti rozlišení vašeho cílového publika
• Nenavrhovat pro jednu velikost monitoru nebo rozlišení obrazovky. Velikost obrazovky a stav okna prohlížeče se u návštěvníků liší.
• Design by měl být citlivý a rychlý. Použijte tekuté nebo responzivní rozložení, které se transformuje na velikost okna aktuálního uživatele.
• Sledujte upozornění Google Search Console pro mobilní zařízení a použitelnost

Stále by to mělo dobře vypadat a fungovat dobře u všech velikostí, což je důvod, proč jsem * doporučoval * vysoce dostupné tekuté rozložení pomocí procentních šířek pro ovládání rozložení. Doporučení je nyní responzivní webová šablona.

Tři hlavní kritéria pro optimalizaci rozložení stránky pro určitou velikost obrazovky jsou:

• Webová stránka Počáteční viditelnost: Je vše klíčové informace viditelné nad okrajem, aby je uživatelé viděli bez posouvání? Toto je kompromis mezi tím, kolik položek je zobrazeno vs. kolik detailů je zobrazeno pro každou položku.
• Čitelnost webové stránky: Jak snadné je číst text v různých sloupcích, vzhledem k jejich přidělené šířce?
• Estetika webových stránek: Jak dobře vypadá vaše stránka, když mají prvky správnou velikost a umístění pro tuto velikost obrazovky? Zarovnávají se všechny prvky správně – tj. Jsou titulky bezprostředně vedle fotografií atd.?

Pokyny k použitelnosti také doporučují zvážit všechna tři kritéria v celé škále velikostí. Zkontrolujte okno prohlížeče v rozlišení obrazovky 360 × 640 až 1920 × 1080.

Vaše stránka by měla v celém rozsahu rozlišení dosáhnout vysokého skóre ve všech kritériích.

Vaše stránka by měla také fungovat rovnoměrně menší a větší velikosti, i když takové extrémy jsou méně důležité.

Ačkoli by tito uživatelé měli mít určitě přístup na vaše stránky, jejich přijatelný design je někdy přijatelným kompromisem.

Deset nejčastějších rozlišení obrazovky

Analýza návštěvníků téměř půl milionu návštěvníků za prvních 6 měsíců roku 2020:

Responzivní šablona webu je dobrá sázka

Citát: „Responzivní webový design: Poskytuje stejný kód HTML na stejné adrese URL bez ohledu na zařízení uživatelů (například stolní počítač, tablet, mobilní zařízení, vizuální prohlížeč), ale může vykreslit zobrazení odlišně na základě velikosti obrazovky. Google doporučuje responzivní webový design, protože je to nejjednodušší návrhový vzor, který lze implementovat a udržovat. “ Příručky pro vývojáře Google, 2020

V dnešním světě spousta lidí používá k procházení webu a responzivnímu designu webových stránek ruční zařízení (tablety a smartphony) ( RWD) se ukázalo jako velmi pravděpodobné řešení (stále o něm diskutují nadšenci) pro výzvy týkající se velikosti obrazovky.

Tato metoda se vzdaluje používání webů s pevnou šířkou a místo toho používá k vytváření mediálních dotazů v šablonách stylů CSS web, který odpovídá velikostí různým výřezům kapesních zařízení a menším obrazovkám, které lidé používají.

Ať už zařízení používá jakýkoli člověk k prohlížení vašeho webu, můžete mu poskytnout co nejlepší zážitek.

Obsah

Google dává přednost webům vhodným pro mobilní zařízení

Google určuje příliv a odliv online obchodu a právě vám nadiktovali, že musíte navrhnout pro spokojený uživatelský zážitek napříč různými zařízeními, POKUD chcete očekávat, že se u konkurenčních klíčových slov na Googlu budete pohybovat vysoko.

v id = „89582abb06“>

QUOTE: „Google používá pro procházení webových stránek dva různé prohledávače: mobilní prohledávač a prohledávač pro stolní počítače. Každý typ prohledávače simuluje uživatele, který navštíví vaši stránku se zařízením tohoto typu. Google používá jako primární prohledávač pro váš web jeden typ prohledávače (mobilní nebo stolní). Všechny stránky na vašem webu procházené společností Google jsou procházeny pomocí primárního prohledávače. Primárním prohledávačem pro všechny nové weby je mobilní prohledávač. Google navíc znovu prohledá několik stránek vašeho webu s jiným typem prohledávače (mobilní nebo stolní).Toto se nazývá sekundární procházení a provádí se proto, abychom zjistili, jak dobře váš web funguje s jiným typem zařízení. “ Pokyny pro webmastery Google, 2020

Od 21. dubna 2015 globálně ovlivňuje web vhodný pro mobilní zařízení hodnocení výkonu webů napříč různými zařízeními.

Pokud vytváříte webové stránky pro malé firmy – budete vědět, že chtějí web, který bude mít dobrý výkon v organických seznamech Google – víte, že se zajímají o optimalizaci pro vyhledávače:

NABÍDKA: „Mám 20 let zkušeností s procvičováním profesionálního SEO. Tento výukový program pro SEO je mou sbírkou tipů a osvědčených postupů pro SEO, které používám k hodnocení webů v Google.“ Shaun Anderson, Hobo 2020

SEO je nyní částečně založeno na dobrém UX webu, jak to Google kvantifikuje, alespoň pro mobilní uživatele.

NABÍDKA: „Vzhledem k tomu, že mobilní vyhledávání nyní přesahuje vyhledávání na počítači, je důležité, aby byl váš web vhodný pro mobilní zařízení. Googlebot nyní jako výchozí prohledávač pro webové stránky používá mobilní prohledávač. “ Pokyny pro webmastery Google, 2020

V tuto chvíli – to v zásadě nyní znamená responzivní design webových stránek a je přátelský k mobilním telefonům, zejména s Googlem „, aby byl náš index nejprve mobilní „.

Statistiky rozlišení obrazovky na ploše po celém světě květen 2019 – květen 2020

Níže uvádíme seznam aktuálních celosvětově nejvýznamnějších rozlišení obrazovky zaznamenaných nedávno (2020):

Nejčastější celosvětové velikosti rozlišení obrazovky plochy

• 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%

Statistiky rozlišení obrazovky pro mobilní zařízení po celém světě květen 2019 – květen 2020

Nejběžnější celosvětové velikosti rozlišení obrazovky pro mobilní zařízení

• 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%

Statistiky rozlišení obrazovky tabletu po celém světě květen 2019 – květen 2020

Nejběžnější rozlišení obrazovky tabletu po celém světě

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

Statistiky rozlišení obrazovky počítače v USA květen 2019 – květen 2020

Nejlepší rozlišení obrazovky v USA (2020)

Nejběžnější velikost rozlišení obrazovky počítače ve Spojených státech amerických

• 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%

Statistiky rozlišení obrazovky pro mobilní zařízení v USA květen 2019 – květen 2020

Nejběžnější velikost rozlišení mobilní obrazovky ve Spojených státech amerických

• 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%

Statistiky rozlišení obrazovky tabletu v USA květen 2019 – květen 2020

Nejběžnější velikost rozlišení obrazovky tabletu ve Spojených státech amerických

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

Statistiky rozlišení obrazovky na ploše ve Velké Británii květen 2019 – květen 2020

Nejlepší rozlišení obrazovky ve Velké Británii (2020)

Nejběžnější velikost rozlišení obrazovky ve Velké Británii

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

Statistiky rozlišení obrazovky pro mobilní zařízení ve Velké Británii květen 2019 – květen 2020

Nejběžnější velikost rozlišení mobilní obrazovky ve Velké Británii

• 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%

Statistiky rozlišení obrazovky tabletu ve Velké Británii květen 2019 – květen 2020

Nejběžnější velikosti rozlišení obrazovky tabletu ve Velké Británii

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

Desktop vs Mobile vs Tablet, celosvětový podíl na trhu

Desktop vs Mobile vs Tablet Tržní podíl na celém světě

1. Mobile – 50,48%
2. Desktop – 46,51%
3. Tablet – 3.0%

* Poznámka – výše uvedené statistiky pocházejí z jednoho (i když důvěryhodného) zdroje, takže by mohly být zkresleny způsoby, které možná neznáme. Grafy poskytnuté http://statcounter.com/.

Jak mohu navrhnout web, který vypadá stejně v každém prohlížeči &?

Nemůžete.

Je nemožné navrhnout web tak, aby vypadal stejně v každém prohlížeči, platformě a rozlišení obrazovky, takže se tomu nepokoušejte.

Můžete se rozhodnout pro plynulé rozvržení bez tabulek pro svůj design, s% šířkami, které se rozšiřují a smršťují tak, aby vyhovovaly nastavení prohlížeče návštěvníků NEBO byste mohli zvážit hledání responzivních designových řešení, která dosáhnou toho samého.

> Google upřednostňuje responzivní návrhy, což je dobrá zpráva pro ty, kteří jej přijali:

QUOTE: „weby, které využívají responzivní webový design a správně implementují dynamické zobrazování (které zahrnuje veškerý obsah a označení na ploše) obvykle nemusí dělat nic. “ Google NOV 2017

MOBIL JE NA ZVÝŠENÍ – takže pokud vyvíjíte nový web, MUSÍTE od začátku myslet na to, jak je váš web skutečně vhodný pro mobilní zařízení.

Usiluji o to, aby vše bylo jednoduché, když vlastně kóduji věci.

Nebudete – nemůžete – prosím všechny – a otázka, která velikost webových stránek je nejlepší, je stále aktuálním tématem debata designérů s větší použitelností a odborností v UX než já.

Ze zkušeností vím, že je pro vás zásadní identifikovat VAŠE publikum a zařízení, která používají, a postavit svůj web (na celek), aby vyhovoval TOMU publiku.

A toto publikum zahrnuje GOOGLEBOT.

Přesměrovává váš mobilní web na jinou adresu URL & Verze Váš web?

No, to není ideální. Ve skutečnosti to nikdy nebylo.

Cesta zpět do minulosti – někteří lidé k vytváření obsahu používali TEXTNÍ JEN verze webu. pro uživatele / prohlížeče, které nepodporovaly prvky svého webu weby – v (obvykle marném) pokusu o zpřístupnění jejich obsahu.

W3C to dokonce doporučoval, myslím, že kdyby selhaly všechny ostatní:

Musí být poskytnuta pouze textová stránka s rovnocennými informacemi nebo funkcemi, aby byl web v souladu s ustanoveními této části, pokud shodu nelze dosáhnout jiným způsobem. Obsah stránek pouze s textem se aktualizuje při každé změně primární stránky. ODDÍL 508

VŽDY bylo ideální doručit návštěvníkovi jednu adresu URL za účelem usnadnění přístupu a při doručování obsahu pro mobily nebo chytré telefony není žádný rozdíl, pokud jste přemýšlet o vytvoření „mobilní“ verze vašeho webu. To samozřejmě může být ještě DŮLEŽITĚJŠÍ, pokud Google přechází na MOBILNÍ PRVNÍ INDEX.

Google vás může velmi dobře hodnotit PRIMARILNĚ na vašem mobilu zkušenosti v blízké budoucnosti – takže si všichni musíme být vědomi velkých změn, kterých se v SERP společnosti Google můžeme velmi brzy setkat.

Když je Google „návštěvníkem“, je obvykle ještě důležitější doručit jedna adresa URL kvůli výzvám kanonických adres URL pro vyhledávače – a to se stalo před zavedením prvku kanonického odkazu před nějakou dobou.

Ideální situací je tedy vždy doručovat jednu adresu URL.

Pokud máte obsah „ve smartphonu“ (který vidíme jako normální webový obsah, protože je to obecně norma l Stránka HTML, vyladěná v rozložení pro menší displeje), můžete pomocí rel = canonical přejít na verzi pro stolní počítače. To nám pomáhá zaměřit se na desktopovou verzi pro vyhledávání na webu. Když uživatelé navštíví tuto verzi pro stolní počítače pomocí chytrého telefonu, můžete je přesměrovat na verzi pro mobilní zařízení. To funguje bez ohledu na strukturu adres URL, takže u webů pro chytré telefony nemusíte používat subdomény / podadresáře. Ještě lepší je však použít stejné adresy URL a zobrazit příslušnou verzi obsahu bez přesměrování John Mueller, Google

Ignorování doporučení Google často není chytrý tah

DOPORUČENÍ: Abychom to shrnuli, v současné době se naše systémy procházení, indexování a hodnocení obvykle dívají na plochu verze obsahu stránky, což může mobilním vyhledávačům způsobit problémy, když se tato verze výrazně liší od mobilní verze. Indexování na prvním místě v mobilu znamená, že k indexování a hodnocení použijeme mobilní verzi obsahu, abychom lépe pomohli našim uživatelům – především mobilním – uživatelům najít to, co hledají. Pro webmastery dojde k výraznému zvýšení procházení pomocí smartphonu Googlebot a úryvky ve výsledcích i obsah na stránkách mezipaměti Google budou z mobilní verze stránek.Google listopad 2017

Google nabízí následující tipy, jak zkontrolovat, zda je váš web připraven na první mobilní index, ale v zásadě platí, že pokud používáte responzivní webový design Šablona pro váš web by s touto změnou měla mít minimální problémy:

• Ujistěte se, že mobilní verze webu má také důležité , vysoce kvalitní obsah. To zahrnuje text, obrázky (s atributy alt) a videa – v obvyklých prohledávatelných a indexovatelných formátech.

• Strukturovaná data jsou důležitá pro funkce indexování a vyhledávání, které uživatelé milují: měla by být v mobilní i desktopové verzi webu. Zajistěte, aby adresy URL ve strukturovaných datech byly aktualizovány na mobilní verzi na mobilních stránkách.

• Metadata by měla být přítomna v obou verzích webu. Poskytuje rady ohledně obsahu na stránce pro indexování a poskytování. Například se ujistěte, že názvy a metapopisy jsou ekvivalentní v obou verzích všech stránek na webu.

• Pro propojení s oddělenými mobilními adresami URL (stránky m.-dot) nejsou nutné žádné změny. U webů, které používají samostatné mobilní adresy URL, ponechejte stávající prvky odkazu rel = canonical a link rel = alternativní mezi těmito verzemi.

• Zkontrolujte odkazy hreflang na samostatných mobilních adresách URL. Při použití prvků odkazu rel = hreflang pro internacionalizaci propojte adresy URL mobilních a stolních počítačů samostatně. Hreflang vašich mobilních adres URL by měl odkazovat na jiné jazykové / regionální verze v jiných adresách URL pro mobilní zařízení a podobně propojovat počítače s jinými adresami URL pro počítače pomocí prvků odkazu hreflang.

• Zajistěte, aby servery hostující web měly dostatečnou kapacitu pro zpracování potenciálně zvýšené rychlosti procházení. To neovlivní weby, které používají responzivní webový design a dynamické zobrazování, pouze weby, kde je mobilní verze na samostatném hostiteli, například m.example.com.

Uživatelé očekávají, že se posunou o stránku dolů

Jak vyplývá z prvního kritéria, posouvání je vždy klíčovým hlediskem. Uživatelé obecně neradi rolovali, pokud to nepotřebují – i když se to za ta léta změnilo.

Takže když navrhujete, měli byste zvážit, kolik uživatelé mohou vidět, pokud rolování pouze obrazovka celá nebo dvě. Jakákoli více než pět obrazovek může být známkou toho, že na stránce může být příliš mnoho kopií. To je samozřejmě vyváženo názorem, že některé články mají být podrobnými informacemi a uživatelé by očekávali, že si na zobrazení obsahu a typů obsahu stránky počkají o něco déle.

Jak rolování, tak počáteční viditelnost samozřejmě závisí na velikosti obrazovky: Větší obrazovky zobrazují více obsahu nad okrajem a vyžadují méně rolování.

Bude změna na responzivní mobilní web mít za následek mnohem větší provoz z Googlu?

Ne nutně, ale možná.

S optimalizací Google má mnoho společného – mít web vhodný pro mobilní zařízení je víceméně to, aby vám zajistil KEEP provoz, který již získáváte, nemusí vám nutně dávat žádné další zdarma provoz z Googlu.

Pokud ještě nemáte velký provoz od návštěvníků mobilních zařízení – nejsem si jistý, zda tato aktualizace od Googlu bude mít znatelný vliv na vaše úrovně provozu (alespoň v analytice) ) na začátku – ale v průběhu času – bude pravděpodobně velmi důležitá navigace.

Kval Společnost Google a její uživatelé znovu zvyšují laťku – a pokud chcete soutěžit ve stále konkurenceschopnějších organických SERP, je to další překážka pro malé podniky, aby překonaly.

Z DLOUHO horizontu – tato mobilní konverze může být pro vaše uživatele pouze dobrá věc – ale v krátkodobém horizontu – bude zajímavé sledovat, jaký vliv to bude mít na konverzní poměry malých podniků – protože konverzní poměry prostřednictvím mobilních zařízení jsou často nižší než na počítačích.

Google uvedl, že tento algoritmus vhodný pro mobilní zařízení bude mít větší dopad na SERP než algoritmy Google Penguin a Google Panda – a postupem času zjistíme více.

Jak Kontrola důležitých problémů s použitelností na vašem webu

Google Search Console

Měli byste být schopni sledovat mobilní chyby v Google Search Console (AKA Google Webmaster Tools) a vidět, jak chyby zmizí. pokud je váš web správně nakonfigurován.

Nástroj k otestování vašeho webu z hlediska přívětivosti pro mobilní zařízení

• Nástroj pro kontrolu adresy URL v Search Console
• Pagespeed Insights
• Think With Google
• Test použitelnosti v mobilních zařízeních

Jak zajistit, aby byl váš web optimalizován pro mobily

Část 1 – PageSpeed Insights, test použitelnosti v mobilních zařízeních a použitelnost v mobilních zařízeních

Část 2 – Výřezy, zvětšení a zvětšení doplňky

Část 3 – Klepněte na cíle, okraje a velikosti písma

Část 4 – Přesměrování

Weboví vývojáři by měli najít mé další nedávné příspěvek užitečný, protože rychlost webu je v Google faktorem hodnocení:

DOPORUČENÍ: „Mobilní verze webu by se měla ideálně načíst za méně než 3 sekundy a čím rychleji, tím lépe. VELMI POMALÝ WEB může být NEGATIVNÍ hodnotící faktor (potvrzený Googlem). Není stanovena žádná prahová hodnota ani rychlostní skóre, st, aby vaše stránka byla co nejrychlejší. “ Shaun Anderson, Hobo 2020

Zřeknutí se odpovědnosti

Zřeknutí se odpovědnosti: „I když mám vynaložil veškeré úsilí, aby zajistil, že informace, které jsem poskytl, jsou správné. To není rada .; Nemohu přijmout žádnou odpovědnost za jakékoli chyby nebo opomenutí. Autor neručí za weby třetích stran ani za služby třetích stran. Navštěvujte stránky třetích stran na své vlastní riziko. Nejsem přímo partnerem společnosti Google ani žádné jiné třetí strany. Tento web používá soubory cookie pouze pro analytiku a základní funkce webu. Tento článek nepředstavuje právní poradenství. Autor nepřijímá žádnou odpovědnost, která by mohla vzniknout z přístupu k údajům prezentovaným na tomto webu. Odkazy na interní stránky propagují můj vlastní obsah a služby. “ Shaun Anderson, Hobo