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 seharusnya tampilan dan nuansa {i>website<i} pada perangkat genggam. Hal itu berubah dengan perkembangan pesat ponsel yang dilengkapi browser web bawaan.

Desain web responsif mendorong pola pikir yang mempertanyakan asumsi. Jika sebelumnya sebuah {i>website<i} hanya akan dilihat di komputer {i>desktop<i}, kini menjadi praktik standar untuk mendesain {i>website<i} yang sama untuk ponsel dan tablet. Faktanya, penggunaan seluler kini telah melampaui penggunaan desktop di web.

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

Selain itu, ada eksperimen dalam dunia layar. Saat ini, ada perangkat dengan layar foldable. Hal tersebut memperkenalkan beberapa tantangan untuk desain Anda.

Layar ganda

Pengguna perangkat foldable dapat memilih apakah mereka ingin browser web mereka hanya menempati salah satu layar atau membentang di kedua layar. Jika browser membentang pada kedua layar, situs yang ditampilkan akan dipecah oleh engsel di antara dua 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, sehingga 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 akan berjalan dari sisi ke sisi sehingga membagi konten Anda menjadi dua panel, satu di atas panel lainnya.

@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, artinya situs hanya ditampilkan di satu layar, meskipun perangkat memiliki lebih dari satu layar. Hal ini sama dengan tidak menggunakan kueri media apa pun.

Variabel lingkungan

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

Variabel lingkungan di CSS memungkinkan Anda memfaktorkan intrusi perangkat yang canggung ke dalam gaya Anda. Misalnya, Anda dapat mendesain di sekitar "notch" pada 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, update elemen meta yang menentukan informasi viewport:

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

Sekarang tata letak halaman Anda akan menggunakan seluruh area pandang dan memberikan padding pada dokumen secara aman dengan nilai inset yang disediakan perangkat.

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 adalah contoh tata letak dengan dua kolom yang 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 layar ganda dengan engsel vertikal, setel 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 perangkat ganda 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

Apakah layar perangkat foldable akan menjadi fitur besar berikutnya? Siapa yang tahu. Tidak ada yang dapat memperkirakan seberapa populer perangkat seluler, jadi ada baiknya jika Anda berpikiran terbuka tentang faktor bentuk di masa mendatang.

Yang terpenting, ada baiknya memastikan bahwa situs Anda dapat merespons apa pun yang mungkin terjadi di masa mendatang. Itulah yang diberikan desain responsif: bukan hanya serangkaian teknik praktis, melainkan pola pikir yang akan membantu Anda membangun web masa depan.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang konfigurasi layar