Krisis Umum dalam Desain Responsif & Cara Mengatasinya

Dengan tidak ada yang diatur dalam dasar yang kokoh dan elemen tata letak yang fleksibel seperti air, itu bahkan tidak 'mendesain' dalam pengertian tradisional. Desain responsif mengikuti (dan mengakomodasi) aliran perangkat di pasar. Semua orang bereksperimen dan menjadi seorang desainer web tidak pernah sehebat ini.

Ada begitu banyak praktik untuk desain responsif sehingga sulit untuk melihat satu set dan menyebutnya yang terbaik. Kami tidak dapat memiliki daftar 'Apa yang Harus Dilakukan'. Namun, kita bisa belajar dari kesalahan satu sama lain.

Jadi, inilah yang saya pelajari mendesain untuk web responsif:

Desain untuk Audiens Anda. Bukan Dirimu.

Misalkan Anda mencoba menjangkau sebagian besar audiens India dengan situs web super cepat, dirancang dengan brilian, dan UX yang bagus untuk pengguna seluler tersebut. Ada 1,2 miliar orang di sana; itu harus menjadi pukulan besar yang instan. Angka-angka itu sendiri menguntungkan Anda. Atau jika Anda tahu bahwa hampir 13% orang di sana memiliki ponsel pintar. (Sumber: Google Mobile Planet).

Ini hanyalah salah satu alasan mengapa mempelajari dan memahami audiens Anda sangat penting.

Keragaman budaya, usia, jenis kelamin, profesi, bahasa, perangkat populer, dll. dapat menjadi faktor yang sangat penting yang akan membuat atau menghancurkan merek/situs web Anda.
Ini lebih mudah daripada kedengarannya.

Desainer diketahui lupa untuk siapa mereka mendesain.

Jadi, jika Anda tidak memiliki arsitek UX, Anda sebaiknya meneliti sendiri. Ini pada akhirnya akan mencerminkan pekerjaan Anda, jadi jangan mengangkat bahu dan mengatakan itu bukan keahlian Anda.

Untuk nomor khusus seluler, gunakan Google's Mobile Planet. Tanyakan klien Anda tentang audiens mereka.

Jika Anda dapat menempatkan diri Anda pada posisi audiens Anda, Anda akan dapat membuat desain yang ramah pengguna secara intuitif. Ini bukan ilmu roket, hanya jiwa dasar manusia.

Sebuah 'bingkai gambar' Membutuhkan Cerita

Proyek desain responsif Anda tidak akan lengkap tanpa interaksi. Hal yang sama berlaku untuk mockup Anda.

Desain Anda (kemungkinan) tidak akan menjadi pertunjukan satu halaman di mana konten muncul dan tidak ada hal lain yang terjadi.

Tidak ada interaksi, tidak ada status, tidak ada animasi atau efek: pada dasarnya segala sesuatu yang dapat membuat situs Anda sukses (atau gagal, jika digunakan tanpa berpikir) dihilangkan. Sementara Style Tiles adalah klasik untuk alasan yang baik (seperti yang dikatakan pendirinya, "Untuk memulai percakapan seputar desain"), terlalu sederhana untuk menjadi canggih dalam istilah desain saat ini.

INVESTASIKAN WAKTU DALAM MENCIPTAKAN PROTOTIPE INTERAKTIF DARI IDE ANDA. BERKOLABORASI PADA MEREKA SECARA EKSTENSIF SEBELUM MEMULAI PENGEMBANGAN FRONT-END.

Jangan hanya membuang ide. Anda pernah mendengar tentang mendongeng?

Ceritakan kisah interaktif dan responsif kepada klien Anda hanya dengan prototipe dan intuisi Anda.

Gunakan alat seperti Balsamiq, Axure, UXPin, dll. untuk membuat versi visual dari 'cerita' tersebut. Usap imajinasi mereka dengan kata-kata; beri makan dengan prototipe yang dibuat dengan baik.
Ini akan berfungsi untuk merampingkan pekerjaan desain dan pengembangan Anda untuk nanti dan memberi Anda jalur yang agak jelas untuk diikuti. Dan sebagai Bonus: Kesan pertama tetap penting. Prototipe yang baik menunjukkan bahwa Anda antusias dengan proyek tersebut.

Konten: Pertama, Terlihat, dan Dapat Diadaptasi. Selalu

Alasan Anda menjadi responsif adalah agar pesan Anda memiliki jangkauan yang lebih luas dengan dapat diakses secara seragam dan perangkat agnostik.

Anda mengalahkan seluruh tujuan desain responsif dengan menyembunyikan konten Anda.

Audiens seluler Anda tetap akan mengunduh data, jadi apa gunanya menyembunyikannya? Buat inventaris elemen konten. Identifikasi elemen mana yang ada di semua halaman, dan mana yang ada di halaman tertentu. Misalnya, tombol CTA Anda dapat berada di setiap halaman, atau halaman tertentu (seperti halaman arahan, halaman sumber daya terkait, dll.).

Anda mulai dengan menempatkan elemen konten terlebih dahulu, dan kemudian membangun dari sana. Lonceng dan peluit berbunyi di akhir.

Pertama: Pahami Sasaran Pengguna dan apa yang mereka inginkan dari situs web, lalu sesuaikan konten Anda untuk akses mudah di seluruh perangkat mereka.

Alih-alih hanya memeras satu juta kata artikel agar sesuai dengan halaman seluler, beri pengguna Anda kesempatan untuk membaca dengan teliti informasi tanpa menggulir tanpa henti. Dan skrip front-end atau sisi server bukanlah jawaban (sebenarnya) untuk itu.

Cara yang baik untuk melakukannya adalah menggunakan ringkasan singkat dan akurat untuk pratinjau .

Biarkan pengguna memutuskan apakah mereka ingin menggulir konten Anda untuk sisanya. TL; DR umum di antara semua orang (bahkan organisasi media, itulah sebabnya kami menerbitkan cerita tanpa pemeriksaan fakta yang sebenarnya dan hanya berdasarkan hype). Jadi tambahkan bagian di akhir konten Anda dan buat lebih mudah.

Kedua: JANGAN berikan informasi lengkap kepada pengguna alih-alih hanya versi yang terfragmentasi.

Gunakan kolom dan tipografi responsif. Gunakan Tabel Responsif Zurb untuk tabel data yang lancar. Kompres media (gunakan CDN dan caching untuk meningkatkan kinerja).
Konten adalah pesan Anda. Pastikan jelas dan terlihat, berapa pun ukuran perangkatnya.

Bonus: Konten-pertama menempatkan Anda dalam pikiran hierarki konten, dan itu membuat mendesain navigasi menjadi proses yang lebih lancar.

Hormati Keterbatasan dan Kemampuan Perangkat

Ketika kita berbicara tentang 'mobile-first' atau 'progressive enhancement', apakah kita benar-benar memahami dan mengakomodasi minimal? Berikut ini ikhtisar tentang apa yang seharusnya menjadi 'minimal':

• Lebar Layar yang Dapat Digunakan: 120 piksel, minimum.
• Dukungan Bahasa Markup: XHTML Basic 1.1 dikirimkan dengan tipe konten application/xhtml + xml.
• Pengodean Karakter: UTF-8
• Dukungan Format Gambar: JPEG, GIF 89a.
• Warna: 256 Warna, minimal.
• Dukungan Style Sheet: CSS Level 1, CSS Level 2 @media rule bersama dengan handheld dan semua jenis media
• HTTP: HTTP/1.0 atau HTTP1.1 yang lebih baru
• Skrip: Tidak ada dukungan untuk skrip sisi klien.

Berdasarkan spesifikasi tersebut, tidaklah sulit untuk membuat desain yang fungsional. Masalahnya adalah meningkatkan.
Ada baiknya mempertimbangkan dimensi perangkat, tetapi itu baru permulaan dan bukan keseluruhannya. Meminimalkan dan menormalkan skrip (kinerja dan pengalaman), mendesain antarmuka yang bersih dengan hati-hati untuk spasi putih yang cukup (untuk mengetuk), menghormati konektivitas dan batasan beban perangkat (kinerja), dan selalu menguji secara ketat adalah penting di sini.

Tolong Ringankan Bebannya

Saya tidak ingin membicarakan hal ini (kami memiliki banyak pendapat tentang hal ini), tetapi tidak dapat disangkal pentingnya kecepatan halaman untuk peringkat yang lebih tinggi dan pengalaman pengguna yang lebih baik.

Sederhananya: Jika halaman Anda lambat dimuat, tidak ada yang akan repot menunggu untuk mengejarnya.

Pendekatan seperti mobile-first sebenarnya bekerja sangat baik untuk ini. Dalam peningkatan progresif, kami memulai dengan minimal segalanya: elemen UI, fitur, dan fakta bahwa kami mendesain untuk bandwidth tersempit dari semua perangkat. Mereka yang masih mencela manfaat dari pendekatan mobile-first akan setuju bahwa ini mengutamakan kinerja dan kecepatan di atas segalanya .

Selain itu, dan Anda tidak perlu diingatkan bahwa, Anda harus menjaga ukuran media tetap terkendali.

Jadi gunakan CDN (layak untuk situs web dengan lalu lintas menengah hingga tinggi) dan teknik pengembangan back-end yang secara khusus meringankan pemuatan halaman. Gunakan cache. Tingkatkan kinerja yang dirasakan (seberapa cepat 'terasa' situs bagi pengguna) dengan mencentang kotak yang relevan sebelum menyimpan gambar JPG untuk web.

Pertahankan desain Anda ramping dan rapi (paling tidak semua klien dan pengguna Anda).

TL; DR

Jadi, inilah yang saya pelajari mendesain untuk satu web responsif:

• Desain untuk audiens. Teliti sedikit dan gunakan Google Mobile Planet (dan alat serupa lainnya) untuk angka.
• Wireframe dapat dihidupkan dengan sebuah cerita. 'Prototipe' berarti versi awal perangkat/sistem. Jadikan itu sesuatu yang benar-benar berfungsi. Gunakan alat prototipe interaktif.
• Buat konten terlihat dan mudah beradaptasi. Jangan sembunyikan konten dari ponsel saat akan diunduh. Jika ada satu posting asli, tambahkan ringkasan singkat yang relevan yang lebih cocok untuk dibaca di ponsel.
• Hormati keterbatasan dan kemampuan perangkat. Mengesampingkan debat mouse/ketuk jari atau mengesampingkan dimensi, desain untuk spesifikasi minimum perangkat yang digunakan oleh audiens yang Anda targetkan.
• Perhatikan kinerja. Bukan hanya untuk peringkat pencarian yang lebih baik, tetapi juga pengalaman.

Bio Penulis: Lucy Barret dikaitkan dengan HireWPGeeks Ltd. Dia menyediakan layanan konversi HTML ke WordPress dan dia memiliki tim pengembang ahli untuk membantunya. Dia juga seorang blogger yang bersemangat dan suka berbagi pengetahuannya dengan komunitas besar WordPress. Ikuti perusahaannya di jaringan media sosial seperti Facebook dan Google+.