A front-end fejlesztők feladata, hogy megjelenítsék azokat a vizuális elemeket, amelyekkel a felhasználók egy weboldal vagy applikáció esetén találkoznak.
A front-end fejlesztők feladata, hogy megjelenítsék azokat a vizuális elemeket, amelyekkel a felhasználók egy weboldal vagy applikáció esetén találkoznak. Úgy is mondhatjuk, hogy a front-end arról szól, amit a felhasználók látnak: szövegek, gombok, színek, képek, navigációs menü, stb. Egy sikeres weboldalnak a felülete felhasználásra buzdít és jól esik a szemnek. Megosztok hat gyakori hibát, ami ezt a felhasználói élményt nagyban csökkenti.
1. Régebbi HTML szabvánnyal való kódolás
Sok front-end fejlesztő nem programoz a régi html-ben, mióta van HTML 5. Egy front-endesnek nagyon fontos, hogy a böngésző jól jelenítse meg azt, amit ő elképzelt, és néhány böngésző újabb frissítése már nem teljesen kompatibilis a régi HTML kóddal. A régi HTML-lel le kell mondanod sok modern és biztonságos funkcióról, amiket a HTML5 biztosít, ennélfogva, a régi szabvány sérülékenyebbé teszi oldaladat a támadásokkal szemben. A Prooktatás Frontend specialista webfejlesztő tanfolyamán viszont garantáltan a legújabb szabványokat tanítjuk.
2. Nem teszteled az oldaladat a népszerűbb böngészőkkel
Ha nem teszteled az oldaladat minden népszerű böngészővel, akkor látogatókat fogsz veszíteni. A javascript megjelenítése például erősen böngésző függő, és bizony nem biztos, hogy egy régebbi böngészővel is az úgy fog megjenni, ahogy nálad. Az Analyticsben meg tudod nézni, hogy melyik böngészőkkel nézik az oldaladat leginkább.
3. Nem reszponzív (nem mobil kompatibilis) design
Mára eljutottunk arra a pontra, hogy többen böngésznek telefonról, mint desktop gépről. Tehát a reszponzivitás és mobil-kompatibilitás alapkövetelmény. A Google is különbséget tesz. A reszponzív oldalak, vagy a külön mobilra optimalizált oldalak előnyt élveznek a Google találati sorrendjének kialakításakor!
A mobil készülékek különböző képernyőmérettel vannak megáldva, ezért olyan kódot érdemes írni, ami minden képernyőszélességhez tud alkalmazkodni. Emulátorokkal lehet tesztelni, hogy fog a weboldal megjelenni különböző készülékeken, illetve ebben a cikkünkben olvashatsz a témáról bővebben.
4. Elavult Javascript könyvtárak használata
Nagyon rossz hatással lesz a weblapodra, ha olyan javascript könyvtárakat használsz, amik pár év múlva már nem lesznek támogatva. Olyan dologtól válik függővé a weblapod, ami már nem működik rendesen. Tehát olyanokat érdemes használni, amiknek aktív a támogatása és rendszeres a frissítése a fejlesztői által. AngularJS és KnockoutJS két jó példa megbízható, jónevű fejlesztők által támogatott, világszerte használt könyvtárakra.
5. Div tárolók (containers) használatának mellőzése.
Már véget értek azok az idők, amikor táblázatot hoztunk létre és abba rakosgattuk bele a grafikai elemeket. Ez a megoldás ugyanis hibákhoz vezet a designban és máshová kerülő grafikai elemekhez különböző böngészőkben.
Ha el akarod helyezni az egyes elemeket, használj Div tárolót és CSS-t.
6. Megfeledkezés az oldal sebességéről
A weboldal sebessége egyértelmű összefüggésben van a visszapattanó felhasználók arányával, a konverziós rátával és így a bevételekkel is. Az oldal lassúságának több oka lehet, például un. „spagetti” javascript kód miatt vagy túl nagyméretű képek használata okán. Érdemes valamilyen sebesség mérő alkalmazást használni, ami megmutatja azt is, hogy mi lassítja le a weboldalunkat. A gyors oldal SEO szempontból is meghálálja magát, ezt is figyelembe veszi a Google. Érdemes nem csak egyszer megmérni az oldalad sebességét, hanem többször, több változatban, és ezeket az eredméyneket feljegyezni.
Forrás: http://www.evontech.com/
Deutsch
