Mobil weboldal készítés tudnivalók
2012-02-19 | megtekintés: 558 | címkék: mobil, weboldal, mobil alkalmazás, weboldal készítés, mobil weboldal készítés
A mobil technológia szélsebes térhódításának eredményeképpen pár éven belül valószínűleg többen fognak valamilyen mobil eszközről böngészni az Interneten, mint bármilyen más (laptop, pc) eszközről. Ennek következményeképpen egyre nagyobb szerepet kap a mobil tartalomfejlesztés.
Egy mobil weboldal elkészítése során célszerű a már meglévő weboldalból kiindulni. (Feltéve, ha létezik) A mobil weboldalakra azonban a "hagyományos" oldalaktól jelentősen eltérő design elveket kell alkalmazni, ugyanakkor az elrendezés és a felépítés sem maradhat eredetiben.
Ebben a cikkben a legfontosabb mobil weboldal fejlesztéssel kapcsolatos ajánlásokat próbálom meg összeszedni.
Weboldal vagy mobil alkalmazás?
Mikor egy vállalkozás megteszi első lépését a mobil technológia irányába, felmerül a kérdés, hogy alkalmazást (app-ot) fejlesszenek vagy weboldaluk mobil verzióját hozzák létre.
A mobil alkalmazások nagyobb szabadságot biztosítanak a fejlesztőnek, mivel nem egy külső böngészőprogramtól függenek. Programozási nyelvük bármilyen pc-s környezetben is megvalósított alkalmazás elkészítését lehetővé teszik, sőt azon túlmenően kihasználhatják az eszköz beépített szenzorjait, ezzel növelve a felhasználói élményt és funkcionalitást. A mobil alkalmazások fogyasztókhoz való eljuttatásának legegyszerűbb eszköze, ha feltöltjük őket az operációs rendszerhez tartozó alkalmazás boltba (Android Market, Apple Store). Az alkalmazás bolt ezen túlmenően lehetőséget biztosít a vásárlóktól/letöltőktől való visszajelzések kezelésére valamint a szoftver frissítések és egyéb support tevékenységek menedzselésére.
A mobil weboldalak ezzel szemben böngésző programhoz kötöttek, tehát csak olyan funkciókat képesek megvalósítani, amelyet a böngésző program is támogat. A működéshez Internet kapcsolatra van szükség, ráadásul mivel a felhasználó többfajta böngésző programot is használhat, ezért az azokkal való kompatibilitás megvalósítása adott esetben nehézségségekbe ütközhet. Előnyük, hogy fejlesztésük egyszerűbb, gyorsabb és olcsóbb ennél fogva azon kisvállalkozások számára is elérhető, akik egy alkalmazás fejlesztését nehezebben lennének képesek finanszírozni. A mobil weboldalaknak azonban vannak olyan "hagyományos" weboldalaktól eltérő tulajdonságai amelyet a fejlesztés megkezdése előtt még a tervezési fázisban érdemes tudni, ellenkező esetben a végeredmény nehezen használható lesz.
Kisebb képernyőméret
Mobil weboldal készítés során a legfontosabb különbség a megjelenítő mérete. A két legnépszerűbb készülék, az IPhone 4S 640x960 pixeles, a Samsung Galaxy SII 480x960 pixeles felbontással rendelkezik. Ezzel szemben a hagyományos monitorok többsége már full HD vagy ennél csak valamivel kisebb felbontással rendelkezik. Ez pixelben kifejezve 1680x1050 és 1920x1080 pixel közötti méretet jelent. Még nagyobb a különbség, ha nemcsak a felbontást, hanem a képátlót is megnézzük. A nagyobb okostelefonok 4 - 5 coll közötti képátlóval rendelkeznek, ezzel szemben egy modern monitornak 19-24 collos képátmérője van.
A nagy eltérésből adódóan a tervezés során körültekintően kell eljárnunk és nem szabad megfeledkezni arról, hogy a weboldalt mobilról szemlélőnek nemcsak a kisebb kijelző mérettel és felbontással kell megbirkóznia, hanem azzal is, hogy az eszközt kézben fogva annak mozgása, rázkódása is nehezíti az információk leolvasását.
A weboldal mobil verziójának esetén a tartalmat nagy mértékben egyszerűsíteni kell. Minden olyan elemet el kell hagyni amely növeli a sávszélességet és emellett nehezíti az oldal áttekinthetőségét. Egyszerűsíteni kell a fejlécben megjelenő tartalmat, a láblécet sok esetben célszerű teljesen elhagyni. Kerülni kell a weboldalak esetén megszokott oldalanként ismétlődő tartalmat. Csak az maradjon, amely valóban a fontos információt hordozza, minden mást el kell hagyni.
Ezzel kapcsolatban célszerűnek látom megnézni néhány nagyobb hírszolgáltató weboldalának mobil verzióját:
• http://m.cnn.com
• http://m.index.hu
• http://m.origo.hu
• http://mobile.nytimes.com
Alacsonyabb sávszélesség
A mobil internet kapcsolat sávszélessége évről-évre folyamatosan növekszik a szolgáltatók beruházásainak és a technológia fejlődésének köszönhetően. Ennek ellenére továbbra is számolni kell azzal, hogy egy mobil net kapcsolat átviteli sebessége alacsonyabb, mint egy vezetékes hálózaté, ráadásul az adatletöltés lényegesen magasabb költségekkel is jár. Éppen ezért a mobil weboldal tervezés során ügyelni kell arra, hogy a nagy méretű elemeket, például a képeket optimalizáljuk az alacsonyabb fájlméret érdekében. Abban az esetben, ha már meglévő weboldalból, blog-ból szeretnénk egy mobil verziót készíteni, további problémát jelenthet a korábban feltöltött adott esetben több száz vagy ezer kép új méretben és/vagy tömörítéssel való legyártása.
A cikkekbe beszúrt képek mellett kerülni kell a nagy méretű háttérképek alkalmazását is.
A webfejlesztő szerencsés helyzetben van akkor, ha weboldal készítésével párhuzamosan kell a mobil verziót is kifejleszteni, mert ekkor a tartalomkezelő rendszerben előre be tudja állítani a mobil és a teljes verzióhoz szükséges kép méreteket.
Megfelelő URL választása a mobil verzióhoz
A mobil weboldalt célszerű a weboldaltól eltérő URL alatt tárolni. A választott URL-nek könnyen megjegyezhetőnek, egyszerűnek és lehetőség szerint rövidnek kell lennie. A mobil weboldalak esetén bevett eljárás a http://www.akarmi.hu/mobile, a http://m.akarmi.hu vagy http://mobile.akarmi.hu elnevezés.
Az eszközök azonosítása és átirányítása
A mobil eszköz azonosítása és átirányítása a mobil oldalra nem egyszerű feladat, mivel sokfajta böngésző program, operációs rendszer és eszköz van a piacon. A megbízható azonosítás, a gyors átirányítás és a lehetőség megadása, hogy a látogató vissza tudjon térni a weboldal teljes verzióra kulcsfontosságú.
A mobil eszközök azonosítása és átirányítás témában hamarosan egy bővebb cikkel jelentkezem.
Eltérő elrendezés
A weboldalak többségénél kettő, három vagy esetleg még ennél is több hasábos elrendezés van. A mobil kijelzők kis mérete miatt célszerű egyhasábos elrendezést választani. Ebben az esetben a látogatónak csak vertikálisan kell görgetnie a tartalmat, mivel horizontálisan minden elfér a képernyőn. A nagyobb tartalomszolgáltatók mind az egyhasábos elrendezést választották weboldaluk mobil verziójának esetén.
Navigáció tervezés
Fontos különbség a mobil tartalom fogyasztó és a számítógép előtt ülő között az, hogy az előbbi általában "menet közben" internetezik, ami azt jelenti, hogy a koncentrálást zavarhatják a fényviszonyok, a rázkódás és egyéb környezeti hatások. Ráadásul az ujj, mint mutató eszköz használata az érintő képernyős okostelefonok esetén sokkal pontatlanabb, mint egy hagyományos számítógép előtt ülve az egeret használni. Éppen ezért a mobil weboldalak tervezése során ügyelni kell arra, hogy olyan navigációs megoldásokat (nyomógombok, legördülő listák) alkalmazzunk, amelyek elég nagyok ahhoz, hogy ujjal is könnyen használhatók legyenek akár még mozgás közben is, másrészt egyszerű felépítésűek legyenek. A nagyobb weboldalak többségénél alkalmazott többszintű navigációt javasolt kerülni a mobil verzió esetén.
A navigációra szolgáló elemeket célszerű az oldal tetején elhelyezi és adott esetben az oldal alján is megismételni. A főbb menüpontok kiválasztására jó eszköz a legördülő lista, amely egy mobil eszközön is könnyen kezelhető.
A szöveges alapú linkek esetén javasolt hosszabb horgonyszöveget alkalmazni, amelyet nehezebb a kattintás során eltéveszteni.
Az abszolút méretezést kerülni kell
Mobil weboldal tervezés során az abszolút méretezést célszerű kerülni. A problémát az okozza, hogy jelen pillanatban a piacon sokfajta képátló és felbontás van, éppen ezért egy meghatározott pixel méretűre tervezett elem, különböző méretben fog megjelenni az egyes eszközök kijelzőjén. Például egy 12 pixel méretűre beállított betű azonos képátló esetén nagyobbnak fog látszódni egy alacsonyabb felbontású készüléken. Ugyanez fordítva is igaz, azonos felbontás mellett egy nagyobb képátlójú készüléken nagyobbnak látjuk az abszolút méretezésű elemeket. Éppen ezért törekedni kell arra, hogy a betű, hasáb és egyéb elemek méretezését százalékos értékekben adjuk meg.
Betűméret, betűtípus
A weboldal mobil verziójának tervezése során ügyelni kell a jól megválasztott betű típusra és méretre. A látogatókhoz az információ többsége szöveges formában jut el, ami azt jelenti, hogy a szöveg jól láthatósága és olvashatósága kiemelten fontos. Alkalmazzunk könnyen olvasható betűtípust, körültekintően válasszuk meg a sormagasságot és a bekezdések távolságát.
No flash, no frames, no popup!
Mikor az Apple cég megjelent az első IPhone-al és azon nem volt Flash támogatás, egyértelművé vált, hogy a Flash technológia napjai meg vannak számolva. Hiszen ki kockáztatná egy olyan technológiára alapozott mobil weboldal létrehozását, amelyet a világ legnagyobb számítógép gyártójának termékein nem lehet megtekinteni. Egyértelmű tehát, hogy a flash technológiát kerülni kell a weboldal mobil verziójának megtervezésekor.
Ugyanakkor vannak további technológiák, tartalmi elemek és eljárások, melyeket szintén kerülni kell. Ilyenek a táblázatok, felbukkanó ablakok, a Java Appletek, a frame-es oldalal szerkezetek. Ezeket szintén hagyjuk ki a mobil oldalból.
Űrlapok
Törekedni kell az űrlapok és egyéb beviteli mezők számának csökkentésére. A komplex, sok mezőből álló űrlapok egy mobil eszközön áttekinthetetlenek. A kezelést nehezíti, hogy az űrlap mezőbe lépve, a képernyő nagy részét a felbukkanó billentyűzet foglalja el ezzel még kevesebb helyet biztosítva a tartalomnak.
A mobil specifikus eszközök kihasználása
A mobil weboldal esetén érdemes számba venni a rendelkezésre álló mobil technológia adta eszközöket és alkalmazni, amennyiben szükség van rá. Ezen mobil specifikus eszközök például a hívások kezdeményezése egy telefonszámra kattintva vagy a beépített térkép behívása a weboldalon egy címre kattintva. További lehetőség például az egyre népszerűbb QR-kódok használata, amellyel például kampányokra való jelentkezést, weboldalak felkeresését, alkalmazás letöltését kezdeményezheti a felhasználó.
Álló vagy fekvő nézet?
A korszerű okostelefonok mindegyikén a készüléket 90 fokkal elforgatva az automatikusan fekvő tájolásra vált, így bizonyos tartalmak kényelmesebben szemlélhetők. A mobil weboldal tervezése során álló tájolásra szokás az oldalt tervezni, de a korábban említett százalékos méretezésnek köszönhetően ha mindent jól csináltunk, fekvő nézetben is jól fog megjelenni.
Tesztelés
Fejlesztési fázisban többfajta szoftver és böngésző kiegészítő is rendelkezésre ahhoz, hogy a mobil weboldalt tesztelni tudjuk. A teljesség igénye nélkül ajánlok néhány szoftvert:
- Opera Mobile Emulator: http://www.opera.com/developer/tools/mobile/
- Adobe Device Central: http://www.adobe.com/products/devicecentral.html
- IPhoney: http://www.marketcircle.com/iphoney/
- W3C mobile OK Checker: http://validator.w3.org/mobile/
- Apple Safari böngésző developer tools
A kész weboldal bevezetése előtt mindenképpen ajánlott többféle készüléken, többfajta böngésző programmal, álló és fekvő tájolásban egyaránt tesztelni, mivel az online és offline emulátorok nem minden esetben 100%-osan megbízhatóak!
Kérjen tőlünk árajánlatot mobil weboldal készítésre!
Mobil weboldal vagy mobil alkalmazás (app)?
2012-02-24 | megtekintés: 499 | címkék: mobil, weboldal, weboldal készítés, mobil weboldal készítés, mobil alkalmazás
A mobil eszközökre elérhető technológiák nagy változatosságot mutatnak. Amennyiben mobil eszközre szeretnék fejleszteni, számos megoldás közül választhatunk. A legtöbbet vitatott kérdés mégis az, hogy HTML5 technológián alapuló mobil weboldalt vagy mobil alkalmazást fejlesszünk. Mindkét technológiának megvannak a maga előnyei és hátrányai, de úgy gondolom, hogy ...
Egy weboldal megtervezésének kezdő lépései
2012-04-21 | megtekintés: 111 | címkék: weboldal készítés, weboldal tervezés, design, optimalizálás, információ
A weboldal megtervezése alapvető fontosságú a siker szempontjából. Ahhoz, hogy weboldalunk sikeres legyen, a tervezési fázisban számos szempontot kell figyelembe venni. Ennek a tervezési fázisnak a lépéseit próbálom meg összefoglalni az elkövetkezendőkben.
Tizenhat éve született az első weboldal
2007-11-19 | megtekintés: 168 | címkék: weboldal, W3, első, WWW, World Wide Web
Régen volt, mikor Lech Walesa megnyerte a lengyel elnökválasztásokat. Épp ekkor, 1990 novemberében indult az első webszerver (xoc01.cern.ch), s ezen tárolták...
Facebook és Twitter marketing szempontból
2011-12-12 | megtekintés: 523 | címkék: Facebook, Twitter, Közösség, Weboldal, marketing
A Facebook és Twitter két divatos közösségi szolgáltatás (oldal), amelyek rendkívül népszerűek a privát és az üzleti felhasználók körében is. A Facebook az iWiW-hez hasonló közösségi oldal. Csatlakozni a közösséghez regisztrációval lehet. A név, e-mail cím és egyéb adatok megadása után meg lehet jelölni és visszaigazolás után fel lehet venni ...
Skip intro, kill the Flash!
2008-06-17 | megtekintés: 224 | címkék: Google, Flash, honlap, intro, alkalmazás
A Google le fogja szoktatni a webtervezőket a bevezető Flash-animációk használatáról.
A 8 leggyakoribb linképítés hiba
A linképítés célja, hogy weboldalunkra mutató külső hivatkozásokat hozzunk létre és ezzel javítsuk oldalunk Google ...
Mi az a PageRank és hogyan befolyásolja a Google helyezéseket?
A PageRank azt mutatja meg számszerűsítve, hogy a Google kereső szerint mennyire "fontos" egy adott oldal. A PageRank kifejezés alatt az ...
A 40 legjobb Facebook Timeline borítókép
A Facebook Timeline egyik feltűnő újítása az oldal tetején látható nagy méretű borítókép (Timeline Cover), amely kiváló ...
Facebook Timeline (Idővonal) cégeknek
Március 30-tól a Facebook a privát profilok mintájára az üzleti oldalakon is átáll a ...
Mobil weboldal vagy mobil alkalmazás (app)?
A mobil eszközökre elérhető technológiák nagy változatosságot mutatnak. Amennyiben mobil eszközre szeretnék fejleszteni, számos ...
Mobil weboldal készítés tudnivalók
A mobil technológia szélsebes térhódításának eredményeképpen pár éven belül valószínűleg többen fognak valamilyen mobil ...
Shaun Fernandes és Markus Nonn a Jumps Studio belsőépítészei segítségével készült el a Londoni Google Campus belsője. A hét ...
Webshop nyitás hasznos jogi információk
Az alábbiakban a webshop nyitáshoz és üzemeltetéshez szükséges legfontosabb törvényi előírásokat próbálom meg ...
google (43), facebook (20), keresőoptimalizálás (16), kereső (15), apple (14), tablet (13), biztonság (13), ipad (9), android (8), adatvédelem (7), spam (7), helyezés (6), internet (6), microsoft (6), virus (5), vírus (5), sony (4), közösségi oldal (4), iphone (4), weboldal (4), windows (4), linképítés (4), hacker (4), fájlcsere (4), letöltés (4), torrent (4), adathalászat (3), térkép (3), védelem (3), böngésző (3), alkalmazás (3), trójai (3), jelszó (3), iwiw (3), wikipédia (3), statisztika (3), seo (3), yahoo (3), szolgáltatás (3), közösség (3), wikipedia (3), weboldal készítés (3), hekker (3), facebook timeline (3), mobil alkalmazás (2), pagerank (2), samsung (2), algoritmus (2), oktatás (2), mobil (2), látogatottság (2), mobil weboldal készítés (2), bittorent (2), horgonyszöveg (2), itunes (2), maps (2), optimalizálás (2), street view (2), facebook idővonal (2), timeline (2), okostelefon (2), műhold (2), ios (2), profil (2), honeycomb (2), táblagép (2), ipad 2 (2), security (2), zuckerberg (2), dns (2), árak (2), marketing (2), befektetés (2), market (2), gmail (2), vállalat (2), levelezés (2), e-mail (2), kép (2), flash (2), reklám (2)