iPad adalah salah satu media yang harus anda perhitungkan mengingat besarnya penerimaan masyarakat terhadap media ini. Maka tidak ada salahnya bila anda mulai memperhatikan website versi iPad anda. Berikut beberapa aturan-aturan dasar yang harus anda ketahui mengenai pembuatan website berbasis iPad.
Resolusi
Resolusi layar pada iPad adalah 768 x 1024 pixel. Maka ciptakan desain anda sesuai resolusi tersebut. Kesulitan yang seringkali ditimbulkan oleh resolusi tersebut adalah tipografi. Sebab huruf yang tampil di layar iPad dan di monitor PC anda tidak sama besarnya. Anda bisa mengatasinya dengan menyimpan mock up desain web anda, kemudian membukanya pada apps Photo Viewer bawaan iPad untuk menemukan tipografi yang pas.
CSS untuk setiap orientasi
iPad memiliki 2 orientasi. Yaitu mode portrait dan landscape. Maka, anda harus menyiapkan CSS untuk masing-masing orientasi. Baru kemudian tambahkan baris kode berikut pada tags <head> website anda agar iPad bisa menerapkan CSS tersebut pada masing – masing orientasi yang terdeteksi:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Tanpa Cursor
Perbedaan paling pertama antara menjelajah lewat komputer dan jelajah lewat iPad adalah kursor / alat penunjuk. Pada komputer, anda bisa memanfaatkan cursor. Sedangkan pada iPad, anda harus menggunakan jari. Artinya pada CSS anda, event cursor seperti mouseover dan hover, tidak mungkin dijalankan.
Tanpa Flash
Sampai saat ini Apple masih tidak mau melengkapi produknya dengan kemampuan untuk menjalankan obyek Flash. Sepeninggal Steve Jobs, hubungan antara Adobe dan Apple memang tampak mulai membaik. Meskipun masih kecil kemungkinannya agar Flash bisa secara otomatis ditampilkan pada iPad. Sambil menunggu saat itu terjadi, lebih baik jangan memasang obyek Flash di website anda. Jika bisa, ganti saja dengan perpaduan teknik HTML5 dan CSS3.
Gunakan teknik HTML5 dan CSS3
Untuk membuat tombol menu misalnya, anda bisa memadukan properti gradient, border, font shadow dan rounded box dari CSS3. Sedangkan untuk membuat apps sederhana yang seolah-olah berjalan seperti obyek Flash, anda bisa menggunakan teknik HTML5. Tutorial teknik HTML5 dan CSS3 bisa anda temukan dengan mudah melalui pencarian Google.
Atur ukuran viewport
Viewport adalah area persegi yang menentukan bagaimana konten akan ditampilkan dan bagaimana paragraf akan dibentuk. Viewport antara komputer dan iPad berbeda. Pada iPad (Safari) tidak terdapat tab, scroll bar, dan tombol resize. Sehingga anda harus mengatur dimensinya dulu agar konten anda tidak tampil berantakan. Anda cukup menambahkan kode berikut pada tags <head> website anda:
<meta name="viewport" content="width=device-width" />
Scroll dengan iScroll
Webkit untuk iPad tidak dilengkapi dengan scrolling. Sehingga, tidak mungkin sebuah website bisa memiliki header/footer dan sebuah scrolling area sekaligus. iScroll (http://cubiq.org/iscroll) adalah sebuah proyek aplikasi yang dikembangkan untuk memungkinkan properti overflow:scroll pada CSS. Dengan demikian, anda tetap bisa memiliki fixed size header/footer dan sebuah scrolling area.
Ikon "Add to Home Screen"
Pada alat jelajah seperti Apple Safari, user akan diberi pilihan untuk menambahkan website anda pada layar Home mereka. Jika ya, maka pada barisan apps mereka akan ditambahkan sebuah ikon quick launch yang langsung mengarah ke website anda. Jika ingin mengganti ikon ini dengan ikon buatan anda sendiri, Anda bisa unggah ikon berdimensi 72×72 px, kemudian tambahkan kode berikut pada tags <head> website anda:
<link rel="apple-touch-icon" href="http://www.domainanda.com/apple-touch-icon-anda.png" />
Masalah Compatibility
Bagusnya, di iPad anda tidak harus khawatir dengan faktor compatibility dari alat jelajah atau bahkan perangkat yang berbeda. Jika desain web anda bekerja pada iPad anda, maka besar kemungkinan desain web anda juga akan bekerja pada iPad lainya.
Mengarahkan user berdasarkan perangkat yang digunakan
Terakhir, tambahkan baris JavaScript berikut pada tags <head> halaman web anda. Kode JS berikut akan langsung mengarahkan user yang mengunjungi website anda dengan iPad ke website versi iPad yang telah anda buat:
<script type="text/javascript"> if ( (navigator.userAgent.indexOf('iPad') != -1) ) {document.location = "http://www.domainanda.com/app.php";} </script> Sekian beberapa aturan dasar yang harus anda ketahui mengenai bagaimana membangun website berbasis iPad. Untuk mendesain, kami sarankan anda coba software "iPad GUI PSD (retina display)". Software ini bisa anda dapatkan dari situs pengembangnya (Selama masih berlaku). Jadi, selamat membangun versi iPad dari website anda. :-)
sumber : Media Bisnis Online Indonesia
Baca selengkapnya di --> 10 Aturan Mendesain Website berbasis iPad
Share Artikel ini! »»
|
|
|
Tweet |
0 comments:
Post a Comment