Pandangan ke Merancang untuk Perangkat Seluler
Ketika iPhone pertama dirilis, ia mengambil alih dunia teknologi. Sejak itu sudah hampir 5 tahun dan pasar smartphone telah meningkat popularitasnya, bahkan Microsoft pun memasuki persaingan dengan OS dan mitra Windows 7-nya. Dengan begitu banyak pengguna Internet di smartphone mereka saat ini, masuk akal untuk mengharapkan jumlah situs web seluler meningkat secara agresif.
Namun, mendesain untuk web seluler adalah operasi yang sama sekali berbeda dengan desain web umum. Situs web kami dirancang untuk layar besar, tetapi ukuran layar smartphone terlalu kecil dibandingkan dengan itu, sehingga menyebabkan masalah kegunaan yang mengganggu.. Standar dan praktik desain baru sangat diperlukan untuk desain situs seluler yang lebih baik dengan pengalaman pengguna yang lancar.
Dalam panduan ini kita akan mencari untuk merancang situs yang ramah pengguna untuk browser ponsel smartphone. Saya akan berbicara tentang praktik terbaik dan alat pengembang yang berguna bagi Anda untuk merancang situs web seluler yang lebih baik, jadi mari kita masuk ke dalamnya setelah melompat!
Merencanakan Pengalaman Pengguna Yang Kuat
Ketika Anda membangun situs web seluler, penting untuk melakukannya ingat selalu pengguna Anda, karena pada akhirnya situs web Anda dirancang dan dibuat untuk dinikmati pengguna. Sudah umum bagi pengguna untuk mengharapkan situs web seluler berperilaku serupa dengan lingkungan desktop, jadi menjaga pengalaman pengguna ramah harus menjadi fokus utama Anda saat membangun situs seluler yang sukses.
Ada banyak konsep kegunaan untuk dipertimbangkan bagi pengguna Anda. Pertimbangan ini termasuk ukuran layar, gambar sebaris, hyperlink, ukuran font, dan navigasi halaman. Kami telah menulis tentang desain kegunaan seluler untuk Anda mengukir situs web Anda untuk kegunaan yang lebih baik. Selain panduan, Anda harus selalu tetap waspada untuk ide-ide baru untuk meningkatkan situs Anda.
Merencanakan pengalaman pengguna yang kuat juga berarti Anda harus melakukannya pertimbangkan bagaimana pengguna akan berinteraksi dengan situs web Anda. Pada desktop situs web Anda dapat berinteraksi dengan mouse dan keyboard, tetapi pada pengguna smartphone akan penyadapan, menjentikkan, dan menggesek jalan mereka di sekitar situs Anda. Anda mungkin perlu merancang situs dengan cara yang dapat dilakukan pengguna mengakses informasi situs dengan mudah dengan gerakan fisik ini.
Buat Halaman Singkat & Manis
Daging dan kentang dari situs web mana pun adalah konten halaman. Setiap halaman web Anda memegang sejumlah besar informasi yang berguna untuk pengguna Anda, seperti teks, foto atau video. Anda juga akan menemukan artikel berita dan posting blog yang berjalan selama beberapa halaman, yang dapat membantu memecah teks tetapi tidak direkomendasikan untuk perangkat seluler sebagai tekniknya. membutuhkan lebih banyak pemuatan halaman yang berarti lebih banyak waktu tunggu di sisi pengguna.
Kecuali itu benar-benar diperlukan saya sarankan menjaga konten halaman Anda singkat. Anda juga harus mempertimbangkan membuatnya terlihat manis menata font ke ukuran yang jauh lebih besar dan mungkin mengesampingkan gambar. Dengan konten Anda pada tampilan penuh itu secara alami menarik perhatian, belum lagi optimasi sebenarnya membuat pemindaian halaman jauh lebih mudah. Ini juga alasan mengapa a tata letak kolom tunggal cocok dengan tagihan.
Dalam kebanyakan kasus, peramban seluler tidak akan memuat laman web secepat peramban desktop dan ini dapat mengganggu pembaca Anda, itu sebabnya Anda harus mengoptimalkan konten dan situs web untuk memuat konten berkecepatan tinggi. Anda juga bisa perpendek artikel sambil menjaga konten penuh, atau sederhana hapus gambar yang tidak perlu. Tempatkan fokus Anda pada kesederhanaan, bukan keindahan.
Navigasi inti Anda adalah penyelamat bagi pengunjung yang ingin berpindah antar halaman. Pada perangkat seluler, tautan layar akan tampak jauh lebih kecil, sehingga jauh lebih sulit untuk disadap. Tweak penting untuk menyelesaikan masalah ini adalah untuk maksimalkan font dan ruang untuk tautan navigasi Anda, mungkin mengambil seluruh area blok. Atau Anda bisa desain bilah navigasi agar mirip dengan bilah tab aplikasi iPhone asli, seperti yang ditunjukkan di atas.
Membangun Gaya CSS Seluler
Sekarang kita tahu cara mengoptimalkan situs web seluler untuk keterbacaan dan kegunaan yang lebih baik, ada baiknya berbicara tentang gaya CSS. Setiap lembar gaya CSS berisi banyak penyeleksi dengan properti yang berkaitan dengan font, ukuran, posisi, dan pengaturan tampilan. Ketika datang ke ponsel Anda harus memperhatikan bagaimana balok Anda jatuh ke tempatnya.
(Sumber Gambar: Smashing Magazine)
Satu area untuk memulai adalah setel ulang lebar pembungkus situs Anda menjadi persentase. Pixel biasa digunakan sebagai unit untuk penentuan posisi, tinggi baris, ukuran font, dan lebar div, tetapi saat berhadapan dengan ponsel, Anda ingin halaman Anda menjadi cairan dan transisi antara setiap perangkat secara alami. Mengatur wadah divs ke lebar 100% akan memungkinkan konten untuk isi dengan mudah antara mode potret / lansekap tanpa mengalir di tepi.
Jika Anda salah satu dari orang yang ingin menyusun ulang seluruh tata letak Anda, pastikan Anda tekan semuanya dengan a atur ulang. Juga paragraf, pos, dan tautan navigasi semuanya harus diatur display: blok; sehingga Anda mendapatkan perasaan gaya cetak linier. Posisikan kembali margin dan padding untuk menghapus mengasapi dari tata letak Anda. Hindari meja jika mungkin karena ini cenderung memberikan hasil kereta antar perangkat.
Gambar besar juga merepotkan antar perangkat. Sebagian besar gambar situs web Anda akan merender lebih besar dari 480px dan Anda mungkin tidak ingin mereka memecahkan wadah. Opsi pertama adalah atur lebar mereka di 100% sehingga gambar dapat mengubah ukuran secara alami. Itu tentu mungkin buat set gambar yang berbeda untuk situs web Anda dan membuat mereka berbeda berdasarkan agen peramban, tapi jujur ini hanya menambah lebih banyak karya di sisi Anda, jadi cobalah gunakan teknik ini hanya ketika itu benar-benar dibutuhkan.
Merancang Situs Web untuk iPhone
Pangsa pasar seluler cukup besar dan terbagi, tetapi Apple telah mendapat sepotong besar kue dengan iDevices mereka. Baik iPhone dan iPad adalah perangkat yang siap-pakai internet seluler dengan fungsionalitas layar sentuh bawaan. Mereka menampilkan browser web default yang sama, Safari, dan sejumlah opsi lainnya.
Untuk situs web khusus iPhone Anda harus menargetkan ukuran layar. Ukuran layar tetap diatur ke 320px x 480px untuk model iPhone lama dan 640px x 960px untuk iPhone 4 dan iPhone 4S.
Layar iPhone terbatas pada ruang. Kamu harus punya satu blok konten yang membentang selama diperlukan. Menyimpan elemen dalam satu kolom akan menghemat sakit kepala dan memungkinkan untuk tata letak cairan “mengisi” baik mode potret dan lansekap. Untuk ini, Anda mungkin perlu mengembangkan template lain dan menemukan cara untuk memeriksa apakah pengunjung Anda menggunakan iPhone. Cuplikan PHP kecil di bawah ini harus bekerja dengan baik:
Pada dasarnya logika menarik global kita $ _SERVER variabel untuk agen HTTP dan memeriksa apakah kata “iphone” muncul di mana saja. Jika ya, maka kami tahu pengunjung kami menggunakan iPhone dan dari sana kami dapat memasang HTML yang sedikit berbeda atau bahkan tata letak templat yang sama sekali baru! Ini juga bisa digunakan untuk termasuk stylesheet khusus iPhone, ganti judul halaman Anda, hapus gambar, atau hampir semua efek dinamis apa pun.
Dalam hal melayani gaya baru, ada cara yang lebih mudah. Seperti disebutkan sebelumnya, ukuran layar maksimum untuk iPhone adalah 960px lebar. Karenanya dengan kueri media CSS3 baru Anda dapat menambahkan gaya langsung ke stylesheet utama situs Anda hanya ditampilkan di iPhone. Di bawah ini adalah contoh kode kecil:
Layar @media dan (lebar perangkat maksimal: 960px) / * iPhone css * /
Ini berhasil karena CSS sekarang dapat mendeteksi agen penelusuran dan propertinya. Lebar layar maks adalah salah satu properti yang juga dapat dideteksi.
Situs web seluler all-in-all untuk perangkat iPhone tidak terlalu sulit untuk dirancang, ada terlalu banyak contoh untuk dirujuk, yaitu, CSS iPhone. Tetap sibuk belajar dan jangan takut bereksperimen dengan teknik-teknik baru dalam desain UI.
Script jQuery Seluler
Mayoritas pengembang web front-end terbiasa dengan pustaka jQuery. Ini menawarkan beberapa steno fantastis untuk efek pengkodean, animasi, menu dropdown, dan sejumlah fungsi dalam browser lainnya, dan itu hanya menjadi lebih luar biasa dengan pengumuman jQuery Mobile. ini tidak disarankan untuk langsung terjun ke teknologi dan muat situs web Anda dengan efek di mana-mana, tetapi untuk tujuan pengujian, fungsionalitas canggih dapat bermain dengan sangat baik.
jQuery Mobile sedikit berbeda dari jQuery biasa karena memberi Anda lingkungan yang penuh untuk dibangun. Ketika Anda bekerja dengan file-file mereka, mereka bukan hanya JavaScript tetapi juga gaya CSS untuk tombol, tautan, dan efek transisi. Anda masih menulis halaman web dalam kode HTML, tetapi tim jQuery Mobile memilikinya disediakan banyak fitur desain UI opsional. Ada banyak yang bisa kita lakukan dengan kerangka kerja ini tetapi sejak itu Kerangka kerja ini masih dalam versi beta, mari tetap berpegang pada efek sederhana.
Sebuah tutorial kecil di blog DevGrow memberikan beberapa contoh luar biasa. Situs resmi juga menawarkan demo untuk Anda coba. Perhatikan bahwa kami menggunakan atribut HTML, transisi data untuk menambahkan efek animasi dengan nilai yang telah ditentukan sebelumnya. Ini termasuk slide, pop, flip, fade, dll. Lihat contoh DevGrow kecil untuk merasakan efek ini.
Efek dan transisinya sangat rapi, dan fakta bahwa Anda dapat membangun seluruh antarmuka seluler secara ketat dengan jQuery juga merupakan langkah besar ke depan untuk platform ini, tetapi dengan platform hanya dalam versi beta, saya tidak akan merekomendasikan membangun seluruh situs seluler Anda dengan perpustakaan mereka, terutama dengan fakta bahwa itu tidak didukung oleh semua ponsel cerdas utama pada saat penulisan (khususnya Windows Phone 7), tetapi pasti akan menjadi lebih baik dengan waktu.
Pada akhirnya saya merekomendasikan untuk membiasakan diri dengan kerangka kerja seluler baru ini sebelum menyebarkan langsung pada proyek apa pun.
Alat Pengembang yang Bermanfaat
Pengembang seluler tidak hanya melihat ke sumber daya pengkodean dan desain. Ada juga permintaan tinggi untuk perangkat lunak dan IDE, belum lagi kerangka kerja seluler yang kuat. Pengembangan web adalah tugas yang sulit yang membutuhkan sedikit dedikasi, tetapi menggunakan alat tambahan akan membuat pekerjaan Anda jauh lebih mudah.
Opera Mobile Emulator
Mencari cara untuk memeriksa bagaimana situs web seluler Anda dirender? Ini bisa sangat menyebalkan jika Anda tidak memiliki ponsel cerdas dengan akses Internet. Atau Anda tidak ingin menggunakan ponsel cerdas Anda untuk menguji situs setiap kali pembaruan didorong ke server Anda. Opera Mobile Emulator adalah perangkat lunak yang fantastis untuk menguji situs web seluler Anda.
Emulator memang mendukung 20 profil seluler seperti Samsung Galaxy S, HTC Desire, dan bahkan tablet seperti Motorola Xoom. Juga dimungkinkan untuk mengatur resolusi khusus dan kerapatan piksel untuk tujuan pengujian intensif. Yang terbaik dari semuanya, Anda tidak perlu melakukan terlalu banyak pekerjaan konfigurasi, cukup buat beberapa klik dan Anda siap melakukannya.
Pengunduhan benar-benar gratis dan perangkat lunaknya berjalan di lingkungan Mac OS X dan Windows. Pengembang mereka bekerja keras menciptakan standar web yang tepat dan mengutak-atik mesin rendering seluler mereka. Saya merekomendasikan alat dev mereka yang lain jika Anda mencari alat tambahan untuk membantu Anda di sepanjang jalan.
PhoneGap
Belum banyak API yang dikembangkan di atas HTML5 untuk membangun aplikasi seluler yang solid. Khususnya lanskap seluler telah kekurangan jenis situs web ini, itulah sebabnya PhoneGap mengisi ceruk dengan sangat baik. Platform mereka memungkinkan Anda dengan mudah membangun aplikasi berbasis HTML5 sebagai aplikasi asli pada 6 platform yang berbeda.
Proses ini bekerja dengan terlebih dahulu mengompresi kode Anda dan meneruskannya melalui kerangka aplikasi PhoneGap. Dari sana aplikasi Anda dapat menjangkau sebagian besar pasar ponsel termasuk Android, iOS, Windows Phone 7, dan BlackBerry.
Jika Anda agak bingung jangan terlalu khawatir. Halaman dukungan mereka menguraikan proses dengan rapi dan menawarkan tautan ke sumber daya yang bermanfaat. Aplikasi yang telah dikembangkan telah disusun dalam portofolio gaya perpustakaan yang indah. Lihat koleksi aplikasi lengkapnya yang kemudian dapat Anda urutkan berdasarkan perangkat dengan tangkapan layar.
Studio Aptana
Situs web Aptana adalah lokasi utama untuk belajar tentang alat pengembangan mereka. Rilis suite terbaru, Aptana 3.0.3, menampilkan IDE yang terintegrasi penuh untuk pengembangan web, gaya CSS, dan penandaan tag HTML, dan bagian terbaiknya: Aptana sepenuhnya bebas untuk mengunduh! Mereka menawarkan paket untuk semua 3 Sistem Operasi utama (termasuk Linux) yang merupakan kenyamanan besar bagi pengembang.
Apa yang membuat Aptana istimewa adalah seberapa cepat Anda dapat mengembangkan aplikasi web kecil dan menguji desain Anda. Studio suite memungkinkan Anda untuk melakukannya cepat mengembangkan dan menguji aplikasi web yang berjalan di atas Ruby on Rails, PHP, Python, atau cukup HTML / CSS, dan fitur penyorot kode mereka baru-baru ini ditingkatkan menjadi termasuk perpustakaan tag HTML5 dan CSS3 baru. Itu juga dilengkapi dengan integrasi Git, terminal built-in, debugger kode, dan beberapa fitur bagus lainnya.
Kit dan Ikon GUI Seluler
Apa yang akan menjadi web tanpa gratis tergeletak di sekitar? Untuk desainer web pentingnya peringkat antarmuka pengguna di atas segalanya. GUI sederhana sulit didapat dan hanya desainer paling kreatif yang memberikan solusi yang berfungsi.
Namun, ada banyak sumber daya gratis namun berkualitas yang tersedia bagi perancang web Anda untuk diuji. Kit GUI ini sebagian besar dirancang untuk Adobe Photoshop atau Fireworks di mana Anda dapat memindahkan elemen dan mengekspornya sebagai file gambar datar.
Ikon adalah sumber yang sangat berguna untuk dimiliki. Desainer menciptakan set gratis dan menawarkannya secara online lebih sering daripada sebelumnya. Salah satu situs web semacam itu, Glyphish, menampilkan ikon gratis dan pro. Desain ini didasarkan pada satu tema untuk digunakan pada templat seluler dan desain aplikasi.
Kumpulan templat prototipe perangkat seluler kami akan sangat membantu Anda selama perjalanan pengembangan situs web dan aplikasi. Anda seharusnya tidak mulai membuat kode sampai Anda memiliki antarmuka grafis yang kuat dan kit web ini akan membantu Anda memulai di jalur yang benar.
Kit GUI iOS 5
Elemen Vektor UI iPhone
Kit Ikon Aplikasi iPhone
Magnet Wireframe (Kit DIY)
GUI Antarmuka Android
