Anda harus mempertimbangkan tentang cara menggunakan paling sederhana dari ruang yang tersedia untuk isi utama Anda dan tetap menarik bagi pengguna ponsel. Hindari gambar besar dan animasi flash karena akan memperlambat situs Anda. Ingat bahwa fungsi lebih penting daripada gaya untuk website mobile.
Jika situs Web Anda tidak dikodekan dan desain dengan baik, hal itu tidak bisa terlihat lebih baik pada satu telepon, atau lebih buruk lagi, tidak menampilkan sama sekali. Periksa apakah web Anda kompatibel dengan semua perangkat mobile.
Untuk membantu Anda dalam membuat website yang dapat diakses tidak hanya pada komputer desktop atau laptop, tetapi juga perangkat mobile, berikut 10 hal yang perlu dipertimbangkan pada desain web mobile dengan gambar sampel bersama link langsung versi situs mobile yang dimaksud.
1. Tentukan resolusi layar
Di dunia ponsel mengandung variasi kaya pertimbangan desain dari ukuran layar yang berbeda dan resolusi untuk berbagai bentuk. Bertujuan untuk keseimbangan antara lebar layar yang cukup dan ukuran penonton. Cari tahu spesifikasi dari perangkat mobile saat ini dan menggunakan penilaian terbaik Anda. Apa yang menantang bagi pengembang mobile adalah cara untuk mendapatkan satu untuk menampilkan tepat di berbagai ukuran layar tanpa harus menciptakan halaman untuk platform yang berbeda.Berikut adalah daftar resolusi web populer pada perangkat mobile pada Februari 2011 disajikan oleh Uxbooth.com dengan artikel mereka, Considerations for Mobile Web Design (Part 2): Dimensions, oleh David Leggett. Penulis menjelaskan beberapa poin tentang dimensi layar dan solusi untuk desain tata letak.
2. Break up halaman web menjadi bagian-bagian kecil
Bagian panjang teks akan sulit untuk dibaca sehingga menempatkan mereka pada beberapa halaman membatasi bergulir ke satu arah. Singkirkan konten prioritas rendah. Tetaplah pada satu kolom teks yang membungkus sehingga tidak ada bergulir horisontal.Sebagai contoh di bawah ini, CBS News versi situs web mobile hanya menunjukkan bagian berita utama dan istirahat artikel berita menjadi bagian-bagian kecil. Sementara Treehugger menyajikan sendiri dengan artikel terbaru mereka dan tweets terbaru dengan beberapa fitur dari website penuh. Kedua situs memiliki pengguna mengklik link teks untuk melihat sisa artikel.
CBS News
Treehugger
3. Sederhanakan desain
Kesederhanaan setara dengan kegunaan. Biarkan mereka bergerak di sekitar situs tersebut dengan tanpa kesulitan. Hindari masuknya tabel, frame dan format lainnya. Jika Anda menggunakan padding, ingat untuk tetap ke minimum absolut jauh lebih sedikit daripada yang Anda akan gunakan untuk halaman web biasa. Dibandingkan dengan komputer desktop, semakin Anda mengklik link pada situs web seluler, semakin Anda menunggu karena waktu loading. Dengan itu, Anda perlu untuk strip bawah dan menyederhanakan website Anda dengan keseimbangan antara konten dan navigasi.Sebagai contoh kita, situs versi mobile dari daftar Best Buy hanya kategori produk yang paling penting pemangkasan menurunkan tingkat hirarki untuk konten. Sementara halaman YouTube mobile home menunjukkan hanya empat video sorotan terbaru.
Best Buy
YouTube
4. Opsi untuk melihat situs penuh
Menyediakan link bagi pengunjung ponsel Anda untuk beralih kembali ke situs penuh bagi pengguna untuk mencari dan melihat konten lainnya dan fitur yang hanya dapat diakses dengan versi desktop dari situs. Pemirsa Anda pasti akan melakukan banyak scrolling vertikal, sehingga membantu mereka keluar dengan 'Kembali ke atas' link sehingga mereka dapat melompat ke bagian atas halaman.Sebagai contoh, Ars Technica memiliki tombol link mereka ke website standar ditempatkan pada pos tersebut. Sementara Shangri-La memiliki website penuh mereka link ditempatkan pada footer.
Ars Technica
Shangri-La
5. Penempatan Navigasi
Kenali audiens Anda dan menyadari apa yang mereka cari. Cari tahu bagaimana mereka akan ingin untuk menavigasi situs Anda. Posisikan menu navigasi Anda di bawah konten jika pengguna ponsel yang ditargetkan ingin melihat konten berubah dengan cepat. Isi dan judul harus terlihat pertama yang tidak mendapatkan di jalan melihat konten halaman. Bagi pengguna yang ingin menavigasi pada kategori tertentu langsung, menempatkan navigasi di bagian atas halaman. Di bawah ini adalah contoh berbagai penempatan navigasi yang digunakan dalam desain web mobile.D&G
Politico
Daily Horoscope
6. Gunakan text links
Situs utama Anda dapat menggunakan menu whizzy terbang-out, rollovers atau gadget mewah lainnya, tapi browser ponsel kemungkinan akan tidak. Sadarilah bahwa elemen halaman dinamis dan link grafis mengkonsumsi sumber daya, sehingga memilih baik berlabel link teks.A List Apart
7. Buat perbedaan antara link yang dipilih
Pindah kursor ke bawah akan menggulir halaman, dan menyoroti link sekaligus. Jadi, sangat penting untuk secara jelas nasihat pengguna apa item dalam fokus. Hal ini dapat dilakukan dengan mengubah warna font dan latar belakang dari link dan tombol atau dengan hanya menambahkan beberapa padding sekitar link untuk membuat daerah yang dapat diklik lebih besar sekitar 44px 44px. Geek Squad dan Diesel memanfaatkan font besar untuk teks yang dapat diklik.Geek Squad
Diesel
8. Seimbangkan links
Setiap halaman download mengkonsumsi sumber daya waktu dan sistem, yang terakhir yang berada dalam pasokan pendek, jadi cobalah untuk tidak memaksa pengunjung situs to digg melalui banyak halaman untuk mengakses informasi yang dicari. Keseimbangan antara jumlah link pada setiap halaman dan kedalaman situs.Flickr
9. Kurangi user text entry
Sulit untuk input teks dalam versi mobile dari situs web. Ganti dengan tombol radio atau daftar sebaliknya sehingga mereka dapat memilih dari apa yang mereka butuhkan dengan mudah. Ingat bahwa mobiles pengguna tidak memiliki akses ke keyboard dan mouse konvensional. Semakin pendek URL, semakin baik karena monoton untuk mengetikkan URL yang panjang.Untuk sampel kami di bawah ini, Fedex memanfaatkan checklist dan drop down menu. Sementara Tumblr membuat Anda memilih bahasa Anda menggunakan menu drop down.
Fedex
Tumblr
10. Tidak ada pops atau refreshes
Mobile browser biasanya tidak mendukung pop-up. Dan jika mereka melakukannya, mereka akan memiliki ruang yang sangat sempit untuk pop ke. Jauhi menggunakan mereka untuk menghindari hasil yang tak terduga. Juga, tidak memiliki halaman menyegarkan berkala untuk menghindari mengisi memori perangkat yang terbatas. Biarkan pengguna menyegarkan konten.
Kesimpulan
Lebih kreatif dan terapkan desain web ponsel Anda dengan cara baru. Buat konten Anda cukup menarik dan bermanfaat. Berikan pengguna Anda apa yang mereka inginkan, ketika mereka menginginkannya. Pengguna tidak ingin menggali lebih dalam ke situs hanya untuk menemukan apa yang mereka cari di web mobile.Sumber dan gambar: hongkiat.com
Tidak ada komentar:
Posting Komentar