Sedikit tips tentang cara membuat website Anda mobile-friendly dengan mudah.
Salah satu pekerjaan freelance pertama adalah membuat situs web yang sudah ada menjadi lebih mobile-friendly. Saya tidak akan berbohong, membuat situs web ramah pada dasarnya bermain-main dengan CSS dan breakpoint. Ini tidak mudah, dan terkadang saya ingin membuang komputer keluar jendela.
Bagaimana cara mengaudit respons seluler Anda?
Hal pertama yang perlu dipertimbangkan ketika Anda meningkatkan respons situs web Anda adalah mengetahui apa yang perlu Anda lakukan. Untuk itu, Anda dapat menggunakan tes seluler yang dikembangkan oleh google.
Saya telah menjelajahi beberapa situs web yang saya tahu tidak responsif. Ini akan memberi Anda beberapa komentar menarik seperti:
- Elemen yang dapat diklik terlalu berdekatan
- Teks terlalu kecil untuk dibaca
Dan daftarnya terus berlanjut. Meskipun Google melihat situs web Anda responsif, bukan berarti situs tersebut responsif dengan cara yang ramah pengguna. Saya telah melihat situs web buruk di ponsel yang lolos pemeriksaan Google. Untuk memeriksanya, Anda tidak punya pilihan selain membuka situs web Anda dengan ukuran perangkat yang berbeda.
Jika Anda bukan seorang pengembang, Anda tetap harus memeriksa tampilan halaman Anda di perangkat seluler. Untuk melakukannya, Anda dapat menggunakan alat ini. Saya pernah bekerja dengan seorang pengusaha yang tidak mengerti mengapa dia kehilangan pelanggan. Matikan salah satu halamannya yang sangat tidak responsif sehingga pop up tidak dapat ditutup. Pelanggan terjebak di halaman ini. Halaman yang mana? yang pertama!
Jika Anda seorang pengembang dan memiliki banyak halaman untuk diperiksa, Anda dapat menggunakan Sizzy untuk memeriksa semuanya sekaligus! Muncul dengan beberapa perangkat yang sudah disiapkan, tetapi Anda dapat menambahkan sebanyak yang Anda inginkan. Dua hal yang saya suka tentang Sizzy adalah:
- Anda dapat memindahkan seluruh layar secara bersamaan
- Anda dapat mengambil tangkapan layar semuanya dengan satu klik.
Cobalah, perangkat lunaknya berbicara sendiri.
Saya tidak membatasi Sizzy pada Audit responsif, saya juga menggunakannya sebagai alat pengembangan saat saya membuat kode. Sekarang setelah Anda mengetahui di mana masalah aplikasi Anda, mari kita gali lebih dalam.
Bagaimana Anda dapat meningkatkan daya tanggap seluler Anda?
Mulai dari umum ke detail
Untuk membuat situs web Anda responsif, Anda harus menggunakan kueri media dan mengandalkan breakpoint.
Breakpoint CSS adalah titik di mana konten situs web merespons sesuai dengan lebar perangkat, memungkinkan Anda menampilkan tata letak terbaik kepada pengguna. ("sumber")
Ada banyak cara untuk menggunakan breakpoint dan begitu banyak breakpoint yang dapat Anda buat. Itu tidak sempurna, tapi inilah tabel kueri media saya:
Kemudian Anda hanya perlu mengimpor 'perangkat' ke file apa pun, dan Anda dapat menggunakan aturan bea cukai.
Saat meningkatkan daya tanggap Anda, Anda akan menggunakan banyak CSS. CSS berarti Cascading Styles Sheets, jadi Anda harus bekerja dengan logika yang sama. Mulai dari hal yang lebih umum hingga hal yang paling khusus. Titik awal yang baik adalah tata letak Anda. Semua halaman Anda harus diringkas menjadi tata letak. Setelah tata letaknya responsif, hidup Anda akan menjadi lebih mudah. Kemudian, Anda harus mencoba membuat semua komponen yang ada di lebih dari satu halaman menjadi responsif. Misalnya, header atau footer Anda.
Keuntungan cepat lainnya mungkin adalah font Anda. Ukuran font Anda harus disetel secara global di seluruh aplikasi Anda untuk memastikan semua paragraf Anda memiliki ukuran yang sama. Jika itu masalahnya, menyesuaikannya dengan ukuran layar adalah solusi yang cepat. Hal yang baik untuk diingat adalah font tubuh Anda tidak boleh lebih kecil dari 16px, jika tidak maka akan terlalu kecil.
Beralih dari besar ke kecil. Saat membuat situs web responsif, saya selalu meningkatkannya. Artinya, saya mulai dengan perangkat kecil, dan setelah selesai semuanya. Saya memeriksa tampilannya di layar yang sedikit lebih besar. Terkadang, ini dapat menghemat waktu dan masalah Anda.
Sekarang, 80% pekerjaan harus selesai. Namun seperti prinsip Pareto, 20% sisanya akan menghabiskan 80% waktu Anda. Detail kecil seperti salah satu komponen tersebut akan kurang cocok dengan komponen lainnya. Atau ruang putih kecil itu. Baiklah, bertahanlah!
Bagian tersulit bagi saya adalah iPhone 5 dan SE. Mereka lebih kecil dari semua ponsel lainnya (320*568pts). Dengan keduanya, mereka masih memiliki banyak pangsa pasar iPhone. Jadi, saya selalu harus membuat CSS khusus untuk ukuran itu.
Jika Anda mempunyai kesempatan untuk melakukannya, periksa situs web Anda di perangkat sebenarnya. Ya, saya masih memiliki iPhone 5 lama hanya untuk tujuan ini. Perasaan di layar dan perangkat Anda mungkin berbeda. Anda mungkin menemukan detail kecil yang belum pernah Anda lihat di layar. Misalnya, tombol yang tidak cukup besar untuk diklik.
Bagaimana dengan sedikit desain adaptif?
Sekarang, situs web Anda akan terlihat cukup bagus di perangkat seluler atau tablet. Namun apakah itu berarti mobile-friendly? Tidak terlalu. Saya kira satu hal yang perlu dipahami adalah berapa banyak informasi yang harus ada di setiap versi? Studi Nielsen Norman Group menunjukkan bahwa “lebih sulit memahami informasi” ketika membaca dari layar ponsel. Jadi ya betul, tidak semua data yang ada di versi komputer Anda harus ada di versi seluler Anda.
Jadi, untuk langkah terakhir itu, coba lihat apa yang terlalu berlebihan di website Anda? Bagaimana Anda bisa membuatnya lebih sederhana? Menetapkan sasaran untuk setiap halaman harus disertakan dan dikecualikan dari halaman tersebut. Itu lebih merupakan desain adaptif daripada desain responsif. Tapi, sedikit pembersihan tidak akan merugikan siapa pun.
