zveřejnění: „tento článek je osobní názor na výzkum založený na mých zkušenostech téměř 20 let. Na této stránce není žádná reklama třetí strany ani zpeněžené odkazy jakéhokoli druhu. Externí odkazy na stránky třetích stran jsou moderovány mnou. Zřeknutí. „Shaun Anderson, Hobo

Neexistuje jeden nejlepší velikost obrazovky design. Webové stránky by se měly transformovat citlivě a rychle při všech rozlišeních obrazovky na různých prohlížečích a platformách., Přístupný. Mobilní-přátelský. Design pro vaše publikum, první. Konstrukce od 360×640 do 1920×1080.

  • Design pro desktop displeje od 1024×768 prostřednictvím 1920×1080
  • Design pro mobilní displeje 360×640 přes 414×896
  • Design pro tablety displeje z 601×962 prostřednictvím 1280×800
  • Zkontrolujte, zda Google Analytics a optimalizovat pro vaše cílové publikum je nejčastější rozlišení velikostí
  • design pro jeden monitor velikost či 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 citlivé rozložení, které se změní na velikost okna aktuálního uživatele.
  • Monitor Google Search Console mobile-friendly a použitelnost upozornění

To by stále vypadat dobře a dobře fungovat na všech velikostí, což je důvod, proč jsem *použité* doporučit vysoce dostupné tekuté rozvržení pomocí procentních šířek k ovládání rozvržení. Nyní je doporučením responzivní šablona webových stránek.,

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

  • Webové Stránky Počáteční viditelnost: Je všechny klíčové informace viditelné nad násobně, takže uživatelé mohou vidět bez rolování? Jedná se o 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é stránky: jak dobře vypadá vaše stránka, když jsou prvky ve správné velikosti a umístění pro tuto velikost obrazovky?, Proveďte všechny prvky správně-to znamená, že jsou titulky bezprostředně vedle fotografií atd.?

pokyny pro použitelnost také doporučujeme zvážit všechna tři kritéria v plném rozsahu velikostí,. Zkontrolujte okno prohlížeče od rozlišení obrazovky 360×640 do rozlišení obrazovky 1920×1080.

vaše stránka by měla mít vysoké skóre na všech kritériích v celém rozsahu rozlišení.

vaše stránka by také měla fungovat v ještě menších a větších velikostech, i když takové extrémy jsou méně důležité.,

i když by tito uživatelé měli mít určitě přístup k Vašim stránkám, což jim dává méně než skvělý design, je někdy přijatelným kompromisem.,

Top ten nejběžnější Rozlišení Obrazovky

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

Responzivní webové Stránky Šablony Je Dobré Vsadit

CITACE: „Responzivní Web Design: Slouží stejný HTML kód na stejnou adresu URL bez ohledu na zařízení uživatelů (například, desktop, tablet, mobilní telefon, non-visual browser), ale může způsobit zobrazovat různě v závislosti na velikosti obrazovky. Google doporučuje citlivý webový Design, protože je to nejjednodušší návrhový vzor pro implementaci a údržbu.,“Google Developer Průvodců, 2020

V dnešním světě, mnoho lidí jsou pomocí přenosných zařízení (tablety a smartphony) procházet web a responzivní web design (RWD) se ukázal jako velmi pravděpodobné řešení (to je ještě debatoval o nadšence) velikost obrazovky výzvy.

Tato metoda se pohybuje od používání pevné šířky stránky a místo toho používá Media Queries v CSS stylů vytvořit webové stránky, které reaguje ve velikosti na různé výřezy z kapesních zařízení a menších obrazovkách, které lidé používají.,

takže bez ohledu na zařízení, které může osoba používat k prohlížení vašich webových stránek, jste schopni jim poskytnout co nejúplnější zážitek.

Obsah

Google Upřednostňuje Mobile-Friendly Weby

Google určuje příliv a odliv on-line obchodu a už jen diktoval, co potřebujete, aby design pro uspokojující uživatelské zkušenosti napříč různými zařízeními, POKUD chcete, aby očekávat, že vysoké hodnosti pro konkurenční klíčová slova v Google.

citace: „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 desktop). Všechny stránky na vašem webu, které jsou procházeny společností Google, jsou procházeny pomocí primárního prohledávače. Primárním prohledávačem pro všechny nové webové stránky je mobilní prohledávač. Kromě toho Google překreslí několik stránek na vašem webu s jiným typem prohledávače (mobilní nebo desktop). Toto se nazývá sekundární procházení a je provedeno, aby se zjistilo, jak dobře váš web funguje s jiným typem zařízení.,“Pokyny pro webmastery Google, 2020

od 21. Dubna 2015 globálně, jak mobilní web ovlivnil výkon hodnocení pro webové stránky v různých zařízeních.

Pokud jste dělat webové stránky pro malé a střední podniky – budete vědět, že chcete webové stránky, které bude vykonávat dobře v Google ekologické výpisy – víte, že se zajímají o optimalizace pro vyhledávače:

CITACE: „mám 20 let zkušeností cvičí profesionální SEO. Tento SEO tutoriál je moje sbírka tipů a osvědčených postupů SEO, které používám k hodnocení webových stránek v Googlu.,“Shaun Anderson, Hobo 2020

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

CITUJI: „S mobilním vyhledávání nyní vyšší než desktopové vyhledávání, je důležité, aby vaše stránky být mobile-friendly. Googlebot nyní používá mobilní prohledávač jako výchozí prolézací modul pro webové stránky.“Google pro Webmastery, 2020

V současné době–, že v podstatě to teď znamená, že responzivní web design a mobilní-přátelský, a to zejména s Google „, takže náš index mobile-first“.,

Desktop Rozlišení Obrazovky Statistiky po celém Světě. Května 2019 – Květen 2020

Pro porovnání, tady je seznam aktuální top rozlišeních obrazovky po celém světě a zaznamenal v poslední době (rok 2020):

nejčastější Desktop Rozlišení Obrazovky Velikostí po celém Světě

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

Mobile Rozlišení Obrazovky Statistiky po celém Světě. Května 2019 – Květen 2020

nejběžnější Mobilní Obrazovky Rozlišení Velikostí po celém Světě

  • 360×640 – 17.91%
  • 375×667 – 7.61%
  • 414×896 – 6.52%
  • 360×780 – 5.56%
  • 360×760 – 5.06%
  • 414×736 – 3.74%

Tablet Rozlišení Obrazovky Statistiky po celém Světě. Května 2019 – Květen 2020

nejčastější Tablet Rozlišení Obrazovky Velikostí 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%

Desktop Rozlišení Obrazovky Statistiky v USA. Května 2019 – Květen 2020

Top Rozlišení Obrazovky v USA (2020)

nejčastější Ploše o Velikosti Rozlišení Obrazovky 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%

Mobile Rozlišení Obrazovky Statistiky v USA. Května 2019 – Květen 2020

nejčastější Mobile Rozlišení Obrazovky Velikost 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%

Tablet Rozlišení Obrazovky Statistiky v USA. Května 2019 – Květen 2020

nejčastější Tablet o Velikosti Rozlišení Obrazovky 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%

Desktop Rozlišení Obrazovky Statistiky ve velké BRITÁNII. Května 2019 – Květen 2020

Top Rozlišení Obrazovky v UK (2020)

nejčastější Ploše o Velikosti Rozlišení Obrazovky ve Spojeném Království

  • 1920×1080 – 20.62%
  • 1366×768 – 17.32%
  • 1440×900 – 11.65%
  • 1536×864 – 8.38%
  • 1280×720 – 5.2%
  • 1280×800 – 4.,73%

Mobile Rozlišení Obrazovky Statistiky ve velké BRITÁNII. Května 2019 – Květen 2020

nejčastější Mobile Rozlišení Obrazovky Velikost ve Spojeném Království

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

Tablet Rozlišení Obrazovky Statistiky ve velké BRITÁNII. Května 2019 – Květen 2020

nejčastější Tablet Rozlišení Obrazovky Velikosti ve Spojeném Království

  • 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. Mobil vs. Tablet Podíl na Trhu po celém Světě

Desktop vs. Mobil vs. Tablet Podíl na Trhu po celém Světě

  1. Mobilní – 50.48%
  2. Desktop – 46.51%
  3. Tablet – 3.0%

*Poznámka – statistiky uvedené jsou z jedné (byť důvěryhodný) zdroj, tak by mohl být zkreslený takovým způsobem, že jsme nemusí vědět. Grafy dodávané http://statcounter.com/.,

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

nemůžete.

není možné navrhnout web tak, aby vypadal stejně v každém prohlížeči, platformě a rozlišení obrazovky, takže se snažte.

můžete se rozhodnout pro fluidní layout bez tabulek pro svůj design, s % šířky, které se roztahují a smršťují, aby se vešly návštěvníci v nastavení prohlížeče, NEBO můžete zvážit při pohledu do responzivní design řešení, které bude dosáhnout hodně stejný věc.,

Google upřednostňuje responzivní design, což je dobrá zpráva pro ty, kteří přijali to:

CITACE: „stránky, které využívají responzivní design webu a správně implementovat dynamické zobrazování (které zahrnují všechny plochy, obsah a značení) obecně nemám nic dělat.“Google NOV 2017

MOBILE je na vzestupu – takže pokud vyvíjíte nový web-musíte přemýšlet o tom, jak mobilní je váš web skutečně od začátku.

mám za cíl udržet věci jednoduché, když jsem vlastně kódování věci.,

nebudete – nemůže potěšit každého – a na otázku, které stránky velikost je nejlepší je stále horkým tématem pro diskusi návrháři s větší použitelnost a UX znalosti než já.

Co vím z vlastní zkušenosti je, že je velmi důležité pro vás identifikovat SVÉ publikum a zařízení, které používají, a vytvořit své webové stránky (v celku), aby vyhovovaly, ŽE publikum.

a toto publikum zahrnuje GOOGLEBOT.

přesměruje váš mobilní web na jinou adresu URL & verzi vašeho webu?

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

Cesta zpět v den – někteří lidé používají POUZE TEXTOVÉ verze stránek vytvářet obsah pro uživatele/prohlížeče, které nepodporují prvky svých webových stránek – v (obvykle marně) snaží, aby jejich obsah více přístupný.

W3C i doporučit to, co myslím, když vše ostatní selhalo:

text-pouze stránka s ekvivalentní informace nebo funkce, musí být zajištěno, aby se webové stránky v souladu s ustanoveními této části, kdy soulad nemůže být dosaženo žádným jiným způsobem., Obsah stránek pouze pro text se aktualizuje vždy, když se změní primární stránka. SEKCE 508

je To VŽDY ideální dodat jednu URL na návštěvu přístupnost účely, a není tam žádný rozdíl při doručování mobilního telefonu nebo smartphone obsah, pokud uvažujete o vytvoření „mobilní“ verze webu. To samozřejmě může být ještě důležitější, pokud se Google přesune do mobilního prvního indexu.,

Google vás může v blízké budoucnosti velmi dobře Hodnotit především na vašem mobilním zážitku-takže si všichni musíme být vědomi velkých změn,které bychom mohli brzy vidět v SERP společnosti Google.

Když Google je ‚návštěvník‘ je to obvykle dokonce více důležité dodat jen jedno URL, protože canonical URL výzvy pro vyhledávače – a to byl případ před provedením kanonický odkaz na prvek před nějakým časem.

takže ideální situace je vždy doručit jednu adresu URL.,

Pokud máte „chytrý telefon“ obsahu (což vidíme jako normální web-content, jako je to obecně normální HTML stránka, jen vylepšil v rozložení pro menší displeje), můžete použít rel=canonical, aby váš desktop verze. To nám pomáhá soustředit se na desktopovou verzi pro vyhledávání na webu. Když uživatelé navštíví tuto stolní verzi pomocí smartphonu, můžete je přesměrovat na mobilní verzi. To funguje bez ohledu na strukturu URL, takže nemusíte používat subdomény / podadresáře pro weby smartphone-mobile., Ještě lepší však je používat stejné adresy Url a ukázat příslušnou verzi obsahu bez přesměrování John Mueller, Google,

Google Ignoruje Doporučení Je Často Není Chytrý Tah.

QUOTE: Pro připomenutí, v současné době naše plazení, indexování, a pořadí systémy obvykle podívat na desktopové verze stránky je obsah, který může způsobit problémy pro mobilní pátrači, když ta verze je diametrálně odlišná od mobilní verze., Mobilní-první indexování znamená, že budeme používat mobilní verzi obsahu pro indexování a hodnocení, aby lépe pomoci našim – především mobilní uživatelé najít to, co hledají. Webmasteři uvidí výrazně zvýšené procházení smartphonem Googlebot a úryvky ve výsledcích, stejně jako obsah na stránkách mezipaměti Google, budou z mobilní verze stránek., Google Nov 2017

Google nabízí následující tipy, aby se zkontrolujte, zda vaše stránky je připraven pro mobilní první index, ale v podstatě, pokud používáte citlivý web design šablony pro vaše webové stránky, měli byste mít minimální problémy s touto změnou:

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

  • Strukturovaná data je důležité pro indexování a vyhledávání funkcí, které uživatelé milují: to by mělo být jak na mobilní a desktopové verze stránek. Ujistěte se, že adresy URL ve strukturovaných datech jsou aktualizovány na mobilní verzi na mobilních stránkách.

  • Metadata by měla být přítomna na obou verzích webu. Poskytuje rady o obsahu na stránce pro indexování a servírování., Ujistěte se například, že názvy a meta popisy jsou rovnocenné v obou verzích všech stránek na webu.

  • pro propojení se samostatnými mobilními adresami URL (m.-dot sites) nejsou nutné žádné změny. Pro weby používající samostatné mobilní adresy URL ponechte existující odkaz rel=canonical a link rel=alternativní prvky mezi těmito verzemi.

  • zkontrolujte odkazy hreflang na samostatných mobilních adresách URL., Při použití prvků link 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é verze jazyka / regionu na jiných mobilních adresách URL a podobně propojit plochu s jinými adresami URL na ploše pomocí prvků odkazu hreflang.

  • Zajištění serverech hosting stránky mají dostatečnou kapacitu zvládnout potenciálně zvýšená rychlost procházení., To nemá vliv na weby, které používají citlivé web design a dynamické zobrazování, jen míst, kde mobilní verze je na samostatné hostitele, jako např. m.example.com.

Uživatelé Očekávají, Přejděte Dolů Na Stránce

Jako první kritérium znamená, že rolování je vždy klíčovým hlediskem. Uživatelé se obecně neradi posouvají, pokud to nepotřebují – i když se to v průběhu let změnilo.

takže při návrhu byste měli zvážit, kolik uživatelů může vidět, zda posouvají pouze obrazovku plnou nebo dvě., Jakékoli více než pět obrazovek dlouhé by mohlo být známkou toho, že na stránce může být příliš mnoho kopií. Samozřejmě, že to je vyvážené s názorem, že některé články jsou určeny k in-hloubka informace kousky a uživatelé by se očekávat, že čekat trochu déle, aby zobrazení některé stránky obsahu a typy obsahu.

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

bude změna na citlivý mobilní web mít za následek mnohem větší provoz od společnosti Google?

ne nutně, ale možná.,

stejně Jako mnoho věcí na práci s Google optimalizace – s mobilní přívětivé webové stránky, je více nebo méně, aby zajistily, budete mít na provoz, že jste již dostat, ne nutně dát víc volného provozu od Google.

Pokud nemáte již velkou návštěvnost z mobilních návštěvníků – nejsem si jistý, jestli tato aktualizace od Google bude mít znatelný vliv na vaše úroveň provozu (v analytics alespoň) na počátku, ale v průběhu času – to asi bude mimořádně důležitou výzvou pro navigaci.,

kvalita panelu je zvýšena – opět – tím, že Google a jeho uživatele – a pokud chcete soutěžit ve stále více konkurenčním organické SERPs to je další překážka pro malé a střední podniky.

V DLOUHODOBÉM horizontu – tato mobilní konverze může být jen dobrá věc pro uživatele, ale v krátkodobém horizontu – to bude zajímavé vidět, jaký vliv to má na malé a střední podniky konverze jako konverze přes mobil jsou často méně, než na desktop.,

Google uvedl, že tento algoritmus vhodný pro mobilní telefony bude mít větší dopad na SERP než algoritmy Google Penguin i Google Panda-a časem se dozvíme více.

Jak Zkontrolovat, Za Důležité Mobilní Použitelnost Problémy 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 chyby, které zmizí v průběhu času, pokud váš web je správně nakonfigurován.,“>

Část 1 – PageSpeed Insights, Mobile-Friendly Test a Mobilní-Použitelnost

2. Část – Výřezy, zoom a pluginů

Část 3 – klepnutí, okraje a velikost písma

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

Webové vývojáře by měla najít své další nedávné post užitečné, teď, že rychlost webu je pořadí faktorem v Google:

CITUJI: „mobilní verze webu by měla v ideálním případě zatížení pod 3 sekundy a rychleji, tím lépe., Velmi pomalý web může být negativním faktorem hodnocení (potvrzeným společností Google). Neexistuje žádný nastavený práh nebo rychlost skóre splnit, jen aby se vaše stránka tak rychle, jak je to možné.“Shaun Anderson, Hobo 2020

Upozornění

Upozornění: „Zatímco jsem se veškeré úsilí, aby zajistila, že informace, které jsem poskytl, je správné, To není poradenství.; Nemohu přijmout žádnou odpovědnost za jakékoli chyby nebo opomenutí. Autor ručí za stránky třetích stran ani za služby třetích stran. Navštivte stránky třetích stran na vlastní nebezpečí., Nejsem přímo partnerem společnosti Google nebo jiné třetí strany. Tato webová stránka používá cookies pouze pro analytiku a základní funkce webových stránek. Tento článek nepředstavuje právní poradenství. Autor nepřijímá žádnou odpovědnost, která by mohla vzniknout v podobě 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