Reka letak penyesuaian mengubah reka bentuk halaman bergantung pada tingkah laku pengguna, platform, saiz skrin dan orientasi peranti dan merupakan bahagian penting dalam pembangunan web moden. Ia membolehkan anda menyimpan dengan ketara dan tidak perlu melukis reka bentuk baharu untuk setiap resolusi, tetapi menukar saiz dan lokasi elemen individu.
Artikel ini akan melihat elemen utama tapak dan cara menyesuaikannya.
Melaraskan resolusi skrinPada dasarnya, anda boleh membahagikan peranti ke dalam kategori dan reka bentuk yang berbeza untuk setiap daripadanya secara berasingan, tetapi ini akan mengambil terlalu banyak masa, dan siapa tahu piawaian apa yang akan ada dalam tempoh lima tahun? Selain itu, mengikut statistik, kami mempunyai pelbagai jenis resolusi yang berbeza:
Ia menjadi jelas bahawa kami tidak akan dapat meneruskan mereka bentuk untuk setiap peranti secara berasingan. Tetapi apa yang perlu dilakukan kemudian?
Penyelesaian separa: jadikan semuanya fleksibelSudah tentu, ini bukan kaedah yang sempurna, tetapi ia menghapuskan kebanyakan masalah.
Ethan Marcotte mencipta templat ringkas yang menunjukkan penggunaan reka letak responsif:
Pada pandangan pertama ia mungkin kelihatan bahawa segala-galanya mudah, tetapi tidak. Lihat logo:
Jika anda mengurangkan keseluruhan imej, inskripsi akan menjadi tidak boleh dibaca. Oleh itu, untuk menyimpan logo, gambar dibahagikan kepada dua bahagian: bahagian pertama (ilustrasi) digunakan sebagai latar belakang, yang kedua (logo) menukar saiznya secara berkadar.
Elemen h1 mengandungi imej sebagai latar belakang dan imej itu diselaraskan dengan latar belakang bekas (pengepala).
Imej fleksibelBekerja dengan imej adalah salah satu masalah yang paling penting apabila bekerja dengan reka bentuk responsif. Terdapat banyak cara untuk mengubah saiz imej, dan kebanyakannya agak mudah untuk dilaksanakan. Satu penyelesaian ialah menggunakan lebar maksimum dalam CSS:
Img (lebar maksimum: 100%;)
Lebar maksimum imej ialah 100% daripada lebar skrin atau tetingkap penyemak imbas, jadi semakin kecil lebarnya, semakin kecil imej tersebut. Ambil perhatian bahawa max-width tidak disokong dalam IE, jadi gunakan width: 100% .
Kaedah yang dibentangkan adalah pilihan yang baik untuk mencipta imej penyesuaian, tetapi dengan menukar saiz sahaja, kami akan membiarkan berat imej yang sama, yang akan meningkatkan masa pemuatan pada peranti mudah alih.
Cara lain: imej responsifTeknik yang diperkenalkan oleh Kumpulan Filamen, bukan sahaja mengubah saiz imej, tetapi juga memampatkan resolusi imej pada skrin kecil untuk mempercepatkan pemuatan.
Teknik ini memerlukan beberapa fail yang tersedia di Github. Mula-mula kita ambil fail JavaScript ( rwd-images.js), fail .htaccess Dan rwd.gif(fail imej). Kemudian kami menggunakan beberapa HTML untuk mengaitkan resolusi besar dan kecil: pertama imej kecil dengan awalan .r(untuk menunjukkan bahawa imej harus responsif), kemudian paut ke imej besar menggunakan data-fullsrc:
Untuk mana-mana skrin yang lebih lebar daripada 480 px, imej resolusi yang lebih tinggi akan dimuatkan ( largeRes.jpg), dan pada skrin kecil ia akan dimuatkan ( smallRes.jpg).
iPhone dan iPod Touch mempunyai ciri: reka bentuk yang dibuat untuk skrin besar hanya akan mengecut dalam penyemak imbas resolusi rendah tanpa menatal atau susun atur mudah alih tambahan. Walau bagaimanapun, imej dan teks tidak akan kelihatan:
Untuk menyelesaikan masalah ini, gunakan tag meta:
Jika skala awal sama dengan satu, lebar imej menjadi sama dengan lebar skrin.
Struktur susun atur halaman boleh disesuaikanUntuk perubahan ketara dalam saiz halaman, anda mungkin perlu menukar susunan keseluruhan elemen. Ini boleh dilakukan dengan mudah melalui fail gaya yang berasingan atau, dengan lebih cekap, melalui pertanyaan media CSS. Seharusnya tidak ada masalah kerana kebanyakan gaya akan tetap sama dan hanya sedikit yang akan berubah.
Contohnya, anda mempunyai fail gaya utama yang menentukan #wrapper , #content , #sidebar , #nav bersama-sama dengan warna, latar belakang dan fon. Jika gaya induk anda menjadikan reka letak anda terlalu sempit, pendek, lebar atau tinggi, anda boleh mengenal pasti perkara ini dan memasukkan gaya baharu.
style.css (utama):
/* Gaya asas yang akan diwarisi oleh helaian gaya kanak-kanak */ html,body( background... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Elemen struktur */ #wrapper( width: 80%; margin: 0 auto; background: #fff; padding: 20px; ) #content( width: 54%; float: left; margin-right: 3%; ) # bar sisi-kiri( lebar: 20%; terapung: kiri; jidar-kanan: 3%; ) #bar sisi-kanan( lebar: 20%; terapung: kiri; )
mobile.css (kanak-kanak):
#wrapper( width: 90%; ) #content( width: 100%; ) #sidebar-left( width: 100%; clear: both; /* Gaya tambahan untuk reka bentuk baharu */ border-top: 1px solid #ccc ; margin-top: 20px; ) #sidebar-right( width: 100%; clear: both; /* Penggayaan tambahan untuk reka letak baharu kami */ border-top: 1px solid #ccc; margin-top: 20px; )
Pada skrin lebar, bar sisi kiri dan kanan muat dengan baik ke sisi. Pada skrin yang lebih sempit, blok ini terletak satu di bawah yang lain untuk kemudahan yang lebih baik.
Pertanyaan media CSS3Mari lihat bagaimana anda boleh menggunakan pertanyaan media CSS3 untuk mencipta reka bentuk responsif. min-width menentukan lebar minimum tetingkap atau skrin penyemak imbas yang mana gaya tertentu akan digunakan. Jika sebarang nilai di bawah lebar min , gaya akan diabaikan. max-width melakukan sebaliknya.
@media skrin dan (min-lebar: 600px) ( .hereIsMyClass ( lebar: 30%; terapung: kanan; ) )
Pertanyaan media hanya akan berfungsi apabila lebar min lebih besar daripada atau sama dengan 600 px.
skrin @media dan (lebar maksimum: 600px) ( .aClassforSmallScreens ( jelas: kedua-duanya; saiz fon: 1.3em; ) )
Dalam kes ini kelas ( aClassforSmallscreens) akan berfungsi apabila lebar skrin kurang daripada atau sama dengan 600 px.
Walaupun lebar min dan lebar maks boleh digunakan pada lebar skrin dan lebar tetingkap penyemak imbas, kami mungkin hanya perlu menggunakan lebar peranti. Sebagai contoh, untuk mengabaikan pelayar dibuka dalam tetingkap kecil. Anda boleh menggunakan min-device-width dan max-device-width untuk ini:
Skrin @media dan (lebar-peranti-maks: 480px) ( .classForiPhoneDisplay ( saiz fon: 1.2em; ) ) skrin @media dan (lebar-peranti-min: 768px) ( .minimumiPadWidth ( jelas: kedua-duanya; margin-bawah : 2px pepejal #ccc; ) )
Terutamanya untuk iPad, pertanyaan media mempunyai sifat orientasi, yang nilainya boleh sama ada landskap(mendatar), atau potret(menegak):
@media skrin dan (orientasi: landskap) ( .iPadLandscape ( lebar: 30%; apungan: kanan; ) ) @media skrin dan (orientasi: potret) ( .iPadPortrait ( jelas: kedua-duanya; ) )
Anda juga boleh menggabungkan nilai pertanyaan media:
@media skrin dan (min-lebar: 800px) dan (max-lebar: 1200px) ( .classForaMediumScreen ( latar belakang: #cc0000; lebar: 30%; apungan: kanan; ) )
Kod ini hanya akan dilaksanakan untuk skrin atau tetingkap penyemak imbas antara 800 dan 1200 px lebar.
Anda boleh memuatkan helaian tertentu dengan gaya untuk nilai pertanyaan media yang berbeza seperti ini:
JavaScript
Jika pelayar anda tidak menyokong pertanyaan media CSS3, maka penggantian gaya boleh dilakukan menggunakan jQuery:
$(document).ready(function())( $(window).bind("resize", resizeWindow);function resizeWindow(e)( var newWindowWidth = $(window).width(); // Jika lebar ialah kurang daripada 600 px , lembaran gaya mudah alih digunakan jika(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Jika lebar lebih besar daripada 600 px, helaian gaya desktop digunakan $("link").attr((href: "style.css")); ) ) ));
Paparan kandungan pilihanKeupayaan untuk mengecil dan menyusun semula elemen agar muat pada skrin kecil adalah hebat. Tetapi ini bukan pilihan terbaik. Peranti mudah alih biasanya menampilkan set perubahan yang lebih luas: navigasi yang dipermudahkan, kandungan yang lebih fokus, senarai atau baris dan bukannya lajur.
Nasib baik, CSS memberi kita keupayaan untuk menunjukkan dan menyembunyikan kandungan dengan mudah yang luar biasa.
Paparan: tiada;
paparan: tiada digunakan untuk objek yang perlu disembunyikan.
Inilah markah kami:
Kandungan Utama Bar Sisi Kiri Bar Sisi Kanan
style.css (utama):
#content( width: 54%; float: left; margin-right: 3%; ) #sidebar-left( width: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20 %; float: left; ) .sidebar-nav( paparan: tiada; )
mobile.css (dipermudahkan):
#content( width: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )
Jika saiz skrin dikecilkan, anda boleh, sebagai contoh, menggunakan skrip atau fail penggayaan alternatif untuk menambah ruang putih atau menggantikan navigasi untuk lebih mudah. Oleh itu, mempunyai keupayaan untuk menyembunyikan dan menunjukkan elemen, menukar saiz gambar, elemen dan banyak lagi, anda boleh menyesuaikan reka bentuk kepada mana-mana peranti dan skrin.
Cara Yandex menggunakan data dan pembelajaran mesin anda untuk memperibadikan perkhidmatan -.
Pada masa ini, kira-kira 11-12% daripada 100,000 tapak yang paling banyak dilawati adalah responsif, dan tidak syak lagi bahawa jumlah ini akan meningkat dalam beberapa tahun akan datang.
Memandangkan lebih banyak organisasi menyingsing lengan baju mereka untuk menerima realiti web merentas berbilang peranti, adalah wajar untuk melihat strategi berbeza yang digunakan untuk mencapai nirwana itu:
Pemodenan adaptifReka bentuk semula responsif ialah proses mengambil tapak web desktop sahaja sedia ada dan pada asasnya "mengubah suainya responsif."
Apabila bercakap tentang tapak siap sedia (terutamanya yang komersial), pasukan tidak selalunya mempunyai peluang untuk membuang segala-galanya dan membina semula.
Dan Cederholm
Bagi kebanyakan organisasi, penciptaan reka bentuk baharu berskala besar dari awal tidak dipertimbangkan. Inilah sebabnya mengapa pemodenan responsif ialah pendekatan popular untuk mencipta pengalaman yang baik untuk peranti mudah alih.
Kelebihan- Agak cepat.
Terdapat beberapa cara untuk melakukan pemodenan responsif, strategi ini boleh menambah fail small-screens.css ke tapak. Walaupun contoh yang agak kasar ini, pemodenan adaptif adalah pilihan yang menarik untuk sebilangan besar organisasi kerana ia tidak memerlukan membina semula segala-galanya dari awal. - Biasa.
Tidak mengelirukan pengguna. Orang ramai telah menghabiskan masa bertahun-tahun membiasakan diri dengan antara muka, dan dengan memodenkan yang sedia ada, organisasi mengekalkan pendekatan biasa sambil meningkatkan kehidupan orang yang menggunakan peranti mudah alih. - Secara organisasi lebih cepat.
Dari segi politik, memodenkan antara muka adalah lebih selamat daripada bermula dari awal. Akan ada kurang perdebatan tentang warna hijau yang hendak dipilih, gambar stok remeh apa yang hendak digunakan, dan pihak pengurusan tidak perlu memutarkan tangan mereka. Ini membolehkan pasukan melancarkan tapak responsif dengan lebih pantas.
- Hanya menjejaskan sebahagian kecil.
Sekali lagi, terdapat banyak pilihan untuk melakukan pengubahsuaian, tetapi matlamat kebanyakan daripada mereka adalah untuk "menjadikannya cantik." Dengan memfokuskan pada mereka bentuk semula reka letak, reka bentuk semula sering terlepas pelbagai faktor lain yang perlu dipertimbangkan semasa mencipta reka bentuk yang berjaya untuk pelbagai peranti. - 10 liter air dalam balang tiga liter.
Memandangkan tapak desktop direka bentuk hanya untuk komputer desktop (dan selalunya bertahan lama), ia boleh mengandungi banyak kekacauan. Dan kerana pemodenan terutamanya terdiri daripada mencairkan semula susun atur, kebanyakan masalah dengan kandungan tidak diambil kira sepenuhnya. - Prestasi.
Terdapat sesuatu yang pelik tentang menulis kod untuk menyokong peranti kecil dengan lebih baik. Mengalih keluar bahan yang tidak perlu boleh pergi terlalu jauh, tetapi tanpa memfokuskan pada produktiviti, ia tidak akan berkembang dengan sendirinya. - Sokongan paling teruk.
Pertanyaan media, yang asalnya direka bentuk untuk komputer meja, kurang disokong pada kebanyakan peranti mudah alih. - Pembetulan sementara.
Saya rasa seperti mati apabila saya mendengar orang meminta saya untuk "membuat responsif" sesuatu, seolah-olah ia hanya kotak pilihan dalam rancangan projek (yang kadang-kadang ia sebenarnya). Jenis pemikiran terhad ini terlepas peluang sebenar yang ditawarkan oleh reka bentuk responsif.
Tapak web mudah alih responsif, atau seperti yang saya panggil "benih untuk masa depan yang responsif," adalah amalan mencipta tapak web berasingan dalam format "m.yourdomain.ru" menggunakan teknik reka bentuk responsif. Tapak seperti The BBC, The Guardian dan Entertainment Weekly (yang saya usahakan) menggunakan strategi ini.
Versi mudah alih memberi anda peluang untuk menanam benih yang akan tumbuh dari tapak web warisan anda.
Lama kelamaan, tapak yang lapuk boleh dialih keluar dan tapak itu akan berubah daripada menjadi yang diutamakan mudah alih, responsif dan mengambil kira arah aliran masa hadapan.
- Risiko yang lebih rendah.
Kebanyakan organisasi masih melihat trafik daripada peranti mudah alih sebagai minoriti. Jadi pelancaran tapak web responsif mudah alih membolehkan organisasi ini menguji keadaan tanpa perlu memasuki tajuk topik terlebih dahulu. - Peluang untuk belajar menjadi fleksibel.
Pereka boleh belajar berfikir dengan lebih fleksibel. Pembangun akan mempelajari pelbagai helah peranti Android. Pengurus boleh memikirkan cara untuk beralih daripada kesempurnaan piksel. Tapak mudah alih responsif boleh menjadi kotak pasir yang bagus untuk pembelajaran. - Infrastruktur.
Pasukan boleh belajar cara menyelesaikan masalah pengurusan kandungan, seperti penciptaan imej, sekali dan untuk semua - Buang lebihan.
Pendekatan ini menawarkan peluang yang baik untuk pasukan bertanya kepada diri sendiri "adakah kita benar-benar memerlukan ini" sambil turut memfokuskan pada prestasi. kenapa? Kerana tumpuan utama mereka adalah untuk meningkatkan pengalaman pengguna tapak mereka pada peranti mudah alih. - Masa depan ialah tapak web yang mengutamakan mudah alih.
Walaupun pada mulanya kekurangan kandungan atau fungsi, dengan masa dan usaha yang mencukupi, tapak mudah alih ini akhirnya boleh menggantikan nenek moyang halaman penuh mereka.
- Ia masih tapak mudah alih.
Sama ada ia responsif atau tidak, pendekatan ini masih mengekalkan sejumlah besar kelemahan tapak mudah alih: masalah dengan pengalihan URL, pengurusan kandungan, kandungan yang konsisten, konsistensi, pengoptimuman SEO dan lain-lain. - Pembetulan sementara.
Banyak tapak mudah alih dicipta sebagai Band-Aid - untuk menghentikan pendarahan. Laman web sedemikian dicipta dengan tujuan untuk memunggah trafik yang semakin meningkat yang datang dari peranti mudah alih. Penyelesaian ini mungkin masih memenuhi keperluan sedia ada, tetapi memandangkan arah aliran masa hadapan, penyelesaian ini tidak mungkin dapat menyelamatkan anda dalam jangka masa panjang. - Kemungkinan layu pada pokok anggur.
Sesetengah organisasi mungkin memulakan projek sedemikian, mencapai separuh jalan, dan kemudian meninggalkan keseluruhannya sehingga bajet tahun depan diluluskan. - Reka bentuk untuk skrin kecil.
Memandangkan tumpuan awal adalah pada skrin kecil, kemudian mengalihkan antara muka ke paparan yang lebih besar tanpa kehilangan kualiti boleh menjadi satu cabaran.
JavaScript dilumpuhkan dalam penyemak imbas anda
“Selama bertahun-tahun kami telah mengusahakan antara muka produk, cuba menjadikannya mudah dan mudah untuk pengguna dalam kerja harian mengurus tapak. Kami juga mengambil kira kepentingan pembangun web, yang menghadapi tugas sukar untuk mencipta tapak web berfungsi dengan cepat dengan pelbagai jenis reka bentuk.
Dan tidak kira berapa banyak yang kami harapkan, setiap pelanggan akan menginginkan reka bentuk dan struktur tapaknya sendiri. Dan, sudah tentu, semua orang mahu tapak dibuka dengan cepat dan dapat mengendalikan trafik yang tinggi. Menyelesaikan masalah ini langkah demi langkah, kami membangunkan konsep yang menggabungkan teknologi dan penyelesaian antara muka, dan memanggilnya "1C-Bitrix: Hermitage"
"Pertapaan" ialah: Reka bentuk semula "hud" - Re:HermitageAntara muka bahagian pentadbiran produk adalah bergaya dan ekspresif, tetapi yang paling penting, ia boleh difahami pada pandangan pertama dan tidak memerlukan latihan. Bekerja dengan "panel pentadbir" adalah menyenangkan dan mudah. Reka bentuk ini disesuaikan untuk berfungsi dengan antara muka skrin sentuh peranti mudah alih - telefon pintar dan tablet.
Reka bentuk bahagian pentadbiran
Konsep reka bentuk dibangunkan oleh AIC. Antara muka pintar adalah menyenangkan dari segi estetika dan membangkitkan emosi yang menyenangkan serta-merta apabila pandang pertama pada "panel pentadbir". Walaupun dengan kenalan pantas dengan "panel pentadbir", anda boleh mengenal pasti kawalan utama dengan cepat, memahami operasinya dan mengurangkan masa latihan dengan ketara.
Kawalan
Konsep antara muka pengurusan laman web Pengurusan maklumat ialah kerja harian, dan kami melakukan segala-galanya untuk menjadikan kerja ini menyeronokkan! Setiap versi baharu produk mengambil langkah untuk membangunkan Panel Kawalan. Ini mengambil kira pengalaman menggunakan panel ini oleh kedua-dua pembangun dan pelanggan 1C-Bitrix. Hasilnya, Panel Kawalan bertambah baik - ia memperoleh bukan sahaja rupa baharu, tetapi juga keupayaan baharu.Panel ini mengandungi dua penanda halaman, yang mana anda boleh menukar dan mengurus kandungan dengan mudah di tempat yang anda perlukan. Sudah tentu, Panel Kawalan dan kedua-dua modnya hanya tersedia untuk pengguna berdaftar, dan muncul serta-merta sebaik sahaja anda log masuk ke tapak.
Panel kawalan tapak. Antara muka "Hermitage"
Pengurusan tapak dibahagikan kepada dua mod utama:
Mod kerja "Di atas tapak"
"Hermitage" dari segi pengurusan merangkumi fungsi berikut:
Kefungsian Panel Kawalan dalam rangka kerja 1C-Bitrix: Konsep Hermitage Sila ambil perhatian bahawa kefungsian Panel Kawalan bergantung pada hak yang diberikan kepada anda sebagai pengguna tapak. Tetapi anda boleh pergi ke bahagian Pentadbiran dari mana-mana sahaja di tapak dan dalam mana-mana mod Panel Kawalan. Mod pengeditan Dengan mengklik butang Mod pengeditan, anda bertukar kepada mod pengeditan. Dan apa yang perlu diberi perhatian terutamanya ialah anda boleh mengkonfigurasi kemasukan mod ini dengan dan tanpa memuat semula halaman. Urus semua elemen dan komponen pada halaman awam! Lagipun, mod pengeditan termasuk bukan sahaja keupayaan untuk menukar halaman semasa atau elemen blok maklumat, seperti berita atau produk dalam katalog. Dalam mod edit, anda boleh dengan mudah - betul-betul "di atas tapak" - mengurus komponen yang disertakan dalam templat tapak dan dalam kawasan kerja utama halaman tertentu.
Tambah, edit dan padam data komponen terus dari bahagian Awam tapak. Untuk tindakan ini sama sekali tidak perlu pergi ke bahagian Pentadbiran. Anda boleh mengedit atau memadam mana-mana elemen dalam senarai menggunakan butang yang muncul apabila anda mengarahkan tetikus anda pada elemen ini.
Anda boleh "gulung semula" tindakan terakhir
Tidak perlu takut melakukan sesuatu yang salah pada halaman, kerana anda sentiasa mempunyai pilihan untuk membuat asal tindakan terakhir. Pelaksanaan fungsi Troli Beli-belah di tapak anda meliputi semua operasi pada kandungannya. Selepas menambah, menukar halaman jika perlu, anda hanya membatalkan tindakan terakhir anda. Mod yang diminimumkan Mod operasi yang diminimumkan akan memudahkan mereka yang sudah tahu cara bekerja dengan sistem. Hanya meminimumkan Panel Kawalan untuk mengosongkan ruang skrin. Pada masa yang sama, walaupun Panel yang diminimumkan mengekalkan fungsi pengurusan!
Anda boleh bekerja dengan Menu, mengemas kini produk, menghidupkan atau mematikan mod edit, menetapkan semula cache atau pergi ke mod Pentadbiran. Pendek kata, panel yang dilipat terus berfungsi! Dengan cara ini, anda boleh meruntuhkan dan mengembangkan Panel sekali lagi dengan klik dua kali biasa.
Pentadbiran Bahagian pentadbiran produk direka bentuk untuk pengurusan berciri penuh bagi keseluruhan projek Internet. Desktop di bahagian pentadbiran boleh disesuaikan secara individu, dilengkapi dengan alat dan dilengkapi dengan sistem carian menu. Anda boleh membuat seberapa banyak "Desktop" yang anda suka dalam produk.
Pembangun boleh mencipta alat mereka sendiri dan kemudian menambahkannya pada desktop mereka. Sebagai contoh, anda boleh menggunakan alat untuk memaparkan senarai pesanan terkini, berita syarikat, koleksi dokumen, dsb. "Carian langsung" berfungsi terus dari "Desktop" dalam menu pentadbiran. Carian serta-merta membawa anda ke item menu yang dikehendaki. Dan tidak kira berapa banyak bahagian dan cawangan kecil yang terkandung dalam menu. Alih huruf
Anda tidak perlu risau tentang nama fail yang hendak diberikan pada mana-mana halaman! Dan anda tidak memerlukan program terjemahan untuk menterjemah namanya ke dalam bahasa Inggeris. Hanya buat halaman dan tetapkan tajuknya - anda akan mendapat nama fail secara automatik.
Wizard penciptaan halaman secara automatik mentransliterasi dan menterjemah tajuk halaman dan mencadangkannya sebagai nama fail dokumen untuk pengoptimuman enjin carian yang lebih baik. Akses ke halaman Halaman baharu pada tapak tidak seharusnya ditunjukkan dengan serta-merta kepada dunia. Mula-mula anda perlu menyemaknya dan membincangkannya dengan rakan sekerja, dan kemudian meluluskannya daripada pihak pengurusan. Jangan terbitkannya - semasa menciptanya, cuma tandai kotak - "Hadkan akses ke halaman". Tentukan kumpulan pengguna yang anda mahu tunjukkan - cuma pilih kumpulan ini.
Kepada siapa anda mahu tunjukkan halaman tersebut?
Keupayaan untuk menetapkan sekatan akses kepada halaman serta-merta selepas penciptaannya akan memudahkan kerja pengurus kandungan dengan ketara apabila bekerja dengan kandungan yang memerlukan penyelarasan dan penyuntingan yang panjang.
Antara muka
Urus laman web anda dengan mudah dan profesional! Antara muka produk Hermitage menyesuaikan diri dengan kerja harian anda dengan tapak, mengingati keutamaan anda dan membolehkan anda menghabiskan lebih sedikit masa untuk tugas teknikal. Antara muka nampaknya "terapung" di atas tapak, membolehkan anda melihat apa yang anda lakukan dan segera menunjukkan hasilnya.“Tuding di atas tapak, lakukan tindakan dengan mudah, jangan hilangkan konteks kerja anda dan dapatkan hasil yang boleh dilihat dengan segera. Antara muka akan mengingati pilihan anda - tetapan senarai, penapis, borang input... Dan kali seterusnya anda akan menghabiskan lebih sedikit masa untuk tindakan ini.
Gunakan butang "Menu" yang biasa digunakan untuk mengakses semua ciri tapak anda dengan satu klik. Semuanya jelas untuk pemula dan mudah untuk profesional. Anda tidak membiasakan diri dengan tapak tersebut, tetapi tapak tersebut membiasakan diri dengan anda, menyesuaikan diri dengan tabiat dan tugas anda"
Ketua Pengarah, 1C-Bitrix, Sergey Ryzhikov
Semua tenaga anda adalah pada kreativiti, bukan untuk mencari butang! Mengurus maklumat setiap hari menjadi lebih rutin dan anda menghabiskan tenaga untuk tugas kreatif dan bukannya penerbitan teknikal halaman, bahagian dan menu.“Daripada versi ke versi, semakin banyak fungsi muncul dalam produk, semakin banyak tindakan dalam antara muka. Kami telah melakukan banyak kerja untuk mereka bentuk semula antara muka produk, terutamanya panel kawalan pengguna.
Antara muka penyesuaian baharu memudahkan carian untuk tindakan yang diingini, mengumpulkan tindakan mengikut peranan pengguna dan menyerlahkan tindakan yang paling kerap supaya tidak mengacaukan panel kerja dan memudahkan pengguna memahami.”
Vadim Dumbravanu, pengurus projek di Bitrix
Antara muka penyesuaian ialah:- Penyuntingan kontekstual – urus kandungan secara langsung di tapak. Jika anda perlu membetulkan halaman, klik "Edit" di sana. Jika anda perlu menambah bahagian, klik "Buat". Jangan kehilangan konteks kerja anda. Antara muka baharu terapung di atas tapak, membolehkan anda melihat perkara yang anda lakukan dan segera menunjukkan hasil.
- Penyesuaian individu kepada pengguna - antara muka produk mengingati tindakan terkini, tetapan penapis dan cara mudah untuk menyampaikan maklumat. Antara muka menyesuaikan diri dengan kerja harian anda dan membolehkan anda menghabiskan lebih sedikit masa untuknya setiap hari.
- Butang "Menu" ialah akses satu klik yang biasa dan pantas kepada semua ciri tapak anda. Ia sangat selesa! Di samping itu, apabila anda pergi ke "" menggunakan butang "Menu", halaman dari mana peralihan dibuat diingati - ini tidak kurang menyenangkan!
- Penyesuaian peranan - untuk prestasi kerja harian yang yakin. Pembangun mempunyai akses kepada semua alatan untuk membangunkan dan menyesuaikan tapak web. Editor tapak berfungsi hanya dengan kandungan, tanpa rasa takut mengganggu kerja teknikal projek. Semua orang melaksanakan tugas mereka dengan jelas.
- Wizard penciptaan kandungan akan membantu anda memilih nama fail dan bahagian, melengkapkan menu tapak dan membantu anda mengisi sifat. Tindakan harian yang kompleks menjadi mudah. Kami tidak boleh menulis kandungan untuk anda; tuan akan melakukan yang lain untuk anda.
- kurangkan kos melatih pengguna baharu - tiada latihan diperlukan, anda hanya perlukan masa untuk tapak membiasakan diri dengan anda. Tempoh membiasakan diri dengan antara muka hanya 1 jam!
- menjadikan tugas rutin sebagai proses kreatif, menghabiskan tenaga untuk tugas kreatif dan bukannya pada penerbitan teknikal halaman, bahagian dan menu;
- mengurangkan masa yang dihabiskan untuk pengurusan laman web dengan menjadikan pengurusan projek harian sebagai kebiasaan;
- hilangkan kebimbangan pengguna baharu "memecahkan projek" dan elakkan kebanyakan kesilapan semasa mengurus kandungan.
Kerja pada antara muka pentadbiran produk diteruskan. Pengguna 1C-Bitrix: Pengurusan Tapak boleh memuat turun semua kemas kini antara muka menggunakan teknologi SiteUpdate. Anda akan sentiasa belajar tentang peluang baharu di tapak web, serta dalam surat berita kami.
Editor visual terbina dalam Editor HTML visual telah pun terbina dalam produk dan anda tidak perlu memasangnya. Dengan editor ini anda boleh menukar halaman anda di tapak dalam masa nyata - terus melalui penyemak imbas anda. Editor membolehkan anda bukan sahaja mengedit dan memformat teks biasa, tetapi juga berfungsi dengan komponen visual.
Editor visual sudah terbina dalam tapak web anda!
Editor visual termasuk antara muka yang ringan, cantik dan ergonomik. Skrip editor yang mesra membolehkan anda bekerja dengan mudah dan cepat dengan kandungan, contohnya, memasukkan pautan dan gambar.
Jadi, apabila anda memasukkan gambar ke dalam halaman, anda boleh segera memilih lokasi dan saiznya. Anda boleh melihat dengan serta-merta bagaimana ia kelihatan dalam teks.
WYSIWYG (disebut “wee-zee-wig”, daripada bahasa Inggeris What You See Is What You Get - “what you see is what you get”) ialah kaedah penyuntingan di mana bahan yang diperbetulkan semasa proses penyuntingan kelihatan sama persis dengan dan keputusan akhir.
Penyuntingan masa nyata Editor merangkumi semua alatan yang diperlukan oleh pengurus kandunganLetakkan komponen pada halaman dengan hanya menyeretnya menggunakan tetikus dari panel khas, dan segera konfigurasikan parameternya, yang menetapkan rupa maklumat yang berubah secara dinamik di tapak anda.
Editor visual: menyunting parameter komponen
Mekanisme carian yang mudah membantu anda mencari komponen yang diperlukan untuk diletakkan pada halaman dengan serta-merta. Apabila menyalin teks daripada Web dan sumber lain, contohnya, Word, kod itu "dibersihkan" daripada teg berlebihan. Selain itu, kod yang ditampal ini menjadi kod HTML5 yang sah dan betul. Pada masa yang sama, hasil kerja editor sentiasa sama - tidak kira apa pelayar yang anda gunakan!
Berdasarkan hasil pemprosesan kehendak pengguna, editor sentiasa diperbaiki. Mudah untuk melakukan banyak operasi di dalamnya dan bekerja pada mencipta halaman dan memformat teks!
Penonjolan kod dan penomboran barisSangat mudah untuk mengedit halaman seperti PHP, kerana editor yang dibina ke dalam sistem menyerlahkan kod dan nombor baris. Dan halaman itu sendiri disimpan "gaya Ajax" "di hadapan mata kita" - tanpa memuat semula halaman dan tanpa kehilangan fokus!
Skim editor gelap
- sintaks yang menonjolkan HTML + PHP + Javascript + SQL;
- lampu latar boleh ditukar, dan anda boleh mematikannya tanpa memuatkan semula halaman;
- 2 tema warna - terang dan gelap;
- lompat pantas ke garisan dengan nombornya;
- Tab/Shift+Tab untuk memasukkan dan membuat asal tab.
Pengurusan maklumat adalah kerja harian, kami melakukan segala-galanya untuk menjadikan kerja ini menyeronokkan!
Mod "Split" Menegak dan mendatarKini editor anda mempunyai 2 mod "pecah" sepenuhnya - menegak dan mendatar. Ia sangat mudah untuk bekerja dalam mod gabungan.
Anda boleh melihat kod halaman dan paparannya pada masa yang sama. Anda boleh membuat pengeditan di mana-mana bahagian tetingkap - mengedit halaman secara visual atau mengedit kodnya.
Split - membelah tetingkap kepada dua bahagian - penyuntingan visual dan penyuntingan kod.
Carian/penggantian yang mudah Cari komponen dalam sesaat!Editor mempunyai ciri carian/ganti yang mudah terbina dalam - impian mana-mana pengurus kandungan. Kini anda boleh, sebagai contoh, mencari komponen yang diperlukan dengan serta-merta dan "seret" ke halaman. Anda tidak perlu ingat di mana ia berada dalam struktur komponen. Ini amat berharga apabila terdapat sejumlah besar komponen yang digunakan.
Editor visual yang terbina dalam produk adalah serasi dengan semua pelayar popular. Editor berfungsi sama dengan betul dalam semua pelayar popular dan menggunakan fungsi yang sama untuk berfungsi. Anda boleh mengedit halaman di tapak dalam mana-mana pelayar - hasilnya akan sama.
Kod “Membersihkan” apabila memasukkan kod Bersih!Editor mengendalikan sisipan teks daripada pelbagai sumber dengan pembersihan kandungan automatik. Apabila menyalin teks, contohnya, daripada Word, kod itu ditukar kepada HTML5. Semua yang tidak perlu - teg yang tidak penting - dialih keluar daripada kod.
Pembangun web akan menghargai pelaksanaan kefungsian panel komponen dan panel coretan (dalam satu slaid). Mereka juga mendapat keupayaan untuk menyesuaikan pada peringkat JS dan model acara yang diperluaskan.
HTML5 yang sah dan betul Dengan pengesahan - semuanya ok!HTML5 bukan sahaja datang, ia sudah ada di sini. Dengan editor visual terbina dalam anda, anda tidak perlu risau tentang kesahihan dan ketepatan kod halaman di tapak anda. Editor menjana jenis kod yang betul-betul dirasakan oleh pelayar moden.
Tidak perlu menulis kod yang betul secara manual
Editor ini terbina dalam tapak web anda dan pengurus kandungan anda tidak perlu memikirkan elemen struktur yang digunakan untuk menandakan teks.
Mengapa anda memerlukan HTML5 yang sah
Kelebihan menukar kepada HTML5 yang sah tidak dapat dinafikan; ia telah lama dibincangkan oleh pembangun web (contohnya,
Semua ini adalah terima kasih kepada teknologi caching terurus baharu (Cache Dependencies), yang berfungsi dengan tepat untuk operasi penyunting kandungan yang mudah dan pengemaskinian automatik data serta-merta selepas ia ditukar. Teknologi ini membolehkan anda memaparkan perubahan pada tapak tanpa menunggu cache dikemas kini, yang dilakukan oleh sistem pada tempoh masa tertentu. Itulah sebabnya ini adalah salah satu komponen teknologi yang paling penting bagi pengalaman pengguna yang mudah dengan tapak.
- Untuk mempercepatkan tapak dan menskalakan projek, kami mengesyorkan agar anda menyokong teknologi Autocaching dan menggunakan teknologi Caching Terurus.
- Auto+Terurus
Untuk pemaju
"Hermitage" untuk pembangun web Konsep "Hermitage" merangkumi set keseluruhan pengesyoran teknologi untuk pembangun web. Ini ialah senarai mengagumkan yang mengandungi pengesyoran untuk membuat aplikasi anda "dengan betul". Ini ialah konsep Hermitage untuk pembangun, menunjukkan dengan tepat cara membangunkan aplikasi untuk platform Bitrix. Membangunkan supaya aplikasi ini memberikan kemudahan dan kemudahan kerja dalam antara muka Hermitage. Kebanyakan pengesyoran ini diketahui oleh pembangun yang berpengalaman.Cadangan untuk pembangun web:
- Reka bentuk. Dilaksanakan mengikut. Terutama pada saat-saat yang berkaitan dengan penciptaan templat reka bentuk anda sendiri dan aplikasinya. Kami cuba membangunkan antara muka kawalan dengan cara yang tidak mengehadkan pembangun web dalam reka letak dan pilihan reka bentuk.
- Adalah disyorkan untuk menggunakan komponen menu standard dengan caching dalam templat tapak. ()
- Adalah disyorkan untuk membuat laman web menggunakan . Sama ada menggunakan komponen standard, atau untuk tujuan projek, cipta komponen tersuai untuk keperluan khususnya.
- Kami mengesyorkannya apabila menyesuaikan penampilan. Ini akan memastikan keselamatan mereka semasa mengemas kini produk. Anda boleh menyalin templat terus daripada antara muka awam dalam mod edit. Komponen boleh mempunyai bilangan templat yang tidak terhad.
- Kami mengesyorkan bahawa jika anda mengubah suai komponen 1C-Bitrix atau mencipta komponen anda sendiri, ciptakannya.
- Apabila membangunkan komponen, anda boleh mengambil kira .
- Penggunaan disyorkan dalam kes mencipta fungsi yang kompleks atau paparan berbilang halaman, apabila memautkan komponen tunggal akan menjadi sukar bagi pengguna.
- Untuk mempercepatkan tapak dan menskalakan projek, kami mengesyorkan agar anda menyokong teknologi Autocaching dan menggunakan teknologi Caching Terurus.
- Semasa menyediakan komponen, adalah dinasihatkan untuk menetapkan parameter komponen kepada Auto+Diurus dengan masa caching yang panjang (1-12 bulan jika anda bekerja sepenuhnya menggunakan teknologi Cache Dependencies).
- Adalah wajar bahawa dalam mod Autocaching komponen tidak melaksanakan pertanyaan kepada pangkalan data atau melaksanakan hanya pertanyaan yang caching adalah tidak rasional.
- Jika boleh, sokongan untuk tujuan pengoptimuman enjin carian adalah wajar.
- Kami mengesyorkan sokongan untuk mengurus item senarai melalui API produk. Ini akan membolehkan pengguna mengedit dan memadam elemen secara langsung pada halaman tapak.
- Adalah disyorkan untuk mereka bentuk pembangunan besar ke dalam modul anda sendiri dengan API dan kemasukan komponen anda sendiri di dalamnya. Dengan penempatan mereka yang berikutnya dalam MarketPlace dan keupayaan untuk mengemas kini menggunakan teknologi SiteUpdate. ()
- Adalah disyorkan untuk menggunakan API platform untuk bekerja dengan objek sistem. Pertanyaan terus yang sangat tidak diingini ke pangkalan data. Ini boleh menyebabkan kemas kini produk tidak serasi dengan pelaksanaan rakan kongsi.
- Mengekalkan integriti teras produk dan menggunakan cadangan kami semasa melaksanakan projek untuk memastikan keupayaan untuk mengemas kini produk menggunakan teknologi kemas kini SiteUpdate. Gunakan sistem acara dalaman untuk menukar logik produk atau meminta penampilan acara baharu. (
Pada masa ini, kira-kira 11-12% daripada 100,000 tapak yang paling banyak dilawati adalah responsif, dan tidak syak lagi bahawa jumlah ini akan meningkat dalam beberapa tahun akan datang.
Memandangkan lebih banyak organisasi menyingsing lengan baju mereka untuk menerima realiti web berbilang peranti, adalah wajar mempertimbangkan beberapa strategi yang digunakan untuk mencapai nirwana:
Pemodenan adaptifReka bentuk semula responsif ialah proses mengambil tapak web desktop sahaja sedia ada dan pada asasnya "mengubah suainya responsif."
Dan Cederholm
Bagi kebanyakan organisasi, penciptaan reka bentuk baharu berskala besar dari awal tidak dipertimbangkan. Inilah sebabnya mengapa pemodenan responsif ialah pendekatan popular untuk mencipta pengalaman yang baik untuk peranti mudah alih.
Kelebihan- Agak cepat.
Terdapat beberapa cara untuk melakukan pemodenan responsif, strategi ini boleh menambah fail small-screens.css ke tapak. Walaupun contoh yang agak kasar ini, pemodenan adaptif adalah pilihan yang menarik untuk sebilangan besar organisasi kerana ia tidak memerlukan membina semula segala-galanya dari awal. - Biasa.
Tidak mengelirukan pengguna. Orang ramai telah menghabiskan masa bertahun-tahun membiasakan diri dengan antara muka, dan dengan memodenkan yang sedia ada, organisasi mengekalkan pendekatan biasa sambil meningkatkan kehidupan orang yang menggunakan peranti mudah alih. - Secara organisasi lebih cepat.
Dari segi politik, memodenkan antara muka adalah lebih selamat daripada bermula dari awal. Akan ada kurang perdebatan tentang warna hijau yang hendak dipilih, gambar stok remeh apa yang hendak digunakan, dan pihak pengurusan tidak perlu memutarkan tangan mereka. Ini membolehkan pasukan melancarkan tapak responsif dengan lebih pantas.
- Hanya menjejaskan sebahagian kecil.
Sekali lagi, terdapat banyak pilihan untuk melakukan pengubahsuaian, tetapi matlamat kebanyakan daripada mereka adalah untuk "menjadikannya cantik." Dengan memfokuskan pada mereka bentuk semula reka letak, reka bentuk semula sering terlepas pelbagai faktor lain yang perlu dipertimbangkan semasa mencipta reka bentuk yang berjaya untuk pelbagai peranti. - 10 liter air dalam balang tiga liter.
Memandangkan tapak desktop direka bentuk hanya untuk komputer desktop (dan selalunya bertahan lama), ia boleh mengandungi banyak kekacauan. Dan kerana pemodenan terutamanya terdiri daripada mencairkan semula susun atur, kebanyakan masalah dengan kandungan tidak diambil kira sepenuhnya. - Prestasi.
Terdapat sesuatu yang pelik tentang menulis kod untuk menyokong peranti kecil dengan lebih baik. Mengalih keluar bahan yang tidak perlu boleh pergi terlalu jauh, tetapi tanpa memfokuskan pada produktiviti, ia tidak akan berkembang dengan sendirinya. - Sokongan paling teruk.
Pertanyaan media, yang asalnya direka bentuk untuk komputer meja, kurang disokong pada kebanyakan peranti mudah alih. - Pembetulan sementara.
Saya rasa seperti mati apabila saya mendengar orang meminta saya untuk "membuat responsif" sesuatu, seolah-olah ia hanya kotak pilihan dalam rancangan projek (yang kadang-kadang ia sebenarnya). Jenis pemikiran terhad ini terlepas peluang sebenar yang ditawarkan oleh reka bentuk responsif.
Versi mudah alih memberi anda peluang untuk menanam benih yang akan tumbuh dari tapak web warisan anda.
Lama kelamaan, tapak yang lapuk boleh dialih keluar dan tapak itu akan berubah daripada menjadi yang diutamakan mudah alih, responsif dan mengambil kira arah aliran masa hadapan.
- Risiko yang lebih rendah.
Kebanyakan organisasi masih melihat trafik daripada peranti mudah alih sebagai minoriti. Jadi pelancaran tapak web responsif mudah alih membolehkan organisasi ini menguji keadaan tanpa perlu memasuki tajuk topik terlebih dahulu. - Peluang untuk belajar menjadi fleksibel.
Pereka boleh belajar berfikir dengan lebih fleksibel. Pembangun akan mempelajari pelbagai helah peranti Android. Pengurus boleh memikirkan cara untuk beralih daripada kesempurnaan piksel. Tapak mudah alih responsif boleh menjadi kotak pasir yang bagus untuk pembelajaran. - Infrastruktur.
Pasukan boleh belajar cara menyelesaikan masalah pengurusan kandungan, seperti penciptaan imej, sekali dan untuk semua - Buang lebihan.
Pendekatan ini menawarkan peluang yang baik untuk pasukan bertanya kepada diri sendiri "adakah kita benar-benar memerlukan ini" sambil turut memfokuskan pada prestasi. kenapa? Kerana tumpuan utama mereka adalah untuk meningkatkan pengalaman pengguna tapak mereka pada peranti mudah alih. - Masa depan ialah tapak web yang mengutamakan mudah alih.
Walaupun pada mulanya kekurangan kandungan atau fungsi, dengan masa dan usaha yang mencukupi, tapak mudah alih ini akhirnya boleh menggantikan nenek moyang halaman penuh mereka.
- Ia masih tapak mudah alih.
Sama ada ia responsif atau tidak, pendekatan ini masih mengekalkan sejumlah besar kelemahan tapak mudah alih: masalah dengan pengalihan URL, pengurusan kandungan, kandungan yang konsisten, konsistensi, pengoptimuman SEO dan lain-lain. - Pembetulan sementara.
Banyak tapak mudah alih dicipta sebagai Band-Aid - untuk menghentikan pendarahan. Laman web sedemikian dicipta dengan tujuan untuk memunggah trafik yang semakin meningkat yang datang dari peranti mudah alih. Penyelesaian ini mungkin masih memenuhi keperluan sedia ada, tetapi memandangkan arah aliran masa hadapan, penyelesaian ini tidak mungkin dapat menyelamatkan anda dalam jangka masa panjang. - Kemungkinan layu pada pokok anggur.
Sesetengah organisasi mungkin memulakan projek sedemikian, mencapai separuh jalan, dan kemudian meninggalkan keseluruhannya sehingga bajet tahun depan diluluskan. - Reka bentuk untuk skrin kecil.
Memandangkan tumpuan awal adalah pada skrin kecil, kemudian mengalihkan antara muka ke paparan yang lebih besar tanpa kehilangan kualiti boleh menjadi satu cabaran.
Kecacatan - 50 warna ketidaksempurnaan.
Pendekatan ini mungkin gagal kerana pengguna perlu berurusan dengan antara muka Frankenstein yang lama dan baharu. - Kemungkinan layu pada pokok anggur.
Jenis projek ini memerlukan matlamat akhir yang jelas atau mereka boleh terperangkap di api penyucian selama-lamanya. - Kewujudan bersama teknikal.
Apakah yang berlaku apabila satu modul, menggunakan teknologi dan teknik terkini, bertembung secara langsung dengan modul yang sudah lapuk? Terdapat banyak cabaran seni bina untuk pendekatan ini.
Ini adalah terjemahan artikel bertajuk "Strategi Responsif" oleh Brad Frost. Diterjemah oleh UXDepot dengan kelulusan pengarang.
PS daripada penterjemah: Saya harap anda menikmati artikel itu. Kami akan gembira jika anda menunjukkan sebarang kesilapan dalam terjemahan supaya kami dapat membetulkannya dengan segera. Tulis kepada kami di [e-mel dilindungi], Tolong :)
