Cikkünk a hirdetés után folytatódik!

Hogy működésre bírjuk, illesszük az alábbi kódot a functions.php fájlba, valamint cseréljük le tetszés szerinti szövegre az általam beírt üzenetet.

1
2
3
4
5

function custom_login_message() {
	$message = '<p class="message">Üdvözöljük, kérjük az oldal használata előtt olvassa el a <a href="#">felhasználási feltételeket</a>.</p><br />';
	return $message;
}
add_filter('login_message', 'custom_login_message');

Egyedi megjelenéshez változtassuk meg a paragrafus osztályát, mivel a jelenlegi “message” class, a wordpress alapértelmezett üzenet stílusát fogja alkalmazni.

Ha mindent helyesen csináltunk a következő belépésnél már meg kell jelenni az üzenetünknek.

Cikkünk a hirdetés után folytatódik!

Sticky Sidebar

Az első pluginünk a Sticky Sidebar, amely lehetővé teszi, hogy létrehozzunk úgynevezett lebegő dobozokat, amelyek követik a felhasználót az oldalon történő görgetés során. A plugint tesztelték IE6-IE9 és az összes többi főbb böngészőn.

Sticky Sidebar letöltése

jRumble

A jRumble egy jQuery plugin, rezeg, vibrál és forog minden irányban. Nagyon jó használni, pl. gombok animálásához, vagy olyan módon, hogy a megfelelő helyre irányítsa a figyelmet. Beállítható az X, Y, a forgatás, a sebesség, és az események kiváltója pl. hover, klikk stb.

jRumble letöltése

jQuery Backstretch

A Backstretch egy egyszerű jQuery plugin, amely lehetővé teszi, hogy adjunk egy dinamikusan átméretezett háttérképet bármely weboldalhoz. A kép nyúlik, hogy illeszkedjen az oldalhoz, illetve automatikusan átméretezi, amint az ablak mérete megváltozik.

Backstretch letöltése

Better Checkboxes

A radio gombokat tudjuk testre szabni a következő jQuery alkalmazással. Mint láthatjátok elég mutatós checkbox-okat kreálhatunk vele, ha véletlen le lenne tiltva a javascript a böngészőnkben akkor pedig az alapértelmezett kinézetre vált át.

Better Checkboxes letöltése

Thumbnails Navigation Gallery

Egy szokatlan ellenben szép lenyíló menüt rakott össze a szerző. Az érdekessége, hogy miután rákattintottunk az almenüket kis thumbnailek alkotják melyeket horizontálisan scrollozhatunk.

Thumbnails Navigation Gallery letöltése

qTip2

A qTip2 egy tooltip plugin, amely a linkek hover állapotakor a title-ben lévő tartalmat mutatja meg egy szövegbuborék formályában. Teljes mértékben testre szabható és egyszerű a használata is.

qTip2 letöltése

Retina Effect

A retina effect plugin tulajdonképpen egy nagyító , mellyel képeink egyes részeit nagyíthatjuk ki.

Retina Effect

Toggle Effect on Hover/Click

Tartalom elrejtésére és megjelenítésére használható. Hasznos lehet olyankor, amikor nem áll rendelkezésre túl sok hely a tartalom számára.

Toggle Effect on Hover/Click letöltése

BounceBox

A BounceBox segítségével létrehozhatunk egy csinos kis figyelmeztető ablakot bizonyos eseményekkor.

BounceBox Notification Plugin letöltése

Pull Out Content Panel

Az utolsó plugin egy tartalom ajánló panel, amely bizonyos esetekben válik csak láthatóvá. Természetesen ezeket az eseteket mi határozzuk meg. Először csak az általunk megadott számú bejegyzéseket mutatja de kitehető teljes képernyőre is, így már szinte végtelen mennyiségű tartalmat tekinthetünk meg.

Pull Out Content Panel

Zárszó

Jó munkát kívánok hozzájuk, és ha valamiben elakadnátok kérdezzetek bátran, itt vagy a plugin oldalán, valahol biztosan megoldjuk a problémákat.

A dolog azért is remek mert az eredeti css-hez nem nyúlunk, így a wordpress frissítésénél nem vész el az átalakítás.

Cikkünk a hirdetés után folytatódik!

A functions.php szerkesztése

A sablonod könyvtárában lennie kell egy functions.php fájlnak, másold a következő kódrészletet a végére. Ha véletlen mégsem találnál ilyen nevű fájlt, hozz létre egyet és mentsd el ezzel a névvel.

Ne feledd, ne hagyj üres helyet a php nyitó és záró tegek előtt és után!

1
2
3
4
5
6

<?php
function custom_login() { 
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/custom-login/custom-login.css" />'; 
}
add_action('login_head', 'custom_login');
?>

Ha esetleg máshova szeretnéd menteni a css-t, módosítsd az elérési utat.

A sablonfájlok szerkesztése

A következő dolog, hogy létrehozzunk egy helyet a css fájlnak és a képeknek. A sablon mappájában hozz létre egy custom-login mappát, ide fogjuk menteni a bejelentkező oldallal kapcsolatos fájlokat.

Szükség lesz még egy custom-login.css stíluslapra is, melyet a nemrég létrehozott mappába mentsünk el.

CSS hozzáadása

Ezek után, ha a bejelentkezési oldalt meglátogatjuk, a custom-login.css-t fogja minden alkalommal betölteni a wordpress. Tehát azok a szabályok amiket itt definiálunk, felülírják a wordpress eredeti stílusait.

A képi elemeket tároljuk a custom-login mappába. Ha viszont a sablonunk képei közül kell használnunk egyet, akkor onnan is hívjuk meg, mivel azt már egyszer letöltötte a böngésző. pl.

body {background: #e8e8e8 url(../images/custom-login-body.jpg) repeat-x 0 0;}

Összegyűjtöttem a login oldalon használt osztályokat, ezeket nyugodtan lehet formázgatni ízlés szerint. Azt hiszem mind benne van, de ha találnátok olyat ami nincs, jelezzétek és kiegészítem.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* Egyedi belépőfelület stílusa */
 
html {  } /* Háttér. Ezt használd a body helyett! */
h1 a {  } /* Logó */
 
body.login {  }	/* Felső sáv */
.login p#backtoblog a:link, .login p#backtoblog a:visited {  }	/* Link a felső sávban */
.login p#backtoblog a:hover, .login p#backtoblog a:active {  }	/* Hover link a felső sávban */
#backtoblog { }
 
form {  }
form:hover { }
label {  }
#nav {  }
.login #nav a {  }
input.button-primary, button.button-primary, a.button-primary {  } /* Submit gomb */
input.button-primary:active, button.button-primary:active, a.button-primary:active {  } /* Submit gomb aktív */
 
.updated, .login .message {  } /* Figyelmeztető ablak */
 
#login_error, .message { } /* Hibaüzenet ablak */

A logó

A logót, mint láthattátok a css-ben ki tudjuk cserélni. A következő két funkció az url-t (ami alapesetben http://wordpress.org) cseréli le és a link title tegjét, ami pedig eredetileg az oldal leírása.

Hasonlóan a fenti funkcióhoz ezt is a functions.php-ba kell illeszteni.

Az url lecserélése a saját site-unk címére

1
2
3
4
5
6

<?php
function change_wp_login_url() {
        echo bloginfo('url');
}
add_filter('login_headerurl', 'change_wp_login_url');
?>

A title lecserélése az oldalunk nevére.

1
2
3
4
5
6

<?php
function change_wp_login_title() {
        echo get_option('blogname');
}
add_filter('login_headertitle', 'change_wp_login_title');
?>

Zárszó

Ha gondolod mutasd meg egy hozzászólásban, milyenre sikerült a saját belépő felületed.

Kattints az alábbi képre, hogy megtekintsd a teljes méretű preview-t.

Horizontális Navigáció teljes méretben

Letöltés

Horizontális navigáció
(1.48 MB) | 374 letöltés
Egyszerű, letisztult és ingyenes menü psd.

Remélhetőleg a közeljövőben lesz időm elkészíteni, a leprogramozott változatát is. Addig is használjátok egészséggel.

Valamint, mivel ez az első bejegyzés 2011-ben, szeretnék boldog új évet kívánni mindenkinek. Igaz kicsit megkésve de sebaj. :)

A cikkben leírt optimalizációs trükkök látszólag nem tűnnek túlságosan fontosnak, de egy több száz vagy akár több ezer soros css esetében már látványos eredményt lehet elérni az alkalmazásukkal.

Tudniillik minél kisebb méretű egy css annál könnyebb azt betölteni a böngészőnek és weboldalunk gyorsasága is pozitív irányba fog billenni az alacsony mérettől.

Cikkünk a hirdetés után folytatódik!

Háttérbeállítások egy sorban

A külön sorokba írt háttérbeállítások helyett…

 background: url(pelda.png);
 background-color: #eaeaea ;
 background-repeat: repeat-x;
 background-position: top left;

nyugodtan használjuk ezt a módszert.

background: #eaeaea url(pelda.png) repeat-x top left;

Szegély beállítások

A border tulajdonságok formázására is van egyszerűbb megoldás,

border-color: red;
border-width: 1px;
border-style: solid;

mégpedig a következő.

border: 1px solid red;

Lista tulajdonságok

A listatulajdonságok is könnyen leegyszerűsíthetők.

list-style-position: outside;
list-style-image: none;
list-style-type: disc;

list-style: disc outside;
/* list-style: [list-style-type] [list-style-position] [list-style-image];*/

Betűtípus és sorköz beállítások

A betűtípussal is rengeteg helyet spórolhatunk meg.

font-family: Arial, Helvetica;
font-weight: bold;
font-style: italic;
font-size: 1em;
line-height: 1.5em;

5 sor helyett 1-el elintézzük az egészet.

font: bold italic 1em/1.5em Arial, Helvetica;

Margó és belső margó

A margó és belső margó (padding) értékek az óramutató járásával megegyezően írandók (top, right, bottom, left). De több variációjuk is létezik.

/* top=10px, right=5px, bottom=15px, left=20px */
margin: 10px 5px 15px 20px;
 
/* top=10px, right=5px, bottom=10px, left=5px*/
margin: 10px 5px;
 
/* top=10px, right=5px, bottom=15px, left=5px*/
margin: 10px 5px 15px;

A “0″ legyen “0″

Ha valaminek 0 az értéke, nem szükséges a mértékegységet is utána írni, a böngészők e nélkül is felismerik.

margin: 0px;
padding: 0em;

Használjuk inkább így.

margin: 0;
padding: 0;

Használj rövidítést a hexadecimális színeknél

A fehéret általában #ffffff színkóddal írjuk, de nyugodtan használhatjuk így is #fff, vagy a #aabbcc rövidítése #abc és így tovább.

A nem egész számok leegyszerűsítése

A 0.5em értéket rövidíthetjük .5em-nek, vagy a 0.5px-t .5px-nek.

Az utolsó pontosvessző elhagyása

Az utolsó beállítás után nem kötelező a pontosvessző használata, viszont ügyelni kell ha utólag egészítjük ki valamivel az osztályt vagy azonosítót.

div
{
margin: 0;
padding: 0 /* nyugodtan elhagyható az utolsó beállításunknál a pontosvessző */
}

Zárszó

Érdemes megjegyezni és alkalmazni ezeket a módszereket minden egyes munkánál, kivétel nélkül. Manapság eléggé elterjedtek a villámgyors internet-hozzáférések és hajlamosak vagyunk megfeledkezni arról, hogy bizony sok helyen még mindig viszonylag lassú kapcsolattal böngésznek.

Mit gondolsz a fent bemutatott dolgokról, esetleg tudsz e hasonló optimalizációs trükköt? Oszd meg a véleményed vagy saját módszereidet egy hozzászólásban.

Cikkünk a hirdetés után folytatódik!

Shine Free Icon Set

Ez a csomag egészen kifinomult 3d formákból áll és gyönyörű friss színvilággal rendelkezik. A 31 ikon 5 különböző méretben és vektor illetve raszter formátumban is megtalálható.

Shine Free Icon Set

BuddyIcon Social Set

A pack 126 db ikont tartalmaz melyet Orman Clark tervezett. Egy méretet találunk csak de mivel .ai formátumban tölthetők le így szabad méretezést kapunk.

BuddyIcon Social Set

Free Social Media Icon Set

42 db jól megtervezett ikon áll a rendelkezésünkre 1 méretben és 2 formátumban (psd és png).

Free Social Media Icon Set

OnStage Icon Set

A készletben 49 vektoros illetve psd formátumú ikon található meg melyeket teljesen szabadon használhatunk magán és üzleti célokra egyaránt.

OnStage Icon Set

Coquette Icon Sets

Egy másik kiváló ikon csomag mely méltán megállja a helyét sokféle webdesign projektben. A .png változat ingyenesen elérhető, ellenben a vektoros formátumért fizetni kell.

Coquette Icon Set

Mobile Icon Set

10 féle ikon található ebben a készletben 4 méretben. Magán és üzleti célra is felhasználható.

Mobile Icon Set

Incredibly Detailed Icons Set

Gyönyörű ikon csomag, elegáns és részletesen kidolgozott. 1 méretben és .png formátumban elérhető.

Incredibly Detailed Icons Set

Derelict Grunge Social Media Icons

2 méret, 2 formátum, szerintem iszonyat jól néz ki.

Derelict Grunge Social Media Icons

Sleek Social Media Icons

25 modern és igényes közösségi ikon található ebben a csomagben 2 méretben és .png formátumban.

Sleek Social Media Icons

Fresh Free Icon Set

59db friss és elegáns ikon. Találhatunk benne pénzügyi szimbólumokat, webes alkalmazásokat, matematikai jeleket és még sok más érdekes dolgot, melyek elég ritkák a többi csomagban.

Fresh Free Icon Set

Upojenie Icon Set

Upojenie egy gyönyörű és elegáns ikon csomag, amely alkalmas mobil alkalmazásokhoz. A csomag 40 ikont tartalmaz, .png fájlokat tölthetünk le és használhatjuk magán és üzleti célokra is.

Upojenie Icon Set

Mantra Icons Set

A Mantra, egy szép és modern ikonkészlet. Rendelkezésre áll 32px méretben .png formátumban és 36 db ikont tartalmaz. Csak személyes projektekhez érhető el.

Mantra Icons Set

Lovely Website Icons Pack

Szuper minőségű kedves kis ikonok. Letölthetők .png formátumban és felhasználhatóak személyes projektekben.

Lovely Website Icons Pack

Fugue Icon Set (3,000 Icons!)

Ez egy kissé nagyobb készlet, talán a legnagyobb amit valaha láttam. Kiváló minőségű darabok, eggyetlen hátrányuk, hogy viszonylag kis méretben állnak rendelkezésünkre. De ez legyen a legkevesebb.

Fugue Icon Set (3,000 Icons!)

WP-Zoom Icon Set

100 db ikon 5 méretben, kifejezetten WordPresshez. Ne kérdezzétek miért.

WP-Zoom Icon Set

Feed Icons 2

Jól megtervezett Feed ikonok 2 méretben .png formátumban. 33 különböző stílust tartalmaz.

Feed Icons 2

Zárszó

Igyekeztem jelezni a felhasználási feltételeket minden csomagnál, de mielőtt üzleti vagy kereskedelmi célokra használnátok valamelyiket, mindenképp járjatok utána a liszenszüknek, mivel az idő elteltével ezek változhatnak.

Valamint, ha ismertek hasonló, jó minőségű készleteket osszátok meg velünk és az olvasókkal egy kommentben, köszönjük.

Cikkünk a hirdetés után folytatódik!

Null

Nyelvek:
Afrikaans, Alsatian, Basque, Bislama, Breton, Catalan, Chamorro, Danish, Dutch, English, Faroese, Finnish, Flemish, Franco-Provencal, French, Frisian, Friulian, Galician, German, Greenlandic, Icelandic, Indonesian, Irish, Italian, Ladin, Latin, Luxembourgish, Malay, Manx Gaelic, Norwegian (Bokmål), Norwegian (Nynorsk), Occitan, Portuguese, Rhaeto-Romance, Romansh, Sami (Inari), Sami (Lule), Sami (Northern), Sami (Skolt), Sami (Southern), Scottish Gaelic, Spanish, Swahili, Swedish, Tagalog, Walloon, Welsh

Formátum:
Opentype (.otf)

Ingyenesen letölthető a Fontfabric oldalról. Sajnos magyar ékezetes karaktereket nem tartalmaz de a FontCreator nevű programmal könnyedén készíthetünk hozzá ha szükséges. Itt még egy magyar nyelvű leírás is található hozzá. Sok sikert a használatához.

Cikkünk a hirdetés után folytatódik!

Természetesen nem minden beállítás található meg a táblázatban, megpróbáltam ragaszkodni azokhoz a beállításokhoz, amiket magam is használok, használtam már és ismerek is. Ha kíváncsiak vagytok a teljes listára megtekinthetitek a Microsoft oldalán. Valamint létezik egy Internet Explorer 9 Test Drive nevű oldal is ahol élesben lehet tesztelni az új böngésző tulajdonságait.

CSS3 támogatás Internet Explorer 9-en

CSS3 Beállítás	IE9	Előző IE Verzió
opacity		Nincs
multiple backgrounds		Nincs
background-clip		Nincs
background-size		Nincs
background-origin		Nincs
text-shadow		—
word-wrap		5-8
writing-mode		5-8
border-image		—
border-radius		Nincs
box-shadow		Nincs
overflow-x		7-8
overflow-y		7-8
multiple columns		—
box-sizing		8
RGBA colors		Nincs
HSL colors		Nincs
HSLA colors		Nincs
text-stroke		—
gradients		—
transforms		—
transitions		—
outline-offset		—
resize		—
@font-face		5.5-8
@media		Nincs
CSS3 Beállítás	IE9	Előző IE Verzió

CSS3 Selector támogatás

CSS3 Beállítás	IE9	Előző IE Verzió
[attribute^=value]		7-8
[attribute*=value]		7-8
[attribute$=value]		7-8
E ~ F (sibling)		7-8
CSS3 Beállítás	IE9	Előző IE Verzió

Pseudo Osztályok és Pseudo Elemek támogatása

CSS3 Beállítás	Támogatja/Nem támogatja
:root
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:last-child
:first-of-type
:last-of-type
: only-child
: only-of-type
:empty
:target
:not(s)
:enabled
:disabled
:checked
:indeterminate
::selection
:default
:valid
:invalid
:in-range
: out-of-range
:required
: optional
:read-only
:read-write
::before
::after
::first-letter
::first-line
::value
::choices
::repeat-item
::repeat-index
CSS3 Beállítás	Támogatja/Nem támogatja

Zárszó

Tulajdonképpen örülök is meg nem is. A sok pozitívum mellett, olyan alapvető beállítások maradtak ki amelyeket sokszor használok. Valamint a telepítési idővel sem vagyok teljesen kibékülve. Egy egyszerű böngészőnél elég durva, hogy egy átlagosnak mondható számítógépre 10-15 perc alatt települ fel és az újraindítást még bele sem számoltam, mivel ez is szükséges hozzá. Azt hiszem nem fogom elsődleges böngészőnek beállítani de azért “jó irányba” haladnak a Microsoftnál.

Ha van pozitív vagy negatív tapasztalatotok kíváncsi vagyok, osszátok meg egy hozzászólásban.

Az analitikai szolgáltatások azonban – amennyiben megfelelően alkalmazzák őket – sokkal többet nyújthatnak. Marketing eszközként, hiba ellenőrzőként, használhatósági eszközként, ROI kalkulátorként, e-kereskedelmi tracker-ként, hirdetési eszközként is szolgálhatnak – és a lista nem teljes.

Az alábbiakban röviden bemutatjuk, hogyan hozhatunk ki minél többet weblap-statisztikánkból.

Cikkünk a hirdetés után folytatódik!

Analizáló szoftver

Google Analytics

Először is, ha nincs analizáló szoftver telepítve oldalunkra, sürgően pótoljuk a mulasztást, mielőtt tovább mennénk.
Én személy szerint a Google Analytics-et használom, amely egy széles körben elterjedt, nagyon hasznos funkciókat tartalmazó csomag, amely ráadásul ingyenes.

Ha azonban inkább más megoldást választanánk, bátran böngésszünk az itt található listából.

10 Promising Free Web Analytics Tools

Bounce Rate (Visszafordulások aránya)

A Bounce Rate az egyik legfontosabb tényező. A magas visszafordulási arány súlyos problémákat jelezhet – lapunk tartalma nem elég figyelemfelkeltő, nem megfelelőek a call to action elemek és nem készteti hosszabb maradásra a látogatót.

A Bounce Rate ugyanis azt mutatja, hogy hány ember hagyja el az oldalt megnyitás utána anélkül, hogy további hivatkozásokra kattintana rajta. Az adat számszerű megjelenítése a látogatószámláló.
Ez a szám ugyan valóban erősen függ a látogatók ízlésétől, keresési szándékaitól, hiszen lehet, hogy véletlenül tévedtek oldalunkra, vagy egy kereső eredmény adott ki minket, és miután ránk kattintottak, kiderül hogy nem pont azt az információt keresik, amit lapunk nyújt. Ez így rendben is van, és amennyiben nem csalunk – és miért tennénk – teljesen biztos, hogy visszafordulási arányunk soha nem lesz 0%.

A magas Bounce Rate okozói lehetnek:

• Rosszul elhelyezett call to action gomb
• Nem elég figyelemfelkeltő tartalom
• Sérült linkek
• Oldalhibák
• Rosszul célzott hirdetések

A fentieket és a egyéni visszafordulási arányunkat valamint hivatkozó oldalak rátáit összehasonlítva igen hasznos következtetéseket vonhatunk le.

Az alacsony visszafordulási arány annak jele, hogy az oldal olyan információkat tartalmaz, amely sok embert érdekel, illetve hogy valamilyen egyéb módon, pl. kapcsolódó hivatkozásokkal, ingyenes termék kipróbálási lehetőséggel már a beérkező oldalon fenn tudja tartani a látogató érdeklődését.

A Bounce Rate emelkedése azonban koránt sem jelenti egy weboldal végét. Egy blognak pl. lehet magas visszafordulási aránya, hiszen rengeteg kattintás RSS-en keresztül történik, és miután a látogató elolvassa az aktuális információt, elhagyja az oldalt.

Az e-kereskedelmi oldalaknak viszont egyértelmű céljuk az alacsony visszafordulási arány megtartása, hiszen érdekük, hogy a látogató minél több termékükre kattintson, minél több időt töltsön el az oldalon, és persze előbb utóbb vásároljon is.

Azzal érdemes tehát kezdeni, hogy megállapítsuk, nekünk mire van szükségünk. A kereskedelmi honlapok esetében a „piackutatás” nem egyszerű feladat, hiszen üzleti titkait minden cég őrzi, a webdesign területén azonban könnyebb informálódni – ne féljünk tehát érdeklődni.

Nagy általánosságban azt lehet mondani, hogy a 30% körüli ráta a megfelelő, 50% felett azonban bőven van mit javítani.
Ha azonban olyan blogot működtetünk, amelyre közösségi site-okon keresztül érkeznek az emberek, akik elolvassák a tartalmat és nem navigálnak tovább, az optimális ráta 60%. 70-80% is még elfogadható, 80% felett viszont már érdemes elgondolkodni, mit lehetne javítani az oldalon.

Az A/B teszt a legjobb mód annak ellenőrzésére, hogy weblapunk design-ja jól szolgálja-e a Bounce Rate csökkentést. Az eredmény azonnal látszik a látogató konverzión.

Conversion Rate (Konverziós ráta)

A Bounce Rate utáni legfontosabb adat a konverziós ráta, ami azt jelzi, hányan kattintanak céloldalainkra.

Amennyiben oldalunk egy konkrét céllal készült, figyelemmel kell kísérnünk, a látogatók hány százaléka cselekszik szándékunk szerint.

Kereskedelmi oldalaknál ez általában egy befejezett vásárlást, közösségi oldalakon (Twitter, Facebook) befejezett regisztrációt, üzleti oldalak esetében pedig egy szerződés megkötését jelenti.

A konverziós ráta tehát azt a számot jelöli, hogy látogatóink hány százaléka halad ténylegesen végig az általun kívánt folyamaton.

A konverziós ráta általában megjelentősen alacsony. Egy kereskedelmi oldalnál a 3%-os ráta már igen jó eredménynek számít. Így igaz, az új látogatóknak csupán a 3%-a viszi végig a vásárlást.

Ha a céloldalig egyértelmű út vezet (meghatározott számú klikkelés) könnyen beazonosíthatjuk a hibát oldalunkban, hiszen megnézhetjük, látogatóink melyik szakasz után hagynak fel célunk teljesítésével. Így igen egyszerű lokalizálnunk a hibát – pl. egy túl bonyolult adatlap kitöltése hamar elveheti a kedvet a vásárlás folytatásától.

Előfordulhat azonban, hogy nincs ilyen egyértelmű út a céloldalig. Ilyenkor azt érdemes figyelni, hogy látogatóink milyen oldalakról jutnak el céloldalunkra. Ha egyik oldalról többen kattintanak rá, mint egy másikról, hasonlítsuk össze a két oldalt, hogy rájöjjünk, mi okozhatja a különbséget. Próbáljunk megoldást találni, majd A/B teszteljük azt. Ha nem sikerült eltalálni, ismételjük, amíg nem érjük el a kívánt eredményt.

Ha megállapítottuk látogatóink mitől hagyják, és nem hagyják el oldalunkat, rendbe tettük call to action funkcióinkat, arra kell figyelmünket fordítani, hogy a célfeladat befejezése után elnavigálnak az oldalról, vagy maradnak böngészni. Érdemes látogatóinkat oldalunkon tartani, hiszen így további potenciális lehetőségeket szerzünk (pl upselling).

A céloldalt megtekintő látogatók aránya

Első ránézésre a céloldal és a beérkező oldal statisztikái meglehetősen egyformának tűnhetnek, a számunkra lényeges információk azonban igen különböznek.

Nézzünk példának egy hipotetikus honlapot: Kovács úr online festék boltját.

A konverziós lapjai nyilván valóan befejezett checkout oldalak (ahol még természetesen upselling-re törekszik).
A céloldalai azonban a termékismertető oldalak. A legtöbb honlap esetében könnyű megállapítani, mi legyen a céloldalak tartalma. Egy blognak a postok, egy vállalat honlapjának a céggel kapcsolatos információk.

A legtöbb esetben ezek az oldalak jelentik az első lépést célunk eléréséhez – egy termék megismerése az első lépés annak megvásárlásához, egy szolgáltatás megismerése pedig az első lépés annak megrendeléséhez.
Annak érdekében, hogy Kovács úr sikeresen konverzálja oldalának látogatóit a befejezett checkout felé, termékeit vonzóvá kell tennie vásárlói számára.

Azt minden esetre ki tudjuk deríteni, hányan látogatnak el oldalunkra, és hogy teljesítik-e célunkat. A kérdés az: akik nem, miért nem?
Könnyű belátni, hogy egy jól szempontok alapján dolgozó szűrő hogyan lehet segítségünkre oldalunk fejlesztése szempontjából.

Mikre keresnek rá a felhasználók, és mit csinálnak a keresés befejeztével?

A keresési szokásokat nagyon kevés ember követi nyomon, és még kevesebben tulajdonítanak neki jelentőséget. Azonban ez az egyik leghasznosabb mutatója annak, hogy oldalunk látogatóinak mire van pontosan szüksége.

Vessünk ismét egy pillantást Kovács úr online festék boltjára. Óriási választékban találhatók meg nála a legkülönbözőbb festékek, a kereső analízis azonban azt mutatja, hogy rengetegen keresnek bordó festéket, amiből viszont nincs neki raktáron.
Ésszerűnek tűnne készletet fenntartani bordó festékből, vagy legalábbis alternatívát kínálni helyette.

A kereső analízis második lépcsője megállapítani mit csinálnak az emberek a keresés befejeztével.

Alább erre találunk néhány forgatókönyvet:

1-es számú forgatókönyv:

Nálunk megtalálják, amit kerestek.
Amennyiben keresés után megtalálják amit szerettek volna, és oldalunkon maradnak, minden rendben, elértük célunkat.

Ha nem, minden bizonnyal problémák vannak oldalunk keresőjével. Vagy nem a keresett információt tárja látogatónk elé, vagy nem hasznosan, könnyen érthetően teszi azt.

2-es számú forgatókönyv:

Keresnek, és nem találnak.
Sokan talán úgy gondolnák, hogy mivel ezek a látogatók nem találták meg, amit kerestek, nyilván nem azt áruljuk, amire szükségük van. Mi viszont nem tartozunk azok közé, akik így gondolkodnak, nem igaz?
Ha Kovács úr festékboltjában valaki yacht után kutat, nyilvánvalóan rossz helyen jár. Ha azonban bordó festéket keres és nekünk épp nincs, mindenképp célszerű helyette alternatívát kínálni.

Az „Erre gondolt?” funkció az Amazonon és a Google-ban pontosan ezt a célt hívatott szolgálni. Az Amazon keresésünk tárgyához kapcsolódó találatokat és termékeket jelenít meg, hogy az oldalon tartsanak minket.

Egyszerűen megfogalmazva a kereső a legbiztosabb forrás annak megállapítására, hogy potenciális vásárlóinknak mire van pontosan szükségük. Ki engedhetné meg magának ennek az információnak a figyelmen kívül hagyását, nem?

Honnan érkeznek oldalunkra látogatóink?

Rengetek időt és pénzt fordítanak vállalkozások online hirdetésre és link építésre. Hatásfokuk tesztelésének legegyszerűbb módja, ha megvizsgáljuk, honnan érkeznek a látogatók az oldalra.

A bloggerek pl. rengeteg időt töltenek el mások blogján, kommentelnek és közösségi oldalakon osztják meg az általuk arra érdemesnek vélt tartalmakat. Ezért érdemes vizsgálni, oldalunk mely részére érkezik a legtöbb látogató, hogy oda összpontosítsuk erőfeszítéseinket.

Egy megfelelően testre szabott analitika-fiók egy e-kereskedelmi tracking és adwords fiókkal karöltve közvetlen és azonnali visszacsatolást tesz lehetővé személyre szabott adwords kampányunkról – roppant hasznos eszköz, ha PPC hirdetéssel dolgozunk.

Konfiguráljuk fiókunkat megfelelően!

Hogy mindenez információk követése könnyebbé tegye életünket, megfelelően testre kell szabnunk analitikai fiókunkat: szűrőinket, kereső tracking-ünket, e-kereskedelem tracking-ünket, kulcsszó tracking-ünket különös gonddal és odafigyeléssel állítsuk be.

Oszd meg velünk tapasztalataidat, gondolataidat egy kommentben.

Cikkünk a hirdetés után folytatódik!

Többen gondolhatjátok, mi értelme van stock fotókat letölteni esetleg megvásárolni, mikor ott a google képkeresője. Beírom amire szükségem van és mindig találok megfelelő képeket. Én személy szerint óva intenék mindenkit a google képkereséstől, főleg ha valamilyen munkára használja a keresett képeket. Sajnos nem tudni a származásukról, liszenszükről szinte semmit. Ez sokszor bajhoz is vezethet, volt már dolgom hasonlóval.

Megjegyzés: Ajánlott elolvasni a site-ok felhasználási feltételeit. Néhány ilyen weboldal az ingyenes képek mellett fizetős fotókat is árul.

Ne feledjétek, a “Royality Free” nem jelenti a képek ingyenes letöltését és használatát, pontos jelentése a következő:

„Royalty-free tartalom”: egyszeri díj fejében korlátlan számú felhasználásra engedélyezett tartalom (rövidítve „RF”).

Na de hagyjuk az ijesztgetést és térjünk inkább a lényegre.

Ingyenes Stock fotós weboldalak

Stock.XCHNG

Stock.XCHNG talán a legnagyobb és legjobb ingyenes fotóletöltő oldal, az egyik kedvencem. Jó keresővel és lightbox funkcióval is rendelkezik ami praktikus módja a tetszetős képek spájzolásának.

Everystockphoto

Az everystockphoto egy hatalmas ingyenes gyűjtemény, amelyen jelenleg több mint 5 millió letölthető képet találunk. Összetett, jól szűrhető keresőjével a legjobbak között szerepel.

morgueFile

Ezt az oldalt még nem ismerem de elég ígéretesnek tűnik. Sok kép, keresési lehetőség, valamint jól kategorizált tartalommal rendelkezik.

Openphoto

Kategorizált , címkézett, kereshető tartalom. Regisztráció nem szükséges, csak ha fel szeretnénk tölteni.

Stockvault

A Stockvault szintén az egyik kedvenc ingyenes oldalam. Viszonylag modern megjelenése, áttekinthető felépítése, vonzó lehet bárki számára. Rendelkezik lightbox funkcióval is.

Photo Rogue

A Photo Rogue egy igen különleges oldal. Mégpedig azért mert kérések alapján működik. Megírhatjuk milyen képre van szükségünk és ha van rá vállalkozó szellemű fotós elkészíti számunkra. (nem teszteltem)

Freerange

A használathoz regisztráció szükséges de megéri. Viszonylag sok jó minőségű képet találunk. Kategorizálva nincsenek de keresőt használhatunk.

Photo Rack

Tob mint 27.000 fénykép közül válogathatunk kedvünkre, melyek rendezett kategóriákba vannak csoportosítva. Sajnos keresőt én nem találtam. Regisztráció nincs és feltölteni sem lehet.

FreePixels

Kereséssel, kategorizálással és címkefelhővel is rendelkezik, így elég könnyű rátalálni a kívánt témára. Néhány háttérkép is letölthető.

pixelperfectdigital

Egy kicsi, de egyre bővülő stock fotó oldal, keresési funkcióval és szépen kategorizált tartalommal. Regisztráció után mi is feltölthetünk képeket.

Felsorolnék még pár free stock photo site-ot melyek annyira nem nyerték el a tetszésemet de hátha nektek hasznosak lesznek.

• Freefoto
• Imageafter
• Free Digital Photos
• Free Historical Stock Photos
• Kave Wall

Zárszó

Huh, ebből már remélem mindenki tud válogatni és leváltja a google képkeresőt. Ha tudtok hasonló oldalakat ne habozzatok megosztani.