Desain situs web adaptif adalah sistem yang nyaman untuk menampilkan situs web yang sama di berbagai jenis perangkat secara online. Secara sederhana, ini adalah kemampuan untuk melihat satu halaman web di laptop, smartphone, dan gadget lainnya.
Responsivitas web telah menjadi kebutuhan sejak orang mendapatkan gadget berkemampuan internet dalam berbagai format. Perusahaan, toko online, dan bahkan hanya situs informatif berusaha untuk menyenangkan audiens mereka, beradaptasi dengannya dengan segala cara yang mungkin. Desain responsif memecahkan masalah kenyamanan, oleh karena itu merupakan item pekerjaan yang sangat diperlukan.
Karakteristik Desain Web Responsif
Kenyamanan desain ditandai dengan beberapa kriteria utama.
- Ukuran. Desain situs web responsif harus memiliki perbedaan kecil saat menampilkan halaman di perangkat yang berbeda, sehingga ukuran gambar, teks, dan elemen lain yang dilihat harus sesuai dengan ukuran perangkat itu sendiri. Untuk melakukan ini, pengembang web mengadaptasi desain sehingga memiliki beberapa versi tampilan.
- Adaptasi konten. Materi yang mengisi situs (gambar, videodan elemen multimedia lainnya) juga harus sesuai dengan resolusi layar yang diperlukan tanpa kehilangan kualitas tampilan.
- Fleksibilitas desain. Penyertaan dalam pengembangan elemen yang memungkinkan Anda dengan cepat menyesuaikan desain situs saat Anda mengubah halaman web yang Anda lihat. Misalnya, pengguna menggulir halaman ke atas dan ke bawah, menavigasi melalui bagian yang berbeda, atau mengubah posisi layar dari vertikal ke horizontal dan sebaliknya.
- Sederhanakan item menurut perangkat untuk kegunaan yang lebih baik.
- Sembunyikan blok yang tidak penting di layar yang lebih kecil.
Dasar
Pembuatan situs web pasti terkait dengan bahasa pemrograman, karena Anda tidak dapat melakukannya tanpa mereka. Menggunakan HTML dan CSS, browser mengenali komposisi dan urutan objek (teks, ilustrasi, video) - beginilah cara situs terbentuk.
CSS bertanggung jawab atas warna, gaya, ukuran, font, perataan, padding, elemen latar belakang, formulir, dll. HTML bertanggung jawab atas keseluruhan konten dan struktur situs. Dengan demikian, sumber daya web dibangun dalam gabungan dari dua metode deskripsi yang paling penting.
CSS, di sisi lain, adalah alat desain yang sangat diperlukan. Memiliki banyak fitur yang lebih unggul dari HTML:
- Menyediakan konsistensi desain di beberapa halaman, tampilan situs, dan mengontrol tampilan dokumen HTML.
- Memberi Anda kesempatan untuk melakukan desain dan konten secara bersamaan.
- Menerapkan beberapa gaya dan kemampuan untukmelihat di perangkat yang berbeda.
- Membuat keputusan desain yang rumit.
- Dicirikan oleh kecepatan tinggi.
Untuk mengembangkan situs web, Anda perlu mengetahui beberapa konsep dasar.
Pemilih CSS dilambangkan dengan nama gaya yang mendefinisikan properti dan opsi pemformatan. Ini memberi tahu browser elemen spesifik mana yang diterapkan properti.
Properti adalah unit struktural. Ini mendefinisikan parameter eksternal (ukuran, lokasi, warna, bentuk, dll.) dan dinyatakan dalam kode tertentu.
Ada satu set properti CSS yang ditentukan yang menggambarkan satu objek dalam penampilan dan lokasi.
Bersama-sama, elemen-elemen ini membentuk skema berikut:
Pemilih { property1: nilai; properti2; nilai }.
Ukuran dan resolusi tata letak
Pengembangan desain dimulai dengan persiapan layout di Photoshop atau program grafis lainnya. Untuk kenyamanan, tanda khusus dari kisi modular dimasukkan ke dalam kanvas, lekukan khusus diamati. Dengan demikian, perancang web menunjukkan kepada perancang tata letak prinsip-prinsip penataan situs masa depan dan pengaturan elemen web yang benar.
Resolusi dan ukuran desain web responsif untuk jenis perangkat utama:
- Desain ini menganut prinsip mulai bekerja dengan izin seluler. Tata letak untuk smartphone dibuat dalam ukuran 460 × 960 px.
- Ukuran tata letak tablet adalah 768 × 1024.
- Ukuran notebook adalah 1280 × 802.
- Ukuran PC adalah 1600 × 992.
Dalam versi seluler situsharus disederhanakan mungkin, sambil mempertahankan semua fungsi utama. Jika tata letak sedang disiapkan untuk toko online, dengan semua penyederhanaan yang digunakan, itu harus memiliki deskripsi utama, katalog produk, opsi pemesanan, keranjang belanja, dll. - semua elemen yang diperlukan untuk berfungsi penuh, seperti tampilan format penuh pada PC. Kenyamanan versi seluler adalah di sini Anda dapat menghindari halaman tambahan untuk menghemat waktu saat memuat.
Dalam konten adaptif, dengan menggunakan kode html, Anda dapat menyembunyikan beberapa elemen yang tidak terlalu dibutuhkan. Misalnya, pada resolusi tinggi, situs menampilkan kartu produk dengan deskripsi, harga, informasi pengiriman, dan kemampuan untuk menambahkan ke "Keranjang". Dalam resolusi seluler, prosesnya disederhanakan menjadi foto, harga, dan tombol beli.
Resolusi menengah dan minimum untuk desain responsif harus mempertimbangkan kemudahan membaca dan melihat oleh pengguna.
Tata Letak
Tujuan tata letak desain adaptif adalah untuk membuat tata letak yang fleksibel, atau seperti yang biasa dikatakan: "templat karet". Intinya tidak dalam ukuran halaman satu digit, tetapi dalam kompresibilitas proporsional dari template agar mudah dilihat di semua perangkat.
Ini dibangun terutama di atas CSS. Selama pengembangan, titik kontrol dimensi layar ditentukan. Dengan demikian, lebar objek yang tersisa ditentukan. Untuk melakukan ini, lebar halaman diatur oleh properti max-width css, tergantung pada kriteria ini, ukuran elemen lain dipilih sebagai persentase. Misalnya, ukuran blok di mainhalaman 600px, dan lebar blok sidebar (site sidebar) adalah 400px, lebar konten akan menjadi 60%, dan lebar sidebar 40%.
Ada beberapa jenis tata letak responsif. Masing-masing dipilih secara individual, tergantung pada fitur dan konstruksinya.
Tampilan:
- Jenis tata letak yang memungkinkan blok untuk membungkus saat resolusi layar dikurangi. Di situs multi-kolom, blok tambahan dipindahkan ke bagian bawah layar.
- Saat pola terpisah dibuat untuk setiap izin. Jenis desain responsif ini membutuhkan waktu lebih lama tetapi paling mudah dibaca.
- Jenis desain sederhana yang bertujuan untuk menskalakan semua elemen. Itu tidak fleksibel.
- Jenis panel nyaman digunakan dalam aplikasi seluler, ketika fungsi tambahan muncul saat mengubah posisi layar itu sendiri.
Membuat lapisan responsif hanyalah salah satu bagian dari pekerjaan. Gambar adaptif adalah kasus terpisah, yang memiliki masalah dan metode tersendiri untuk menyelesaikannya.
Gambar tunggal harus ditampilkan dengan jelas pada resolusi layar yang berbeda. Ada masalah di sini - bagaimana memastikan bahwa gambar selalu tetap sama, terlepas dari perubahan resolusi. Memasukkan kode CSS sederhana dalam kasus ini tidak akan cukup.
Contoh: img {max-width: 250px;} - di sini Anda harus menerapkan metode di mana ukuran wadah yang berisi gambar dibatasi, dan bukan gambar itu sendiri. Ini akan terlihat seperti ini: div img {max-width: 250px;}. Metode ini memecahkan masalahtata letak gambar kecil, tetapi tidak cocok untuk ilustrasi besar.
Oleh karena itu, banyak pengembang lebih suka menggunakan bahasa javascript yang memungkinkan Anda untuk mengadaptasi gambar apa pun tanpa membebani server. Javascript menawarkan sejumlah besar skrip alternatif.
Pro dan kontra dari tata letak responsif
Positif:
- Simpan lokasi semua elemen. Ini nyaman ketika pengguna terbiasa dengan versi lengkap situs.
- Simpan domain dan alamat.
- Kustomisasi penuh untuk format izin lainnya.
Negatif:
- Fleksibilitas fungsional hilang
- Informasi yang berlebihan dipenuhi dengan peluncuran panjang sumber daya web, yang memaksa banyak pengguna untuk beralih ke opsi yang lebih cepat.
Membuat situs web
Struktur situs dibagi menjadi beberapa bagian dan blok. Secara tradisional, tata letak terdiri dari bagian atas situs (tajuk), logo, menu, blok konten, dan bagian akhir situs (misalnya, informasi kontak terperinci). Mari kita lihat cara membuat desain website responsive dari template sederhana.
Tag bantu untuk menulis:
- wrapper - tag yang menggabungkan semua elemen template;
- header h1 - logo;
- header - header untuk menu dan elemen penting lainnya;
- konten - blok;
- colLeft - ukuran konten;
- colKanan - bilah sisi (kolom samping);
- footer - bagian akhir situs;
- layar media - setresolusi yang diinginkan.
Saat menulis situs, elemen-elemen ini dapat bergerak dalam urutan yang berbeda, tergantung pada kebutuhan. Misalnya, pada resolusi tinggi, menu mungkin ditampilkan secara vertikal. Di versi seluler, tata letak dapat dibangun sedemikian rupa sehingga menu akan meluncur keluar dalam posisi horizontal.
- viewport - tag yang memungkinkan Anda menyimpan ukuran teks dalam versi desain yang lebih kecil. Itu terletak di antara tag.
- max-width - untuk mengoptimalkan situs agar tidak melebar pada resolusi lebih dari 1000 piksel.
Saat menerapkan tata letak, perpustakaan jQuery banyak membantu saat Anda perlu mengubah gaya dan struktur blok.
Apa perbedaan antara desain responsif dan seluler
Untuk pemahaman yang lengkap, pertimbangkan beberapa contoh ilustrasi, karena kebingungan antara kedua konsep ini tidak jarang terjadi.
Anda perlu memahami bahwa versi seluler adalah analog dari situs utama dengan subdomain. Presentasi eksternal situs sepenuhnya mengulangi gaya dan fungsionalitas, sementara struktur dan kontennya mungkin berbeda dari versi utama, karena versi dipotong menjadi elemen yang diperlukan.
Desain responsif optimal untuk semua resolusi perangkat. Ini dapat diskalakan dan ditampilkan dengan benar terlepas dari kondisi tampilan.
Ini adalah dua presentasi situs yang berbeda, di mana perselisihan tanpa lelah mengamuk, mana yang lebih baik. Perlu dicatat bahwa belum ada keputusan pasti yang dicapai. Seseorang memuji desain ini, menunjukkan tren mode dan banyak keuntungan. Versi mobile juga memiliki beberapa keunggulan yang tidak dimiliki oleh desain responsif. Oleh karena itu, untuk memulainya, Anda harus memahami kebutuhan dasar.
Manfaat
Bagaimana desain responsif lebih baik daripada seluler?
Fleksibilitas. Di zaman kita, dengan pertumbuhan pasar yang begitu hiruk pikuk, hanya perlu menyajikan informasi dengan cara yang berbeda, memuaskan keinginan konsumen. Desain responsif memecahkan masalah ini.
Promosi efektif di mesin pencari. Apa yang tidak dapat dikaitkan dengan keunggulan utama perangkat adaptif. Mesin pencari lebih suka memberikan situs web yang responsif kepada pengguna.
Kegunaan. Desain responsif biasanya dirancang dalam solusi desain terbaik, yang merupakan hadiah yang bagus untuk persepsi visual pengguna.
Kemudahan dan kesederhanaan baik dalam pelaksanaan proyek maupun dalam penggunaannya.
Tingkat konversi bagus. Karena dengan desain adaptif ada lebih banyak peluang untuk ditampilkan, konversi itu sendiri meningkat.
Ekonomi. Ini relatif lebih murah daripada membuat dan mempromosikan versi seluler terpisah.
Pro dan kontra dari versi seluler
Membuat desain seluler yang responsif membutuhkan keserbagunaan dan konsistensi. Pertama-tama, disarankan untuk menulis kerangka acuan secara rinci, yang, tentu saja, akan membantu menghindari pekerjaan yang tidak perlu dan menghemat waktu, serta mempertimbangkan fitur server tempat situs akan dihosting..
Ada kelebihan dan kekurangan tertentu dari desain responsif seluler.
Kelebihan:
- Jika Anda memiliki situs yang sudah jadi, Anda tidak perlu mengembangkan desain untuk versi seluler dari awal. Hanya sedikit perubahan yang dapat dilakukan, membebaskan tata letak ini dari fungsionalitas yang tidak diperlukan.
- Karena segala macam penyederhanaan, versi seluler dianggap lebih cepat saat mengunduh.
- Pengguna melihat informasi terpenting di semua konten.
- Implementasi cepat. Ada plugin yang dapat Anda gunakan untuk menerapkan adaptasi seluler, meskipun Anda tidak mengetahui tag dan kode.
- Pilihan mesin telusur menyukai versi adaptif karena membutuhkan lebih sedikit waktu untuk menganalisis.
Kekurangan:
- Tidak semua versi seluler mungkin cocok dengan resolusi perangkat seluler. Situs, tentu saja, akan terbuka, tetapi resolusi layar tidak selalu sesuai dengan tata letak. Terkadang desain smartphone yang dirancang dengan baik dapat terlihat berbeda saat dibuka sebagai tablet.
- Versi seluler memerlukan domain berbayar terpisah.
- Ada beberapa masalah kecil dengan konten posting. Jika ada beberapa versi sekaligus, konten harus disesuaikan untuk semua format sekaligus. Mengirimkan materi baru di situs utama dan menyalinnya ke versi seluler dapat dianggap mencuri. Untuk menghindari masalah ini, Anda mungkin harus membuktikan koneksi sumber daya.
Metode implementasi
Metode implementasi utama:
- Setelah membuat desain tata letak dan tata letak, itu dimuat ke dimensi yang diperlukan menggunakansitus operator dan kode utama. Ini adalah metode klasik yang digunakan saat membuat versi menengah dan kecil (tablet, smartphone, dll.).
- BootStrap adalah seperangkat alat adaptasi yang sederhana dan jelas. Cocok untuk membuat versi untuk Landing Page dan proyek web lain yang tidak terlalu rumit. Ini memberikan kesempatan yang baik untuk menerapkan banyak gaya yang berbeda dalam fungsi antarmuka.
- Responsive Grid System adalah seperangkat alat serbaguna yang populer. Mudah diterapkan dan tidak membutuhkan pengetahuan yang mendalam. Termasuk berbagai macam infografis.
- GUMBY - Kerangka kerja CSS yang menawarkan responsivitas yang fleksibel dan alat yang hebat.
- Cookies - memungkinkan Anda menerapkan gambar responsif. Secara otomatis menyertai file yang diminta oleh browser.
- ExpressionEngine adalah cara lain untuk membuat gambar responsif. Menentukan apakah perangkat mobile, mampu mengubah gambar ke resolusi yang diperlukan.
- ProtoFluid - Menyediakan pembuatan prototipe cepat. Cocok untuk semua jenis perangkat.
