Pengantar Desain Web Responsif: Elemen Semu, Kueri Media, dan Lainnya

Saat ini, situs web Anda akan dikunjungi oleh berbagai macam perangkat: desktop dengan monitor besar, laptop ukuran sedang, tablet, smartphone, dan banyak lagi.

Untuk mencapai pengalaman pengguna yang optimal sebagai teknisi front-end, situs Anda harus menyesuaikan tata letaknya sebagai respons terhadap beragam perangkat ini (yaitu, pada beragam resolusi dan dimensi layarnya). Proses menanggapi bentuk perangkat pengguna disebut sebagai (Anda dapat menebaknya) desain web responsif (RWD).

Mengapa perlu waktu Anda untuk mempelajari contoh desain web responsif dan mengalihkan fokus Anda ke RWD? Beberapa desainer web, misalnya, malah menjadikannya pekerjaan hidup mereka untuk memastikan pengalaman pengguna yang stabil di semua browser, sering kali menghabiskan waktu berhari-hari untuk mengatasi masalah kecil dengan Internet Explorer.

Ini adalah pendekatan yang bodoh.

Mashable menyebut 2013 tahun desain web responsif. Mengapa? Lebih dari 30% lalu lintas mereka berasal dari perangkat seluler. Mereka memproyeksikan jumlah ini bisa mencapai 50% pada akhir tahun. Di seluruh web secara umum, 17,4% lalu lintas web berasal dari ponsel cerdas pada tahun 2013. Pada saat yang sama, penggunaan Internet Explorer, misalnya, hanya menyumbang 12% dari semua lalu lintas browser , turun sekitar 4% dari waktu ini tahun lalu (menurut ke W3Schools). Jika Anda mengoptimalkan browser tertentu, daripada populasi ponsel cerdas global, Anda kehilangan hutan untuk pepohonan. Dan dalam beberapa kasus, ini bisa berarti perbedaan antara keberhasilan dan kegagalan—desain responsif memiliki implikasi untuk rasio konversi, SEO, rasio pentalan, dan banyak lagi.

Pendekatan Desain Web Responsif

Apa yang biasanya disamarkan tentang RWD adalah bahwa ini bukan hanya tentang menyesuaikan tampilan halaman web Anda; alih-alih, fokusnya harus pada mengadaptasi situs Anda secara logis untuk penggunaan di berbagai perangkat. Misalnya: menggunakan mouse tidak memberikan pengalaman pengguna yang sama seperti, katakanlah, layar sentuh. Apakah Anda tidak setuju? Tata letak seluler vs. desktop Anda yang responsif harus mencerminkan perbedaan ini.

Pada saat yang sama, Anda tidak ingin sepenuhnya menulis ulang situs Anda untuk masing-masing dari puluhan ukuran layar yang berbeda yang mungkin digunakan untuk melihatnya—pendekatan seperti itu tidak mungkin dilakukan. Sebagai gantinya, solusinya adalah menerapkan elemen desain responsif fleksibel yang menggunakan kode HTML yang sama untuk menyesuaikan dengan ukuran layar pengguna.

Dari sudut pandang teknis, solusinya terletak pada tutorial desain responsif ini: menggunakan kueri media CSS, elemen semu, tata letak kisi set yang fleksibel, dan alat lain untuk menyesuaikan secara dinamis dengan resolusi yang diberikan.

Kueri Media dalam Desain Responsif

Jenis media pertama kali muncul di HTML4 dan CSS2.1, yang memungkinkan penempatan CSS terpisah untuk layar dan cetak. Dengan cara ini, dimungkinkan untuk mengatur gaya terpisah untuk tampilan komputer halaman vis-a-vis cetakannya.

 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

atau

 @media screen { * { background: silver } }

Di CSS3, Anda dapat menentukan gaya tergantung pada lebar halaman. Karena lebar halaman berkorelasi dengan ukuran perangkat pengguna, kemampuan ini memungkinkan Anda untuk menentukan tata letak yang berbeda untuk perangkat yang berbeda. Catatan: kueri media didukung oleh semua browser utama.

Definisi ini dimungkinkan melalui pengaturan properti dasar: max-width , device-width , orientation , dan color . Definisi lain juga mungkin; namun dalam hal ini, hal yang paling penting untuk diperhatikan adalah resolusi minimum (lebar) dan pengaturan orientasi (lanskap vs. potret).

Contoh CSS responsif di bawah ini menunjukkan prosedur untuk memulai file CSS tertentu sehubungan dengan lebar halaman. Misalnya, jika 480px adalah resolusi maksimum layar perangkat saat ini, maka gaya yang ditentukan dalam main_1.css akan diterapkan.

 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

Kita juga dapat mendefinisikan gaya yang berbeda dalam lembar gaya CSS yang sama sehingga hanya digunakan jika batasan tertentu terpenuhi. Misalnya, bagian CSS responsif ini hanya akan digunakan jika perangkat saat ini memiliki lebar di atas 480 piksel:

 @media screen and (min-width: 480px) { div { float: left; background: red; } ....... }

“Zoom Cerdas”

Peramban seluler menggunakan apa yang disebut "zoom pintar" untuk memberikan pengalaman membaca yang 'superior' kepada pengguna. Pada dasarnya, zoom pintar digunakan untuk mengurangi ukuran halaman secara proporsional. Ini dapat terwujud dalam dua cara: (1) zoom yang dimulai oleh pengguna (misalnya, mengetuk dua kali pada layar iPhone untuk memperbesar situs web saat ini), dan (2) awalnya menampilkan versi halaman web yang diperbesar pada memuat.

Mengingat bahwa kami hanya dapat menggunakan kueri media responsif untuk memecahkan masalah apa pun yang mungkin menjadi sasaran zoom cerdas, seringkali diinginkan (atau bahkan perlu) untuk menonaktifkan zoom dan memastikan bahwa konten halaman Anda selalu memenuhi browser:

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Dengan menyetel initial-scale ke 1, kami mengontrol tingkat zoom halaman awal (yaitu, jumlah zoom saat halaman dimuat). Jika Anda telah mendesain halaman web Anda agar responsif, maka tata letak dinamis dan lancar Anda akan memenuhi layar ponsel cerdas dengan cara yang cerdas tanpa memerlukan zoom awal apa pun.

Selain itu, kami dapat menonaktifkan zoom sepenuhnya dengan user-scalable=false .

Lebar Halaman

Katakanlah Anda ingin menyediakan tiga tata letak halaman responsif yang berbeda: satu untuk desktop, satu untuk tablet (atau laptop), dan satu untuk ponsel cerdas. Dimensi halaman mana yang harus Anda targetkan sebagai batas (misalnya, 480 piksel)?

Sayangnya, tidak ada standar yang ditetapkan untuk lebar halaman yang akan ditargetkan, tetapi contoh nilai responsif berikut sering digunakan:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1024px
• 1200px

Namun, ada sejumlah definisi lebar yang berbeda. Misalnya, 320 dan Lebih Tinggi memiliki lima peningkatan Kueri Media CSS3 default: 480, 600, 768, 992, dan 1382 piksel. Seiring dengan contoh yang diberikan dalam tutorial pengembangan web responsif ini, saya dapat menghitung setidaknya sepuluh pendekatan lainnya.

Dengan set peningkatan yang wajar ini, Anda dapat menargetkan sebagian besar perangkat. Dalam praktiknya, biasanya tidak perlu menangani semua contoh lebar halaman yang disebutkan di atas secara terpisah—tujuh resolusi berbeda mungkin berlebihan. Dalam pengalaman saya, 320px, 768px, dan 1200px adalah yang paling umum digunakan; ketiga nilai ini harus cukup untuk masing-masing menargetkan ponsel pintar, tablet/laptop, dan desktop.

Psuedo-Elemen

Membangun di atas kueri media responsif Anda dari contoh sebelumnya, Anda mungkin juga ingin menampilkan atau menyembunyikan informasi tertentu secara terprogram berdasarkan ukuran perangkat pengguna. Untungnya, ini juga dapat dicapai dengan CSS murni seperti yang dijelaskan dalam tutorial di bawah ini.

Sebagai permulaan, menyembunyikan beberapa elemen ( display: none; ) bisa menjadi solusi yang bagus untuk mengurangi jumlah elemen di layar untuk tata letak ponsel cerdas, di mana hampir selalu ada ruang yang tidak mencukupi.

Namun di luar itu, Anda juga bisa berkreasi dengan pseudo-element (pemilih) CSS, misalnya :before dan :after . Catatan: sekali lagi, elemen semu didukung oleh semua browser utama.

Elemen semu digunakan untuk menerapkan gaya tertentu ke bagian tertentu dari elemen HTML, atau untuk memilih subset elemen tertentu. Misalnya, elemen semu :first-line memungkinkan Anda mendefinisikan gaya hanya pada baris pertama pemilih tertentu (misalnya, p:first-line akan diterapkan ke baris pertama dari semua p s). Demikian pula, elemen semu a:visited akan memungkinkan Anda menentukan gaya pada semua a s dengan tautan yang sebelumnya dikunjungi oleh pengguna. Jelas, ini bisa berguna.

Berikut adalah contoh desain responsif sederhana di mana kami membuat tiga tata letak berbeda untuk tombol masuk, masing-masing untuk desktop, tablet, dan ponsel cerdas. Di smartphone, kita akan memiliki ikon tunggal, sedangkan tablet akan memiliki ikon yang sama disertai dengan "Nama pengguna". Terakhir, untuk desktop, kami juga akan menambahkan pesan instruksional singkat (“Masukkan nama pengguna Anda”).

 .username:after { content:"Insert your user name"; } @media screen and (max-width: 1024px) { .username:before { content:"User name"; } } @media screen and (max-width: 480px) { .username:before { content:""; } }

Dengan hanya menggunakan elemen pseudo :before dan :after , kita mencapai hal berikut:

Untuk informasi lebih lanjut tentang keajaiban elemen psuedo, Chris Coyier memiliki artikel yang bagus tentang Trik-CSS.

Jadi, Di Mana Saya Harus Mulai?

Dalam tutorial ini, kami telah menetapkan beberapa blok bangunan untuk desain web responsif (yaitu, kueri media dan elemen semu) dan memberikan beberapa contoh masing-masing. Ke mana kita pergi dari sini?

Langkah pertama yang harus Anda ambil adalah mengatur semua elemen halaman web Anda ke dalam berbagai ukuran layar.

Lihatlah versi desktop dari tata letak yang disajikan di atas. Dalam hal ini, konten di sebelah kiri (persegi panjang hijau) dapat berfungsi sebagai semacam menu utama. Namun saat perangkat dengan resolusi lebih rendah sedang digunakan (misalnya, tablet atau ponsel cerdas), mungkin masuk akal jika menu utama ini ditampilkan dengan lebar penuh. Dengan kueri media, Anda dapat menerapkan perilaku ini sebagai berikut:

 @media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

Sayangnya, pendekatan dasar ini seringkali tidak cukup karena front-end Anda semakin rumit. Karena organisasi konten situs sering kali berbeda secara signifikan antara versi seluler dan desktop, pengalaman pengguna pada akhirnya bergantung pada penggunaan tidak hanya CSS responsif, tetapi juga HTML dan JavaScript.

Saat menentukan tata letak responsif untuk perangkat yang berbeda, beberapa elemen kunci penting. Tidak seperti versi desktop yang memiliki cukup ruang untuk konten, pengembangan ponsel cerdas lebih menuntut. Lebih dari sebelumnya, penting untuk mengelompokkan konten tertentu dan secara hierarkis mendefinisikan pentingnya bagian-bagian individual.

Berbagai penggunaan konten Anda juga penting. Misalnya, ketika pengguna Anda memiliki mouse, mereka dapat mengatur kursor di atas elemen tertentu untuk mendapatkan informasi lebih lanjut, sehingga Anda (sebagai pengembang web) dapat membiarkan beberapa informasi dikumpulkan dengan cara ini—tetapi ini bukan kasus ketika pengguna Anda menggunakan smartphone.

Selain itu, jika Anda meninggalkan tombol di situs Anda yang kemudian ditampilkan di ponsel cerdas lebih kecil dari jari biasa, Anda akan menciptakan ketidakpastian dalam penggunaan dan perasaan situs Anda. Perhatikan bahwa pada gambar di atas, tampilan web standar (di sebelah kiri) membuat beberapa elemen sama sekali tidak dapat digunakan bila dilihat pada perangkat yang lebih kecil.

Perilaku seperti itu juga akan meningkatkan kemungkinan pengguna Anda membuat kesalahan, memperlambat pengalaman mereka. Dalam praktiknya, ini dapat memanifestasikan dirinya sebagai penurunan tampilan halaman, lebih sedikit penjualan, dan lebih sedikit keterlibatan secara keseluruhan.

Elemen Desain Responsif Lainnya

Saat menggunakan kueri media, seseorang harus mengingat perilaku semua elemen halaman, bukan hanya elemen yang menjadi target, terutama saat menggunakan kisi-kisi cair, dalam hal ini (berlawanan dengan dimensi tetap) halaman akan terisi penuh pada waktu tertentu. momen, menambah dan mengurangi ukuran konten secara proporsional. Karena lebar diatur dalam persentase, elemen grafis (yaitu, gambar) bisa terdistorsi dan hancur di bawah tata letak yang cair. Untuk gambar, salah satu solusinya adalah sebagai berikut:

 img { max-width: 100% }

Elemen lain harus ditangani dengan cara yang sama. Misalnya, solusi hebat untuk ikon di RWD adalah menggunakan IconFonts.

Beberapa Kata tentang Sistem Grid Fluida

Ketika kita membahas proses adaptasi desain penuh, kita sering melihat pengalaman menonton yang optimal (dari sudut pandang pengguna). Diskusi semacam itu harus mencakup penggunaan yang difasilitasi secara maksimal, kepentingan elemen (berdasarkan wilayah halaman yang terlihat), pembacaan yang difasilitasi, dan navigasi yang intuitif. Di antara kategori ini, salah satu komponen terpenting adalah penyesuaian lebar konten . Misalnya, yang disebut sistem grid fluida telah menetapkan elemen, yaitu elemen berdasarkan lebar relatif sebagai persentase dari keseluruhan halaman. Dengan cara ini, semua elemen dalam sistem desain web responsif secara otomatis menyesuaikan dengan ukuran halaman.

Meskipun sistem grid fluida ini terkait erat dengan apa yang telah kita diskusikan di sini, mereka benar-benar merupakan entitas terpisah yang memerlukan tutorial tambahan untuk dibahas secara rinci. Oleh karena itu, saya hanya akan menyebutkan beberapa framework utama yang mendukung perilaku tersebut: Bootstrap, Unsemantic, dan Brackets.

Kesimpulan

Sampai baru-baru ini, pengoptimalan situs web adalah istilah yang secara eksklusif dicadangkan untuk penyesuaian fungsionalitas berdasarkan browser web yang berbeda. Di samping perjuangan yang tak terhindarkan dengan standar browser yang berbeda yang kita hadapi saat ini, istilah ini sekarang mengasumsikan beradaptasi dengan perangkat dan ukuran layar dengan desain web yang responsif juga. Untuk memotongnya di web modern, situs Anda harus tahu tidak hanya siapa yang melihatnya, tetapi juga bagaimana .