Hogyan néz ki a NetPincér.hu egy okostelefonon? iPhone demo Ezt az oldalt azért hoztuk létre, hogy akár telefon nélkül is kipróbálhasd, hogy milyen is a mobil-rendelés. A kézzel érintés élményét az egéren keresztül nem tudjuk visszaadni, de a felület, és annak használata 100%-ban ugyan olyan, mintha egy okostelefont tartalnál a kezedben. Reméljük tetszik, és kedvet kapsz ahhoz, hogy ne csak a monitoron, hanem akár mobilon megrendeld az aznapi ebédet vagy vacsorát!

Fejlesztőknek

• Az oldal kialakitásakor a szerkezet és a navigáció legyen egységes, elhelyezkedésük legyen olyan mint az iPhone kezeleőfelülete
  
  
• A mentés, hozzáadás funkciók, illetve előre mutató "linkek" a jobb felső sarokban, a visszavonás, és visszalépés funkciók a bal felső sarokban
  
  
• Fejlesztéskor használj Firefox és Safari böngészőket, ezekben fog leg autentikusabban megjelenni az oldalad
  
  
• Hasznáj nyugodtan külső CSS-t, JS függvényeket, de vigyázz az iframe-ket máshogy kezeli mint a hagyományos böngészők, nem tudsz magasságot állítani neki
  
  
• A fontokat élsimítja, így használhatsz CSS text-shadow tulajdonságot, ez segíti az olvashatóságot is
  
  
• A jobb átláthatóság érdekében használj apró átmeneteket, finom háttérszín váltásokat az egyes területek elkülönítésére
  
  
• Meta tagekkel sok dolog beállítható (egyik legfontosabb a méretarány), ezknek listáját itt megtalálod Safari Dev Center
  
  
• A buttonok méretle legyen akkora, h újjaddal meg tudd nyomni legalább (40x15 px)
  
  
• Az aktív html elemek (input, select, button, link, ikon) legyen elegendő térköz, hogy egy új nyomással csak egy elemhez érj hozzá, figyelj, hogy valakinek nagy keze van :)
  
  
• Oldalunk lefelé nyúlhat de próbáljuk meg a a felső 400px-be sűríteni a tartalmat
  
  
• iPhone kijelzője 320x480 px de ebből lejön az asló és felső menü mérete, így az egyszerre látható tényleges méret 320x416 px
  
  
• Próbálj tartalomspecifikus oldalt készíteni, csak ott használj "felesleges grafikát" ahol van rá hely
  
  
• Ha görgetned kell az oldalt használhatsz alul is tovább gombot, hogy megkönnyísd a user életét :), ilyenkor tedd egy vonalba a felső gombbal
  
  
• Szintén görgető oldalnál biztosíts linket az oldal tetejére ugráshoz, használd a scrollBy JS függvényt, további info itt
  
  
• Ha telefonszámot helyezel el az oldalon, használd a nemzetközi formát, mert ez automatikusan felsimeri az iPhone, pl.: +36304151986
  
  
• A domain név létrehozásakor törekedj az egyszerüségre, hogy kényelmesebb legyen a felhasználónak
  
  
• Mindenképpen kezeld le az oldaladon, hogy ha a felhasználó iPhonnal jön hozzád az eredeti web címeden, dobd tovább a megfelelő url-re
  
  
• Safari Referencia
  
  
• Magyarul itt olvashatsz részletesebben