Reka bentuk tapak web adaptif ialah sistem yang mudah untuk memaparkan tapak web yang sama pada pelbagai jenis peranti dalam talian. Secara ringkasnya, ini ialah keupayaan untuk melihat satu halaman web pada komputer riba, telefon pintar dan alat lain.
Responsif web telah menjadi satu keperluan sejak orang ramai mendapat alat berdaya Internet dalam pelbagai format. Syarikat, kedai dalam talian, malah hanya tapak bermaklumat berusaha untuk menggembirakan penonton mereka, menyesuaikan diri dengannya dalam setiap cara yang mungkin. Reka bentuk responsif menyelesaikan masalah kemudahan, oleh itu ia adalah item kerja yang sangat diperlukan.
Ciri Reka Bentuk Web Responsif
Kemudahan reka bentuk dicirikan oleh beberapa kriteria utama.
- Saiz. Reka bentuk tapak web responsif harus mempunyai sedikit perbezaan apabila memaparkan halaman pada peranti yang berbeza, jadi saiz imej, teks dan elemen lain yang dilihat harus sepadan dengan saiz peranti itu sendiri. Untuk melakukan ini, pembangun web menyesuaikan reka bentuk supaya mempunyai berbilang versi paparan.
- Penyesuaian kandungan. Bahan yang mengisi tapak (imej, videodan elemen multimedia lain) juga mesti sepadan dengan resolusi skrin yang diperlukan tanpa kehilangan kualiti paparan.
- fleksibiliti reka bentuk. Kemasukan dalam pembangunan elemen yang membolehkan anda melaraskan reka bentuk tapak dengan cepat apabila anda menukar halaman web yang anda lihat. Contohnya, pengguna menatal halaman ke atas dan ke bawah, menavigasi melalui bahagian yang berbeza atau menukar kedudukan skrin daripada menegak kepada mendatar dan sebaliknya.
- Ringkaskan item mengikut peranti untuk kebolehgunaan yang lebih baik.
- Sembunyikan blok yang tidak penting pada skrin yang lebih kecil.
Asas
Pembinaan tapak web pastinya berkaitan dengan bahasa pengaturcaraan, kerana anda tidak boleh melakukannya tanpanya. Menggunakan HTML dan CSS, penyemak imbas mengenali komposisi dan susunan objek (teks, ilustrasi, video) - beginilah cara tapak terbentuk.
CSS bertanggungjawab untuk warna, gaya, saiz, fon, penjajaran, padding, elemen latar belakang, borang, dll. HTML bertanggungjawab untuk keseluruhan kandungan dan struktur tapak. Oleh itu, sumber web dibina dalam agregat dua kaedah penerangan yang paling penting.
CSS, sebaliknya, ialah alat reka bentuk yang sangat diperlukan. Mempunyai set besar ciri yang lebih baik daripada HTML:
- Memberikan ketekalan reka bentuk merentas berbilang halaman, penampilan tapak dan mengawal paparan dokumen HTML.
- Memberi anda peluang untuk melakukan reka bentuk dan kandungan pada masa yang sama.
- Menggunakan pelbagai gaya dan keupayaan untukmelihat pada peranti yang berbeza.
- Membuat keputusan reka bentuk yang rumit.
- Dicirikan oleh kelajuan tinggi.
Untuk membangunkan tapak web, anda perlu mengetahui beberapa konsep asas.
Pemilih CSS dilambangkan dengan nama gaya yang mentakrifkan sifat dan pilihan pemformatan. Ia memberitahu penyemak imbas elemen khusus yang digunakan untuk sifat tersebut.
Hartanah ialah unit struktur. Ia mentakrifkan parameter luaran (saiz, lokasi, warna, bentuk, dll.) dan dinyatakan dalam kod tertentu.
Terdapat satu set sifat CSS yang ditentukan yang menerangkan satu objek dalam rupa dan lokasi.
Bersama-sama, elemen ini membentuk skema berikut:
Pemilih { property1: value; harta2; nilai }.
Saiz dan peleraian reka letak
Pembangunan reka bentuk bermula dengan penyediaan reka letak dalam Photoshop atau program grafik lain. Untuk kemudahan, tanda khas grid modular dimasukkan ke dalam kanvas, inden khas diperhatikan. Oleh itu, pereka web menunjukkan kepada pereka reka letak prinsip penstrukturan tapak masa hadapan dan susunan elemen web yang betul.
Resolusi dan saiz reka bentuk web responsif untuk jenis peranti utama:
- Reka bentuk ini mematuhi prinsip memulakan kerja dengan kebenaran mudah alih. Reka letak untuk telefon pintar dibuat dalam saiz 460 × 960 px.
- Saiz reka letak tablet ialah 768 × 1024.
- Saiz buku nota ialah 1280 × 802.
- saiz PC ialah 1600 × 992.
Dalam versi mudah alih tapakhendaklah semudah mungkin, sambil mengekalkan semua fungsi utama. Jika susun atur sedang disediakan untuk kedai dalam talian, dengan semua penyederhanaan sedang digunakan, ia harus mempunyai penerangan utama, katalog produk, pilihan pesanan, troli beli-belah, dsb. - semua elemen yang diperlukan untuk berfungsi sepenuhnya, seperti paparan format penuh pada PC. Kemudahan versi mudah alih ialah di sini anda boleh mengelakkan halaman tambahan untuk menjimatkan masa semasa memuatkan.
Dalam kandungan adaptif, menggunakan kod html, anda boleh menyembunyikan beberapa elemen yang tidak benar-benar diperlukan. Sebagai contoh, pada resolusi tinggi, tapak memaparkan kad produk dengan penerangan, harga, maklumat penghantaran dan keupayaan untuk menambah pada "Bakul". Dalam peleraian mudah alih, proses dipermudahkan kepada foto, harga dan butang beli.
Resolusi sederhana dan minimum untuk reka bentuk responsif harus mengambil kira kemudahan membaca dan melihat oleh pengguna.
Susun atur
Tujuan susun atur reka bentuk penyesuaian adalah untuk mencipta susun atur yang fleksibel, atau seperti kebiasaan untuk menyebut: "templat getah". Intinya bukan dalam saiz halaman satu digit, tetapi dalam kebolehmampatan berkadar templat untuk mudah dilihat pada semua peranti.
Ia dibina terutamanya pada CSS. Semasa pembangunan, titik kawalan dimensi skrin ditentukan. Oleh itu, lebar objek yang tinggal ditentukan. Untuk melakukan ini, lebar halaman ditetapkan oleh sifat lebar maks css, bergantung pada kriteria ini, saiz elemen lain dipilih sebagai peratusan. Sebagai contoh, saiz blok pada utamahalaman ialah 600px, dan lebar blok bar sisi (bar sisi tapak) ialah 400px, masing-masing, lebar kandungan ialah 60% dan lebar bar sisi 40%.
Terdapat beberapa jenis reka letak responsif. Setiap satu dipilih secara individu, bergantung pada ciri dan pembinaan.
Paparan:
- Jenis reka letak yang membenarkan blok dibalut apabila resolusi skrin dikurangkan. Pada tapak berbilang lajur, blok tambahan dialihkan ke bahagian bawah skrin.
- Apabila corak berasingan diusahakan untuk setiap kebenaran. Reka bentuk responsif jenis ini mengambil masa yang lebih lama tetapi paling mudah dibaca.
- Jenis reka bentuk ringkas yang bertujuan untuk menskalakan semua elemen. Ia tidak fleksibel.
- Jenis panel mudah digunakan dalam aplikasi mudah alih, apabila fungsi tambahan muncul apabila menukar kedudukan skrin itu sendiri.
Membuat lapisan responsif hanyalah satu bahagian daripada tugas. Imej penyesuaian ialah kes berasingan, yang mempunyai masalah dan kaedah tersendiri untuk menyelesaikannya.
Imej tunggal mesti dipaparkan dengan jelas pada resolusi skrin yang berbeza. Terdapat masalah di sini - bagaimana untuk memastikan bahawa gambar sentiasa kekal sama, tanpa mengira perubahan dalam resolusi. Memasukkan kod CSS mudah dalam kes ini tidak akan mencukupi.
Contoh: img {max-width: 250px;} - di sini anda harus menggunakan kaedah di mana saiz bekas yang mengandungi imej adalah terhad, dan bukan imej itu sendiri. Ia akan kelihatan seperti ini: div img {max-width: 250px;}. Kaedah ini menyelesaikan masalahsusun atur imej kecil, tetapi tidak sesuai untuk ilustrasi besar.
Oleh itu, ramai pembangun lebih suka menggunakan bahasa javascript yang membolehkan anda menyesuaikan sebarang imej tanpa membebankan pelayan. Javascript menawarkan sejumlah besar skrip alternatif.
Kebaikan dan keburukan reka letak responsif
Positif:
- Simpan lokasi semua elemen. Ini mudah apabila pengguna terbiasa dengan versi penuh tapak.
- Simpan domain dan alamat.
- Penyesuaian penuh untuk format kebenaran lain.
Negatif:
- Fleksibiliti fungsi hilang
- Sebarang kelebihan bermaklumat dipenuhi dengan pelancaran sumber web yang panjang, yang memaksa ramai pengguna beralih kepada pilihan yang lebih pantas.
Membuat tapak web
Struktur tapak dibahagikan kepada beberapa bahagian dan blok. Secara tradisinya, reka letak terdiri daripada bahagian atas tapak (pengepala), logo, menu, blok kandungan dan bahagian akhir tapak (contohnya, maklumat hubungan terperinci). Mari lihat cara membuat reka bentuk tapak web responsif daripada templat mudah.
Teg tambahan untuk menulis:
- pembungkus - teg yang menggabungkan semua elemen templat;
- header h1 - logo;
- pengepala - pengepala untuk menu dan elemen penting lain;
- kandungan - blok;
- colLeft - saiz kandungan;
- colRight - bar sisi (lajur sisi);
- footer - bahagian akhir tapak;
- skrin media - ditetapkanresolusi yang diingini.
Apabila menulis tapak, elemen ini boleh bergerak dalam susunan yang berbeza, bergantung pada keperluan. Sebagai contoh, pada resolusi tinggi, menu mungkin dipaparkan secara menegak. Dalam versi mudah alih, reka letak boleh dibina sedemikian rupa sehingga menu akan meluncur keluar dalam kedudukan mendatar.
- viewport - teg yang membolehkan anda menyimpan saiz teks dalam versi reka bentuk yang lebih kecil. Ia terletak di antara tag.
- lebar maksimum - untuk mengoptimumkan tapak bagi mengelakkan regangan pada resolusi melebihi 1000 piksel.
Apabila melaksanakan reka letak, perpustakaan jQuery banyak membantu apabila anda perlu menukar gaya dan struktur blok.
Apakah perbezaan antara reka bentuk responsif dan mudah alih
Untuk pemahaman yang lengkap, pertimbangkan beberapa contoh ilustrasi, kerana kekeliruan antara kedua-dua konsep ini bukanlah sesuatu yang luar biasa.
Anda perlu memahami bahawa versi mudah alih adalah analog tapak utama dengan subdomain. Pembentangan luaran tapak mengulang sepenuhnya gaya dan kefungsian, manakala struktur dan kandungannya mungkin berbeza daripada versi utama, kerana versi itu dikurangkan kepada elemen yang diperlukan.
Reka bentuk responsif adalah optimum untuk semua resolusi peranti. Ia boleh berskala dan dipaparkan dengan betul tanpa mengira keadaan tontonan.
Ini adalah dua pembentangan tapak yang berbeza, yang mempertikaikan tanpa jemu yang mana satu lebih baik. Perlu diingatkan bahawa masih belum ada keputusan yang pasti. Seseorang memuji reka bentuk ini, menunjukkan trend fesyen dan banyak kelebihan. Versi mudah alih juga mempunyai beberapa kelebihan yang tidak dimiliki oleh reka bentuk responsif. Oleh itu, sebagai permulaan, anda harus memahami keperluan asas.
Faedah
Bagaimanakah reka bentuk responsif lebih baik daripada mudah alih?
Kepelbagaian. Pada zaman kita, dengan pertumbuhan pasaran yang begitu meriah, adalah perlu untuk menyampaikan maklumat dengan cara yang berbeza, memenuhi kehendak pengguna. Reka bentuk responsif menyelesaikan masalah ini.
Promosi yang berkesan dalam enjin carian. Apa yang tidak boleh dikaitkan dengan kelebihan utama peranti penyesuaian. Enjin carian lebih suka memberikan tapak web responsif kepada pengguna.
Kebolehgunaan. Reka bentuk responsif biasanya direka dalam penyelesaian reka bentuk terbaik, yang merupakan hadiah yang bagus untuk persepsi visual pengguna.
Kemudahan dan kesederhanaan dalam pelaksanaan projek dan penggunaannya.
Kadar penukaran yang baik. Memandangkan dengan reka bentuk penyesuaian terdapat lebih banyak peluang untuk paparan, penukaran itu sendiri meningkat.
Ekonomi. Ia agak lebih murah daripada mencipta dan mempromosikan versi mudah alih yang berasingan.
Kebaikan dan keburukan versi mudah alih
Mencipta reka bentuk mudah alih yang responsif memerlukan serba boleh dan konsisten. Pertama sekali, adalah disyorkan untuk menulis terma rujukan secara terperinci, yang, tentu saja, akan membantu untuk mengelakkan kerja yang tidak perlu dan menjimatkan masa, serta mengambil kira ciri pelayan di mana tapak akan dihoskan..
Terdapat kelebihan dan kekurangan tertentu pada reka bentuk responsif mudah alih.
Kebaikan:
- Jika anda mempunyai tapak yang sudah siap, anda tidak perlu membangunkan reka bentuk untuk versi mudah alih dari awal. Hanya beberapa perubahan boleh dibuat, membebaskan reka letak ini daripada fungsi yang tidak diperlukan.
- Disebabkan semua jenis pemudahan, versi mudah alih dianggap lebih pantas semasa memuat turun.
- Pengguna melihat maklumat yang paling penting dalam semua kandungan.
- Pelaksanaan pantas. Terdapat pemalam yang boleh anda gunakan untuk melaksanakan penyesuaian mudah alih, walaupun anda tidak mengetahui teg dan kod.
- Pilihan enjin carian mengutamakan versi penyesuaian kerana ia mengambil sedikit masa untuk menganalisis.
Keburukan:
- Tidak semua versi mudah alih mungkin sepadan dengan resolusi peranti mudah alih. Tapak ini, sudah tentu, akan dibuka, tetapi resolusi skrin tidak selalu sepadan dengan susun atur. Kadangkala reka bentuk telefon pintar yang direka dengan baik boleh kelihatan berbeza apabila dibuka sebagai tablet.
- Versi mudah alih memerlukan domain berbayar yang berasingan.
- Terdapat beberapa isu kecil dengan menyiarkan kandungan. Jika terdapat beberapa versi sekali gus, kandungan harus dilaraskan untuk semua format sekaligus. Menyerahkan bahan baharu di tapak utama dan menyalinnya ke versi mudah alih boleh dianggap mencuri. Untuk mengelakkan masalah ini, anda mungkin perlu membuktikan sambungan sumber.
Kaedah pelaksanaan
Kaedah pelaksanaan utama:
- Selepas mencipta reka bentuk susun atur dan susun atur, ia dimuatkan ke dimensi yang diperlukan menggunakantapak operator dan kod utama. Ini ialah kaedah klasik yang digunakan semasa membuat versi sederhana dan kecil (tablet, telefon pintar, dll.).
- BootStrap ialah set alat penyesuaian yang ringkas dan jelas. Sesuai untuk mencipta versi untuk Halaman Pendaratan dan projek web lain yang tidak begitu kompleks. Ia memberi peluang yang baik untuk menggunakan banyak gaya berbeza dalam fungsi antara muka.
- Sistem Grid Responsif ialah set alat serba boleh yang popular. Mudah diaplikasikan dan tidak memerlukan pengetahuan yang mendalam. Termasuk pelbagai jenis maklumat grafik.
- GUMBY - Rangka kerja CSS yang mempunyai responsif yang fleksibel dan alatan yang hebat.
- Kuki - membolehkan anda melaksanakan imej responsif. Secara automatik mengiringi fail yang diminta oleh penyemak imbas.
- ExpressionEngine ialah satu lagi cara untuk mencipta imej responsif. Menentukan sama ada peranti mudah alih, mampu menukar imej kepada resolusi yang diperlukan.
- ProtoFluid - Menyediakan prototaip pantas. Sesuai untuk semua jenis peranti.
