Berkreasilah dengan layar kecil – Beragampengetahuan

Selama beberapa bulan terakhir, saya telah menjelajahi cara berkreasi dengan properti CSS yang didukung dengan baik. Setiap artikel bertujuan untuk mendorong desain web menjauh dari cookie cutter dan menuju desain yang lebih unik dan mudah diingat. Sedikit masukan dari Phillip Bagleg yang patut ditindaklanjuti:

Panduan Andy semuanya menarik, tetapi sebagian besar tidak realistis dalam kehidupan nyata. Hanya ada sedikit panduan tentang bagaimana desain gaya majalah bekerja dalam lingkungan yang responsif.

Kata yang bagus, Filipus. Jadi, mari kita hilangkan mitos bahwa desain web editorial tidak praktis di layar kecil.

Profil saya: Patty Meltt adalah bintang musik country pemula yang membutuhkan situs web untuk meluncurkan album dan tur barunya. Dia ingin itu terlihat unik dan berkesan, jadi dia menamakannya “Stuff & Nonsense.” Patty tidak nyata, tetapi tantangan dalam merancang dan mengembangkan situs seperti miliknya memang nyata.

Masalah kolom tak terbatas

Di perangkat seluler, orang mungkin kehilangan kesadaran akan konteks dan tidak dapat dengan mudah mengetahui di mana suatu bagian dimulai atau diakhiri. Desain layar kecil yang bagus dapat membantu mereka menyesuaikan diri menggunakan berbagai teknologi.

Ketika ruang layar sempit, sebagian besar desainer menyatukan tata letaknya menjadi satu kolom panjang. Ini bagus untuk keterbacaan, namun ketika hierarki menghilang, hal ini dapat berdampak negatif pada pengalaman pengguna; temponya menjadi monoton dan konten bergulir tanpa henti hingga menjadi buram. Kemudian, tidak ada yang menonjol dan halaman berubah dari pengalaman desain menjadi umpan konten.

Sama seperti majalah, tata letaknya memberikan isyarat visual di lingkungan desktop yang memungkinkan orang mengetahui di mana mereka berada dan menyarankan ke mana harus pergi selanjutnya. Irama dan struktur ini dapat menjadi bagian dari narasi visual seperti halnya warna dan tipografi.

Namun petunjuk ini sering kali hilang di layar kecil. Karena kita tidak bisa mengandalkan kolom yang rumit, bagaimana kita bisa merancang isyarat visual untuk membantu pembaca merasa terbimbing melalui alur konten dan tetap terlibat? Salah satu jawabannya adalah berhenti memikirkan daftar yang panjang. Sebaliknya, anggaplah setiap bagian sebagai satu paket unik, momen yang dirancang dengan cermat yang memandu pembaca menjalani cerita.

Momen desain bukan pilar

Bahkan dalam kolom yang sempit, Anda dapat menambahkan variasi dan mengurangi monoton dengan memperlakukan konten Anda sebagai rangkaian momen desain yang bermakna, masing-masing dengan perilaku dan gaya yang unik. Kita mungkin menggunakan komposisi dan ukuran alternatif, menyusun elemen menggunakan pola berbeda, atau menggunakan pengguliran horizontal dan vertikal untuk menciptakan pengalaman dan menceritakan kisah meskipun ruang terbatas. Untungnya, kami memiliki alat yang diperlukan untuk mewujudkan hal ini:

Momen-momen ini dapat bergerak secara horizontal, menghilangkan monotonnya pengguliran vertikal, memberikan ritme tersendiri pada suatu bagian, dan menyatukan konten terkait.

Manfaatkan pengguliran horizontal

Desain desktop saya untuk rekaman Patti mencakup sampul albumnya yang disusun dalam kotak modular. Jenis tata letak ini mudah dicapai menggunakan generator jaringan modular saya.

Namun pengaturan ini belum tentu cocok untuk layar kecil, dan solusi praktisnya adalah dengan mengubah grid modular menjadi elemen gulir horizontal. Pengguliran horizontal adalah perilaku umum dan cara untuk memberikan tahapan tersendiri pada konten yang dikelompokkan, seperti penyebaran majalah.

Saya mulai dengan mendefinisikan induk dari grid modular – dalam hal ini, memberi nama secara imajinatif modular-wrap — sebagai wadah:

.modular-wrap {
  container-type: inline-size;
  width: 100%;
}

Lalu, saya menambahkan gaya grid untuk membuat tata letak modular:

.modular {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  overflow-x: visible;
  width: 100%;
}

Sangat menggoda untuk menciutkan modul grid menjadi satu kolom di layar kecil, tapi itu hanya menumpuk satu album di atas album lainnya.

Jadi saya menggunakan kueri kontainer untuk mengatur sampul album secara horizontal dan mengizinkan seseorang untuk menggulirnya:

@container (max-width: 30rem) {
  #example-1 .modular {
    display: grid;
    gap: 1.5rem;
    grid-auto-columns: minmax(70%, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: 1fr;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

Sampul album Patti kini disusun secara horizontal, bukan vertikal, sehingga menciptakan komponen yang kohesif sekaligus mencegah orang kehilangan tempatnya dalam keseluruhan aliran konten.

Dorong elemen dari kanvas

Terakhir kali saya menjelaskan cara menggunakannya shape-outside dan menciptakan ilusi teks mengalir di kedua sisi gambar. Anda sering melihat efek ini di majalah, tapi jarang online.

Monitor desktop memiliki banyak ruang kosong, tapi bagaimana dengan monitor yang lebih kecil? oke aku bisa menghapusnya shape-outside Namun jika saya melakukan itu, saya juga akan kehilangan banyak kepribadian desain dan dampaknya terhadap narasi visual. Sebaliknya saya bisa menyimpannya shape-outside dan letakkan di dalam komponen gulir horizontal dengan beberapa konten di luar kanvas dan di luar area pandang.

Konten saya dibagi menjadi dua bagian: bagian pertama separuh gambarnya melayang ke kanan, dan bagian kedua separuh gambarnya melayang ke kiri. Kedua gambar digabungkan untuk menciptakan ilusi satu gambar di tengah desain:

<div class="content">
  <div>
  <img src=" alt="">
  <p><!-- ... --></p>
  </div>

<div>
  <img src=" alt="">
  <p><!-- ... --></p>
  </div>
</div>

Saya tahu implementasi ini memerlukan kueri kontainer karena saya memerlukan elemen induk yang lebarnya menentukan kapan tata letak beralih dari statis ke bergulir. Jadi, saya menambahkan a section Di luar konten tersebut sehingga saya dapat mereferensikan lebarnya untuk menentukan kapan kontennya harus diubah:

<section>
  <div class="content">
    <!-- ... -->
  </div>
</section>

section {
  container-type: inline-size;
  overflow-x: auto;
  position: relative;
  width: 100%;
}

Teknik saya melibatkan penyebaran konten ke dua partisi dengan lebar yang sama, properti kolom kisi ini akan berfungsi untuk setiap ukuran layar:

.content {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

Lalu, bila lebar bagian tersebut berada di bawah 48remsaya mengubah lebar kedua kolom:

@container (max-width: 48rem) {
  .content {
    grid-template-columns: 85vw 85vw;
  }
}

Menyetel lebar setiap kolom menjadi 85% (tepat di bawah lebar area pandang) membuat beberapa konten kolom kanan terlihat, menyiratkan bahwa ada lebih banyak konten untuk dilihat dan mendorong orang untuk menggulir untuk melihatnya.

Prinsip yang sama berlaku pada skala yang lebih besar. Daripada membuat sedikit penyesuaian, kita bisa mengubah seluruh bagian menjadi sebaran majalah mini yang bergulir seperti cerita cetakan.

Buat penyebaran mini yang dapat digulir

Tidak ada alasan untuk kehilangan ekspresi tata letak bergaya majalah saat merancang lingkungan yang responsif. Bab-bab dapat berperilaku seperti majalah kecil yang tersebar secara independen, daripada membuat semuanya diratakan menjadi satu kolom panjang.

terakhirku shape-outside Contoh aliran teks antara dua montase foto. Bagian dari gambar-gambar ini terlepas dari wadahnya, menciptakan kedalaman dan tata letak dengan nuansa editorial yang berbeda. Konten saya terdiri dari dua gambar dan beberapa paragraf:

<div class="content">
  <img src=" alt="">
  <img src=" alt="">
  <p><!-- ... --></p>
  <p><!-- ... --></p>
  <p><!-- ... --></p>
</div>

Dua gambar melayang ke kiri atau ke kanan, masing-masing gambar shape-outside Terapkan untuk membuat teks mengalir di antara keduanya:

.content img:nth-of-type(1) {
  float: left;
  width: 45%;
  shape-outside: url(");
}

.spread-wrap .content img:nth-of-type(2) {
  float: right;
  width: 35%;
  shape-outside: url(");
}

Ini berfungsi dengan baik pada ukuran layar besar, tetapi terasa sempit pada layar kecil. Untuk mempertahankan esensi desain, saya menggunakan kueri kontainer untuk mengubah tata letaknya menjadi sesuatu yang benar-benar berbeda.

Pertama, saya memerlukan elemen induk lain yang lebarnya akan menentukan kapan tata letak harus diubah. Jadi, saya menambahkan a section di luar sehingga saya bisa mereferensikan lebarnya dan memberikannya sedikit padding dan batas untuk membantu membedakannya dari konten di sekitarnya:

<section>
  <div class="content">
    <!-- ... -->
  </div>
</section>

section {
  border: 1px solid var(--border-stroke-color);
  box-sizing: border-box;
  container-type: inline-size;
  overflow-x: auto;
  padding: 1.5rem;
  width: 100%;
}

Bila lebar penampang kurang dari 48remsaya memperkenalkan tata letak Flexbox horizontal:

@container (max-width: 48rem) {
  .content {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
}

Karena tata letak ini bergantung pada kueri kontainer, saya menggunakan unit kueri kontainer (cqi) untuk lebar kolom fleksibel saya:

.content > * {
  flex: 0 0 85cqi;
  min-width: 85cqi;
  scroll-snap-align: start;
}

Sekarang, di layar kecil, tata letak mengalir dari gambar ke paragraf ke gambar, dengan setiap elemen terpasang pada tempatnya ketika seseorang menggeser ke samping. Pendekatan ini mengatur ulang elemen dan memperlambat pembacaan seseorang dengan menjadikan setiap gesekan sebagai tindakan yang disengaja.

Untuk mencegah gambar berubah bentuk saat melengkung, saya mengatur tinggi otomatis ke object-fit:

.content img {
  display: block;
  flex-shrink: 0;
  float: none;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

Sebelum menelepon Flexbox order Properti menempatkan gambar kedua di akhir urutan layar kecil saya:

.content img:nth-of-type(2) {
  order: 100;
}

Penyebaran mini seperti ini menambah gerakan dan ritme, tetapi petunjuk arah memberikan cara lain untuk mengubah perspektif tanpa menggulir. Rotasi sederhana dapat menjadi isyarat untuk komposisi yang benar-benar baru.

Buat tata letak responsif terarah

Saat seseorang memutar ponselnya, perubahan orientasi mungkin berfungsi sebagai petunjuk tata letak baru. Daripada memperluas desain satu kolom lebih lebar, kami dapat merestrukturisasinya sepenuhnya, membuat arah melintang terasa seperti perluasan yang benar-benar baru.

Membalikkan ponsel ke samping adalah kesempatan untuk mengatur ulang tata letaknya, bukan sekadar mengatur ulang. Saya tidak ingin tata letak bertumpuk yang sama menjadi lebih lebar saat penggemar Patty memutar ponsel ke lanskap. Sebaliknya, saya ingin memanfaatkan lebar ekstra untuk memberikan pengalaman berbeda. Ini bisa sesederhana menambahkan kolom tambahan ke dalam campuran dalam kueri media yang diterapkan saat perangkat dinyalakan orientation terdeteksi landscape:

@media (orientation: landscape) {
  .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Untuk konten berdurasi panjang di halaman biografi Patti Melt, teks mengalir di sekitar poligon clip-path Ditempatkan di atas gambar latar belakang buatan yang besar. Gambarnya sejajar, melayang, dan lebarnya disetel ke 100%:

<div class="content">
  <img src=" alt="">
  <!-- ... -->
</div>

.content > img {
  float: left;
  width: 100%;
  max-width: 100%;
}

Lalu, saya menambahkan shape-outside Gunakan koordinat poligon dan tambahkan shape-margin:

.content > img {
  shape-outside: polygon(...);
  shape-margin: 1.5rem;
}

Saya hanya ingin teks mengalir di sekitar poligon dan gambar muncul di latar belakang saat perangkat dalam orientasi lanskap, jadi saya menggabungkan aturan itu dalam kueri yang mendeteksi orientasi layar:

@media (orientation: landscape) {
  .content > img {
    float: left;
    width: 100%;
    max-width: 100%;
    shape-outside: polygon(...);
    shape-margin: 1.5rem;
  }
}

Properti ini tidak berlaku bila area pandang berada dalam mode potret.

Desain agar sesuai dengan cerita, bukan meruntuhkan tata letaknya

Layar kecil tidak membuat perancangan menjadi lebih sulit; sebaliknya, mereka membuatnya lebih bijaksana, mengharuskan desainer untuk mempertimbangkan bagaimana mempertahankan kepribadian desain meskipun ruangnya terbatas.

Philip berhak mengajukan pertanyaan tentang bagaimana desain gaya editorial bekerja dalam lingkungan yang responsif. Hal ini benar, namun bukan dengan memperkecil tata letak pencetakan. Ini berfungsi ketika kita berpikir secara berbeda tentang bagaimana konten dibengkokkan, dipindahkan dan digulung, dan ketika desain merespons tidak hanya terhadap perangkat tetapi juga bagaimana orang memegangnya.

Tujuannya bukan untuk meniru majalah mikro di ponsel Anda, namun untuk menangkap energi, kecepatan, dan rasa penemuan yang menjadi keunggulan majalah cetak. Desain adalah soal bercerita, dan hanya karena ruang untuk bercerita lebih sedikit, bukan berarti dampaknya berkurang.