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

Több
2015 ápr. 01 08:23 - 2015 ápr. 01 08:23 #1 Írta: Mona
Mona létrehozta a témát: 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!
Utolsó szerkesztés: 2015 ápr. 01 08:23 Írta: Mona.

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2015 ápr. 01 09:51 - 2015 ápr. 01 09:51 #2 Írta: Balázs
Balázs válaszolt a témára: Hogyan lehet mobilbarát egy weboldal?
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.

Ha bizalmas információt szeretnél közölni az adminokkal, akkor tedd az üzeneted tartalmát a [ confidential ][ /confidential ] címkék közé (szóközök nélkül).

Joomla! tanácsadás, oktatás, fejlesztés - joomlabs.hu
Utolsó szerkesztés: 2015 ápr. 01 09:51 Írta: Balázs.
A következő felhasználók mondtak köszönetet: Mona

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2015 ápr. 01 11:04 - 2015 ápr. 01 12:02 #3 Írta: Zotius
Zotius válaszolt a témára: Hogyan lehet mobilbarát egy weboldal?
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.


Ha hasznos volt a hozzászólásom számodra, nyugodtan megnyomhatod lent a „Köszönet” gombot :)
Skype: zotius
Utolsó szerkesztés: 2015 ápr. 01 12:02 Írta: Zotius. Indoklás: javítás

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2015 ápr. 01 11:21 - 2015 ápr. 01 12:15 #4 Írta: Zotius
Zotius válaszolt a témára: Hogyan lehet mobilbarát egy weboldal?
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:
# Disallow: /images/
# Disallow: /modules/
# Disallow: /plugins/
# Disallow: /templates/
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...

Ha hasznos volt a hozzászólásom számodra, nyugodtan megnyomhatod lent a „Köszönet” gombot :)
Skype: zotius
Mellékletek:
Utolsó szerkesztés: 2015 ápr. 01 12:15 Írta: Zotius.
A következő felhasználók mondtak köszönetet: Mona

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2015 ápr. 07 11:33 #5 Írta: Motoros
Motoros válaszolt a témára: Hogyan lehet mobilbarát egy weboldal?
Esetleg további figyelmetekbe ajánlom még:
addons.mozilla.org/hu/firefox/addon/wcag-contrast-checker/

A szabadban sokszor alig látni valamit...

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2015 ápr. 07 20:52 #6 Írta: Zotius
Zotius válaszolt a témára: Hogyan lehet mobilbarát egy weboldal?

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.

Ha hasznos volt a hozzászólásom számodra, nyugodtan megnyomhatod lent a „Köszönet” gombot :)
Skype: zotius

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2015 ápr. 13 11:39 #7 Írta: Motoros
Motoros válaszolt a témára: Hogyan lehet mobilbarát egy weboldal?
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...
A következő felhasználók mondtak köszönetet: Zotius

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2015 ápr. 15 11:08 #8 Írta: Zotius
Zotius válaszolt a témára: Weboldal optimalizálással kapcsolatos feladatok
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... :)

Ha hasznos volt a hozzászólásom számodra, nyugodtan megnyomhatod lent a „Köszönet” gombot :)
Skype: zotius

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2015 ápr. 15 15:33 #9 Írta: Motoros
Motoros válaszolt a témára: Weboldal optimalizálással kapcsolatos feladatok
"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

Jelentkezz be, hogy te is részt vehess beszélgetésben!

Több
2015 ápr. 15 17:35 - 2015 ápr. 15 17:51 #10 Írta: Zotius
Zotius válaszolt a témára: Weboldal optimalizálással kapcsolatos feladatok
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:
#Experimental htaccess to help optimize for tools such as YSlow

#If available, set the expires to 'far future'
<IfModule mod_expires.c>
	ExpiresActive On
	ExpiresDefault "access plus 1 month"
	ExpiresByType application/pdf "access plus 1 month"
	ExpiresByType application/x-javascript "access plus 1 week"
	ExpiresByType application/x-shockwave-flash "access plus 1 month"
	ExpiresByType image/gif "access plus 1 month"
	ExpiresByType image/ico "access plus 1 month" 
	ExpiresByType image/jpeg "access plus 1 month"
	ExpiresByType image/png "access plus 1 month"
	ExpiresByType image/x-icon "access plus 1 month"
	ExpiresByType text/css "access plus 1 week"
	ExpiresByType text/html "access plus 1 day"
	ExpiresByType text/plain "access plus 1 week"
	ExpiresByType video/x-flv "access plus 1 month"
</IfModule>

#Turn off ETags
FileETag none

É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:
<IfModule mod_headers.c>
<filesMatch "\.(gif|jpg|jpeg|png)$">
Header set Cache-Control "max-age=2419200"
Header set Expires "Thu, 15 Apr 2112 20:00:00 GMT"
</filesMatch>
</IfModule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>
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. :)

Ha hasznos volt a hozzászólásom számodra, nyugodtan megnyomhatod lent a „Köszönet” gombot :)
Skype: zotius
Utolsó szerkesztés: 2015 ápr. 15 17:51 Írta: Zotius.

Jelentkezz be, hogy te is részt vehess beszélgetésben!