Tökéletes betűtípus a weboldalra

Tökéletes betűtípus a weboldalra

Tökéletes fonttípus kiválasztása a weboldalhoz

Egy tökéletesen megválasztott betűtípussal hatalmasat emelhetsz a weboldalad színvonalán! Bár a tipográfia egy önálló tudomány és meg sem kísérlem átadni az alapjait sem egy cikk keretében, de talán egy mankót azért tudok adni a kezdbe!

Tudd meg mi az a font és hogy kerül a számítógépre illetve a weboldalra. Nézd meg, hogy milyen tervezési hibákat ne kövess el! Tudd meg melyek azok a font-típusok, amelyekkel biztosan nem fogsz mellényúlni! 

Ezekről szól a következő cikkem a KWT blogon!

Ha elakadtál, megakadtál. Ha szép és jól működő weboldalt szeretnél egyedi és hozzád illő dizájnnal, keress bizalommal!

Péter Éva - Webdesigner - ewa.hu

Ennyi mindent tudnod kell (kéne) a https átállásról

Ennyi mindent tudnod kell (kéne) a https átállásról

A hatékonyság valóban fontos, de a biztonság még fontosabb.

Brandon Hackett

A cikkben először tisztázzuk az alapokat és eloszlatunk minden kételyt azzal kapcsolatban, hogy tényleg szükséges-e az SSL tanúsítvány használata!

Amikor pedig elhatároztad magad, az SSL alkalmazása mellett, segítünk választ találni minden további felmerülő kérdésedre. Segítségünkkel ki tudod majd választani a neked leginkább megfelelő tanúsítványt, SŐT be is tudod majd állítani azt a weboldaladon!

 

Kezdjük az alapokkal!

Miért jelent a felhasználók számára védelmet az SSL használata?

 

Mert nagyban megnehezíti azt, hogy illetéktelenek szerezzék meg jogosulatlanul az adatainkat!

 

Miért olyan fontos téma manapság az adatvédelem?

 

Mert ma az adat és az információ birtoklása az egyik legnagyobb hatalom!

Nagyvállalatoktól kezdve, otthon ülő feketekalapos hackerekig rengetegen pályáznak az adatainkra. Van, aki a bankszámlánk belépési adatait szeretné megtudni, de van olyan is, aki pusztán a netes viselkedésünk elemzéséből szeretne versenyelőnyhöz jutni.

A bankkártyája adatait nyilván senki nem szeretné senkinek kiadni, de a többire sokan csak legyintenek, „Ugyan, én nem titkolok semmit!”. Igen, a legtöbbünk valóban nem titkol semmit, mégsem tartozik senkire, hogy miről olvasunk, vagy kivel társalgunk a világhálón.

 

Miért ne böngésszünk olyan oldalakon, ahol nincs SSL tanúsítvány?

 

Ha a forgalom http-n keresztül zajlik egy adott weboldalon, akkor bárki megnézheti, mit csinálunk illetve milyen adatokat adunk meg az interneten. Tudni fogja milyen blogbejegyzéseket olvastunk, milyen oldalakon jártunk, ha pedig adatainkat is megadtuk valahol, akkor az sem marad rejtve a kíváncsiskodó szemek elől.

 

Weboldal tulajdonosként milyen előnyöm származik az SSL-ből?

 

Weboldal tulajdonosként már nem feltétlenül az adatvédelmi szempontok vezérelnek minket az SSL-re való áttéréshez. Egyrészt bankkártyás fizetést működtető felületeken már kötelező a használata, másrészt SEO szempontból a Google pozitívan értékeli az alkalmazását, így versenyelőnyt jelenthet a konkurenciával szemben.

Gondolom, te sem szeretnél olyan weboldalt kiadni a kezeid közül!

  • Ami elrettenti a látogatókat.
  • Ami nem védi megfelelően a felhasználók adatait!
  • Ami bizalmatlanságot ébreszt a céggel szemben!

A KWT blogon most olyan átfogó és kiterjedt cikket írtam a témában, amihez foghatót nem találsz sem magyar sem külföldi blogokban.

Ha elakadtál, megakadtál. Ha szép és jól működő weboldalt szeretnél egyedi és hozzád illő dizájnnal, keress bizalommal!

Péter Éva - Webdesigner - ewa.hu

Ha az egyik menüpontra kattintok, új ablakban nyíljon meg…

Ha az egyik menüpontra kattintok, új ablakban nyíljon meg…

A WordPress néha el-elrejti egyes funkcióit, az admin felületen belül található, “Mit lássunk?” menüpont alatt. Érdemes párszor odakattintani és megnézni, hogy mire lehet ezek közül szükségünk!

Meg lehet-e oldani, hogy egy menüpont új ablakban nyíljon meg?

Ilyen példa a menük beállítása is. Alapértelmezetten számos beállítási lehetőséget nem rak elénk a rendszer. Persze megvan ennek az oka, hiszen így lesz laikusok számára is jól átlátható és használható, de ha téged már mélyebben érdekel a téma, akkor ne elégedj meg ennyivel.

Így van lehetőség arra is, hogy a WordPress-ben beállított menükben, meg tudod azt adni, hogy az adott menüpont egy új ablakban nyíljon meg.

Hogyan kell beállítani?

WordPress menü új ablakban nyíljon meg
  1. Kattints jobb felül a mit lássunk fülecskére.
  2. A lenyíló ablakban pipáld ki a “Hivatkozás cél” lehetőséget
  3. A menü beállításainál pipáld be, hogy “Hivatkozás megnyitása új ablakban”
  4. Mentsd el

Ha elakadtál, megakadtál. Ha szép vagy jól működő weboldalt szeretnél egyedi és hozzád illő dizájnnal, keress bizalommal!

Péter Éva - Webdesigner - ewa.hu

Miért nem mindig egymás utáni számokat ad meg a Woocommerce a rendelésekkor?

Miért nem mindig egymás utáni számokat ad meg a Woocommerce a rendelésekkor?

Egy izgalmas kérdést kaptam nemrégiben az egyik ügyfelemtől.

A kérdés azért volt különösen jó, mert teljesen tisztában voltam a helyzettel, hogy a Woocommerce látszólag random, de egyértelműen emelkedő számokat ad meg a webáruházakban leadott rendelések azonosítójaként, viszont sosem gondoltam ebbe annyira bele, hogy utánajárjak, mi okozza.

Szerencsére egy kis kutakodás után meg is lett (az amúgy
logikus) válasz!

Tehát miért nincsenek sorrendben a Woocommerceben a
rendelésszámok?

Röviden azért, mert a WordPress mindent posztként kezel. Mindent.

Az oldalakat, a hozzászólásokat, a médiafájlokat, a posztokat és a megrendeléseket is. Így ezek a posztok, ugyanazt az adatbázis táblát is használják és nem rendelkezhetnek kétszer ugyanazzal az értékkel.

Nem kizárt, hogy egyes webáruházakban ez eléggé zavaró lehet. Ha viszonylag kicsi webáruházat kezelsz és ezzel a bosszantó dologgal együtt tudsz élni, akkor a legjobb, ha így hagyod.

Ha viszont azért vagy itt, mert nem hagyott nyugodni a dolog és ezen változtatni szeretnél, akkor van egy jó hírem, VAN MEGOLDÁS!

A megoldás

Szerencsére az adatbázishoz némi többletadat hozzáadásával megoldható ez a probléma.

Hirtelen két plugint is találtam, ami elvégezheti helyettünk a „piszkos munkát”.

Woocommerce rendelésszámok sorbarendezése

Az egyik a Custom Order Numbers for WooCommerce. Itt akár előtagot is adhatsz a rendelésszámnak, vagy beállítható, hogy bizonyos időközönként (mondjuk évente) újrainduljon a számozás.

Woocommerce rendelésszámok sorbarendezése

A másik erre alkalmas plugin a WooCommerce Sequential Order Numbers. Ez a bővítmény annyit tesz, hogy automatikusan beállítja, hogy a rendelésszámok a számok megszokott sorrendjében jöjjenek. Ha esetleg ezt megelőzően volt már rendelés a webáruházban, akkor az utolsó rendelési számhoz fog igazodni és onnan indul majd az új számozás.

Remélem sikerült ezzel a kis érdekességgel jobban megvilágítani a WordPress felépítését és működési módját, illetve megoldani egy esetlegesen bosszantó problémát.

Forrás: https://www.speakinginbytes.com/2014/07/woocommerce-order-numbers-order/

Ha elakadtál, megakadtál. Ha szép vagy jól működő weboldalt szeretnél egyedi és hozzád illő dizájnnal, keress bizalommal!

Péter Éva - Webdesigner - ewa.hu

Minden böngészőben jól jelenik meg a weboldalad?

Minden böngészőben jól jelenik meg a weboldalad?

Sablont váltottál? Új lett a design? Biztos, hogy a weboldalad megfelelően jelenik meg a különböző képernyőméretekben, böngészőkben vagy éppen mobil eszközökön? Hogyan ellenőrzöd?

Erre való az úgynevezett Cross Browser Testing, amiről részletesen olvashatsz az alábbi cikkben!

 

Miért fontos a tesztelés?

 

Az nyilvánvaló, hogy a Google Chrome a legelterjedtebb böngésző a világon, de ez nem jelenti azt, hogy ne használnák széles körben a Firefoxot, Microsodt Edge-t, a Safarit vagy éppen az Operat. A Cross Browser Testing pedig abban segít, hogy megnézhesd weboldald megjelenését a különböző böngészőkben, eszközökön és platformokon, így megláthatod ha valami nem úgy jelenik meg rajtuk, ahogy azt eredetileg szeretted volna.

Bár a különböző böngészők igen hasonlóan jelenítik meg a weboldalakat, mégis lehetnek olyan különbségek, amelyek sokat ronthatnak az oldal megjelenésén és erre viszont nagyon oda kell figyelni, mert a látogatók gondolkodás nélkül elmenekülnek az ilyen oldalakról!

Itt jön a képbe a Cross Browser teszt!  Megbizonyosodhatsz róla, hogy a weboldalad ugyanazt a látványt és felhasználói élményt nyújtja az összes látogatód számára! Persze akár meg is kérheted a barátaidat, hogy nézzenek rá a weboldalra és mondják el az esetleges hibákat, vagy te is megnézheted különböző eszközökön (amik a rendelkezésedre állnak), de azért ez közel sem annyira hatékony, mintha egy erre kifejlesztett tool segít az ellenőrzésben!

 

Mielőtt belevágnánk a tesztelésbe, nézzük meg, milyen böngészőt használnak a weboldalad látogatói!

 

Milyen böngészőt használnak a látogatóim?

 

Figyelembe véve az elérhető operációs rendszerek, böngészők és eszközök magas számát, a tesztelés igen nagy feladatot jelenthet, érdemes egy kicsit szűkíteni a kört.

Szerencsére a Google Analytics segítségével megtudhatod, hogy melyik böngészők és operációs rendszerek népszerűek a felhasználóid között!

Lépj be a Google Analytics fiókodba és válaszd az „Audience” menüpontot, azon belül pedig a „Technology”-t, ami alatt már ki tudod választani a böngészők szerinti analitikát (Browser).

 

 

Rögtön megkapod az elemzést (figyelj oda arra, hogy megfelelően nagy időtartamot állíts be), így már tisztán látszik, hogy milyen böngésző és operációs rendszer kombinációkra kell fókuszálnod a tesztelés során!

 

A legjobb Cross Browser Testing eszközök WordPressre!

 

A következőkben javaslok néhány eszközt, amelyek segítségével néhány kattintással ellenőrizheted, hogy weboldalad megfelelően jelenik-e meg a különböző böngészőkben?

 

http://browsershots.org/

 

A Browsershots nyílt forráskódú böngésző-megjelenés tesztelő eszköz. Sajnos nem tartalmazza a Microsoft Edge és az Internet Explorer böngészőket, illetve a mobilos nézetet sem tudod vele tesztelni, viszont az a nagyon jó hírem van, hogy legalább ingyenes!

Egyszerűen írd be az oldalad URL-jét a megfelelő helyre és várd meg amíg lefuttatja a tesztet a rendszer. Eredményül számos képernyőképet kapsz, amiket lehetőséged van külön-külön megnyitni és kielemezni.

Tudnod kell, hogy ez az eszköz csak képernyőképeket készít a weboldalról, ami sajnos nem egyenértékű az élő teszteléssel, mert az oldal megfelelő működéséről így nem tudsz megbizonyosodni. A következő két eszköz, amiről még itt szó lesz, viszont már tud ilyen funkciókat is!

 

 

 

CrossBrowserTesting

 

A CrossBrowserTesting segítségével már egyaránt végezhetsz élő tesztelést és a képernyőképek lekérésére is van lehetőséged!

Viszont ez már egy fizetős szolgáltatás, amihez tartozik egy rövid (100 perc) ingyenes kipróbálási lehetőség is.

Miután felregisztráltál az ingyenes verzióra, válaszd a „Live test”-et! Add meg az URL-t, válaszd ki a tesztelni kívánt operációs rendszert és böngészőt és vizsgált weboldal élőben fog megjelenni a kiválasztott böngészőben, hogy tesztelhesd is a működését!

Rengeteg funkciója van a fizetős verziónak, számos böngészőn és eszközön tudod vele ellenőrizni a weboldalad! Például az általad etalonnak tekintett oldalmegjelenést egyenként összevetheted a többivel, vagy akár le is töltheted a képernyőképeket a számítógépedre!

Az ingyenes verzió limitált funkciókra ad lehetőséget, de a legnépszerűbb böngésző és operációs rendszer kombinációkat így is ki tudod vele próbálni.

Ára: havi 29 dollárért tudod igénybe venni, ha egész évre előfizetsz.

 

BrowserStack

Szintén fizetős böngésző-megjelenés tesztelő eszköz, ami 30 perces ingyenes kipróbálási lehetőséget biztosít az érdeklődőknek. Hasonlóan a CrossBrowserTestinghez, egyaránt lehet benne élő tesztelést végezni, vagy képernyőképeket lekérni.

Az eredmények pontosak és az eszköz sebessége is elég jó, viszont egyenként kell megnyitogatni hozzá a böngészőket és úgy elvégezni a teszteket.

Ára szintén 29 dollár éves előfizetés esetén, ha havonta fizetünk!

 

+1

Firefox és Chrome böngészőkben létezik a következő funkció, amit bátran használhatsz! Az elemezni kívánt weboldalon jobb egérgombbal (egy üres részre) kattintva, a felugró menüből Vizsgálat vagy Elem vizsgálata fület kiválasztva találod a böngészők fejlesztői eszközeit! Ez Firefoxban alul fog egy sávot elfoglalni az ablakodból, Chrome-ban pedig a jobb oldalon fog megjelenni egy ablak. Mindkét böngészőben egy kis telefon ikont kell keresni (Firefox esetén jobb felül, Chrome esetén pedig bal felül). Kattints rá nyugodtan, mert ezen a felületen ellenőrizheted az adott oldal kinézetét a különféle mobil fajták által megjelenített formában!

 

Hogyan elemezd a tesztek eredményét?

 

Most, hogy megtanultad, hogyan tesztelheted a legegyszerűbben WordPress weboldalad, nézzük meg mit kezdhetünk a kapott eredményekkel!

Ha reszponzív WordPress sablont használsz, ami mögött egy minőségi kód áll, a kapott képernyőképeknek nagyjából azonosaknak kell lenniük. Lehetnek apróbb különbségek, de ha azok nem különösebben csúnyák vagy befolyásolják a felhasználói élményt, akkor nyugodtan figyelmen kívül hagyhatod őket!

Viszont ha valami feltűnőt látsz, valami olyat, ami elriaszthatja a látogatóidat, valamit, ami nem szép, arra már oda kell figyelni! A legtöbb ilyen eszköz rá fog világítani azokra a CSS hibákra a kódban, amik a gondot okozhatják. Használd a böngésződ fejlesztői elemző eszközét, hogy megtaláld a kérdéses CSS kódokat. Ha ehhez nem értesz, kérd egy WordPress fejlesztő segítségét!

Ha elakadtál, megakadtál. Ha szép vagy jól működő weboldalt szeretnél egyedi és hozzád illő dizájnnal, keress bizalommal!

Péter Éva - Webdesigner - ewa.hu