it-swarm.asia

Untuk situs web, apakah lebih baik memiliki tata letak lebar variabel atau tata letak lebar tetap?

Karena resolusi layar yang berbeda, pengalaman pengguna menelusuri situs web mungkin berbeda. Apakah lebih baik untuk menata situs web dengan lebar tetap? (dan jika demikian apakah harus ada lebar statis yang berbeda untuk resolusi standar?) Atau haruskah situs web selalu diletakkan dalam lebar variabel?

32
txwikinger

Saya pikir tidak ada jawaban yang mudah di sini, karena, pada akhirnya, itu tergantung pada apa yang Anda bangun dan untuk siapa Anda membangunnya. Baik situs lebar tetap dan situs lebar variabel memiliki kelebihan dan kekurangan.

Satu hal yang harus saya tunjukkan di sini, saya tidak akan berbicara tentang pengalaman seluler untuk situs tetap/cair, karena situs seluler paling baik bila desainnya khusus untuk perangkat seluler, bukan port situs desktop ke platform seluler.

Fixed Width - Keuntungan

Situs lebar tetap adalah pengalaman yang lebih konsisten dan lebih cepat berkembang daripada situs lebar variabel. Hal ini juga memungkinkan perancang untuk memiliki kontrol lebih besar atas presentasi karena Anda dapat menetapkan nilai keras untuk lebar, panjang garis, ukuran tipografi, dll. Ini juga pada akhirnya lebih mudah dipelihara daripada situs dengan lebar variabel.

Fixed Width - Kekurangan

Di sisi lain, desain lebar tetap mulai gagal ketika Edge case muncul. Saat ini, sangat umum bagi orang untuk merancang situs untuk monitor resolusi lebar 1024px, tetapi masih ada orang di luar sana dengan mesin resolusi lebih rendah. Saat ini, saya sedang mengerjakan aplikasi yang dirancang menggunakan kisi 960px; Saya melihat analitik hari ini dan memperhatikan 3% dari pengguna menggunakan 800 x 600 monitor, dan sekitar 5% total berada pada resolusi di bawah 1024 x 768. Para pengguna tersebut mungkin mendapatkan pengalaman yang sangat buruk karena situs tersebut memiliki lebar yang tetap .

Lebar Cairan - Keuntungan

Lebar cairan memungkinkan desain meluas berdasarkan pengaturan pengguna; desainnya beradaptasi dengan mereka, yang merupakan hal yang baik. Ini memungkinkan situs untuk mempertahankan ruang negatif proporsional, sehingga situs tidak pernah terasa terlalu berantakan atau terlalu terbuka (kecuali jika dirancang secara khusus seperti itu).

Fluid Width - Kekurangan

Sayangnya, desain lebar cairan juga tidak tahan terhadap kasus Edge. Ketika lebar menjadi terlalu kurus atau hal-hal buruk terlalu lebar dapat terjadi, terutama dengan teks. Panjang garis yang terlalu pendek atau terlalu panjang pada dasarnya tidak dapat dibaca. Selain itu, banyak bentuk media, seperti gambar atau objek Flash, sulit untuk diukur dalam desain lebar cairan; IE membutuhkan javascript untuk mengubah ukuran gambar, jika tidak mereka akan pixelated.

Desain Web Responsif

Beberapa orang telah menunjukkan contoh, tetapi belum menyebut teknik ini dengan nama. Ethan Marcotte baru-baru ini menciptakan istilah untuk menggambarkan tata letak cairan yang dapat berubah sepenuhnya berdasarkan resolusi layar pengguna (lihat detail di sini ). Ini adalah campuran lebar tetap dan lebar fluida - memungkinkan Anda untuk mengatur minimum dan maksimum sehingga media atau panjang garis tidak lepas kendali, dan juga memungkinkan desain untuk menyesuaikan dengan pengaturan pengguna. Tentu saja, teknik ini juga memiliki kelebihan dan kekurangannya sendiri. Meskipun disediakan tata letak yang dipilih secara khusus untuk pengaturan pengguna, jenis situs ini sulit untuk dikembangkan. Tidak semua browser mendukung permintaan media yang diperlukan untuk melakukan ini. Plus, Anda pada dasarnya mengembangkan banyak tata letak, memperpanjang jumlah waktu yang dibutuhkan untuk membangun dan memelihara.

Saya percaya tidak mungkin hanya meletakkan selimut "Selalu gunakan ini" atau "Jangan pernah gunakan ini"; Saya akan mengatakan bahwa Anda harus selalu mengevaluasi kebutuhan Anda sebelum membuat keputusan. Saya merasa untuk sebagian besar kasus bahwa tata letak lebar tetap akan melayani tujuan Anda, tetapi tata letak yang cair atau responsif dapat memberikan pengalaman pengguna yang jauh lebih baik, hanya dengan biaya kesulitan ekstra.

17
RussellUresti

Masalah dengan menggunakan lebar variabel 100% adalah bahwa itu benar-benar tidak ditampilkan dengan baik untuk pengguna dengan layar terkecil dan terbesar. Saya biasanya akan merancang bagian konten utama saya untuk norma dengan menetapkan lebar min/maks dan kemudian saya akan memusatkan konten penting (tetap). Anda kemudian dapat memiliki elemen desain lebar variabel (karena mereka tidak penting) yang meregangkan/menyusut untuk mengisi layar.

Dengan cara ini informasi penting selalu (semoga) ditampilkan dengan benar sambil terlihat bagus dalam banyak resolusi.

24
LoganGoesPlaces

Saya bukan seorang desainer web, tapi saya pikir idealnya Anda harus membuat tata letak yang lancar. Artinya, tata letak yang secara otomatis (dan dinamis) akan berubah sesuai dengan lebar saat ini. Dengan begitu, perangkat sempit seperti ponsel didukung dengan baik, serta semua lebar layar yang berbeda.

Posting blog Akhirnya, fluid Hicksdesign keduanya menjelaskan dan mendominasi teknik tersebut. Ini memiliki 3 kolom, 2 kolom dan satu tata letak kolom, yang dipilih sesuai dengan lebar jendela browser.

7
whybird

Teks sulit dibaca begitu panjang garis terlalu panjang. Jadi untuk setiap situs lebar variabel, setidaknya perlu ada lebar maksimum untuk area teks apa pun untuk menjaga keterbacaan.

Adalah jauh lebih sulit untuk membuat situs lebar variabel terlihat bagus.

6
Mongus Pong

Tergantung pada apa yang saya kerjakan, tetapi saya masih cenderung bersandar pada situs dengan lebar tetap. Alasannya adalah karena ini memungkinkan Anda untuk mengontrol ui dengan lebih baik dan tetap konsisten di seluruh ukuran layar. Banyak situs dengan lebar cairan terlihat mengerikan pada monitor yang lebih besar/lebih kecil (tergantung pada apa yang dirancang untuknya).

Aturan umum untuk saya:

  • Jika kegunaan situs sebagian besar tergantung pada antarmuka dan/atau kontennya sebagian besar teks: lebar tetap
  • Jika situs tersebut memiliki antarmuka minimal, tetapi kontennya sebagian besar visual (situs foto atau aplikasi peta, misalnya), maka saya menggunakan cairan.

Berikut ini rincian besar beberapa pro/kontra: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one- for-you /

2
Ryan

Kapan pun saya bisa, saya mencoba untuk tidak mengatur tinggi dan lebar spesifik suatu objek dalam px tetapi dalam %

1
megubyte

Saya menyarankan akuntansi untuk lebar variabel, atau memberikan tata letak alternatif untuk layar yang lebih luas.

Jika Anda menggunakan lebar tetap - harap pastikan itu bukan lebar kecil! Saya telah melihat beberapa situs dengan lebar 500 atau 600px yang membuat membaca situs seperti memindai halaman Kuning.

Saya telah lama menjadi penggemar pendekatan The Man In Blue dalam memberikan tata letak alternatif berdasarkan lebar yang tersedia: lihat demo langsung di sini

1
scunliffe

Anda mungkin ingin mendesain tata letak situs web Anda dalam landscape orientasi. Semakin banyak monitor layar lebar sedang digunakan, dengan resolusi besar 1920x1080 (yang ini paling umum). Pernahkah Anda mencoba memaksimalkan jendela browser yang menampilkan tata letak tetap potret pada itu? Ini seperti setengah hingga dua pertiga dari layar yang diisi dengan warna/gambar latar belakang Anda.

Sangat menyenangkan bahwa Windows 7 memungkinkan Anda untuk dengan cepat mengubah ukuran jendela menjadi setengah layar dan menempelkannya ke samping: WindowsKey + Left/Right

1
Mircea Chirea

Lebar variabel mungkin merupakan jalan yang harus ditempuh, karena dengan lebar yang tetap, beberapa orang mungkin berpikir situs web Anda terlalu kecil untuk monitor mereka dan beberapa orang mungkin berpikir itu terlalu besar untuk monitor mereka.

0
David

Itu tergantung pada konten situs web. Jika memiliki banyak teks, lebar variabel lebih masuk akal karena teks dapat menyebar dan pengguna dapat membacanya dengan lebih efisien. Jika lebih seperti situs web pemasaran di mana penampilan lebih penting, maka lakukan dengan lebar tetap karena jauh lebih sulit untuk membuat situs web lebar tetap tampak hebat.

0
Kai Chan

Asumsi apa pun yang Anda buat dalam mendesain tata letak ukuran tetap salah bagi sebagian pengguna Anda. Satu-satunya cara untuk memberikan pengalaman yang memuaskan bagi semua orang adalah dengan menggunakan desain yang fleksibel dan responsif.

Dua masalah (berusaha menghindari duplikasi):

  • Anda tidak dapat berasumsi bahwa browser adalah layar penuh; analitik yang melaporkan resolusi layar hanya menceritakan sebagian dari cerita.

  • Anda tidak dapat berasumsi bahwa pengguna menggunakan ukuran font yang sama dengan Anda. Baris yang terlalu lebar untuk dibaca pada ukuran font Anda mungkin tidak terlalu lebar untuk dibaca oleh seseorang yang harus menambah ukuran font beberapa notch; sebaliknya, kolom tempat Anda menetapkan lebar tetap berdasarkan pengaturan font Anda dapat berarti bahwa pengguna melihat lima kata per baris atau sesuatu.

Agar dapat digunakan oleh semua pengguna, desain web Anda perlu menggunakan semua dan hanya ruang yang diberikan browser kepada Anda. Percayai pengguna untuk mengukur browsernya untuk mengoptimalkan pengalamannya sendiri; Anda kemudian harus bekerja dalam batas tersebut. Pendekatan ini bekerja pada 30 "monitor dan 7" tablet (dan bahkan telepon, jika Anda tidak membuat versi khusus seluler).

0
Monica Cellio