Esetleg látta, hogy az iPhone képes-e átlapozni és bővíteni a weboldalakat. Egy pillantással megmutathatja az egész weboldalt vagy nagyíthatja a szöveget, hogy olvashatóvá tegye a szövegét. Bizonyos értelemben, mivel az iPhone a Safari-ot használja, a webes tervezőknek nem szabad megtenniük valami különlegeset ahhoz, hogy létrehozzanak egy olyan weboldalt, amely az iPhone-on dolgozik.
De tényleg azt szeretné, hogy az oldalad csak működjön? A legtöbb tervező azt szeretné, hogy az oldaluk ragyogjon!
Amikor weboldalt készítesz , meg kell gondolnod, hogy ki fog látni, és hogyan fogja megnézni. A legjobb webhelyek közül néhány figyelembe veszi, hogy milyen típusú eszköz az oldal megtekintésekor, beleértve a felbontást, a színbeállításokat és az elérhető funkciókat. Nem csak a készülékre támaszkodnak, hogy kitalálják.
Általános irányelvek a mobileszközöket létrehozó webhely számára
- Teszteljen annyi eszközt, amennyit csak tud. Az első dolog, amit meg kell tennie, hogy nézze meg webhelyét egy iPhone-on és annyi különböző mobil eszköz vagy emulátor, amennyit csak tudsz. Bár emulátorokat használhat az összes teszteléshez, valóban nem ugyanolyan érzést kapsz, mintha egy apró kis képernyőn keresztül próbálnánk meg navigálni egy weboldalon, ezért próbáljunk minél többet tesztelni a tényleges eszközökön.
- Készüljön el az oldalad kecsesen. A Flash-képes, szélesképernyős böngészőhöz írhatja oldalát, de győződjön meg róla, hogy a kritikus információk még olyan apró monitoron is láthatók, amely nem képes különleges funkciók (pl. Sütik, Ajax, Flash, JavaScript, stb.) Kezelésére. Bármi, ami túl van az XHTML alapon, túl lesz néhány mobiltelefonon. Bár a legtöbb okostelefon képes kezelni mindazokat a dolgokat (kivéve a Flash-et az iPhone-on, persze), más mobil eszközök nem.
- Hozzon létre egy vezeték nélküli speciális oldalt, és könnyű megtalálni. Ha egy adott oldalt készít a mobiltelefon és a vezeték nélküli ügyfelek számára - állítsa elérhetővé. Nagyszerű módja annak, hogy a linket a vezeték nélküli oldalra helyezze a dokumentum legfelső részén, majd a kéziszámítógép-típus használatával elrejtse azt a nem kézi eszközökről. Végtére is, a legtöbb ember a mobiltelefonjához érkezik, és ha a vezeték nélküli oldalra mutató link nem létezik, el fognak menni, ha az oldal túlságosan nehéz használni.
Weblap-elrendezés okostelefonokhoz
Az első dolog, amit meg kell emlékezni, amikor az okostelefonok piacára írt oldalakat ír, hogy nem kell változtatni, ha nem akarod. A legtöbb okostelefonra vonatkozó nagyszerű dolog az, hogy a Webkit böngészőket (Safari az iOS-on és az Android Chrome-on) használják a weboldalak megjelenítéséhez, így ha az oldal megfelelőnek tűnik a Safariban vagy a Chrome-ban, akkor a legtöbb okostelefonon (csak sokkal kisebb ). De vannak olyan dolgok, amiket megtehetsz, hogy kellemesebbé tedd a böngészési élményt:
- Ne feledje, hogy a képernyő kicsiny. Az okostelefonok összeszedik az összes oszlopot az apró ablakba, és ez nagyon nehéz elolvasni a zoomolás nélkül. A legtöbb felhasználót nagyításhoz használják, de fárasztó lehet. Egy hosszú szöveget könnyebb olvasni.
- Ossza oldalakat kisebb darabokra. Nehéz lehet hosszú szövegrészeket olvasni a mobiltelefonon, így több oldalra történő elhelyezésük megkönnyíti az olvasást.
Linkek és navigáció az iPhone készülékeken
- Minél rövidebbek az URL-ek, annál jobb. Ha valaha megpróbálta beírni egy URL-t egy mobiltelefonon, akkor tudni fogja, hogy ez fájdalom (kivéve talán a tizenévesek számára, akik sok szöveges üzenet küldésére használják). Még az iPhone-nál is fárasztó a hosszú URL-ek beírása. Tartsa rövidre.
- De a hosszú link szöveg könnyebben megérinthető. Ha egy olyan oldalon, ahol több különálló szó kapcsolódik különböző cikkekhez, mindegyik egymás mellé áll, nagyon nehéz lehet a helyeset nagyítás nélkül használni. Sokan csak feladni és menni máshol. A 3-5 szóval rendelkező linkek könnyebben kattinthatóak a telefonra, mint az egyszavas linkek.
- Ne tegye a navigációt a képernyő tetejére. Nincs semmi bosszantóbb, mint a weboldalakon megjelenő képernyőkön és képernyőkön keresztül keresni a kívánt információkat. Ha megnézted a mobiltelefonokra tervezett weboldalakat, látni fogod, hogy az első dolog, ami megjelenik, a tartalom és a cím. Ezután a navigáció alatt.
- Ne féljen elrejteni a navigációt. A navigációs hivatkozások CSS-sel vagy JavaScript-sel történő elrejtése, és csak akkor jelennek meg, ha a felhasználó megkéri, hogy az oldalt megkönnyítse az okostelefon-felhasználók számára.
Tippek a képekhez okostelefonokon
- A képeknek kicsinek kell lenniük. Igen, az Android és az iPhone nagyíthat és kicsinyítheti a képeket , de annál kisebbek, mindkét dimenzióban és letöltési időben, annál boldogabbak lesznek a vezeték nélküli ügyfelek. A képek optimalizálása mindig jó ötlet, de a mobiltelefon-oldalak esetében kritikus.
- A képeknek gyorsan letölteniük kell. A képek sok helyet foglalnak el a weboldalakon, amikor mobileszközről nézzük őket. És bár gyakran nagyon kedvesek, és az oldalak jobban néznek ki, ha teljes képernyős böngészőn nézik őket, gyakran felkerülnek a mobileszközre. Plusz, ha okostelefon-felhasználó van a mobilhálózaton, az utolsó dolog, amit fizetni akarnak, egy hatalmas kép vagy navigációs ikonok letöltése.
- Ne tegyen nagyméretű képeket az oldal tetejére. Csakúgy, mint a navigációnál, nagyon ideges lehet várni egy olyan képet, amely 3-4 képernyőfelületet tölt be az oldal tetején. És ez rendkívül gyakori a weboldalakon. Az egyetlen kivétel ez, ha az olvasó tudja, hogy egy képet fognak kapni, amikor rákattintanak, mondják egy fotógalériában.
Mi az, amit el kell kerülni a mobiltelefonok tervezése során?
Számos dolgot kell elkerülnie, amikor mobilbarát oldalt készít. Amint azt korábban említettük, ha tényleg ezeket az oldalain szeretné, akkor megteheti, de győződjön meg róla, hogy a webhely nélkülük működik.
- Flash - a legtöbb mobiltelefon nem támogatja a Flash-et, ezért nem célszerű a vezeték nélküli oldalakon megjeleníteni.
- Cookie-k - sok mobiltelefon nincs cookie-támogatással. Az iPhone-oknak cookie-támogatásuk van.
- Keretek - még akkor is, ha a böngésző támogatja őket, fontolja meg a képernyő méretét. A keretek egyszerűen nem működnek mobileszközökön - nagyon nehéz vagy lehetetlen olvasni.
- Táblázatok - ne használjon táblázatokat az elrendezéshez mobiloldalon. És próbálja elkerülni a táblákat általában. Nem minden mobiltelefonon támogatott (bár az iPhone és más okostelefonok támogatják őket), és furcsa eredményeket is elérhet.
- Beágyazott táblák - ha táblát kell használnia, győződjön meg róla, hogy nem fészkelődik egy másik táblázatban. Ezek az asztali böngészők nehezen támogatják, és a legjobb esetben lassabban készítik az oldal betöltését.
- Abszolút intézkedések - más szavakkal, ne határozza meg az abszolút méretű objektumok méreteit (például képpontokat, millimétereket vagy hüvelykeket). Ha valamit 100-szoros szélességűként definiál egy olyan mobileszközön, amely lehet a képernyő felénél, a másik pedig kétszerese lehet a szélességnek. A relatív méretek (például az ems és a százalékos értékek) a legjobbak.
- Betűkészletek - ne feltételezzék, hogy a betűkészletek közül bármelyik elérhető lesz a mobiltelefonokon.
Olvass tovább
- Hogyan készítsünk mobiltelefonos honlapot a PHP használatával?