Hogyan tedd hatékonnyá weboldalad?

Az előadások a következő témára: "Hogyan tedd hatékonnyá weboldalad?"— Előadás másolata:

1 Hogyan tedd hatékonnyá weboldalad?
Website ergonómia Hogyan tedd hatékonnyá weboldalad? Gombos Zsolt

2 1. Megszokások 2009. Május 9.

3 Mi az ergonómia? Kilincs magassága Szék magassága Autó műszerfala
2009. Május 9.

4 Mi a website ergonómia? A felhasználói kényelem speciálisan az internetes világra értelmezett formája Azaz: Használható Logikus Egyszerű Átlátható Gyors 2009. Május 9.

5 2. Össznépi Webergonómia Teszt
2009. Május 9.

6 Az oldal letöltés sebessége
17/01 Az oldal letöltés sebessége Hidd el: a látogató mindig siet. Az oldal mérete: >100 kB de inkább >60 kB 2009. Május 9.

7 Az oldal letöltés sebessége
17/01 Az oldal letöltés sebessége 2009. Május 9.

8 Az oldal letöltés sebessége
17/01 Az oldal letöltés sebessége „Igen, de a sávszélesség folyamatosan nő! Hol vannak már azok a modemes idők?!” 2009. Május 9.

9 17/01 Az oldal letöltés sebessége
A weboldalam 5 másodpercen belül betöltődik. 2009. Május 9.

10 17/02 Kontraszt 2009. Május 9.

11 17/02 Kontraszt A legjobb megoldás: Fehér alapon fekete szöveg
2009. Május 9.

12 A háttér és a szöveg között a megfelelő a kontraszt a weboldalamon.
17/02 Kontraszt A háttér és a szöveg között a megfelelő a kontraszt a weboldalamon. 2009. Május 9.

13 17/03 Betűk Betűtípus: Georgia Arial Verdana Tahoma Courier New Trebuchet MS Impact Times New Roman 2009. Május 9.

14 A felhasználó szabadon változtathassa!
17/03 Betűk Betűméret / betűköz: A felhasználó szabadon változtathassa! 2009. Május 9.

15 17/03 Betűk Az általam használt betűtípus bárki által megjeleníthető ÉS lehetőség van a betűméret tetszőleges megválasztására. 2009. Május 9.

16 17/04 Flash animációk „200 ezerér’ csináltattam az intrót a weboldal elé, az emberek várják csak ki!” Nem fogják kivárni. 2009. Május 9.

17 17/04 Flash animációk Sőt. 2009. Május 9.

18 A weboldalam nem tartalmaz FELESLEGES
17/04 Flash animációk A weboldalam nem tartalmaz FELESLEGES Flash animációkat. 2009. Május 9.

19 Képek mérete + képaláírások
17/05 Képek mérete + képaláírások Optimális esetben egy kép több méretben is elérhető: NÉZŐKÉP + KÖZEPES MÉRET + TELJES MÉRET 2009. Május 9.

20 Képek mérete + képaláírások
17/05 Képek mérete + képaláírások 2009. Május 9.

21 Képek mérete + képaláírások
17/05 Képek mérete + képaláírások Képaláírás (ALT tag) Tájékoztatja a gyengén látó felhasználókat a kép tartalmáról A kereső robotoknak is hasznos információt nyújt 2009. Május 9.

22 Képek mérete + képaláírások
17/05 Képek mérete + képaláírások A weboldaladon megfelelőek a képek méretei és tartalmaznak magyarázó (alternatív) szöveget. 2009. Május 9.

23 17/06 Hiba - 404? 2009. Május 9.

24 17/06 Hiba - 404? Legyen hibaoldalad! Segítsd a tájékozódást!
Értesülj róla! 2009. Május 9.

25 17/06 Hiba - 404? Van 404-es hibaoldalam, és van rajta a felhasználónak szánt értékes tartalom. 2009. Május 9.

26 Véletlenek nincsenek:
17/07 Logó Állandó, jól látható helyen legyen (BF) Hivatkozzon a nyitóoldaladra Véletlenek nincsenek: 2009. Május 9.

27 17/07 Logó 2009. Május 9.

28 17/07 Logó A logóm, a weboldal bal felső részében helyezkedik el, és linkel a nyitóoldalamra. 2009. Május 9.

29 Véletlenek nincsenek:
17/08 Szlogen Legyen jól látható helyen Ne legyen több pár szónál Mondja el mivel foglalkozol, és mitől vagy más mint a konkurenseid Keresőoptimalizálás szempontjából is hasznos lehet Véletlenek nincsenek: 2009. Május 9.

30 17/08 Szlogen A szlogenem rövid, tömör és jó kifejezi mitől vagyok más mint a konkurensek, és szerepel is a weboldaladon. 2009. Május 9.

31 Domain + logó/szlogen + vezérkép + főcím + menüpontok
17/09 5 másodperces szabály Ennyi idő alatt derüljön ki egy új látogatónak, miről szól az oldal Domain + logó/szlogen + vezérkép + főcím + menüpontok 2009. Május 9.

32 17/09 5 másodperces szabály (Szerintem…)
Egy új látogatónak van esélye 5 másodpercen belül eldönteni miről szól a weboldalam. 2009. Május 9.

33 17/10 Rólunk / Bemutatkozás Unalmas menüpont, de fontos
Ne az első menüpont legyen! De legyen ott a fő navigációban! 2009. Május 9.

34 17/10 Rólunk / Bemutatkozás
Nem a „Cégünkről” az első menüpontom, de megtalálható a fő navigációs elemek között! 2009. Május 9.

35 17/11 Elérhetőség A legfontosabb kapcsolat-felvételi forma legyen állandóan látható Minél több mód legyen a kapcsolat-felvételre! Ne csak cégnév, hanem legyen fotó, és személynév is, külön elérhetőséggel 2009. Május 9.

36 17/11 Elérhetőség Fő elérhetőségeim folyamatosan látszódnak, de van neki külön menüpont is, jól látható helyen. 2009. Május 9.

37 Fő navigációs sor (Őrangyal)
17/12 Fő navigációs sor (Őrangyal) Alapkonvenció: Az emberek nem használnak olyan honlapokat, ahol nem ismerik ki magukat. A fő navigációs sor kötelezően állandó elem (majdnem) minden oldalon. Fő- és aloldalak következetes megkülönböztetése „Hol vagyok?” 2009. Május 9.

38 Fő navigációs sor (Őrangyal)
17/12 Fő navigációs sor (Őrangyal) Webmorzsák: Ön itt áll! 2009. Május 9.

39 Fő navigációs sor (Őrangyal)
17/12 Fő navigációs sor (Őrangyal) A fő menüsorom, állandó helyen van, következetes felépítésű, és használok webmorzsákat! 2009. Május 9.

40 Oldalon belüli navigáció
17/13 Oldalon belüli navigáció Egyszerűen fogalmazz: Óriásplakátra szövegezz, ne regényt írj! Vegye fel a kapcsolatot munkatársunkkal online! >> Vegye fel a kapcsolatot munkatársunkkal online! >> helyett: Kapcsolatfelvétel >> 2009. Május 9.

41 17/13 Oldalon belüli navigáció
Egyszerű és tömör az oldalon belüli navigáció a weboldalamon. 2009. Május 9.

42 17/14 Linkek Aláhúzott és következetesen eltér a szöveg színétől. Link >> A már egyszer meglátogatott oldal színe más színű Link >> 2009. Május 9.

43 Véletlenek nincsenek:
17/14 Linkek Véletlenek nincsenek: 2009. Május 9.

44 17/14 Linkek A linkek jól elkülönülnek a szövegtől, és a már meglátogatott linkek színe eltér a többitől. 2009. Május 9.

45 17/15 Aki keres az talál! Legyen keresés! (kivéve ha…)
A séma egyszerű: Kereső mező és egy gomb: „keresés” Felesleges: „Írja be a keresett kifejezést” A keresés működjön! Releváns találatokat adjon! Az oldal jobb felső részében legyen állandó elemként. 2009. Május 9.

46 17/15 Aki keres az talál! Van keresés funkció a weboldalon, jobb felül található, és releváns találatokat ad. 2009. Május 9.

47 17/16 Főcímek A neten nem olvasunk, hanem ÁTOLVASUNK. (szkennelünk)
Legyen leíró, tartalmazza az adott aloldal főbb kulcsszavait Logikusan látszódjon a hierarchia Használj <H1>, <H2> elemeket 2009. Május 9.

48 17/16 Főcímek Jól látható a fő és alcímek közötti hierarchia, a címek tartalmazzák az adott aloldal főbb kulcsszavait, és a forrásban vannak <H1> elemek. 2009. Május 9.

49 17/17 Csinos URL-ek http://www.valami.hu/index.php?id=46 VAGY
2009. Május 9.

50 A weboldalon csinos URL-eket használok.
17/17 Csinos URL-ek A weboldalon csinos URL-eket használok. 2009. Május 9.

51 Nos? Mennyi az annyi? 2009. Május 9.

52 Eredmények 17 pont? 2009. Május 9.

53 Meglepetés Csak Ft+Áfa!! 2009. Május 9.

54 Meglepetés + + + tényleg csak nektek: Ft+Áfa 2009. Május 9.