Responsivitas situs web adalah kemampuan situs web untuk ditampilkan dengan benar di perangkat yang berbeda dengan karakteristik yang berbeda.
Lebih banyak video di saluran kami - pelajari pemasaran internet dengan SEMANTICA
Saat ini, situs web dilihat di komputer pribadi, tablet, dan ponsel cerdas. Setiap perangkat memiliki karakteristiknya sendiri - kecepatan, resolusi layar.
Jika situs tidak responsif, maka itu akan ditampilkan dengan benar di komputer. Dan di telepon itu bisa "pergi" - blok saling tumpang tindih, font bisa menjadi tidak terbaca.
Istilah responsiveness sendiri sudah banyak digunakan sejak diterbitkannya buku Responsive Web Design - Responsive Web Design karya Ethan Marcot. Situs yang secara dinamis dapat menyesuaikan dengan karakteristik tertentu dari perangkat tampilan telah dikenal sebagai adaptif.
Contoh tata letak responsif
Tampilan di PC:
Di tablet:
Di ponsel cerdas:
Mengapa Anda membutuhkan situs web yang responsif
Teknologi berkembang dengan pesat, dan produsen peralatan tidak jauh di belakang mereka. Ponsel cerdas, tablet, TV, dan perangkat elektronik lain yang terhubung ke Internet tersedia untuk setiap selera dan anggaran, dan ada banyak pilihan ukuran layar.
Pada saat yang sama, konsumsi konten meningkat secara eksponensial. Dalam perjuangan untuk klien, pemilik situs menggunakan segala cara dan metode. Secara khusus, pada tahap pengembangan, mereka memberikan kemungkinan untuk menampilkan sumber daya web mereka dengan benar di berbagai perangkat.
Persentase perangkat yang memungkinkan Anda melihat informasi secara online meningkat setiap tahun. Berbagai format dan resolusi memperumit proses pengembangan secara keseluruhan, persyaratan tambahan harus diperhitungkan di semua tahap: desainer, desainer tata letak, dan pemrogram.
Konsep desain adaptif memungkinkan Anda menyederhanakan proses, karena Anda tidak perlu membuat beberapa varian situs, seperti yang terjadi pada versi seluler di masa lalu. Dalam hal ini, satu set fungsi yang terpisah dirancang pada subdomain yang terpisah.
Situs lama perlu ditingkatkan, dan berbagai pendekatan untuk kemampuan beradaptasi memungkinkan hal ini terwujud. Hal utama adalah menilai skala dengan benar di awal, dalam beberapa kasus lebih mudah, lebih cepat dan lebih murah untuk menggunakan tata letak dan templat desain baru. Jika identitas korporat Anda bukanlah merek yang dapat dikenali, fakta bahwa identitas tersebut sudah usang secara moral sering kali mendorong Anda untuk mengerjakan ulang. Dan rebranding, sebagai tahap transisi ke level baru, belum dibatalkan. Situs web responsif adalah alat yang ampuh untuk bisnis Anda.
Ada layanan untuk memeriksa bagaimana situs memenuhi persyaratan kemampuan beradaptasi.
Selain itu, saat ini mesin pencari terbesar Google dan Yandex memperhitungkan parameter ini saat memberi peringkat situs web. Karena kegunaan, navigasi adalah salah satu faktor wajib untuk mengevaluasi kualitas situs. Kecepatan memuat informasi, dan dalam hal gambar yang dioptimalkan, itu turun, teks yang tidak terbaca dan elemen terdistorsi yang terlalu kecil atau tidak muat di layar membuat sulit untuk menemukan informasi dan hanya menyebabkan peningkatan pantulan - pengguna menutup halaman. Ini adalah faktor perilaku yang juga mempengaruhi posisi dalam hasil pencarian.
Untuk pemilik situs, terminologi teknis dan parameter peringkat tidak sepenuhnya jelas dan kriteria yang nyata. Tetapi cukup bagi mereka untuk memahami bagaimana hal ini mempengaruhi dinamika kehadiran. Di banyak area, pangsa lalu lintas dari perangkat seluler sebanding dan bahkan melebihi lalu lintas desktop. Ini harus diperhitungkan. Semakin sedikit kemungkinan untuk bertemu pengembang yang tidak menawarkan untuk mengadaptasi situs web, tetapi tidak ada salahnya untuk menavigasi masalah ini untuk mengontrol prosesnya.
Prinsip kemampuan beradaptasi
threading
Katakanlah Anda telah mendesain untuk browser desktop. Semuanya keren. Saat melihat situs ini dari perangkat seluler, blok digeser dan masuk ke bawah satu sama lain.
Ini disebut aliran. Dan sekarang ini adalah salah satu prinsip utama yang digunakan dalam desain responsif. Pertimbangkan ini.
Relativitas Satuan
Diketahui dari pelajaran fisika sekolah bahwa kecepatan bisa menjadi mutlak, ketika, terlepas dari mana Anda mengamati gerakannya, kecepatannya akan sama. Dan relatif - ketika, tergantung pada titik referensi, kecepatan dapat berubah.
Sama dengan satuan pengukuran. Perangkat yang berbeda memiliki kepadatan piksel yang berbeda. Dan ukurannya, misalnya, 320 px akan terlihat berbeda di layar komputer dan smartphone.
Solusinya adalah dengan menggunakan unit relatif. Saat Anda mengatur semua ukuran, skala, dan koordinat blok relatif terhadap elemen yang ada di layar PC dan di layar ponsel cerdas. Misalnya, batas atas.
Menggunakan Breakpoint
Ini adalah elemen yang lokasinya berubah hanya jika perangkat tertentu digunakan untuk melihat. parameter yang diberikan layar.
Misalnya, jika konten halaman "merayap", maka masuk akal untuk menambahkan poin seperti itu dan memperbaiki konten.
Nilai minimum dan maksimum
Di ponsel, artikel bisa ditampilkan sebagaimana mestinya. Tapi di sini Anda membuka halaman yang sama di monitor layar lebar, dan gambarnya tidak menyenangkan Anda. Semuanya terbentang, keterbacaan tidak mungkin.
Misalnya, Anda dapat menentukan properti. Jika lebar layar kurang dari 1000 piksel, maka konten harus ditampilkan dalam layar penuh. Jika tidak, lebar maksimumnya adalah 1000 piksel.
Objek bersarang
Kebetulan Anda perlu menggunakan banyak elemen yang bergantung pada posisi blok lain. Sulit untuk dikendalikan. Anda dapat membuat sarang objek seperti itu dalam satu wadah. Ini cocok untuk blok yang tidak ingin Anda sesuaikan dengan parameter layar - tombol, logo, dll.
Font yang Benar
Font web terlihat cantik. Tetapi jangan lupa bahwa semuanya dimuat. Ini memengaruhi kecepatan pemuatan halaman pengguna.
Penggunaan yang tepat dari grafik raster dan vektor
Jika gambar memiliki banyak detail kecil, gunakan format raster. Jika tidak - vektor.
Tetapi tidak ada gambar yang boleh digunakan tanpa optimasi - kompresi. Gambar vektor biasanya sudah dikompresi. Tetapi tidak semua browser lama mendukungnya.
Kepatuhan dengan ukuran tata letak
Ada standar umum tentang dimensi dasar apa yang biasanya menjadi fokus saat mengembangkan tata letak.
Dalam desain responsif, ada yang namanya breakpoint. Ini adalah parameter yang diteruskan dalam fungsi media. Tunjukkan pada resolusi apa desain berubah.
- Untuk seluler 320 piksel, 480 piksel.
- Untuk tablet 768px.
- Untuk netbook dan beberapa tablet 1024px.
- Untuk komputer pribadi 1280px atau lebih.
Mengikat ke resolusi tertentu tidaklah sulit. Tergantung pada pengaturan dan parameter perangkat.
Terkadang tidak perlu membuat layout untuk resolusi menengah, misalnya 480px, jika layout ditampilkan dengan benar dalam kisaran 768 - 320px.
Jika tata letak "rusak" pada gadget tertentu, ditampilkan secara tidak benar pada resolusi yang berbeda, nilai sebenarnya untuk layar ini akan diambil sebagai titik henti.
Pertanyaan Media
Pengembangan situs adaptif didasarkan pada prinsip mendefinisikan parameter gaya menggunakan kueri media (media query).
Permintaan menentukan:
- Jenis perangkat: proyektor, smartphone, monitor, TV, dll.
- Kondisi.
Pada permintaan dan respons yang sesuai, pengaturan tampilan yang sesuai dengan perangkat dari file gaya css akan diterapkan.
Pemeriksaan respons situs web
Anda dapat memeriksa bagaimana situs Anda ditampilkan di perangkat seluler menggunakan berbagai layanan dan alat.
Menggunakan browser
Misalnya, Google Chrome memiliki toolkit bawaan untuk memeriksa desain situs web untuk tampilan yang benar di perangkat seluler. Anda perlu menekan tombol F12 atau Ctrl + Shift + I, atau pilih "Alat Tambahan" - "Alat Pengembang" di Menu.
PADA Mozilla Firefox ini dapat dilakukan dengan cara ini "Menu" - "Pengembangan" - "Desain responsif", atau Ctrl + Shift + M.
Google Mobile Friendly (Google Search Console)
Kami hanya mengetikkan URL lengkap ke dalam string dan mendapatkan hasilnya. Cek biasanya memakan waktu kurang dari satu menit.
Situs web adaptif adalah standar pengembangan web, salah satu indikator kualitas sumber daya Internet dan sikap penuh perhatian terhadap kebutuhan pengguna.
Tata letak adaptif situs memungkinkan halaman web untuk secara otomatis menyesuaikan dengan layar tablet dan smartphone. Lalu lintas Internet Seluler tumbuh setiap tahun, dan untuk memproses lalu lintas ini secara efektif, perlu menawarkan situs adaptif kepada pengguna dengan antarmuka yang ramah pengguna.
Mesin pencari menggunakan sejumlah kriteria untuk mengevaluasi responsivitas situs ketika dilihat di perangkat seluler. Google mencoba menyederhanakan penggunaan Internet untuk pemilik ponsel cerdas dan tablet, menandai penerbitan seluler yang disesuaikan untuk perangkat seluler situs dengan tanda khusus ramah seluler. Yandex juga memiliki algoritme yang memberikan preferensi ke situs dengan versi seluler / adaptif untuk pengguna dalam pencarian seluler.
Anda dapat memeriksa tampilan halaman pada perangkat seluler pada layanan dan.
Beras. 1. Penerbitan Yandex dan Google seluler dengan catatan tentang keramahan situs terhadap perangkat seluler Apa itu tata letak adaptif?
Tata letak adaptif menyiratkan tidak adanya batang horizontal area yang dapat digulir dan dapat diskalakan saat dilihat di perangkat apa pun, teks yang dapat dibaca, dan area yang luas untuk elemen yang dapat diklik. Dengan menggunakan kueri media, Anda dapat mengontrol tata letak dan posisi blok pada halaman, mengatur ulang template sehingga menyesuaikan dengan ukuran layar perangkat yang berbeda.
Teknik utama untuk membuat situs adaptif diberikan dalam artikel. Untuk desain responsif lebar penampung situs utama diatur dalam % , sementara itu bisa sama dengan atau kurang dari 100% lebar jendela peramban. Lebar kolom kisi juga diatur dalam %. PADA desain responsif lebar wadah utama dan kolom kisi ditetapkan menggunakan nilai dalam px .
Teknik tata letak cairan responsif yang dibahas dalam tutorial ini akan bekerja dengan baik pada template dua kolom, menjadikan situs responsif dan ramah seluler. Template mengasumsikan tata letak yang berbeda dari konten utama halaman, dalam pelajaran ini tata letak halaman utama akan dianalisis.
Tata letak halaman utama
Halaman terdiri dari tiga blok utama: header (tajuk), wadah pembungkus untuk konten utama dan bilah sisi, dan footer (footer). Mari kita ambil 768px dan 480px sebagai titik putus desain.
Pada poin pertama, kita akan menyembunyikan menu atas dan memindahkan sidebar di bawah wadah dengan tulisan. Pada poin kedua, kita akan mengubah lokasi elemen header, membatalkan penempatan tombol jejaring sosial di postingan, dan membatalkan pembungkusan kolom footer halaman.
Beras. 2. Contoh tata letak adaptif 1. Tag meta dan bagian
1) Tambahkan ke bagian
file yang diperlukan - tautan ke font yang digunakan, perpustakaan jQuery, serta plugin prefixfree (agar tidak menulis awalan browser untuk properti):
2. Tajuk halaman
Di header halaman
logo ;
tombol untuk menampilkan/menyembunyikan menu utama
