http://zerking.com/?p=277
Optimalizáld iPhonera a weboldalad!
Érdemes belekezdeni egyébként, mert a tendenciák azt mutatják, hogy egyre nagyobb jelentősége lesz az Apple által mainstreammé avanzsált okostelefon szegmensnek.
Mindenképpen előnyös, ha a site rendelkezik iPhone verzióval is, mert a felhasználók értékelik a gesztust, fontos tényező persze az is, hogy használhatóbbá válik az oldal, ezzel több oldalletöltést és reklámbevételt is hoz.
Nézzük hát meg, hogy miben más MobileSafarira optimalizálni és milyen szemlélet kell hozzá.
Szerencsére kevés kompromisszumot kell kötni. A monitorokhoz képest kicsi képernyőméreten és a flash hiányán kívül, egy teljes értékű modern böngészővel dolgozhatunk együtt.
A gyakorat
Azzal kezdjük, hogy észre kell vennie az oldalnak, hogy iPhonnal van dolga. Ezt csinálhatjuk phpval és javascriptel is, de a legjobb talán ez, a html <head>-tagjébe kell rakni:
<link media=”only screen and (max-device-width: 480px)” href=”iPhone.css” type=”text/css” rel=”stylesheet” />
Ez még csak egy vázlat, de pár hét múlva valószínüleg elkészül valami ehez hasonló
Kész is. Ezzel az is megtörténik, hogy minden olyan készüléknél ami 480pxnél kisebb kijelzővel rendelkezik, az iPhone.css fog betölteni.
Az iPhone specifikus stíluslapunkkal már neki is állhatunk növelni a felhasználói élményt.
Fontos dolog, hogy minden kattintható felület legalább 40px széles és 15px magas legyen. Körülbelül ekkora területen érintkezik a mutatóujjunk a kijelzővel tapizás esetén.
Nem áll rendelkezésre túl sok szabad felület, ezért próbáljuk az egész ablakot megtölteni tartalommal. Ne hagyjunk üres területeket (szóval ne úgy csináld mint én az illusztráción :) ).
Az oldal teljes (body) margóját érdemes lenullázni, hogy a legelső konténer és a kijelző széle között ne legyen felesleges hely, inkább a belső paddinggal tartsuk a szöveg távolságát.
400 karakternek ki kell férnie egy álló iPhone képernyőre de 1000 karakternél többnek nem, ha olvashatóak akarunk maradni, ezekre is figyeljünk a tipográfiánál. Fontos még, hogy az egyes elemek vertikálisan jobban elkülönüljenek egymástól, mint az asztali verzióban, például egy lista elemei közé nem árt egy; border-bottom: 1px solid #tetszőlegesszín . Az iPhonet nem a legtökéletesebb platform az olvasásra, de sok aprósággal kímélhetjük a látogatóink szemét. Erősebb kontrasztra van szükség, és nagyobb szeparációra, hogy az egyes funkciók nem folyjanak össze. Csináljunk a diveknek halvány hátteret, a bekezdéseknek nagyobb alsó-felső margót, a menü pedig legyen jól elkülönítve.
Html és CSS trükkök MobileSafarira
ViewPort tag – scale, width, height attribútum
Van egy ViewPort nevű meta tag, amit mi így szoktunk mi használunk, lehet bátran copy-pasteelni:
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
Ezzel be tudjuk állítani, hogy a tartalom képernyőhöz viszonyított méretarányát, így megkímélhetjük a felhasználót a felesleges zoomolgatástól. Szinte kötelező a használata, ezért egy szárazabb leírással ki is fejtem, hogy mikre használható, aki nem akar most rögtön belemélyedni, az görgethet is picit lejjebb.
Szóval, tud ilyeneket, hogy:
width, height attribútum; ezek értékei lehetnek: device-width (a készülék kijelzőszélessége), device-height (készülék kijelzőmagassága), és megadhatjuk őket pixelben is, így:
<meta name="viewport" content="width=480"/>
Van még itt nekünk többfajta scale beállítási lehetőség, ami leegyszerűsítve a nagyításért és kicsinyítésért felelős. Ezek értékét a képernyőméret arányában állíthatjuk, és az 1.0-es érték a kijelzőméretnek felel meg.
A minimum-scale és maximum-scale értékei a nagyíthatósági arányért felelnek. Alapértelmezetten a minimum az 0.25 a maximum 1.6, de 0 és 10 között bárhova belőhetjük, két tizedesjegyig. Ha mind a kettőt lenullázuk, akkor az oldal nem lesz nagyítható, ha a felhasználó a nagyítással próbálkozik, az oldal mindig “visszaugrik” eredeti méretére, amint felemeli az ujjait.
Az initial-scale azt tudja, hogy amikor betölt az oldal, megmondhatjuk, hogy mekkora legyen a kezdeti zoom értéke. Ezt érdemes 1.0-en hagyni, hacsak nincs valami nagyon speciális igényünk. A minimum és maximum scale felülírhatja az initial scale-t, ha egymásnak ellentmondó értéket állítunk be.
Végül user-scalable, amivel letilthatjuk a nagyítást. Az alapértelmezett értéke yes, és ha no-ra állítjuk be, akkor a felhasználó bárhogy próbálkozik a nagyítással, a képernyő meg se fog moccanni. Hasonló, minha a minimum-maximum scale-t nullára állítanánk, azzal a különbséggel, hogy így az oldal sem fog ugrálni, ha nagyítani próbálunk. Hátránya, hogyha no-ra van állítva és egy beviteli mezőre rátappintunk, akkor nem ugrik oda a megfelelő helyre a fókusz, ez egy ilyen bug. Erre azért érdemes odafigyelni.
Rögzített orientáció
Megtehetjük, hogy letiltjuk az elforgatást. Ekkor meg kell határozni a stíluslapon, hogy melyik nézetben töltsön be az oldal, vertikálisan vagy horizontálisan. Szerintem elég egyértelmű a használata:
body[orient="landscape"] /* vagy: */ body[orient="portrait"]
Home screen beállítások
Meg tudjuk azt csinálni, hogyha a user beállítja a Home screenjére a weboldalt, akkor egy általunk meghatározott ikon legyen kint. Így:
<link rel="apple-touch-icon" href="ikon.png" />
Érdekes lehetőség még, hogy meg tudunk adni startup image-t a meta tagekben. Ez egy 320 x 460 pixel méretű kép, amely az oldal betöltéséig látszik. Ezt az iPhone letárolja és akkor is ezt látjuk, ha az oldal nem elérhető, mert mondjuk haldokolnak a szervereink. Így tudjuk megadni:
<link rel="apple-touch-startup-image" href="/startup.png">
Ha már kint van a Home screenen az ikonunk felhasználónál, akkor több beleszólásunk is van egyes dolgokba. Például meghatározhatjuk az URL bar stílusát, és ténylegesen ki is tolhatuk a lapot fullscreenre. Ezek csak abban az esetben fognak működni, ha a beállított ikonról érkezik a felhasználó.
Így kell fullscreent előidézni, az alapértelmezett érték “no” amit mi “yes”-re állítunk:
<meta name="apple-mobile-web-app-capable" content="yes" />
És így adunk meg stílust az URL barnak. Az értéke lehet grey, black, és black translucent. Érdemes a siteunk kinézetéhez igazítani:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Korrektor kikapcsolása az input mezőkön
Apróság, de tudunk az input mezőkhöz hozzáadni olyan attribútumot, ami megakadályozza, hogy az iPhone beépített helyesírás-ellenőrzőnek csúfolt korrektora belekontárkodjon a felhasználó által bepötyögött szövegbe. Ez jól jön, amikor email címet kérünk be, mert látogatók nagy százalékénak a vezeték vagy keresztnevével kezdődik az emailcíme, és gyakran fordul elő, hogy a korrektor Kovács.feri@gmail.com-ra javítja.
Így néz ki egy kikapcsolt korrektoros input mező:
<input autocorrect = "off">
—
Fontos tudni még, hogy a MobileSafari nagyrészt támogatja a CSS3mat (pl egyedi fontok betöltése és megjelenítése) meg úgy általában mindent amit az asztali Safari és Webkit, így látványosan megkönnyíthetjük a sitebuildelést.
Javascript okosságok
URL bar eltüntetése
Akkor is el is tudjuk tüntetni az URL bart a képernyő tetejéről, ha nem a Home screenről érkezik a látogató, ezzel nyerve 60 értékes pixelt. Erre két módszer is van.
Az egyik, hogy gyakorlatilag kikapcsoljuk:
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
Ennek a hátránya, hogy csorbul a felhasználó navigációs lehetősége. Mérlegelni kell, vannak olyan területek ahol ez nem jelent gondot.
A másik módszer az, hogy egyszerűen legörgetünk automatikusan. Ezzel látszólag nem jelenik meg a felső csík, de ha a látogató felgörget, akkor megjelenik neki az URL bar
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);"></body>
Nagyszerű lehetőségeket nyújt, hogy tudjuk figyelni a készülék orientációját. Hogy a felhasználó balra dönti, vagy jobbra, vagy fejjel lefele fordítja.
Kell egy javascript a headbe:
<script type="text/javascript">
function updateOrientation(){
try {
var contentType = "show_normal";
switch(window.orientation){
case 0:
contentType = "normal";
break;
case -90:
contentType = "jobbra";
break;
case 90:
contentType = "balra";
break;
case 180:
contentType = "fejjellefele";
break;
}
document.getElementById("page_wrapper").setAttribute("class", contentType);
}
catch(e) {
alert('ERROR:' + e.message);
}
}
window.onload = function initialLoad(){
try {
loaded();
updateOrientation();
}
catch(e) {
alert('ERROR:' + e.message);
}
}
function loaded() {
document.getElementById("page_wrapper").style.visibility = "visible";
}
</script>
És egy ilyen a bodyba:
<body onorientationchange="updateOrientation();">
Az történik, hogy a javascript a készülék pozícióját figyelve a “normal” “jobbra” “balra” “fejjellefele” id-jü diveket jeleníti meg.
Tapicskolás és gesztusok
Az iPhonetól kérhetünk értesítést a multituch eseményekről. Ha valaki egy divre bök, vagy húzza azt, esetleg két divet tapogat egyszerre, hozzá tudunk köti ezekhez a gesztusokhoz eseményeket. Például így:
<div ontouchstart="function();" >
A lehetőségek végtelenek, nagyon ügyes interfaceeket lehet így létrehozni. Nekem ezekkel még nem volt szerencsém próbálkozni, de a jövőben biztos használni fogom a lehetőséget. Ha lesz rá igény szívesen beleásom magam a témába, és írok róla, egy ehhez hasonló terjedelmű cikket. Aki addig jobban belemélyedne, itt egy “Touching and Gesturing on the iPhone” című angol nyelvű elég jól összeszedett írás tessék olvasgatni, és ebből a forrásból egy videót tudtam még keríteni:
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
—
Ennyi fért bele hirtelen. Leírtam nagyjából mindent, amit használni szoktam, kicsit talán többet is. Mindenképpen fog még születni cikk a témában, leginkább akkor ha valami újdonságról hallok.
Addig is lehet olvasgatni a következőket:
- Az Apple hivatalos fejlesztői dokumentációja a MobileSafarihoz: http://developer.apple.com/safari/library/documentation/appleapplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
- Building iPhone Apps with HTML, CSS and JavaScript – ingyenes olvasható részletes nagyon jó O’Reilly könyv: http://building-iphone-apps.labs.oreilly.com/
- Releváns blog, leírásokkal: http://www.iphonemicrosites.com/articles/
(ja, és bocs a bullshit bevezető miatt, csak rájöttem, hogy eddig nem igen írtam ilyet a posztjaimhoz, most gyakorlom)
Tags: Figyelj engem!
Ha érdekelnek a hasonló cikkek, iratkozz fel RSS-ben a blogra!
Írok Twittere is, jelölj be bátran: http://twitter.com/zerking és kövesd figyelemmel a Twitter listáimat is: Webszakma, Lányok!
Osztod?
Hozzászólások
7 hozzászólás a “Optimalizáld iPhonera a weboldalad!” témában.
Itt elmondhatod:
Az egyik legfontosabb dolgot talán kifelejtetted: MINDENKÉPPEN tedd lehetővé, hogy az oldaladat desktop nézetben is láthassa a felhasználó, és a választását sütivel jegyezd meg!
Köszi, jogos ez eszembe se jutott :) Engem is zavarni szokott ha nincs ott a desktopnézet.
Azért az elég ciki, hogy optimalizálásról beszélsz, amikor a blogod urljei meg nem nagyon keresőbarátak. Na mindegy .Szerintem ciki…
Szerintem az a ciki, hogy nem olvastad el a cikket, mert nem keresőoptimalizálásról szól. Nekem így szép az url, és nem hajtok a keresők találati listáira, nem onnan szeretnék beeső olvasókat, mert akkor tele lenne a blog olyan irreleváns kommentekkel mint a tied is.
Egyébként körülbelül 4 kattintással lehet a WordPressben átállítani az urlt keresőbarátra, gondolod, hogy azért nem állítom be, mert nem értek hozzá, vagy azért mert nem szeretném?
orsy hozzászólása irreleváns volt, meg én is offolok itt a hozzászólással, csak jelezni akarom, hogy én is egyre inkább hajlok a rövidebb, azonosítószerű url-ekre már, semmint a kígyóhosszú szemantikusakra. Mondjuk a címkéknél talán jobb a szemantikus.
Az URL bar _teljes_ eltüntetésére van valami megoldás? (Vagy esetleg a webapp meta tag beállítása jó erre is?)
Valamelyik Google-közeli szolgáltatás, ha jól emlékszem, URL bar nélkül működik, tehát valahogy megoldható.
Neo: A Wave “imitálja” hogy ő egy App. Azaz:
Ha felveszi a user a Home screenre az ikont (azaz felveszi mint app. vannak javascript/xhtml/php appok amelyek szerepelnek az appstoreban, de gyakorlatilag weboldalak) akkor, ahogy írtam a “Home screen” bekezdésben, tudsz manipulálni a megjelenéssel. Pl tehetsz egy “Betöltés…” feliratú startup képet, amelyet egész addig lát amíg be nem töltött az oldal (akár csak az appstoros appokban). De itt már ugye működik a fullscreen. Nem tud elnavigálni, csak ha teszel ki neki külsőlinket, vagy ugye a Home gombot megnyomja.
Így lehet a legegyszerűbben Appot csinálni, az appstoreban is elfogadják ha jó, csak akkor értelemszerűen nem kell külön beállítania a usernek a homescreen ikont.