Layouts Web Responsif untuk Pengenalan Skrin, Tips dan Contoh Mudah Alih
Pereka kini lebih sukar sekarang. Kita bukan sahaja perlu membuat reka bentuk untuk peranti pegun, tetapi juga peranti mudah alih seperti tablet dan telefon pintar, dan kerana kita bercakap mengenai banyak saiz skrin dan resolusi yang berbeza di sini, itu adalah tugas besar untuk bahu. Memandangkan ini, reka bentuk web responsif boleh menjadi penyelesaian terbaik. Ia menawarkan lebih daripada sekadar template mudah alih yang mudah; Sebaliknya, susun atur keseluruhan laman web anda direka bentuk untuk menjadi cukup fleksibel untuk dimuatkan ke dalam sebarang resolusi skrin yang mungkin.
Dengan skim reka bentuk cecair seperti ini terdapat faedah dan kelemahan yang jelas. Pertimbangkan contoh saya di bawah untuk bagaimana reka bentuk web responsif boleh menjadikan peralihan ke peranti mudah alih menjadi lebih lancar.
Bagaimana Reka Bentuk Responsif berfungsi
Apabila saya menggunakan perkataan itu “responsif” dari segi reka bentuk web Maksud saya bahawa susun atur keseluruhan bertindak balas berdasarkan resolusi skrin pengguna. Bayangkan senario ini: anda membaca laman web pada satu tablet, kemudian anda beralih ke peranti lain untuk satu sebab atau yang lain. Tetingkap penyemak imbas kini disusun semula. Susun atur reka bentuk web yang responsif akan memaparkan skim dan susun atur yang dengan indahnya memecah dan melancarkan semula dirinya. Dari perspektif kebolehgunaan ini teknik yang cemerlang.
Reka bentuk responsif adalah semua tentang mewujudkan pengalaman homogen tanpa mengira saiz skrin pelayar atau peranti. Saya telah menemui contoh yang sempurna dari 'A List Apart' untuk menggambarkan titik saya, yang juga termasuk imej dinamik. Lebar ditetapkan dalam CSS menggunakan peratusan untuk sebahagian besar semua elemen kontena dalaman. Laman web yang lebih besar juga bertindak balas dengan baik untuk mengeluarkan kandungan dinamik seperti JavaScript apabila ia tidak disokong.
Mengapa Reka Bentuk untuk Mudah Alih?
Ia telah menjadi jelas bahawa lebih ramai pengguna akan bergerak, dan bukan hanya untuk melayari web secara langsung. PC Tablet telah mula berubah dalam konteks apabila pengguna berada dalam talian dalam bilik darjah. Merekabentuk untuk telefon bimbit pastinya merupakan keperluan dalam piawaian web moden. Satu-satunya masalah ialah memilih kaedah pembangunan anda, dan menyasarkan penonton anda dengan sewajarnya.
Apabila anda memulakan pengekodan untuk resolusi skrin tertentu anda berakhir dengan gaya terlalu banyak untuk berurusan. Pertanyaan media dalam CSS3 boleh digunakan untuk membina susun atur khusus iPhone untuk kedua-dua pandangan potret dan landskap. Oleh kerana anda boleh menentukan kepadatan piksel, mudah untuk mengubah sebarang template HTML untuk mudah alih.
(Sumber Imej: bradfrostweb)
Tetapi apabila anda kodkan susun atur untuk reka bentuk responsif, aspek mudah alih dijaga secara lalai. Kedua-dua pengguna desktop dan mudah alih akan ditawarkan pengalaman serupa dan anda tidak perlu bimbang tentang sifat CSS luaran. Satu-satunya penyelidikan yang perlu anda lakukan ialah merancang untuk skrin paparan yang paling kecil. Data trafik Google Analitis boleh sangat membantu untuk ini.
Anda tidak mungkin mendapatkan tapak web anda bekerja 100% pada setiap peranti yang menjalankan setiap penyemak imbas. Tetapi anda boleh menyasarkan majoriti berdasarkan lebar purata skrin. Model iPhone yang lebih tua menggunakan resolusi paparan 320 × 480 yang tidak begitu sukar dipercayai. Saya akan menembak untuk lebar minimum 240px, atau lebih kecil jika anda boleh muat.
Mengeluarkan Zum Lalai
Sekiranya anda meluangkan masa melayari Web pada telefon pintar, anda akan melihat bagaimana laman web disingkat untuk memaparkan sepenuhnya dalam skrin. Ini adalah untuk kemudahan pengguna kerana kebanyakan laman web tidak mempunyai rakan kongsi mudah alih, oleh itu tata letak penuh adalah taruhan paling selamat.
Tetapi apabila anda masuk ke dalam reka bentuk reka bentuk mudah alih yang responsif, zum auto boleh benar-benar merosakkan elemen susun atur anda. Khususnya, imej dan kandungan navigasi mungkin kelihatan kecil atau terlalu besar dalam susun atur anda. Terdapat tag meta khas yang anda boleh masukkan ke dalam header dokumen yang menetapkan semula ini dalam kebanyakan peranti Android dan iPhone.
Ini dikenali sebagai meta tag paparan yang menubuhkan beberapa pemboleh ubah tersuai dalam kandungan. Apple mempunyai halaman dokumentasi mengenai beberapa tag meta lain yang perlu anda lihat, walaupun ini ditujukan khusus ke laman web di iOS. The skala awal Nilai adalah penting kerana laman web ini mungkir laman web anda dengan penuh 100% zum.
Nilai terakhir untuk pengguna berskala akan memadam fungsi zoom ini secara keseluruhannya supaya pengguna tidak dapat mengubah saiz susun aturnya. Ini akan mengunci reka bentuk ke dalam satu saiz berdasarkan lebar peranti penuh. Ambil perhatian bahawa walaupun anda melumpuhkan fungsi zoom, reka bentuk responsif yang baik akan tetap menyesuaikan diri apabila beralih dari potret ke landskap pada mana-mana peranti! Tetapi masuk akal untuk mengunci reka bentuk responsif dan menghapuskan pilihan penambahan generik.
Pengesanan Imej Dinamik
Imej adalah satu lagi aspek penting dari hampir setiap laman web. Pengguna mudah alih mungkin tidak mahu menyiarkan video, tetapi foto adalah cerita yang berbeza. Ini juga merupakan penyebab terbesar apabila datang kepada susun atur yang keluar dari model kotak.
img max-width: 100%;
Peraturan standard untuk CSS adalah untuk memohon hartanah maksimal ke semua imej. Oleh kerana mereka akan sentiasa ditetapkan pada 100% anda tidak akan pernah melihat gangguan. Apabila pengguna semula saiz tetingkap penyemak imbas mereka lebih kecil daripada imej anda boleh mengendalikannya secara automatik akan menyesuaikan semula kepada 100% lebar skala. Masalahnya adalah bahawa Internet Explorer tidak dapat memahami harta ini, jadi anda perlu menyusun menggunakan stylesheet khusus IE lebar: 100%;.
Imej fleksibel juga mungkin jika anda menggunakan JavaScript atau plugin jQuery. Terdapat beberapa pemaju benar-benar pintar di luar sana yang telah meletakkan pada masa itu untuk membina kandungan imej yang sangat responsif. Benang ini hanya salah satu daripada banyak di Stack Overflow yang mempunyai pendekatan yang agak aneh namun mudah untuk menyelesaikan bug IE6 / 7.
Saya secara peribadi akan mengesyorkan melekat pada saiz semula imej CSS semula jadi. Jika tapak web anda berjalan dalam penyemak imbas mudah alih dengan JavaScript enabled, ia kemungkinan besar akan menyokong CSS juga. Jika anda benar-benar ingin menggali lebih mendalam, lihat 24 cara Artikel Imej untuk Reka Bentuk Adaptasi ...
Menyentuh Reka Bentuk
Pemaju web mungkin lupa bahawa pengguna mudah alih tidak lagi menggunakan telefon keypad seperti BlackBerry. Sebilangan besar telefon pintar hari ini menggunakan antara muka skrin sentuh, yang menjadikan senario berbeza dari setup mouse dan keyboard.
Oleh itu, anda perlu mempertimbangkan penyelesaian alternatif dalam elemen mudah alih. Menu dropdown mungkin berfungsi dengan lebih baik apabila dipaparkan sebagai menu tunggal di sebelah kanan. Kebanyakan pengguna dapat mengetik pautan di sebelah kanan lebih mudah daripada kiri, tetapi sama ada lajur berfungsi untuk mengurangkan ruang. Menggunakan indent margin, mudah untuk mengenal pasti hierarki pautan tanpa memerlukan sebarang kod jQuery.
Ia juga amalan yang baik untuk meningkatkan saiz pautan navigasi ini. Pengguna mudah alih tidak mempunyai kemewahan skrin besar yang diberikan pada desktop atau bahkan komputer riba. Anda perlu menyimpan teks yang besar, di depan, boleh sentuh dan boleh dibaca pada semua kos. Anda mungkin mahu mengubah saiznya jika pengguna bertukar antara pandangan potret dan landskap - pengulangan yang agak biasa semasa melayari web mudah alih.
Tata Letak CSS Custom
Secara umumnya, lebih baik menyesuaikan susun atur anda dan membolehkan degradasi semulajadi kandungan anda. Jika anda mempunyai bar sisi dan kawasan kandungan, anda harus menetapkannya dalam lebar peratusan atau ems, apa-apa yang akan saiz semula dengan tetingkap penyemak imbas. Sekiranya anda memohon lebar lebar ini akhirnya akan memecah sebahagian daripada susun atur; jadi sekarang kandungan bar sisi anda memaparkan di atas kandungan halaman.
(Sumber Imej: Pepperson)
Apabila anda mempertimbangkan bagaimana ini menjejaskan reka bentuk keseluruhan, lebih mudah untuk membangun stylesheets luaran. Bagaimanapun, anda mungkin akan menghadapi resolusi skrin yang terlalu kecil untuk susun atur anda. Ini adalah senario yang sempurna untuk menambah sifat CSS tersuai untuk mengalih keluar bahagian halaman, atau mengubah kandungan sepenuhnya.
Togol Kandungan Tambahan Hidup / Matikan
Contoh blok kandungan yang besar termasuk bentuk web, menu dinamik, slider imej, dan idea yang serupa. Daripada mengeluarkan sepenuhnya unsur-unsur ini sebagai susun atur menjadi lebih kecil kenapa tidak sekadar menyembunyikannya dalam a “diminimumkan” kandungan div? Anda boleh menggunakan CSS atau JavaScript untuk melakukan penyuntingan, tetapi akhirnya anda mungkin memerlukan beberapa kod JS untuk membuat butang togol.
Alternatif ini sangat sesuai untuk menjaga halaman rumah anda dinamik dan penuh dengan media web yang kaya. Alih-alih menghilangkan navigasi drop-down atau menyusun semula struktur halaman, anda boleh menyembunyikannya di dalam div kandungan. Jika pengguna mahu memaparkan pautan anda, mereka mengetuk butang togol untuk membuka / menutup menu.
Pemformatan ini mudah, intuitif dan mudah untuk digunakan pada peranti skrin sentuh. Di dalam div anda boleh meletakkan setiap menu dropdown bersebelahan dalam format lajur. Oleh kerana tetingkap semula saiznya lebih kecil, secara semula jadi mereka akan jatuh di bawah satu sama lain dan meningkatkan ketinggian halaman. Namun pilihan untuk meruntuhkan keseluruhan menu mudah dicapai dan hanya satu kali sahaja. Div ini bertukar juga sesuai untuk slider imej dengan kerjasama re-ukuran foto dinamik.
Menggunakan Pertanyaan Media
Jika skrin mudah alih akan memecah susun atur 2 atau 3 ruangan anda akan berakhir dengan setiap kawasan kandungan yang disusun di atas satu sama lain. Seluruh tapak akan kelihatan berdarah dan mungkin akan menjadi sangat mengelirukan tanpa kawasan blok dibezakan. Idea yang lebih baik adalah untuk menambah sempadan bawah pada setiap lajur, hanya untuk peranti mudah alih, menggunakan stylesheet luaran seperti mobile.css.
Dengan gaya baru ini, kandungan anda dipecah menjadi bahagian yang dapat dilihat. Atribut media di atas dirancang khusus untuk menargetkan peranti iPhone yang lebih tua dalam pemandangan lanskap. Tetapi ia juga akan digunakan pada peranti dengan skrin yang lebih kecil daripada 480 piksel. Gunakan ini untuk kelebihan anda supaya anda dapat menentukan pada titik apa susun atur “rehat”.
Terdapat beberapa lagi pilihan yang boleh anda gunakan untuk mengesan orientasi peranti. Panduan hebat pada media CSS boleh memberi anda beberapa idea. Selain itu, projek mudah alih baru 320 dan ke atas menawarkan satu boilerplate untuk CSS mudah alih @media gaya. Ini boleh dimasukkan terus ke dalam fail mudah alih.css yang sama dan memohon peraturan untuk banyak peranti yang berbeza.
/ * Telefon pintar (potret dan landskap) ----------- * / @media sahaja skrin dan (min-peranti-lebar: 320px) dan (max-device-width: 480px) / / * Telefon pintar (landskap) ----------- * / @media sahaja skrin dan (min-lebar: 321px) / * Styles * / / * Smartphone (potret) ---- ------- * / @media sahaja skrin dan (max-width: 320px) / * Styles * / / * iPads (potret dan landskap) ----------- * / @ skrin media sahaja dan (min-peranti-lebar: 768px) dan (max-peranti-lebar: 1024px) / * Styles * /
(Sumber: Hardboiled CSS3 Queries Media)
Alat Berguna
- Skeleton - Boilerplate Cantik untuk Reka Bentuk Mudah Alih Responsif
- Melangkah dari penyesuaian dengan sepenuhnya responsif
Pameran: Reka Bentuk Responsif Cantik
Saya berharap tips dan teknik reka bentuk ini akan mendorong anda untuk bergerak ke arah membina susun atur responsif yang menarik bukan hanya untuk skrin mudah alih, tetapi untuk mana-mana peranti biasa dengan penyemakan imbas web. Untuk mengekalkan jus kreatif yang mengalir saya telah mengumpulkan satu reka bentuk kecil reka bentuk web mudah alih yang responsif. Pastikan untuk melihat beberapa ciri yang lebih unik dan berkongsi pemikiran anda mengenai reka bentuk atau topik di kawasan perbincangan.
menggantungkan bulan
Macdonald Hotels
CSS-Tricks
Selamat Cog
Teixido
CSS Wizardry
Arkitek Maklumat
ART = BEKERJA
Reka Bentuk Web Hardboiled
Sony Amerika Syarikat
Masa Depan Mesra
Kita Tidak Boleh Berhenti Berfikir
Pekerjaan yang sahih
Reka bentuk Colbow
320 dan ke atas
CMS garpu
The Happy Bit
Pulpa Elektrik
Prop Foster
Plexical
Kue Preeti
Lebih Bahaya
Pusat Maklumat pergigian
reka bentuk antara muka ribot -
Hello Fisher
Sidang Kemuncak Sosial Pemasar
William Csete
Robot Woolly
Meltmedia
Tinggal!
Dalam jawatan esok kita akan mempamerkan beberapa tema responsif percuma WordPress anda boleh memuat turun untuk digunakan. Pastikan untuk menala untuk itu.
