Desain responsif (juga dikenal sebagai desain 'adaptif'), di mana halaman web yang sama menyajikan versi terbaik dari dua atau lebih tata letak buatan tangan tergantung pada lebar browser, adalah opsi terkuat untuk sebagian besar situs web. Untuk mengetahui alasannya, sebaiknya lihat semua opsi yang tersedia untuk perancang web:
Memperbaiki tata letak
Lebar halaman tetap, di mana lebar kontennya sama terlepas dari lebar browser, menawarkan tampilan dan nuansa yang seragam di seluruh perangkat dan dapat membutuhkan lebih sedikit pengkodean, pemikiran, dan pemeliharaan daripada desain yang lebih fleksibel.
Beberapa merasa bahwa tata letak lebar tetap adalah peninggalan zaman dulu, di mana orang mendambakan kesempurnaan piksel dan tampilan seragam di semua browser. Andy Clarke, penulis Hardboiled Web Design, merasa bahwa cara berpikir ini sudah mati:
"Di masa lalu itu adalah praktik standar untuk berjuang keras untuk membuat situs web yang terlihat dan bekerja sama di semua browser - tidak peduli apa kemampuan mereka. Untuk melakukan ini berarti membuat kompromi dan menghindari menggunakan teknologi yang tidak didukung oleh semua browser.
Apakah ini direbus?
Jangan menipu diri sendiri, pipi yang manis. Ini bukan cara untuk mengembangkan kerajinan kami atau membangun web yang lebih baik. Pemikiran kuno semacam ini menghambat kita. Itu memaksa kita untuk membuat alasan untuk tidak melakukan apa yang kita tahu adalah hal yang benar. Hal terburuk yang dapat kita, sebagai penjaga web saat ini, dapat lakukan adalah membiarkan apa pun membatasi apa yang mungkin. "
- Andy Clarke, Desain Web Hardboiled, p6 [Edisi PDF tersedia di sini ]
Sementara beberapa orang melihat tata letak tetap sebagai ketinggian kemalasan, desain dengan lebar tetap masih dipilih oleh tim desain yang sangat pintar dibandingkan tata letak yang cair atau adaptif. Apple, misalnya, saat ini melayani tata letak yang sama untuk iMacs seperti halnya untuk iPad dan iPhone. Mengapa perusahaan yang bertanggung jawab membawa penelusuran web seluler ke massa tidak mengoptimalkan situs webnya untuk perangkat seluler?
Karena menurutnya tidak perlu.
Alih-alih mengadaptasi situs webnya untuk layar kecil, Apple membuat perangkat keras dan perangkat lunak untuk menangani situs web lebar dengan nyaman di layar itu. Apple berpendapat bahwa pengalaman 'yang dioptimalkan untuk seluler' paling baik disampaikan di aplikasi asli, bukan di jendela browser. Karena itulah ia menawarkan aplikasi Apple Store alih-alih melayani toko Web yang dioptimalkan untuk seluler. Dan itulah sebabnya itu mendorong penerbit untuk menawarkan aplikasi majalah di atas situs web yang disesuaikan. Filosofi desain web Apple saat ini jelas: satu tata letak untuk mengatur semuanya berfungsi dengan baik. Untuk yang lainnya, ada aplikasi untuk itu.
Untuk alasan ini saja, beberapa orang akan berpendapat bahwa tata letak tetap tetap relevan seperti sebelumnya; mereka akan mengatakan bahwa tata letak yang cair dan adaptif hanyalah celah sementara kita menunggu perangkat lunak peramban seluler untuk meningkatkan, dan HTML dan JavaScript untuk berevolusi dan menggoda pengembang menjauh dari toko aplikasi yang sunyi.
Namun menurut saya, mencubit-ketuk-seret-gulirkan jalan di Web untuk jangka waktu yang lama di perangkat seluler sama sekali tidak menyenangkan, bahkan di iPhone. Jika Anda percaya bahwa pengalaman Web terbaik adalah pengalaman yang membuat membaca, menerbitkan, dan berinteraksi dengan situs web lebih menyenangkan daripada tugas, terlepas dari perangkat yang Anda gunakan, Anda harus mengakui pada titik tertentu bahwa menyajikan konten yang disesuaikan dengan masing-masing pengunjung layak dipertimbangkan.
Tata letak cairan
Tata letak cairan, di mana lebar halaman mengalir untuk mengisi layar (seringkali hingga lebar maksimum yang dipaksakan), menjanjikan pengalaman yang lebih baik di berbagai platform dengan mengirimkan konten dengan lebar lebih sesuai ke viewport.
Dalam praktiknya, tata letak cairan menyebabkan lebih banyak masalah daripada yang mereka pecahkan, sebagaimana dicatat oleh Cameron Moll dalam sindiran ini:
"... desain fluida menyelesaikan setiap masalah tata letak sama seperti komputer membuat kantor jadi kertas jadi mereka tidak."
- Cameron Moll, "Haruskah semua situs cair?", September 2006
Saat Anda mengadopsi tata letak yang lancar, Anda melepaskan kendali atas desain Anda dan menerima bahwa teks akan dicetak ulang, gambar akan bercahaya, panjang garis akan bervariasi tanpa dapat diprediksi, teks, gambar, dan elemen navigasi dapat dihancurkan bersama pada lebar kecil, dan kolom akan melompat dan mengambang sekitar hanya untuk membuatmu kesal.
Tata letak yang cair, beberapa mungkin mengatakan, juga merupakan pilihan malas. Ini adalah pendekatan senapan untuk desain web adaptif. Alih-alih memberikan pengalaman yang disesuaikan dengan tiga atau empat desain dengan lebar tetap yang dipertimbangkan dengan hati-hati, Anda menawarkan pengalaman yang tidak terduga dengan harapan dapat bekerja pada layar besar dan kecil, dan mudah-mudahan pasang semua celah yang belum sepenuhnya Anda pertimbangkan diantara.
Ini tidak membuat tata letak cairan tidak berguna. Ada cara untuk membuatnya bekerja. The 456 Berea St blog, misalnya, mengadopsi tata letak cairan hingga lebar diberikan, setelah itu menggunakan satu tetap untuk sesuatu yang lebih besar. Dan pada lebar yang sangat kecil, bilah samping turun untuk menggunakan satu kolom yang membuatnya lebih mudah dibaca di layar kecil. Tapi ini bukan lagi tata letak yang cair. Itu adalah sesuatu yang lebih baik. Ini adalah desain yang responsif .
Tata letak responsif
Layout 'responsif' atau 'adaptif' - di mana halaman web yang sama menyajikan satu versi dua atau lebih layout yang dibuat tergantung pada lebar browser pengunjung - adalah bagian penting dari peningkatan progresif, yang bertujuan untuk membuat situs web terlihat terbaik itu bisa untuk setiap pengunjung.
Memilih untuk mengadopsi tata letak adaptif adalah 'layanan pelanggan yang sangat baik', dalam kata-kata Aaron Gustafson, penulis Adaptive Web Design. Jika kita mendesain situs kita dengan baik, katanya, pengunjung harus disajikan dengan pengalaman yang dibuat dengan sempurna tanpa menyadari bahwa kita membuat keributan dari mereka:
"Sebagai perancang dan pengembang web, kita harus berusaha sebaik mungkin dalam pekerjaan kita sebagai pelayan yang penuh perhatian dan tidak mencolok itu, tetapi itu bukan tugas yang mudah. Seperti halnya seorang pelayan tidak tahu apakah seorang pelanggan yang datang melalui pintu akan perlu sering isi ulang atau sedikit, kami tidak memiliki cara untuk mengetahui kebutuhan pengguna tertentu ketika mereka tiba di situs kami. Sebaliknya, kami harus bangkit untuk memenuhi kebutuhan tersebut. Jika kami benar-benar baik, kami dapat melakukannya tanpa pelanggan kami bahkan menyadari kami membuat pertimbangan khusus untuk mereka. Syukurlah, dengan pengguna peningkatan progresif dan pendekatan yang berfokus pada konten (yang bertentangan dengan pendekatan browser terbaru degradasi anggun), ini mudah dicapai. "
- Aaron Gustafson, Adaptive Web Design, p12 [Edisi PDF tersedia di sini ]
Kesadaran bahwa pekerjaan kita sebagai desainer web adalah untuk beradaptasi dengan pengunjung kita dan tidak memaksa mereka untuk beradaptasi dengan kita - seperti yang mungkin diyakini oleh Apple - adalah perkembangan yang cukup baru dalam desain Web. Menurut pendapat saya, ini adalah semacam kebangkitan: kita telah selesai memilih kebiasaan baik dari desain cetak selama bertahun-tahun. Sekarang kita harus membuang belenggu yang dikenakan dengan bekerja di tempat yang telah ditentukan pada halaman yang dicetak.
Di mana setelah kami memperlakukan browser sebagai kanvas tetap, kami sekarang menerima bahwa tidak ada kanvas yang ditentukan sama sekali, dan ini menjadi semakin jelas dari campuran besar ukuran layar yang Anda pasti mulai melihat dalam statistik pengunjung Anda . Alih-alih memperlakukan setiap perangkat baru sebagai 'ukuran halaman' yang unik untuk ditargetkan (dan kemudian harus mengerahkan pasukan ketika perangkat baru keluar) kita dapat mengikuti konvensi yang lebih tahan-bukti di masa depan.
Kita dapat berpikir dalam hal band - 'besar', 'sedang', dan 'kecil' - alih-alih memikirkan ponsel dan tablet tertentu, kemudian rancang situs untuk terlihat terbaik di band-band itu. Apa pun perangkat baru yang keluar, mereka akan masuk ke dalam satu band atau yang lain, dan - bahkan jika mereka berada tepat di perbatasan antara dua band - kita masih memiliki kontrol lebih besar atas pengalaman daripada jika kita menggunakan fix atau fluid tata letak.
Dalam Desain Web Responsif, Ethan Marcotte menawarkan panggilan untuk mempersenjatai:
"Kita harus melepaskannya.
Daripada membuat desain terputus, masing-masing dirancang untuk perangkat atau browser tertentu, kita malah harus memperlakukan mereka sebagai segi pengalaman yang sama. Dengan kata lain, kita dapat membuat situs yang tidak hanya lebih fleksibel, tetapi juga dapat beradaptasi dengan media yang membuatnya.
Singkatnya, kita perlu berlatih
desain web yang responsif. Kami dapat merangkul fleksibilitas yang melekat pada web, tanpa menyerahkan kontrol yang kami butuhkan sebagai desainer. Semua dengan menanamkan teknologi berbasis standar dalam pekerjaan kami, dan dengan membuat sedikit perubahan dalam filosofi kami terhadap desain online. "
- Ethan Marcotte, Desain Web Responsif, p8 [Edisi PDF tersedia di sini ]
Tapi band apa yang Anda gunakan? Ethan Marcotte merekomendasikan tiga berikut dalam Desain Web Responsif. (Untuk mempelajari apa yang mereka lakukan dan memahami peringatan, Anda mungkin ingin mengambil buku itu. )
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
Ada juga berbagai kerangka kerja CSS yang dirancang untuk membantu membangun situs web adaptif, termasuk Kerangka Kerja Joni Korpi .
Alih-alih menggunakan breakpoint sewenang-wenang, mungkin lebih baik membiarkan desain situs Anda mendikte band. Kurangi lebar layar browser Anda dan, setiap kali desain Anda pecah, lebar itu harus menjadi salah satu "breakpoints" Anda. Terus kurangi lebar dan tambahkan breakpoints dengan kueri media CSS hingga desain Anda terlihat bagus di semua lebar. Dengan begitu, desain Anda akan terlihat bagus di semua perangkat, alih-alih hanya segelintir ukuran layar yang Anda coba gunakan. Jika Anda menggunakan Chrome, menyalakan Alat Pengembang (Lihat> Pengembang> Alat Pengembang) dan mengurangi lebar browser Anda memberi Anda pembacaan bermanfaat dari lebar saat ini di sudut kanan atas yang dapat Anda gunakan untuk mencari tahu di mana breakpoints Anda seharusnya.
Pendekatan populer lain yang perlu dipertimbangkan adalah desain responsif Mobile First , di mana stylesheet inti Anda menangani gaya untuk perangkat terkecil, dan kueri media berurusan dengan lebar layar yang lebih besar, alih-alih sebaliknya. Ini dapat menghasilkan kinerja yang lebih cepat pada perangkat seluler, terutama jika Anda menggunakan banyak gambar latar belakang CSS. (Anda akan membuat breakpoint dengan cara yang sama - mulai saja dengan lebar peramban Anda seminimal mungkin dan bekerja ke atas. Dan jangan lupa untuk menguji sebanyak mungkin perangkat yang bisa Anda dapatkan - pertimbangkan untuk mengunjungi Perangkat Terbuka Lab .)
Singkatnya, ketika itu dilakukan dengan baik, desain adaptif adalah sukacita untuk dilihat dan mengalami baik sebagai perancang web dan pengguna web taman komunal. Ambil situs Arsitek Informasi perusahaan Jepang , misalnya:
Di iPhone
Di iPad
Di iMac
Seperti yang diprediksi oleh Aaron Gustafson, Anda bahkan tidak tahu sedang dilayani sampai Anda melihat desain di halaman yang sama.
Pengalaman itu bisa sangat menyenangkan dalam setiap kasus; Anda tidak perlu memikirkan atau berinteraksi dengan halaman untuk mulai membaca konten, menghabiskan waktu bertanya-tanya mengapa itu terlihat aneh di layar Anda, atau memperbesar untuk melihat elemen navigasi sebelum Anda dapat mengetuknya, karena seseorang sudah memecahkan masalah tersebut untuk kamu. Dan itulah sebabnya desain responsif hampir selalu mengalahkan opsi lain.
Tata letak yang cair adalah yang paling mudah untuk dibuat dan dirawat. Kemudian Anda juga dapat menggunakan stylesheet seluler untuk "memperbaiki" masalah apa pun yang mungkin muncul pada perangkat yang sangat kecil.
sumber
Saya akan menggunakan dua stylesheet.
One thats fleksibel agar sesuai dengan mayoritas pengguna PC desktop biasa.
Lain untuk seluler.
sumber
Pendekatan terbaik yang direkomendasikan saat ini adalah dengan menggunakan apa yang disebut "desain web responsif" di mana Anda harus memenuhi berbagai perangkat dan ukuran / resolusi layar dengan pendekatan tunggal.
Sebuah artikel bagus yang menguraikan bagaimana, apa dan mengapa desain web responsif dapat ditemukan di http://www.mayfielddigital.co.uk/blog/web-round-up/best-responsive-web-design-examples-and- sumber daya /
sumber
Tergantung seberapa besar gaya memengaruhi desain Anda. Ada banyak faktor, persyaratan pelanggan, konten pihak ketiga yang akan membatasi Anda dalam hal ukuran.
Jika Anda dapat membangun situs yang terlihat bagus dan sangat bermanfaat bagi semua pengguna Anda yang berskala apa pun, maka hebat, lakukanlah!
Opsi berikutnya adalah memiliki gaya dengan lebar minimum yang ditentukan oleh elemen tertentu seperti menu vertikal, alat bantu navigasi atau sejenisnya dan memiliki ukuran kolom konten utama untuk mengisi ruang yang tersedia tersisa. Namun, itu tidak selalu mudah tergantung pada konten tertentu (iklan banner, widget, video, dll).
Apa yang sebagian besar situs akhirnya adalah tata letak penyebut umum lebar tetap. Catatan saya TIDAK mengatakan penyebut umum terendah . Jika Anda melihat statistik, baik statistik Anda sendiri maupun yang berasal dari w3schools , Anda akan melihat bahwa 85,1% orang memiliki lebar layar lebih dari 1024 piksel dan 98,9% orang memiliki setidaknya lebar 1024 piksel. Pikirkan tentang kemudahan menerapkan tata letak 1024 piksel lebar dan upaya yang diperlukan sehingga 1,1% lebih banyak orang tidak perlu menggulir secara horizontal dan Anda akan melihat mengapa ini adalah pilihan yang sangat umum untuk situs web yang dirancang.
Tentu saja, pertimbangkan audiens Anda, itu mungkin tidak cocok dengan pengunjung w3schools. Anda juga dapat dengan sengaja mengasingkan lebih banyak pengunjung jika mereka tidak memenuhi kebutuhan Anda. Stuck In Customs dirancang sangat luas karena targetnya adalah orang-orang yang memiliki minat pada gambar dan foto yang sebagian besar bekerja dengan layar besar. Itu juga membuat pengalaman mereka lebih berani.
sumber