☰ open

VSC + HTML + CSS

Mobile-first indexing

V roce 2016 překonaly mobilní zařízení klasické počítače v přístupu na internet.

Google používá pro indexování mobilní verzi stránek (Mobile-first indexing).

picture graf podílu mobilních zařízení na internetu
Rok Mobilní zařízení Počítače
2010 20% 80%
2015 40% 60%
2020 60% 40%
2025 75% 25%

Standarním se stává zobrazení internetu na mobilním zařízení, tedy s možným vysokým rozlišením v poloze na výšku

Z tohoto důvodu je nutné přizpůsobit vizuální vzhled stránek mobilním zařízením


Jak na Mobile-first indexing

Snažme se vycházet vstříct Googlu. Co chce to dostane a bude dobře :-).


Responzivní design
Obsah se automaticky přizpůsobuje použitému zařízení (velikost a orientace obrazovky)
Rychlé a korektní načítání obsahu
Bezproblémové procházení stránek pro Google
Přívětivé, intuitivní a konzistentní UI
Uživatelské rozhraní,které se může vizuálně lišit v mobilní a desktopové verzy, ale obsahově je shodný
Implementaci obrázků a videí dle současných standardů a dobré praxe
Vysoce kvalitní vizuální obsah, v podporovaných formátech, s neměnnou URL adresou a doplněným alternativním popiskem
Ekvivalentní metadata a strukturovaná data
Je doporučována maximální shoda mezi verzí pro stolní počítače a mobilním webem

Je třeba také správně využívat sématických tagů

picture sématické tagy
<header>
Definuje záhlaví dokumentu nebo sekce
<nav>
Definuje sadu navigačních odkazů
<section>
Definuje sekci v dokumentu
<article>
Definuje nezávislý, soběstačný obsah
<aside>
Definuje obah oddělený od obsahu (jako postranní panel)
<footer>
Definuje zápatí dokumentu nebo sekce
<details>
Definuje další podrobnosti, které může uživatel otevřít a zavřít
<summary>
Definuje záhlaví pro <details>

HTML kousky


width:calc()

Menu

Barvy u zátržítek a boxů

Accordion

Hodiny

Single page

Pricing card

Fluid Layout with Flex

css.nothrem.cz/ css.benni.cz dev.to Github.com css tricks.com

Color

W3C CSS Color Specification

Mobile-first indexing

V roce 2016 překonaly mobilní zařízení klasické počítače v přístupu na internet.

Google používá pro indexování mobilní verzi stránek (Mobile-first indexing).

picture graf podílu mobilních zařízení na internetu
Rok Mobilní zařízení Počítače
2010 20% 80%
2015 40% 60%
2020 60% 40%
2025 75% 25%

Standarním se stává zobrazení internetu na mobilním zařízení, tedy s možným vysokým rozlišením v poloze na výšku

Z tohoto důvodu je nutné přizpůsobit vizuální vzhled stránek mobilním zařízením


Jak na Mobile-first indexing

Snažme se vycházet vstříct Googlu. Co chce to dostane a bude dobře :-).


Responzivní design
Obsah se automaticky přizpůsobuje použitému zařízení (velikost a orientace obrazovky)
Rychlé a korektní načítání obsahu
Bezproblémové procházení stránek pro Google
Přívětivé, intuitivní a konzistentní UI
Uživatelské rozhraní,které se může vizuálně lišit v mobilní a desktopové verzy, ale obsahově je shodný
Implementaci obrázků a videí dle současných standardů a dobré praxe
Vysoce kvalitní vizuální obsah, v podporovaných formátech, s neměnnou URL adresou a doplněným alternativním popiskem
Ekvivalentní metadata a strukturovaná data
Je doporučována maximální shoda mezi verzí pro stolní počítače a mobilním webem

Je třeba také správně využívat sématických tagů

picture sématické tagy
<header>
Definuje záhlaví dokumentu nebo sekce
<nav>
Definuje sadu navigačních odkazů
<section>
Definuje sekci v dokumentu
<article>
Definuje nezávislý, soběstačný obsah
<aside>
Definuje obah oddělený od obsahu (jako postranní panel)
<footer>
Definuje zápatí dokumentu nebo sekce
<details>
Definuje další podrobnosti, které může uživatel otevřít a zavřít
<summary>
Definuje záhlaví pro <details>