Konfigurasi layar

Desain web responsif dalam banyak hal merupakan reaksi terhadap ponsel. Sebelum {i>smartphone<i} muncul, sangat sedikit orang yang secara serius mempertimbangkan bagaimana tampilan dan nuansa {i>website<i} di perangkat genggam. Hal itu berubah dengan meningkatnya ponsel yang dilengkapi browser web bawaan.

Desain web responsif mendorong pola pikir yang mempertanyakan asumsi. Sebelumnya adalah hal yang umum untuk mengasumsikan bahwa {i>website<i} hanya akan dilihat di komputer desktop, sekarang praktik standar untuk mendesain {i>website<i} yang sama untuk ponsel dan tablet juga. Faktanya, penggunaan seluler kini telah melampaui penggunaan desktop di web.

Pola pikir responsif ini akan membantu Anda dengan baik di masa depan. Sangat mungkin situs Anda akan dilihat di perangkat dan layar yang bahkan tidak dapat kita bayangkan saat ini. Pola pikir ini melampaui layar. Bahkan kini orang-orang menggunakan perangkat tanpa layar untuk mengakses konten Anda. Asisten suara dapat menggunakan situs Anda jika Anda menggunakan dasar HTML semantik yang kuat.

Di dunia layar, kita juga dapat bereksperimen. Saat ini ada banyak perangkat yang beredar di pasaran dengan layar yang dapat dilipat. Hal ini memunculkan beberapa tantangan untuk desain Anda.

Dua layar

Pengguna perangkat foldable dapat memilih apakah mereka ingin browser web mereka hanya menempati salah satu layar atau membentang di kedua layar. Jika browser membentang di kedua layar, situs yang ditampilkan akan terpotong oleh engsel di antara kedua layar. Kelihatannya tidak bagus.

Segmen area pandang

Ada fitur media eksperimental yang dirancang untuk mendeteksi apakah situs Anda ditampilkan di perangkat dua layar. Nama fitur media yang diusulkan adalah viewport-segments. Ada dua varietas: horizontal-viewport-segments dan vertical-viewport-segments.

Jika fitur media horizontal-viewport-segments melaporkan nilai 2 dan vertical-viewport-segments melaporkan nilai 1, artinya engsel di perangkat berjalan dari atas ke bawah, yang membagi konten Anda menjadi dua panel berdampingan.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

Jika fitur media vertical-viewport-segments melaporkan nilai 2 dan horizontal-viewport-segments melaporkan nilai 1, engsel berjalan dari sisi ke sisi, yang membagi konten Anda menjadi dua panel, satu di atas yang lain.

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}

Jika vertical-viewport-segments dan horizontal-viewport-segments melaporkan nilai 1, ini berarti situs ditampilkan hanya di satu layar, meskipun perangkat memiliki lebih dari satu layar. Ini sama dengan tidak menggunakan kueri media apa pun.

Variabel lingkungan

Fitur media viewport-segments itu sendiri tidak akan membantu Anda mendesain engsel yang mengganggu. Anda memerlukan cara untuk mengetahui ukuran engselnya. Di situlah variabel environment dapat membantu.

Variabel lingkungan di CSS memungkinkan Anda untuk memperhitungkan intrusi perangkat yang canggung ke dalam gaya Anda. Misalnya, Anda dapat mendesain berdasarkan "notch" di iPhone X menggunakan nilai lingkungan safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, dan safe-area-inset-left. Kata kunci ini digabungkan dalam fungsi env().

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Variabel lingkungan berfungsi seperti properti kustom. Ini berarti Anda dapat meneruskan opsi penggantian jika variabel lingkungan tidak ada.

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

Agar variabel lingkungan tersebut berfungsi di iPhone X, perbarui elemen meta yang menentukan informasi viewport:

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

Sekarang, tata letak halaman akan mengisi seluruh area pandang dan memberi dokumen dengan nilai inset yang disediakan perangkat secara aman.

Untuk layar perangkat foldable, enam variabel lingkungan baru sedang diusulkan: viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom, viewport-segment-right.

Berikut contoh tata letak dengan dua kolom, satu kolom lebih lebar dari yang lain.

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

Untuk dua layar dengan engsel vertikal, tetapkan kolom pertama menjadi lebar layar pertama dan kolom kedua menjadi lebar layar kedua.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

Perlakukan dual screen sebagai peluang. Mungkin satu layar dapat digunakan untuk menampilkan konten teks yang dapat di-scroll, sementara layar lainnya menampilkan elemen tetap seperti gambar atau peta.

Acara mendatang

Akankah layar perangkat foldable menjadi layar canggih berikutnya? Siapa yang tahu. Tidak ada yang bisa memperkirakan seberapa populer perangkat seluler nantinya, jadi ada baiknya untuk memiliki pikiran terbuka tentang faktor bentuk di masa mendatang.

Yang terpenting, pastikan bahwa situs Anda dapat merespons apa pun yang terjadi di masa depan. Itulah yang diberikan desain responsif kepada Anda: bukan hanya seperangkat teknik praktis, tetapi juga pola pikir yang akan melayani Anda sebaik-baiknya ketika membangun web masa depan.

Menguji pemahaman Anda

Menguji pengetahuan Anda tentang konfigurasi layar