Autor Zpráva
žadatel
Profil *
Ahoj,

gůglí robotí výstup ukazuje červený vykřičník pro pevnou šířku stránky. Pro width=device-width je robotí hodnocení ještě horší.

Je prosím možné se nějak jednoduše (např. připsáním několika málo řádků do CSS) červeného vykřičníku gůglu pro uvedenou stránku zbavit?
grimword
Profil
A proč tam nedáš:

<meta name=viewport content="width=device-width, initial-scale=1">

Já jsem to použil například na www.efinancovani.cz a ten test "google mobile friendly test" mám zelený.
žadatel
Profil *
grimword:

Po navrhované úpravě dostávám totožný výstup, který je možné vidět v 1. příspěvku na druhém odkazu - čili na červený vykřičník prozatím initial-scale=1 vliv nemá.
Tomáš123
Profil
žadatel:
Je prosím možné se nějak jednoduše [...] červeného vykřičníku gůglu pro uvedenou stránku zbavit?
Áno, urobiť web responzívnym. Ak web nie je pripravený na prispôsobovanie sa mobilnému zariadeniu, prvky trčia z viewportu a Google i návštevník vníma takto rozbitú stránku horšie. Sám sa rozhodni, či web chceš optimalizovať alebo nie. Rady ako obísť hodnotenie Googlu sa ti na tejto diskusii pravdepodobne nedostanú.
žadatel
Profil *
"Ak web nie je pripravený na prispôsobovanie sa mobilnému zariadeniu"

Jak vic by se stranka mela mobilnimu zarizeni prizpusobovat nez je nynejsi stav? [retoricka otazka]

"Sám sa rozhodni, či web chceš optimalizovať alebo nie"

Jsem rozhodnuty se na jedne strance webu pokusit zbavit cerveneho vykricniku robota, pokud prinosy alespon vyvazi vydaje.

"Rady ako obísť hodnotenie Googlu sa ti na tejto diskusii pravdepodobne nedostanú."

Skoda, pokud obejitim znamena robotovi rict, ze na mobilu se stranka prizpusobi i s pevnou sirkou.
Tomáš123
Profil
žadatel:
Jak vic by se stranka mela mobilnimu zarizeni prizpusobovat nez je nynejsi stav?
Mala by byť schopná vhodne premiestniť (resp. schovať) prvky ak je potrebné, aby sa obsah pohodlne vošiel do menších rozlíšení. Text by mal byť dobre čitateľný, nemali by byť prítomné dátovo príliš objemné obrázky...

Skoda, pokud obejitim znamena robotovi rict, ze na mobilu se stranka prizpusobi i s pevnou sirkou.
Ona sa zobrazí. O nejakom prispôsobovaní v tomto štádiu nemožno hovoriť.

Po nastavení šírky webu prispôsobivej rozlíšeniu návštevníkovho zariadenia dochádza na nepripravenej stránke k správaniu, ktoré nie je pre responzívnu stránku charakteristické. Domnievam sa, že jediným spôsobom, ako dosiahnuť zelený ukazateľ responzivity je urobiť stránku responzívnu. Ak do toho nechceš investovať, bude lepšie ak metaznačku spomenutú [#2] v hlavičke neuvedieš.
žadatel
Profil *
"
Mala by byť schopná vhodne premiestniť (resp. schovať) prvky ak je potrebné, aby sa obsah pohodlne vošiel do menších rozlíšení. Text by mal byť dobre čitateľný, nemali by byť prítomné dátovo príliš objemné obrázky... Ona sa zobrazí. O nejakom prispôsobovaní v tomto štádiu nemožno hovoriť."

Asi si nerozumime. Pojdme se prosim vratit k puvodnimu dotazu.

"zelený ukazateľ responzivity"

Nerozumim. Presto, pojdme se prosim vratit k puvodnimu dotazu.
Fisir
Profil
Reaguji na žadatela:
Je prosím možné se nějak jednoduše (např. připsáním několika málo řádků do CSS) červeného vykřičníku gůglu pro uvedenou stránku zbavit?
Buď budeš muset web předělat tak, aby své rozložení upravoval na základě šířky obrazovky, nebo se smířit s tím červeným vykřičníkem. Případně jej fixou přemaluj na zeleno.
žadatel
Profil *
"Buď budeš muset web předělat tak, aby své rozložení upravoval na základě šířky obrazovky"

Hmm, když už gůgl prezentuje takovouhle "klamavou reklamu", zeptám se jinak: je možné udělat media pravidlo pro 802 - nekonečno pixelů, podobně jako mám pro 0 - 801 pixelů, tak, abych se zbavil červeného vykřičníku?

I kdyby to technicky bylo možné, gůgl by ale stejně nedokázal zkousnout pevnou šířku ve viewportu, je to tak? Proto bych se červeného vykřičníku nezbavil...
Fisir
Profil
Reaguji na žadatela:
Tady ale nejde o to, abys měl v CSS zapsaná nějaká nesmyslná pravidla. Tím testem projdeš jedině v případě, že tvůj web bude responzivní, tedy že se bude přizpůsobovat velikosti obrazovky a nebude potřeba vertikálně scrollovat. Nechápu, jakou „klamavou reklamu“ v tom vidíš.
žadatel
Profil *
"že se bude přizpůsobovat velikosti obrazovky a nebude potřeba vertikálně scrollovat. "

Já nejsem expert, ale žiju v domnění, že pro displej menší než 801 pixelů není třeba momentálně scrollovat a nad 801 pixelů taky ne. Člověk by z toho usoudil, že má stránku optimalizovanou pro mobil, jak ostatně robotí test potvrzuje (zelená fajfka pro mobil), stejně jako nápis v mobilním gůglím SERPu.

Klamavá reklama z mé strany je zelená fajfka a nápis v serpu (s možným nesmyslným media pravidlem pro 801+ pixelů), což chápu jako optimalizovanou mobilní stránku, vs. červený vykřičník.

K čemu pak, himl hergot, viewport s pevnou šířkou je, když na něj gůgl hází bobek? [řečnická otázka]
Fisir
Profil
Reaguji na žadatela:
Takhle ten tvůj web vypadá na obřím iPhonu 6 Plus:


To moc definici responzivního webu neodpovídá.

Jestli tohle vlákno někdo čte, může odpovídat místo mě, tohle trollování dál podporovat nebudu.
žadatel
Profil *
Homepage nema ani viewport, ja se celou dobu bavim o strance 3x3x3 - viz prvni odkaz v prvnim prispevku...

Zda se, ze debata nikam nevede. Tak holt budu mit mobilne optimalizovanou stranku s červeným vykřičníkem no. Jsou i horší věci.
Tomáš123
Profil
žadatel:
Vieš, prečo sa robia webové stránky responzívne? Aby sa prispôsobili zariadeniu, na ktorom si ich užívateľ prezerá. Vieš prečo? Lebo v dnešnej dobe, už sledujeme dianie na internete zo stolových počítačov s Full HD rozlíšením, z väčších i menších notebookov, tabletov alebo chytrých telefónov. Vieš prečo je dobré urobiť stránku responzívnu? Aby boli návštevníci, ktorí tvoju stránku prezerajú z rôznych zariadení, spokojnejší. A onu pomyselnú spokojnosť so vzhľadom sa snaží odhadnúť aj Google so svojim nástrojom. A vieš prečo tam má tvoj web červené výkričníky? Lebo nie je responzívny! Určite? Určite.

Jsou i horší věci.
Isteže. Napríklad nespokojní návštevníci.

Je prosím možné se nějak jednoduše (např. připsáním několika málo řádků do CSS) červeného vykřičníku gůglu pro uvedenou stránku zbavit?
Možno by stačil aj jediný riadok. Na dĺžku by sa ti ale zrejme nepáčil. Tak jednoducho, ako si to predstavuješ to nejde. Na hrubú funkčnosť by si (čisto odhadom bez skúmania zdrojového kódu) potreboval jednu až dve stovky riadkov bežne štruktúrovaného kódu. Možnosti ako sa dá Google okabátiť nepoznám. Nikdy som ten nástroj nepoužil. Neviem koľko riadkov je potrebných na to, aby sa prestal hnevať.
Uvedom si ale, že stránku optimalizuješ pre návštevníkov, nie vyhľadávač.

Prečítaj si niečo spomínanej <meta> značke.
žadatel
Profil *
"Tak jednoducho, ako si to predstavuješ to nejde. Na hrubú funkčnosť by si (čisto odhadom bez skúmania zdrojového kódu) potreboval jednu až dve stovky riadkov bežne štruktúrovaného kódu."

Díky za názor, informace ohledně počtu nutných řádků nového kódu je pro mne důležitá.

Já jako laik nedokážu bez podívaní se na zdroják určit náročnost požadované úpravy, vy experti to nicméně evidentně dokážete :-)

Přesto si dovolím nesouhlasit - kupříkladu přidáním initial-scale=0.4 daný červený vykřičník zmizí (ale místo něho se objeví jiné). Elaborování za účelem uspokojení robota nicméně z mého laického pohledu vypadá dost časově náročné, takže se jím bez dalších případných rad expertů nemá cenu zaobírat.
Tomáš123
Profil
žadatel:
Nie som expert a stanovisko počtu riadkov som neodhadol priamo z tvojho webu. Videl som, že tvoj kód je prehustený značkami a tipol si približný počet na základe iných kódov, ktoré som robil alebo videl. Veľa značiek však môže znamenať aj veľa zbytočností a nutný počet riadkov to môže značne redukovať.

O tom, čo sa ti na tejto diskusii nedostane som už písal v [#4]. Aspoň odo mňa nie. Experimentuj si sám. Ešte raz ti ale zopakujem, že tie stránky nerobíš pre Google.
Str4wberry
Profil
Problém je v tom, že přidáním samotné značky <meta name="viewport"> bez dalších úprav výsledek jen zhoršíte.

Existují tedy dvě možnosti:
1) Neřešit to a nemít web responsivní.
2) Převést web do responsivní podoby. Potom nastavení viewportu zajistí, že se mobilní prohlížeče nebudou snažit zobrazovat stránku zmenšenou.

Detailní postup, kterým převádím weby na responsivní, jsem popsal tady: Převod webu na responsivní design
žadatel
Profil *
"Problém je v tom, že přidáním samotné značky <meta name="viewport"> bez dalších úprav výsledek jen zhoršíte."

Nevím, jestli dobře chápu - k této meta značce přidávám buď width=790 (viz prvni odkaz v prvním příspěvku - toto je defaultní stav) nebo width=width-device (toto je stav, který se mi neosvědčil pro různá initial-scale, viz druhý odkaz v prvním příspěvku). Říkáte, že pro viewport s width=790 si škodím víc než bez napsání viewport (a width=790)?

"
Detailní postup, kterým převádím weby na responsivní, jsem popsal tady"

Díky za odkaz. Na první pohled to pro laika vypadá na přidání několika řádků do css - souhlasíte tedy s Tomášem123, že bude zapotřebí pro uvedenou stránku 100 - 200 řádkových úprav (při zachování vzhledu, který se momentálně zobrazuje na běžném mobilu)?
Str4wberry
Profil
Problém je v tom, že existují tisíce různých rozlišení, které lidé používají. Tedy nastavovat pevnou šířku má k ideálu dost daleko.

Došel jsem k názoru, že buď responsivní web vůbec neřešit (nepřidávat viewport), nebo ho nastavit na <meta name="viewport" content="width=device-width,initial-scale=1">, ale zajistit, aby na stránce neexistovaly prvky širší než nějakých cca 320 pixelů (docela běžná šířka starých telefonů s malým displejem) nebo ještě méně. To znamená typicky rozbourat vícesloupcový layout pod sebe.

Proč?

Mobilní prohlížeče se po hodně let musely naučit vypořádat s běžnými neresponsivními weby a docela se jim to povedlo. Normální stránka bez viewportu se zobrazí zmenšená, aby byla celá vidět, a jde dvojitým poklepáním přiblížit požadovaná oblast, aby byl text dobře čitelný a řádky se přizpůsobily šířce displeje.

Nastavením viewportu v podstatě člověk přebírá zodpovědnost zobrazení na sebe a pokud se to neudělá pořádně, může to funkčnost webu zhoršit.
Chamurappi
Profil
Reaguji na žadatele:
ja se celou dobu bavim o strance 3x3x3 - viz prvni odkaz v prvnim prispevku
přidávám buď width=790 (viz prvni odkaz v prvním příspěvku - toto je defaultní stav)
Dovolím si upozornit, že v prvním příspěvku odkazuješ jen na nějaký screenshot hodnocení, ne na stránku svého webu. Takže část lidí, kteří ti radí (včetně mě teď), nekomentuje konkrétní provedení tvé stránky.

bude zapotřebí pro uvedenou stránku 100 - 200 řádkových úprav (při zachování vzhledu, který se momentálně zobrazuje na běžném mobilu)
Pokud se nemýlím, tak robot Googlu posuzuje i velikost písma. Takže pokud zachováš vzhled, při němž je písmo malinké, červený vykřičník ti pravděpodobně zůstane.
Nemyslím si, že by byly potřeba stovky řádků CSS. Spíš maximálně desítky.
žadatel
Profil *
Jak že vlastně ten viewport prosím funguje? Jde mi o to, že na "desktopovém" prohlížeči se stránka zobrazí s šedým pozadím při viewport width=790, ale na mobilním zařízení, u kterého výrobce deklaruje rozlišení displeje 480 x 800 pixelů se při obou natočeních (na výšku i šířku) zobrazí při viewport width=790 stránka bez šedého pozadí (u 480 bych to pochopil, ale jakto že u 800 se nezobrazí šedé pozadí jako u desktopu)? Jak by se třeba pro viewport width=790 chovalo mobilní zařízení s displejem 900 x 900 a jak by se chovalo desktopové zařízení se stejnými rozměry? Jak by se pro viewport width=790 chovalo mobilní zařízení s displejem 600 x 600 a jak by se chovalo desktopové zařízení se stejnými rozměry?

Když naopak dám na stránce viewport width=device width, proč se změna objeví na mobilu, ale už ne na desktopu (tam vidím pořád "desktopovou verzi", která se s velikostí okna nemění). Když se ale podívám na ostatní weby (např. jecas.cz) s viewport width=device-width a změním rozměry okna na desktopu, změní se na ní rozměry stránky...

Str4wberry:
Nastavením viewportu v podstatě člověk přebírá zodpovědnost zobrazení na sebe a pokud se to neudělá pořádně, může to funkčnost webu zhoršit.
Protože si nedokážu představit situaci, kdy by mohlo viewport width=790 funkčnost webu zhoršit, můžete prosím uvést konkrétní případ?

Chamurappi:
Takže pokud zachováš vzhled
Což implikuje viewport width=790. Taky vidíš spor ohledně červeného vykřičníku robota (kterej neskousne nic jinýho než viewport width=device-width)?

Pokud se nemýlím, tak robot Googlu posuzuje i velikost písma.
Vskutku. Při viewport width=device-width,initial-scale=0.4 a v CSS font: 230%/1.5 namísto nynějších 130%/1.5 je robot uspokojen (hodí mi 97% místo současných 87% v hodnocení). Že se na mobilu na tu stránku po této úpravě nejde pořádně koukat, je mu evidentně šumák. Takže není nutné psát několik desítek řádků kódu, stačí dva ;-)

Pokud mě Str4wberry (nebo někdo jiný) svými argumenty nepřesvědčí o tom, že viewport width=790 může někomu/něčemu uškodit, zůstanu u této možnosti. Sice zatím nevím, jak to pořádně funguje, ale zdá se, že na mobilu i desktopu nabízí přesně to, co se mi líbí (tj. vidění všech klikatelných věcí bez vodorovného posuvníku a zároveň pěkné zobrazení na mobilu bez šedého pozadí).
Str4wberry
Profil
Příklad je ta vaše stránka: hlavolam.maweb.eu/rubikova-kostka-3x3x3

Na mobilu je písmo dost malé a neexistuje způsob, jak si ho snadno zvětšit a pohodlně číst (při zoomování se délka řádků nepřizpůsobí).

Na hlavní straně, kde ten viewport není, se po dvojitém poklepání požadovaná oblast přiblíží do přijatelnější velikosti (obrázek vpravo).

I když alespoň na mém telefonu to ve vašem případě zase tak hrozné není.

žadatel
Profil *
Str4wberry:
na mém telefonu to ve vašem případě zase tak hrozné není

<mimo téma>
Font v CSS zvětšen na 145%/1.5 z doposavadních 130%/1.5 pro stránky s viewport width=790. Když se podívám na homepage seznam.cz, subjektivně se mi zdá velikost písma zhruba stejná (o chlup větší u mě).
</ mimo téma>
Str4wberry
Profil
Doporučil bych velikost srovnávat spíš s typově podobnými stránkami. Něco jiného je rozcestník (Seznam) a dlouhý článek (vaše stránka).

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: