Egy weblap elkészítése és közzététele közben (és után) egy webfejlesztőnek rengeteg dolgot kell fejben tartania és ellenőriznie. Megpróbálok egy ellenőrzőlistát készíteni a véleményem szerint leglényegesebb teendőkről. A teljes listát később külön oldalként is elhelyezem a blogon. A végleges lista nem lesz rövid, de rendszeresen aktualizálom.
Nézzük tehát azokat a dolgokat, amikre oda kell figyelnünk egy weblap készítése során.
Alkalmazott technológiák
HTML
- HTML és CSS: Érdemes a legtöbb eszközön használható, egységes, reszponzív lapot készíteni.
- HTML: Lehetőség szerint alkalmazzuk az aktuálisan legkorszerűbb, kellően támogatott leírónyelvet (HTML5).
- HTML: Használjuk a HTML szemantikus leíró nyelvének lehetőségeit (header, footer, nav, article, section, em, stb.).
- HTML: A metaadatokkal (pl. Schema.org) a lapunkat a keresők számára könnyebben értelmezhetővé tehetjük.
- HTML: Ne feledkezzünk meg a helyes rel=”canonical” link helyes beállításáról.
- HTML: A több oldalas cikkeknél, listáknál használjuk a rel=”prev” és rel=”next” attriútumokat a linkeknél.
- HTML: Készítsünk a felhasználót segítő 404-es hibaoldalt, ahol nem csak egy hibaüzenet, de megoldási lehetőségek is szerepelnek.
- HTML: Ha a lapunkon van kereső, akkor használjuk ki az opensearch link lehetőségét (rel=”search”).
- HTML: Ne csak favicon.ico ikont, hanem egyéb méretű ikonokat is biztosítsunk (pl. rel=”apple-touch-icon”).
- META: A title és description meta tagek kiemelten fontosak a SEO szempontjából.
- META: A mobil eszközöknek adjuk meg a viewport meta beállításával a megjelenítés általunk elvárt módját.
- META: Kerüljük a fölösleges meta tagek használatát (pl. generator).
CSS
- CSS: CSS esetén is javasolt a legtöbb szolgáltatást nyújtó, kellően támogatott verzióra építkeznünk, amely jelenleg a CSS3.
- CSS: Lehetőség szerint a méretek megadásánál használjuk a relatív értékeket (% és em a px helyett).
- CSS: Törekedjünk a lehető legrövidebb CSS kód méretre, nem szükséges minden elemnél minden tulajdonságot megadni, vegyük figyelembe az öröklődést, és vonjuk össze bátran az osztályokat.
- CSS: Minimalizáljuk a CSS kérések számát, a mindig szükséges elemeket a szerveroldalon is összevonhatjuk.
- CSS: Használjuk ki a „media query” lehetőségeit, a felhasználó élményt javítják az adott méretű eszközök lehetőségeit jobban kihasználó oldalak.
- CSS: Készítsünk a lapunkból egy printelhető verziót CSS szinten (@media print{}), ahol megszabadulunk a minden fölösleges elemtől (pl. navigációs sáv, reklámcsíkok), háttérképtől és egyéb tintapazarlástól.
- CSS: Tisztítsuk meg a CSS fájlunkat a nem használt osztályoktól.
Javascript
- JS: Használjunk Javascript tömörítést, komolyabb kódnál jelentős lehet a nyereség!
- JS: Lehetőség szerint kerüljük a Javascript framework-ök (pl. JQuery) használatát. Egy egyszerűbb JS feladat miatt fölösleges letöltetnünk a 100kbyteos JQuery csomagot.
- JS: A javascripteket lehetőség szerint aszinkron módon töltsük be, ezáltal az oldal megjelenítését nem lassítjuk velük.
- JS: Kerüljük a fölösleges scripteket, amennyire az lehetséges. Gondoljuk át, hogy tényleg szükséges-e a lapunkat lassítani a bedrótozott a Twitter, Facebook, Google+, Pinterest és egyéb scriptekkel.
Képek
- IMG: Minden képhez adjunk alt és title attribútumokat.
- IMG: Az IMG tageknél a méretek megadását ne hanyagoljuk el , adjuk meg a width=”x” és height=”y” attribútumokat.
- IMG: Lehetőség szerint kerüljük el a képek böngésző általi átméretezését.
- IMG: Ne feledkezzünk meg a képeknél sem a kis méretű kijelzőkhöz méretezésről! (img {max-width:100%;height:auto})
- IMG: Ha sok kis képünk van, akkor alkalmazzuk a CSS sprite technikát az összevonásukra.
SEO
- SEO: Alkalmazzunk lehetőség szerint egy oldalba ágyazott, független forgalmi monitorozó lehetőséget (pl. Google Analytics).
- SEO: Nem árt egy logelemzésen alapuló forgalmi monitor sem (pl. AWStats).
- SEO: Regisztráljuk lapunkat a keresők Webmaster Tools eszközeibe.
- SEO: Hozzunk létre és küldjünk be XML formátumú sitemap-ot a keresőknek.
Egyebek
- ROBOTS.TXT: A robots.txt állományban tiltásokon kívül néhány robot számára meghatározhatjuk a sitemap címét és az elvárt lekérési gyakoriságot is.
Tesztek és ellenőrzőeszközök
- Validátorok:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/ - Sebesség tesztek:
http://developers.google.com/speed/pagespeed/insights
http://tools.pingdom.com/fpt/
http://developer.yahoo.com/yslow/
http://gtmetrix.com/ - Strukturált adatokhoz teszt:
http://www.google.com/webmasters/tools/richsnippets - Hozzáférhetőség, akadálymentesség:
http://wave.webaim.org/
http://atutor.ca/achecker/ - Mobil tesztek:
http://mobiready.com/
http://validator.w3.org/mobile/ - Böngésző tesztek:
http://browsershots.org/
http://browserling.com/ - SEO és általános tesztek:
http://nibbler.silktide.com/
http://www.woorank.com/ - Webmester eszközök:
http://www.google.com/webmasters/
http://www.bing.com/toolbox/webmaster/
http://webmaster.yandex.com/ - Forgalmi analizátorok:
http://www.google.com/analytics/
Az ellenőrzőlistát folyamatosan bővítem és aktualizálom, a jelenlegi bejegyzés csak a témaindító. Ha neked is van ötleted, meglátásod az ellenőrzőlistával kapcsolatban, akkor ne habozz hozzászólni!