it-swarm.asia

Merancang untuk browser web seluler

Apa pendekatan terbaik untuk merancang situs web untuk dijalankan di hampir semua browser web seluler modern?

Apakah menargetkan browser berbasis WebKit cukup?

8
rick schott

Tidak, menargetkan WebKit tidak cukup. Hal pertama yang harus dilakukan adalah mempertimbangkan ada dua segmen pasar ponsel: berbasis sentuhan dan bukan berbasis sentuhan. Ini memengaruhi cara Anda mendesain pengalaman pengguna seluler Anda. Untungnya, yang berbasis sentuhan akan tren signifikan ke arah WebKit (Android, iPhone dan WebOS). Yang lain terutama akan menjadi IE Mobile (IE Mobile 6 pada Windows Mobile 6.5 dan yang baru berdasarkan IE7/IE8 pada Windows Phone 7) dan Opera = (Seluler dan Mini). Lihat ini daftar peramban seluler di Wikipedia untuk informasi lebih lanjut tentang rendering engine dan kapabilitas.

Untuk platform berbasis sentuhan, perpustakaan seperti Sencha Touch dapat membantu Anda membuat pengalaman yang sebanding di semua perangkat, tetapi akan sulit untuk menciptakan pengalaman yang sama di semua perangkat. Bahkan, saya sarankan Anda jangan mencoba . Perbedaan antara platform seluler sentuh dan non-sentuh menjadi sangat besar, hampir seperti perbedaan UX dalam mencoba menyesuaikan UI berbasis desktop ke layar berukuran seluler - yang berfungsi baik pada platform berbasis sentuh karena mereka menggunakan paradigma "zoom" iPhone - tetapi Anda akan kesulitan untuk mendapatkan sesuatu yang berguna dari pendekatan itu untuk platform lama atau non-sentuh.

Namun, pertimbangkan artikel LukeW dan pembicaraan selanjutnya tentang mendesain untuk seluler terlebih dahul , yang belum tentu merupakan jawaban untuk pertanyaan Anda tetapi dapat dianggap sebagai prinsip yang baik: mulai merancang dengan mengidentifikasi hal-hal yang ingin dilakukan konsumen di situs Anda, dan buat hal-hal itu tersedia dengan cepat dan mudah. Sebanyak itu adalah desain yang baik secara konsisten di seluruh platform semua, sehingga Anda dapat menggunakannya sebagai pola yang memandu desain ponsel Anda.

12
Rahul

Saya membuat beberapa percobaan kemarin dengan iPhone 3. Ini pengalaman saya:

  • Jangan menganggap lebar 320 piksel, jadi gunakan tata letak lebar cairan.

  • Gunakan doctype yang tepat. Saya menggunakan XHTML Mobile 1.2. Tetapi saya tidak yakin apakah ini yang benar.

  • Buat tombol-tombolnya besar.

  • Jangan arahkan, jadi gunakan ikon untuk menunjukkan apa yang dilakukan oleh elemen ui yang berbeda.

4
neoneye

Istilah mobile berkembang di luar ranah ponsel dan mulai memasukkan perangkat seperti tablet, yang memerlukan layar sentuh lima hingga sembilan inci. Selain itu, desain seluler harus memperhitungkan orientasi horisontal dan vertikal. Di atas apa yang dikatakan neoneye, beberapa rekomendasi/saran.

  • Gunakan beberapa margin atau lapisan untuk memastikan tidak ada teks yang duduk tepat di Tepi layar.
  • Di atas menggunakan tata letak lebar cairan (lebar bisa dari 320px ke 1024px), pastikan elemen desain yang Anda gunakan bungkus dengan baik. Misalnya, tombol terlihat lebih baik dibungkus daripada daftar horizontal.
  • Teks harus sedikit lebih besar, tetapi masih dapat dibaca. Dalam pandangan saya, gaya tipografi yang baik setidaknya sama pentingnya di sini. Elemen Gaya Tipografi yang Diterapkan ke Web adalah referensi yang bagus.
3
waymost

Jika audiens Anda dapat sedikit lebih berkualitas maka Anda mungkin dapat membuat beberapa asumsi berpendidikan bahwa sebagian besar pelanggan menggunakan perangkat utama atau rendering browser. Tangani kebutuhan inti audiens utama Anda terlebih dahulu. Mencoba untuk mendistribusikan aplikasi Anda di semua platform secara merata di "awal" mungkin tugas yang terlalu menakutkan.

Berikut adalah beberapa artikel bermanfaat yang saya temui:

Referensi Seluler http://www.quirksmode.org/mobile/

2
hungrysquirrel