Membuat Situs Web Lebar Tetap Ramah Seluler

Terakhir Diperbarui pada 22 Mei 2020

Membangun Mobile Friendly. Ada suatu masa, ketika kekhawatiran terbesar saya sebagai desainer grafis dan pengembang web adalah membuat fungsi CSS saya di Internet Explorer. Tidak hanya IE yang masih merepotkan di bagian belakang, sekarang kita harus khawatir tentang berbagai ukuran layar dan sistem operasi.

Akan ada saatnya ketika ponsel menyalip penjelajahan desktop. Sejak ponsel telah menjadi begitu menonjol dalam kehidupan kita sehari-hari, ada kalanya kita desainer web membutuhkan hasil segera. Jika Anda salah satu dari desainer atau programmer yang tidak punya waktu untuk mengubah situs web statis menjadi tema WordPress, yang mobile friendly, ada harapan untuk Anda sobat. Saat melihat semua konten Anda di perangkat seluler, Anda dapat melakukannya dengan sedikit pengoptimalan CSS dan HTML.

http://www.smartinsights.com/wp-content/uploads/2017/03/Mobile-share-of-online-time-percent-2017.png

Secara global, perangkat seluler menyumbang lebih dari setengah menit yang dihabiskan untuk online, menurut comScore

Situs web yang ramah seluler atau responsif memiliki kemampuan untuk mengonfigurasi lebar situs web Anda secara otomatis, agar sesuai dengan perangkat pemirsa. Bilah gulir horizontal adalah larangan dalam desain responsif. Jika Anda melihat situs web Anda saat ini di perangkat seluler, dan Anda melihat bilah gulir di bagian bawah ponsel atau tablet, kemungkinan situs web Anda (atau elemen situs Anda) tidak ramah seluler. Bilah gulir horizontal ini merusak pengalaman pengguna dan kemungkinan besar akan mengklik tombol kembali. Orang-orang begitu terbiasa menggulir secara vertikal di perangkat mereka, sehingga ketika pengguna mendapati diri mereka harus menggulir secara vertikal maupun horizontal untuk melihat konten, mereka menjadi tidak nyaman dan meninggalkan situs.

Mulai saat ini dan seterusnya, situs web desain memiliki kelas CSS dan ID untuk semuanya, dan maksud saya semuanya.

Dari header dan menu div hingga tag <p> di footer. Anda ingin menyesuaikan ukuran semua hal ini berdasarkan lebar layar. Pemindahan, ukuran, dan penskalaan jauh lebih mudah bila elemen dapat ditargetkan melalui CSS.

Kueri Media CSS lebih mudah digunakan daripada yang Anda pikirkan.

Pertama kali media query menarik perhatian saya, saya pikir itu adalah bagian dari bahasa pemrograman, dan bukan bentuk CSS. Saya diliputi rasa lega, ketika saya mengetahui apa itu sebenarnya, dan saya telah menggunakannya sejak itu di SEMUA proyek web saya.

Kueri Media pada dasarnya adalah aturan CSS. Jika layar Anda selebar ini, maka terapkan CSS ini ke elemen ini saja. Lihatlah di bawah ini.

Jadi kode di atas hanya mengatakan bahwa jika layar pengguna lebarnya antara 100px dan 699px, maka ubah warna latar belakang bodi menjadi biru. Di sinilah pelabelan setiap div dan span di situs Anda menjadi sangat penting. Memanipulasi elemen ini untuk lebar layar yang berbeda menjadi lebih mudah dengan penandaan yang tepat.

Css-tricks.com mencantumkan banyak lebar ponsel untuk kami sebagai referensi cepat.

Contoh Kode CSS

/* ---- HTC One ---- */
/* Potret dan Lanskap */

@media layar

dan (lebar perangkat: 360px)

dan (tinggi perangkat: 640px)

dan (-webkit-device-pixel-ratio: 3) {

/****KODE ANDA DI SINI******/

}

Ada lebih banyak kode kueri media untuk ponsel Galaxy, HTC, dan Apple. Selain itu, lebar untuk lebar tablet Ipad, Galaxy, dan Nexus dicantumkan. Yang harus Anda lakukan adalah memasukkan kode ini ke file CSS situs Anda dan mengisi kurung CSS kosong dengan kode Anda sendiri! Selesai!

Situs Anda responsif, tetapi masih terasa kurang tepat

Anda mungkin mulai memperhatikan bahwa beberapa elemen di situs Anda memakan cukup banyak ruang di perangkat seluler, seperti menu utama Anda. Dalam membuatnya responsif, kemungkinan besar Anda menerapkan "float: none" pada tag <li> di menu Anda. Tapi sekarang menu mengambil sebagian besar real estat di bagian atas situs Anda. Anda harus mengonversi menu utama menjadi menu tarik-turun dengan kueri media jQuery dan CSS. Css-tricks.com juga menjelaskan cara melakukannya.

Anda juga dapat menganggap elemen tertentu sebagai tidak signifikan, yang dapat ditemukan di desktop dan perangkat seluler. . Anda dapat menyingkirkannya menggunakan CSS:

Penyesuaian situs ini cenderung membuat situs web menjadi sangat panjang, memaksa pengguna untuk banyak menggulir. Di sinilah teks jangkar (untuk pengguna yang dapat melihat), atau tautan lewati (untuk pembaca layar) menjadi teman Anda.

Anchor text adalah tautan yang dapat diklik yang memungkinkan pengguna untuk melompat ke bagian tertentu dari halaman web Anda, tanpa harus menggulir. Ini adalah metode praktis untuk situs ramah seluler. Kode di bawah ini adalah contoh tautan teks jangkar.

<a href="#skip">Klik di sini untuk melompat ke Konten Utama</a>

<a id=”skip”></a>Konten utama dimulai di sini

Lewati Tautan terutama digunakan untuk pembaca layar dan memungkinkan pengguna dengan disabilitas untuk melewati atau melewati konten web yang berulang, seperti navigasi menu, dan langsung mendapatkan informasi yang mereka minati.

Jika tautan lewati memiliki aturan CSS "display:none", pembaca layar tautan menjadi "tidak dapat diakses". Jadi, cara mengatasinya adalah dengan memposisikan tautan di luar layar, sehingga pembaca layar tetap dapat mengenali tautan Anda, dan memungkinkan mereka untuk melewati situs seluler Anda yang baru.

Nah, itulah cara cepat dan mudah untuk mengubah website fixed width Anda menjadi mobile friendly. Juga, jangan lupa untuk mengatur semua gambar Anda ke “width: 100%; tinggi: otomatis.” Setiap gambar, div, atau bentang yang memiliki lebar yang ditetapkan dalam piksel, akan dibuat ke bilah gulir horizontal pada perangkat seluler, jadi ingatlah untuk menyetelnya ke persentase, atau lebar yang berbeda untuk berbagai perangkat menggunakan kueri media.

Ini bisa memakan waktu sedikit, tapi percayalah, setelah Anda mempelajarinya, Anda akan menggunakannya selamanya. Anda akan menggunakan metode ini di setiap situs web yang pernah Anda lakukan, karena bahkan tema dan template responsif WordPress atau Joomla terbaru memerlukan sedikit perbaikan agar terlihat seperti yang Anda inginkan. Itu terutama benar, dengan pasar perangkat seluler yang terus berubah.

-Izzak Hale, Desainer Grafis Senior