Kérdés Hogyan lehet mobilbarát egy weboldal?

Sziasztok!
Yootheme responzive sablonokat használok a weboldalaimhoz, a Google tesztoldalán ( www.google.com/webmasters/tools/mobile-friendly/ ) viszont az az eredmény minden esetben az, hogy nem mobilbarát az oldal. Úgy tudom, hogy a robot.txt-ben kell törölni ezt a három sort és mobilbarát lesz az oldal: disallow: /templates/ disallow: /plugins/ disallow: /moduls/.
viszont hiába törlöm ezeket, akkor is ugyanúgy nem mobilbarátként hozza ki az oldalakat a teszt.
Van ötletetek, hogy mit lehetne csinálni?

Köszönöm!

Fontos leszögezni, hogy ami szélességkövető (reszponzív) az nem feltétlenül automatikusan mobilbarát. Azt nem tudom pontosan, hogy a Google milyen irányelvek szerint vizsgálja az adott weboldalt, de számítani szokott, hogy a menük mobilnézetben is használhatóak legyenek (érintéssel), ne legyen az oldalnak olyan funkciója, amely nem működik mobilnézet alól, megfelelőek a betűméretek, mobilbarát legyen a képek mérete stb. A robot.txt-nek, ehhez semmi köze.

Nem tudom, hogy a Google ilyen esetben ad e ki pontos hibalistát, vagy javaslatot, de érdemes átolvasni a saját irányelveiket a mobilbarát weboldalalakkal kapcsolatban.

A mobilbarát képességgel kapcsolatban javaslom elolvasni a Google erre vonatkozó cikkét . Ebben - többek között - ez áll:

Melyik oldal érdemli ki a mobilbarát jelzőt?

A Google nyilatkozatában azt is közölte, mely weboldalak érdemlik meg a mobilbarát címkét:

• Az első és legfontosabb, hogy nem használnak olyan megoldásokat, amit a mobileszközök nem tudnak kezelni, ilyen a Flash például
• Olyan szövegmérettel dolgoznak, amely a mobilon is olvasható nagyítás nélkül
• A tartalmat a képernyőmérethez igazítja, így a felhasználónak nem kell vízszintesen görgetnie, vagy nagyítania
• A linkeket olyan távolságra helyezi el egymástól, hogy azt könnyedén lehessen érinteni.

Előző válaszom után elkezdtem én is vizsgálódni mobilbarát-teszt ügyben. Nos, nem három, hanem négy mappát kell a Disallow: ... -ból (tiltásból kivenni:Ezután ellátogattam a Mobilbarát-teszt oldalra, és megvizsgáltam egyik oldalunkat. Az eredmény - az első, robots.txt módosítása előtti teszt miatti pofánvágás után - meglepően jó lett:



Kíváncsian várom, mikor fog megjelenni a találati listában a "mobile-friendly" címke...

Esetleg további figyelmetekbe ajánlom még:
addons.mozilla.org/hu/firefox/addon/wcag-contrast-checker/

A szabadban sokszor alig látni valamit...

Motoros írta: Esetleg további figyelmetekbe ajánlom még:
addons.mozilla.org/hu/firefox/addon/wcag-contrast-checker/

Az általad adott link a web akadálymentesítési szabványának ( WCAG 2.0 ) való megfeleléshez nyújt segítséget, nem kifejezetten a „mobilbarát” megfelelést segíti, a kontrasztok mértékét számolgatja.
Az bizonyára hasznát veszi, akinek az akadálymentességet kell teljesítenie.

Valóban. Az előző link segít abban, milyen színt(-eket) válasszunk/használjunk.

Valahogy mindenki átlépi azt a problémát, hogy ami otthon a szobában vagy egy grafikai stúdió irodájában jól látható. Ha strandon. buszmegállóban, szőlőben hívják le sokszor alig-alig vagy egyáltalán nem látható.

De beteszek pár további linket, ami érdekes lehet - hogy a mobilt használók felhasználói élményét kielégíthessétek:

Ez elég régi verzió, de azt mutatja, milyen gyorsan vagy lassan töltődik be az oldalad mobilon, illetve javaslatot is tesz hogy mit kellene javítani. Valamint rendelkezésre bocsájt esetlegesen egy javított, optimalizált állomány amit csak fel kell töltened a régi helyett.
gtmetrix.com/reports/vuf.hu/KLAYD7Dg

Ez a Google sebesség vizsgálója, hasonló az előzőhöz 0-100-as skálán értékeli a sebességet és a mobilos megjelenést:
developers.google.com/speed/pagespeed/insights/?url=vuf.hu
/* a rendszer gyorsítótárazás bekapcsolásával leszorítható a szervar válaszideje 0,3 másodperc alá! */

Ez is egy elég részletes jelentést ad a weblap teljesítményéről:
freereports.zoompf.com/r/33eaf757d7624fb...37c78e29/report.html
/* pár éve részletesebb és szájbarágósabb volt */


És ami nem mobilbarát megjelenéshez kapcsolódik ám mégis érdemes időnként megvizsgálni például az itt található szerszámokkal:
www.powermapper.com/products/sortsite/
Különböző szabványok, böngészők stb szerint elemzi a honlapot - kijelzi a html, css hibákat. Törött linkeket...

Hát igen... Egy magára-valamit-is-adó webmaster ezekkel a témakörökkel is foglalkozik. El is mentettem az optimalázálással foglalkozó linkeket a kedvenceim közé, és elkezdtem vizsgálódni mindjárt a gmetrix-en. Nézzünk egy pár "hibát":

• Hasznosítsa a böngésző gyorsítótárazását.

Ezzel nem igazán tudok mit kezdeni. A globális konfigurációban gyorsítótárazást bekapcsoltam, semmi nem változott.
Az itt felsorolt javascriptek esetében azt hozza fel problémának, hogy "a lejárat nincs meghatározva". Ezen pedig végképp kiakadtam:
"Az oldalon 20 gátló szkriptforrás és 14 gátló CSS-forrás van, amelyek késleltetik az oldal megjelenítését.
Az oldal hajtás feletti tartalmának semennyi részét sem lehetett megjeleníteni anélkül, hogy várakozni kellene a következő források betöltésére. Próbálja késleltetni vagy aszinkron módon betölteni a gátló forrásokat, vagy foglalja be közvetlenül a HTML-be e források kritikus részeit.
Távolítsa el a megjelenítést gátló JavaScriptet:
(url)/media/system/js/mootools-core.js
(url)/media/system/js/core.js
(url)/media/system/js/mootools-more.js
(url)/media/system/js/modal.js
(url)/media/jui/js/jquery.min.js
(url)/media/jui/js/jquery-noconflict.js
(url)/media/jui/js/jquery-migrate.min.js
(url)/media/system/js/caption.js
(url)/media/jui/js/bootstrap.min.js
(url)/libraries/gantry/js/browser-engines.js
(url)/templates/gantry/js/rokmediaqueries.js
(url)/templates/gantry/js/load-transition.js
(url)/…enu/themes/default/js/rokmediaqueries.js
(url)/…roknavmenu/themes/default/js/sidemenu.js
(url)/…roksprocket/assets/js/mootools-mobile.js
(url)/…roksprocket/assets/js/rokmediaqueries.js
(url)/…com_roksprocket/assets/js/roksprocket.js
(url)/…nents/com_roksprocket/assets/js/moofx.js
(url)/…t/layouts/features/assets/js/features.js
(url)/…uts/features/themes/showcase/showcase.js
"
Nos, manapság a weboldalak (köztük a Gantry-s Joomla rendszerek) létezni sem képesek a sok js nélkül. Ugyan hogyan lehetne ezeket eltávolítani?! (A trendi megjelenéshez sok honlapnál látható slider-eket esetleg még lehet cserélni statikus dekorációra, de az már más kérdéskör, hogy hogyan találjuk meg az arany középutat a dizájnos megjelenés és a lehető legoptimálisabb oldalfelépítés között.)

• Optimalizálja a következő képeket
Ezen elcsodálkoztam, hiszen a felsorolt képek .jpg-k, eleve tömörítettek. Ugyan mit lehetne még tömöríteni rajtuk? Esetleg a tömörítési arányt, de az viszont nem "lossless" lesz, és romlik a kép minősége...

Egyelőre ennyi. Majd még folytatom...

"Hasznosítsa a böngésző gyorsítótárazását."

A szerver kiszolgálónak van 1 .htaccess állománya...
Vagy php kóddal bővíthető a forrás állományban.

Erre vedd az irányt

A .htaccess-t többé-kevésbé ismerem (enyhe túlzás - inkább értem, mire való). A baj csak az, hogy a cache beállítást a github-on inkább az Apache Server Config fájlba (httpd.conf) javasolják beírni, mert a .htaccess-ben történő deklarációja kifejezetten lassítja a szervert az itt leírtak szerint:

If you have access to the main server configuration file (usually called httpd.conf), you should add the logic from the .htaccess file in, for example, a <Directory> section in the main configuration file. This is usually the recommended way, as using .htaccess files slows down Apache!

Találtam némi segítséget a beállítására, most próbálgatom.

Kiegészítés: Most látom, hogy a gantry sablon gyökerében van egy .htaccess fájl, tartalma:
Épp a gyorsítótárazás miatt. A PageSpeed Insights viszont épp a css-ek lejáratát hiányolja. Ezek szerint ez a .htaccess hatástalan? Tegyem át a site gyökerében lévőbe ezeket az utasításokat?

---

Folytatás:
Beraktam a gyökérben lévő .htaccess-be a következőket, mindjárt az elejére:A PageSpeed Insights értéke mindjárt jobb lett: mobil nézetben 51/100 - ról 55/100-ra, asztali nézetben 66/100-ról 70/100-ra emelkedett.