👩🏻‍⚖️ 👉🏿 🕴🏾 Desain web responsif dan responsif tinggi browser 👨‍🏭 🐊 ⌛️

Saya tahu bahwa banyak yang akan mempertanyakan mengapa artikel ini memiliki judul yang tidak biasa. Apa hubungan antara "desain web responsif" dan "tinggi jendela browser"? Mungkin judul ini tampak tidak biasa karena fakta bahwa "desain responsif" secara umum dipahami sebagai mendesain laman agar sesuai dengan lebar area pandang sehingga terlihat bagus pada perangkat yang berbeda. Situs web selalu menguji dengan mengecilkan lebar browser dan mengamati apa yang terjadi. Tapi saya hampir tidak pernah menemukan beberapa pedoman untuk menguji sebuah proyek, yang mengatakan bahwa halaman diperiksa dengan mengurangi ketinggian jendela browser. Mungkin Anda pernah berpikir: "Haruskah saya memeriksa halaman di jendela browser dengan ketinggian yang berbeda?" Saya percaya ini harus dilakukan, dan saya akan meyakinkan semua orang tentang ini,siapa yang akan membaca artikel ini.

Saat bekerja di situs web, sangat tidak benar membuat asumsi tertentu tanpa mengandalkan data nyata. Oleh karena itu, sangat penting untuk mengambil tanggung jawab untuk memeriksa situs di jendela browser dengan lebar dan tinggi yang berbeda.

Mengapa memeriksa halaman di jendela browser dengan ketinggian yang berbeda?

Pertanyaan bagus. Sebelum beralih ke contoh dan skenario untuk menggunakan pemeriksaan semacam itu, saya ingin berbicara tentang masalah yang terjadi dengan situs yang tidak disesuaikan untuk bekerja dalam sudut pandang ketinggian yang berbeda. Ini akan membantu Anda lebih memahami apa yang terjadi selanjutnya.

Membuat asumsi yang salah tentang bagaimana sebuah situs web akan digunakan adalah salah satu faktor terpenting yang berdampak negatif pada pekerjaan perancang web. Misalnya, mengharapkan situs digunakan dengan memperluas browser ke layar penuh adalah tindakan yang salah. Sebaliknya, Anda harus mengandalkan yang terburuk.

Asumsi dan Realitas Di

atas adalah ilustrasi dari perkataan saya. Pada kenyataannya, tidak semua pengguna bekerja dengan browser seperti yang disarankan oleh desainer. Saya sendiri pernah menemukan situs yang terlihat buruk di jendela browser dengan ketinggian yang diperkecil.

Alat pengembang browser

Mengubah ukuran browser secara vertikal bukanlah satu-satunya cara untuk memengaruhi ketinggian viewport. Jadi, misalnya, saat bilah alat pengembang dibuka, itu juga mengambil beberapa ruang vertikal.

Bilah alat pengembang mengambil bagian dari jendela browser.

Membuka alat pengembang dapat merusak desain situs Anda atau menjelaskan masalah yang tidak diharapkan oleh siapa pun. Area gambar yang disorot mewakili ketinggian viewport saat ini. Membuka alat pengembang sambil melihat situs di layar laptop kecil akan menghasilkan hanya sebagian kecil dari halaman yang terlihat.

Mari pikirkan tentang satu pertanyaan penting: "Apakah mungkin meningkatkan pengalaman pengguna situs sambil melihatnya di jendela browser kecil?" Saya bisa memberikan jawaban positif untuk pertanyaan ini. Saya kira teorinya sudah cukup bagi kita. Mari pelajari pendekatan "vertikal" untuk menata halaman.

CSS "Vertikal"

Beberapa perancang dan pengembang fokus pada tampilan halaman, yang diterima di jendela dengan lebar berbeda. Pada saat yang sama, mereka membayangi studi tentang perilaku halaman di jendela dengan ketinggian yang berbeda. Dan ini sangat penting. Misalnya, seseorang sedang mengerjakan desain halaman dan telah diberi petunjuk tentang bagaimana sebuah komponen harus terlihat di jendela browser dengan lebar berbeda. Bagaimana dengan jendela dengan ketinggian berbeda?

Pada ponsel besar, elemen navigasi mengisi ruang vertikal yang tersedia. Pada ponsel medium, ukuran font dan spasi dikurangi. Pada ponsel kecil, tidak ada cukup ruang vertikal untuk menampilkan semua elemen. Oleh karena itu, ditempatkan dalam 2 kolom.

Gambar ini menunjukkan menu navigasi yang tampilannya menyesuaikan dengan ketinggian viewport. Tujuan desainer adalah agar menu mengisi semua ruang yang tersedia baginya. Pada layar yang lebih kecil, ukuran font dan jarak antar item menu berkurang. Jika layar ponsel sangat kecil (misalnya, seperti iPhone 5), item ditampilkan dalam dua kolom. Skenario penggunaan situs ini sering diabaikan. Akibatnya, situs tidak beradaptasi sama sekali untuk bekerja pada layar dengan ketinggian berbeda, atau mereka hanya mengoptimalkannya saat beberapa pengunjung situs melaporkan masalah.

CSS dapat membantu kami dalam menyesuaikan situs untuk ketinggian viewport yang berbeda. Yaitu, kita berbicara tentang dua teknik utama:

Kueri media berdasarkan ketinggian viewport.
Satuan ukuran yang terkait dengan viewport.

Kueri media yang memperhitungkan ketinggian viewport

Seperti yang mungkin sudah Anda ketahui, Anda dapat menggunakan kueri media di CSS yang memperhitungkan lebar viewport:

@media (min-width: 700px) {
  .element {
    /* do something.. */
  }
}

Namun kueri media yang memperhitungkan ketinggian jendela browser jauh lebih jarang:

@media (min-height: 500px) {
  .element {
    /* do something.. */
  }
}

/*  */

@media (orientation: landscape) {
  .element {
    /* do something.. */
  }
}

Satuan pengukuran yang terkait dengan viewport

Menggunakan satuan ukuran yang terkait dengan ukuran viewport dapat membantu meningkatkan pengalaman pengguna di situs. Misalnya, dengan mempertimbangkan ketinggian area pandang, Anda dapat menyesuaikan jarak vertikal antar elemen.

.hero__title {
  margin-bottom: calc(10px + 5vh);
}

Semakin tinggi jendela browser, semakin besar jarak antar elemen.

Semua ini mungkin tampak seperti hal kecil yang menyenangkan yang tidak benar-benar memengaruhi apa pun, tetapi hanya sampai Anda melihat halaman serupa di monitor besar - seperti layar iMac 27 inci. Kemudian ternyata ketinggian viewport terlalu tinggi. Tapi untungnya kami memiliki cara untuk membatasi ukurannyamargin-bottom. Ini dapat dilakukan, misalnya, dengan cara berikut:

Menggunakan kueri media.
Menggunakan fungsi perbandingan CSS.

Metode pertama (media query) tentunya memiliki dukungan browser yang lebih baik. Intinya adalah membatasi nilai maksimum margin-bottomjika halaman ditampilkan di layar yang sangat besar.

@media (min-width: 2200px) {
  .hero__title {
    margin-bottom: 40px;
  }
}

Cara kedua adalah menggunakan fungsi CSS clamp(). Saat memilih nilai yang diteruskan ke fungsi ini, kami, dalam hal ini, menyetel ukuran indentasi minimum, sama dengan 10px, maksimum - 50px, dan nilai di antara keduanya bergantung pada ukuran jendela browser.

.hero__title {
  margin-bottom: clamp(10px, 5vh, 40px);
}

Jika Anda tertarik dengan topik ini, lihat artikel saya tentang unit pengukuran tergantung pada ukuran viewport halaman dan fungsi CSS .

Di bawah ini kita akan membahas tentang berbagai cara menggunakan kueri media "vertikal".

Contoh dan skenario

▍ Elemen halaman yang tumpang tindih saat mengubah ketinggian jendela browser

Contoh ini memperlihatkan halaman yang memiliki judul dan ilustrasi di bagian atas. Tinggi bagian halaman ini 100vhsama dengan 100% tinggi viewport.

Bagian atas halaman adalah 100vh.

Semua ini terlihat sangat bagus, tetapi hanya sampai ketinggian jendela browser berkurang. Bagian atas halaman tidak cukup tinggi untuk menampung ilustrasi dan teks. Akibatnya, elemen di bagian atas halaman akan tumpang tindih dengan konten di bagian lain halaman.

Penurunan tinggi jendela browser merusak desain.

Perhatikan bagaimana gambar tumpang tindih dengan bagian halaman di bawah bagian atas halaman. Ini karena mereka tidak memiliki cukup ruang. Mari kita lihat kode untuk contoh ini.

Inilah markupnya:

<div class="hero">
  <div class="hero__wrapper">
    <div class="hero__content"><!-- content --></div>
    <img class="hero__thumb" src="figure.png" alt="" />
  </div>
</div>

Berikut gayanya:

.hero {
  height: 100vh;
}

.hero__thumb {
  flex: 0 0 550px;
  width: 550px;
}

Mari pertimbangkan beberapa opsi untuk memecahkan masalah tersebut:

Anda bisa memberi gambar dimensi tetap (properti widthdan height), bukan hanya lebarnya ( width). Kurangnya properti heightadalah salah satu alasan masalah kami.
Anda dapat menerapkan properti ke bagian atas halaman height: 100vhhanya jika ketinggian viewport lebih besar 700px(tentu saja, nilai spesifik yang digunakan dalam kueri media akan bergantung pada setiap situasi).

Anda dapat menggabungkan kedua pendekatan ini dan mendapatkan solusi yang lebih andal untuk masalah tersebut:

.hero__thumb {
  width: 400px;
  height: 300px;
  object-fit: contain; /*     */
}

@media (min-height: 700px) {
  .hero {
    height: 100vh;
  }
}

Jadi kami memutuskan bahwa kueri media "vertikal" adalah mekanisme yang stabil dan berguna. Tetapi menggunakan nilai 100vhadalah bisnis yang berisiko, karena meskipun Anda dapat membatasi ukuran gambar, mungkin saja ukuran teks tidak dapat dibatasi. Misalnya, jika teks di bagian atas halaman ternyata lebih panjang, maka kita akan menghadapi varian baru dari masalah yang sudah kita kenal.

Teks tumpang tindih dengan bagian situs yang seharusnya tidak berada.

Untuk memperbaiki masalah ini, Anda dapatheightmenggunakan propertialih-alihpropertimin-height. Dengan pendekatan ini, jika isi suatu bagian lebih besar dari yang dapat ditampungnya, ukurannya akan bertambah dan isinya tidak akan menutupi bagian berikutnya.

@media (min-height: 700px) {
  .hero {
    min-height: 100vh;
  }
}

▍Tajuk halaman tetap

Tidak ada yang salah dengan judul halaman tetap berada di satu tempat saat di-scroll. Namun Anda perlu memastikan bahwa judul ini memiliki posisi tetap hanya jika ada cukup ruang vertikal di layar.

Judul halaman tetap

Ini menunjukkan situs yang sedang dilihat dalam mode lanskap. Perhatikan bahwa tajuk memakan terlalu banyak ruang vertikal. Apakah penting bagi pengguna? Dalam banyak kasus, tidak. Tapi Anda bisa meningkatkan pengalaman pengguna dalam bekerja dengan situs dengan menggunakan kueri media berikut:

@media (min-height: 700px) {
  .site-header {
    /* position: fixed  position: sticky */
  }
}

Dengan pendekatan ini dalam mode lanskap, judul tidak akan diperbaiki.

▍Menyembunyikan item yang kurang penting dari yang lain

Saya melihat ini di menu navigasi Twitter. Yakni, kita berbicara tentang kombinasi kueri media "vertikal" dan pola Prioritas + .

Item yang dipilih akan disembunyikan jika kehabisan ruang.

Saat ketinggian viewport berubah, item yang kurang penting (item menuBookmarksdanLists) menjadi sub-itemMore. Ini adalah contoh yang baik dari penggunaan kueri media "vertikal".

.nav__item--secondary {
  display: none;
}

@media (min-height: 700px) {
  .nav__item--secondary {
    display: block;
  }
}

Dan inilah tweet saya yang menganalisis penerapan pendekatan ini di Twitter.

▍Navigasi dan mengubah ketinggian viewport

Contoh selanjutnya terkait dengan yang sebelumnya. Ada bar navigasi vertikal (sidebar, sidebar). Jika ketinggian area pandang rendah, Anda dapat sedikit mengurangi jarak vertikal antara elemen navigasi, yang akan sedikit meningkatkan tampilan halaman.

Jarak antara elemen dan tinggi viewport

Berikut adalah gaya untuk contoh ini:

.nav__item {
  padding-top: 4px;
  padding-bottom: 4px;
}

@media (min-height: 700px) {
  .nav__item {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

Dan di sini Anda dapat menonton video untuk itu.

Selain itu, dapat dicatat bahwa dalam situasi seperti itu, ukuran font juga dapat diubah, yang, ketika ketinggian jendela browser dikurangi, akan memberi lebih banyak ruang untuk elemen.

▍ Bagian atas halaman dan tinggi viewport

Bagian atas halaman membutuhkan ruang vertikal kosong untuk memberinya "udara". Dimensi ruang ini mungkin tergantung pada ketinggian viewport.

Semakin tinggi halaman, semakin banyak "udara".

Beginilah gaya untuk contoh ini terlihat:

.hero {
  padding-top: 24px;
  padding-bottom: 24px;
}

@media (min-height: 700px) {
  .hero {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

▍Komponen modal

Seperti yang mungkin sudah Anda ketahui, komponen modal diharapkan setidaknya berada di tengah secara horizontal. Tetapi Anda mungkin perlu menyelaraskan elemen seperti itu secara vertikal. Ini mungkin, tetapi menghalangi perubahan jumlah keluaran data oleh elemen-elemen tersebut.

Jika modal berisi jumlah data yang benar, maka itu terlihat sangat bagus seperti yang ditunjukkan di bawah ini.

Modal yang benar

Berikut adalah gaya untuk elemen ini:

.modal__body {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
}

Tetapi jika lebih banyak teks perlu ditampilkan dalam elemen yang sama, semuanya tidak akan begitu baik. Yakni, elemen akan mengisi layar secara vertikal dan pengguna tidak akan dapat menelusuri kontennya.

Elemen Modal Terlalu Tinggi

Masalah ini terjadi karena alasan berikut:

Tinggi modal tidak ditentukan.
Elemen tersebut berada di tengah secara vertikal (ini akan mempercepat masalah).

Berikut adalah CSS yang menangani masalah ini:

.modal__body {
  position: absolute;
  left: 50%;
  top: 3rem;
  transform: translateX(-50%);
  width: 500px;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}

@media (min-height: 700px) {
  .modal__body {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

Perhatikan bahwa properti min-heightdan digunakan di sini min-width. Yang pertama adalah agar elemen terlihat bagus meskipun menampilkan teks pendek. Dan yang kedua memungkinkan Anda membatasi tingginya ke nilai tertentu alih-alih memberinya ketinggian yang konstan.

Elemen modal cocok untuk menampilkan teks panjang

Hasil

Saat merancang situs web dengan mempertimbangkan pengalaman yang akan didapat pengguna dari bekerja dengan mereka, yang terbaik adalah membangun desain mereka berdasarkan lebar dan tinggi jendela browser. Mungkin tampak aneh bagi seseorang yang menguji laman di jendela dengan ketinggian berbeda, tetapi pengujian semacam itu membenarkan dirinya sendiri. Di sini saya berbicara tentang pentingnya pendekatan "vertikal" untuk desain situs, cara mendesain halaman untuk menampilkannya dengan benar dalam viewport dari ketinggian yang berbeda, dan melihat contoh. Saya harap Anda menemukan semua ini berguna.

Apakah Anda memperhatikan bagaimana tampilan halaman web yang Anda buat di jendela browser dengan ketinggian berbeda?

Desain web responsif dan responsif tinggi browser