Valószínű, hogy látta, hogyan tudja az iPhone átfordítani és kibővíteni a weboldalakat. Egy pillanat alatt megjelenítheti a teljes weboldalt vagy nagyíthatja, hogy olvashatóvá tegye az Önt érdeklő szöveget. Egy értelemben, mivel a Az iPhone a Safarit használja, a webdesignereknek nem kell különösebbet tenniük az iPhone-on működő weboldal létrehozása érdekében. De valóban azt akarja, hogy az oldala csak működjön - vagy kiemelkedjen és ragyogjon?
Amikor te készítsen weboldalt, el kell gondolkodnia azon, hogy ki és hogyan fogja megtekinteni. A legjobb webhelyek egy része figyelembe veszi, hogy milyen típusú eszközön nézik az oldalt, beleértve a felbontást, a színbeállításokat és az elérhető funkciókat. Nem csak a készülékre hagyatkoznak, hogy kitalálják.
Általános irányelvek a mobileszközök webhelyének felépítéséhez
- Teszteljen minél több eszközön. Az első dolog, amit meg kell tennie, hogy megtekinti a webhelyét egy iPhone készüléken, és annyi más mobil eszközök vagy emulátorok, amennyire csak tudsz. Bár minden teszteléshez használhat emulátorokat, ezek valóban nem adják azt az érzést, mintha egy pici kis képernyőn próbálna eligazodni egy webhelyen. A lehető legtöbbet tesztelje tényleges eszközökön.
- Az oldalai kecsesen romlanak. Írhatod az oldaladat Flash-kompatibilis, szélesvásznú böngészők, de győződjön meg arról, hogy a kritikus információk még egy apró monitoron is láthatók, amely nem képes kezelni semmilyen speciális funkciót (például cookie-kat, Ajax, Flash, JavaScript stb.). Az XHTML Basic-en kívül bármi túl lesz néhány mobiltelefonon. Míg az okostelefonok többsége képes kezelni ezeket a dolgokat, más mobileszközök nem.
- Készítsen vezeték nélküli hálózathoz tartozó oldalt - és megkönnyítse annak megtalálását. Ha egy konkrét oldalt fog készíteni a mobiltelefon és a vezeték nélküli ügyfelek számára - tegye elérhetővé. Remek módszer, ha a vezeték nélküli oldalra mutató linket a dokumentum legtetejére helyezi, majd elrejti ezt a linket a nem kézi eszközök elől a kézi adathordozóval. Végül is a legtöbb ember az ön honlapjára érkezik, méghozzá mobiltelefonon - és ha a vezeték nélküli oldalára mutató link nincs, akkor távozik, ha az oldalt túl nehéz használni.
Weboldal elrendezés okostelefonokhoz
Az első dolog, amire emlékeznie kell, amikor oldalakat ír az okostelefonok piacára, az az, hogy nem kell változtatnia, ha nem akarja. Az elérhető okostelefonok nagyszerű tulajdonsága, hogy a Webkit böngészőket (iOS-en a Safari és Android-on a Chrome-ot) használják weblapokat jelenítsen meg, tehát ha az oldala rendben van a Safari vagy a Chrome böngészőben, akkor a legtöbb okostelefonon jól fog kinézni (nagyon sok kisebb). Vannak azonban dolgok, amelyekkel kellemesebbé teheti a böngészési élményt:
- Ne feledje, hogy a képernyő apró. Az okostelefonok az összes oszlopot lefelé sűrítik az apró ablakba, és ez nagyítás nélkül megnehezítheti őket. A legtöbb felhasználó hozzászokott a zoomoláshoz, de ez fárasztóvá válhat. Egy hosszú szövegoszlop könnyebben olvasható.
- Ossza fel az oldalakat kisebb darabokra. Nehéz lehet hosszú szövegrészleteket olvasni egy mobiltelefonon, ezért több oldalra helyezve könnyebben olvashatók.
Linkek és navigáció iPhone-on
- Minél rövidebbek az URL-ek, annál jobb. Ha valaha is megpróbált beírni egy URL-t egy mobiltelefonon, akkor tudja, hogy ez fájdalom (kivéve talán azokat a tizenéveseket, akik sok SMS-t szoktak küldeni). Még az iPhone-on is unalmas hosszú URL-eket beírni. Tartsa rövidnek.
- De a hosszú link szövege könnyebben megérinthető. Ha olyan oldalon tartózkodik, ahol több külön szó van összekapcsolva különböző cikkekkel, közvetlenül egymás mellett, nagyon nehéz lehet nagyítás nélkül megérinteni a megfelelőt. Sokan csak feladják és máshová mennek. A 3–5 szóból álló linkeket könnyebb kattintani a telefonra, mint az egyszavas hivatkozásokat.
- Ne tegye a navigációt a képernyő tetejére. Nincs annál idegesítőbb, mint a képernyők és a linkek képernyőinek átlapozása a kívánt információ megtalálásához. Ha megnézte a mobiltelefonokhoz tervezett weboldalakat, akkor látni fogja, hogy az első dolog a tartalom és a címsor jelenik meg. Ezután alatta van a navigáció.
- Ne féljen elrejteni a navigációt.Navigációs linkek elrejtése CSS-sel vagy JavaScript-szel, és csak akkor jelenik meg, ha a felhasználó kéri, így könnyebbé teheti az oldalt az okostelefon-felhasználók számára.
Tippek képekhez okostelefonokon
- A képeknek kicsiknek kell lenniük. Igen, az Android és az iPhone képes nagyítani és kicsinyíteni a képeket, de minél kisebbek mind méretben, mind letöltési időben, annál boldogabbak lesznek a vezeték nélküli ügyfelek. Képek optimalizálása mindig jó ötlet, de a mobiltelefon-oldalak esetében kritikus.
- A képeket gyorsan le kell tölteni. A képek sok helyet foglalnak el a weboldalakon, amikor mobileszközről nézegetik őket. És bár gyakran nagyon kedvesek, és az oldalak jobban néznek ki, ha teljes képernyős böngészőben nézik meg őket, gyakran egy mobil eszközön akadályozzák őket. Ráadásul, ha egy okostelefon-felhasználó a mobilhálózaton van, az utolsó dolog, amiért fizetni akar, egy csomó hatalmas kép vagy navigációs ikon letöltése.
- Ne tegyen nagy képeket az oldal tetejére. Csakúgy, mint a navigációnál, nagyon unalmas lehet megvárni, amíg egy 3-4 képernyőnyi kép betöltésére képes kép betöltődik az oldal legfelül. És ez rendkívül gyakori a weboldalakon. Az egyetlen kivétel ez alól, ha az olvasó tudja, hogy képet kap, amikor rákattint, mondjuk egy fotógalériában.
Mit szabad elkerülni, ha mobilra tervezünk
Számos dolgot érdemes elkerülnie, ha mobilbarát oldalt épít. Mint fent említettük, ha valóban szeretné, hogy ezek az Ön oldalán legyenek, akkor is, de győződjön meg arról, hogy a webhely ezek nélkül is működik.
- Vaku: A legtöbb mobiltelefon nem támogatja a Flash-t, ezért nem célszerű azt bekapcsolni a vezeték nélküli oldalakba.
- Cookie-k: Sok mobiltelefon nem támogatja a cookie-kat. Az iPhone-ok igen süti támogatás.
- Keretek: Még akkor is, ha a böngésző támogatja őket, gondoljon a képernyő méreteire. A keretek egyszerűen nem működnek mobileszközökön - ezeket nagyon nehéz vagy lehetetlen elolvasni.
- Táblázatok: Ne használjon táblázatokat a mobil oldal elrendezéséhez. És próbálja elkerülni az asztalokat általában. Nem minden mobiltelefon támogatja őket (bár az iPhone és más okostelefonok támogatják őket), és furcsa eredményeket érhet el.
- Beágyazott táblák: Ha asztalt kell használnia, ügyeljen arra, hogy ne fészkelje be egy másik táblába. Ezeket az asztali böngészők nehezen támogatják, és legjobb esetben lassabbá teszik az oldal betöltését.
- Abszolút intézkedések: Más szóval, ne határozza meg az objektumok méreteit abszolút méretben (például pixelben, milliméterben vagy hüvelykben). Ha 100px szélességet határoz meg, akkor az egyik mobileszközön a képernyő fele lehet, a másikon pedig kétszerese a szélességének. A relatív méretek (például ems és százalékok) működnek a legjobban.
- Betűtípusok: Ne feltételezd, hogy bármelyik betűtípusok Hozzá van szokva, hogy hozzáférni fog a mobiltelefonokon.