Salam, pengunjung biasa dan pembaca tetap situs blog!

Beberapa waktu yang lalu saya mengupdate blog saya dengan membuat tema wordpress sepenuhnya dari awal. Saya menulis tentang bagaimana ini terjadi di artikel "". Salah satu tugas utama saat membuat template baru adalah tata letak situs yang adaptif untuk semua resolusi layar.

Garis besar artikel secara singkat:

Pada artikel sebelumnya saya sudah menulis tentang mengapa itu diperlukan. Namun bagaimana cara mencapai kemampuan beradaptasi ini?

Untuk ini ada cara yang berbeda. Ada yang menggunakan javascript, ada pula yang menggunakan yang lain. Tapi saya percaya itu yang paling sederhana dan cara yang benar adalah adaptif menggunakan CSS.

Cara membuat layout website responsif

Pertama, jika Anda ingin membuat desain situs web responsif, di antara tag tempelkan kode berikut:

Betapa bodohnya saya karena saya tidak langsung melakukan ini ketika saya mencoba membuat tata letak situs web yang adaptif!!!
Masalah browser seluler dalam penskalaan tata letak situs, bahkan adaptif.

Bayangkan, saya menggambar sebuah desain, lalu menuliskan semua gaya dan pertanyaan yang diperlukan, memeriksa kemampuan beradaptasi situs pada resolusi yang berbeda. Segalanya tampak baik-baik saja! Namun saat aku membuka blogku di ponsel pintarku, aku melihat situsnya mengecil. Itu tidak beradaptasi dengan perangkat seluler, tetapi hanya mengurangi ukuran font, gambar, dll.

Bagaimana bisa? Saya mulai memeriksa ulang semua gaya untuk melihat apakah saya telah menulis kelas dengan benar, dan akhirnya sampai pada titik di mana saya memeriksa lebar jendela browser dalam px menggunakan javascript. Saya terkejut. Saat pengecekan di laptop, saya mendapatkan hasil 1024px, dan hasil yang hampir sama saya dapatkan saat membuka situsnya di smartphone!

Tapi ini tidak mungkin!

Ternyata, jika Anda tidak menulis kode yang saya sebutkan di atas, browser seluler tidak memahami bahwa situs tersebut responsif dan hanya mencoba memperkecil halaman situs web agar muat di layar ponsel kecil.

Karena kebodohan dan ketidakmampuan saya, saya kehilangan banyak waktu. Tapi sekarang saya mengingatnya selamanya))).

Kueri media CSS tata letak adaptif

Untuk membuatnya responsif menggunakan CSS, Anda perlu menggunakan media queries.

Bagaimana itu? Ya, sangat sederhana. Di file CSS Anda perlu menulis pertanyaan seperti:

@layar media dan (lebar minimum: 1440 piksel) dan (lebar maksimum: 1599 piksel) ( )

Kode ini berarti bahwa gaya yang diapit di antara "( )" akan berfungsi untuk layar dengan lebar minimum 1440 piksel dan lebar maksimum 1599 piksel.

Artinya, gaya elemen situs yang harus disesuaikan bergantung pada resolusi layar harus ditulis secara terpisah untuk setiap kemungkinan lebar layar.

Resolusi layar paling penting untuk tata letak adaptif

• 320 piksel- Perangkat seluler (orientasi potret);
• 480 piksel- Perangkat seluler (orientasi lanskap);
• 600 piksel- Tablet kecil;
• 768 piksel- Tablet (orientasi potret);
• 1024 piksel- Tablet (orientasi lanskap)/Netbook;
• 1280 piksel atau lebih- komputer.

Resolusi inilah yang perlu Anda fokuskan dan berikan perhatian khusus saat membuat tata letak adaptif. Ini adalah jenis resolusi layar yang paling umum.

desain responsif bootstrap

Sangat mudah menggunakan bootstrap untuk membuat tata letak adaptif. Kenyamanannya adalah semua gaya untuk mengadaptasi blok, tombol, tabel, dll. sudah terdaftar di bootstpap. Anda hanya perlu mencari tahu kelas mana yang akan ditetapkan ke elemen mana.

Untuk memulai, unduh bootstrap versi terbaru dan sambungkan ke situs Anda. Perlu diketahui bahwa menghubungkan style dan script ke WordPress memiliki ciri khas tersendiri.

Tata letak Bootstrap berbeda karena lebar blok atau layar dibagi menjadi 12 bagian yang sama besar. Dan dengan menugaskan kelas tertentu ke sebuah blok, Anda dapat mengatur lebar blok sama dengan jumlah bagian yang diperlukan.

Misalnya, desain ini memungkinkan Anda mengalokasikan satu blok lebar untuk konten dengan lebar 8 bagian dan satu blok sempit untuk bilah sisi dengan lebar 4 bagian:

Lebar blok akan dihitung secara otomatis tergantung pada lebar layar. Dan jika dilihat di perangkat seluler, blok-blok ini akan saling bergeser.

Anda juga dapat menyesuaikan jarak balok dari tepi, sekali lagi, ke jumlah bagian yang diperlukan. Misalnya desain ini:

Sebuah blok selebar 10 bagian akan dibuat dengan indentasi kiri 1 bagian layar.

Jika dilihat, bekerja dengan bootstrap membuat pekerjaannya menjadi sangat cepat. Selain itu, gaya ini pasti berfungsi dengan benar dan tidak akan ada yang bengkok di situs.

Di masa depan saya berencana untuk memposting beberapa pelajaran tentang bekerja dengan bootsrap. Oleh karena itu, saya menyarankan Anda untuk tidak melewatkan momen ini.

Memeriksa kemampuan beradaptasi situs web

Namun muncul pertanyaan: bagaimana cara memeriksa kemampuan beradaptasi situs web? Sekarang Anda telah menulis kueri media dalam CSS, menghubungkan bootstrap dan menggunakan kelas yang diperlukan. Bagaimana cara memeriksa apakah situs beradaptasi dengan benar pada semua resolusi layar?

Sangat akurat dan yang paling penting layanan gratis, yang patut mendapat rasa hormat dan terima kasih dari webmaster dan desainer tata letak yang menanganinya tata letak adaptif situs.

Nah, bagaimana Anda menyukai artikelnya? Apakah semuanya jelas? Jika tidak, tulis di komentar, kita akan mencari tahu bersama.

Ya, untuk membuat desain website responsif, Anda perlu bekerja keras. Namun upaya ini akan dihargai dengan sikap yang baik terhadap situs Anda dari mesin pencari, dan yang paling penting, pengunjung situs Anda.

Salah satu parameter utama setiap smartphone adalah resolusi layar. Mari kita cari tahu apa itu dan mengapa hal itu sangat penting.

Berapa resolusi layar?

Resolusi layar adalah nilai yang mengacu pada jumlah piksel pada panjang dan lebar layar. Parameter ini penting karena menentukan kejernihan gambar pada setiap smartphone.

Resolusi layar mempengaruhi kualitas gambar. Semakin besar ukurannya, semakin baik dan jelas gambarnya. Jika perangkat memiliki dimensi besar tetapi resolusi rendah, maka piksel akan terlihat pada gambar. Angka dan simbol akan tampak kurang jelas dan, dalam kasus yang jarang terjadi, janggal, seperti pada telepon tombol-tekan lama.

Pada saat ini 99 persen smartphone hadir dengan tiga jenis layar

• HD (1280x 720, 720p);
• HD Penuh (1920×1080, 1080p);
• Quad HD (2560×1440, 1440p).

Resolusi layar apa yang harus saya pilih?

Salah satu resolusi layar smartphone terpopuler adalah 1280 x 720 piksel - HD. Hampir semua gadget di segmen harga budget hanya dilengkapi dengan indikator ini.

Perangkat yang lebih bertenaga dilengkapi dengan layar beresolusi lebih tinggi. Smartphone dengan layar 1920 x 1080 sudah muncul sejak lama dan tidak lagi mengejutkan siapa pun. Jika diagonal smartphone adalah 4,5 hingga 5,5 inci, layar 1920x1080 piksel (Full HD) paling cocok. Pada resolusi yang lebih rendah, piksel akan terlihat pada gambar dan pengguna mungkin merasa tidak nyaman. Ini mungkin jalan tengahnya - Harga murah, gambar jernih dan cerah.

Dengan diagonal lebih dari 5,5 inci atau lebih, perangkat andalan menggunakan resolusi Quad HD (2650x1440). Kualitas gambar di sini tinggi, tetapi menurut , mata manusia praktis tidak dapat melihat perbedaan yang signifikan. Quad HD adalah fitur masa depan, yang diperlukan untuk teknologi augmented reality dan virtual reality.

Jurnalis teknis telah meneriakkan tentang era pasca-PC selama beberapa tahun sekarang; penjualan komputer dengan faktor bentuk tradisional terus menurun, begitu pula dengan saham produsennya. Tapi kuantitasnya perangkat seluler, ponsel pintar atau tablet, terus berkembang.

Bagi perancang, ini berarti, pertama-tama, apakah spesifikasi teknis memuat setidaknya sesuatu tentang perangkat seluler atau tidak, ia harus menggambar tata letak sehingga situs tersebut dapat digunakan dari telepon (dan, terlebih lagi, tablet). ). Dan ini berarti tidak hanya tombol-tombolnya yang bisa ditekan dengan jari Anda. Idealnya, tentu saja, situs tersebut harus memiliki yang terpisah versi seluler, namun, seperti yang ditunjukkan oleh pengalaman kami, sebagian besar klien tidak ingin mengalokasikan dana tambahan untuk itu, namun pasti akan mengeluh jika ada sesuatu yang tidak berfungsi untuk mereka dari perangkat Apple favorit mereka.

Mengingat kesalahan yang dilakukan oleh desainer yang saya kenal, hal pertama yang menyebabkan masalah pada tata letak yang mereka gambar adalah kurangnya gambaran akurat tentang berapa banyak piksel yang akan muat pada layar dengan resolusi nominal lebih tinggi dari resolusi 20'. monitor desktop. Tidak apa-apa, untuk itulah pemasaran dalam jumlah besar dirancang. Artikel ini akan membantu Anda memahami situasi saat ini.

Kita berbicara tentang perangkat di Android dan iOS, WP masih eksotik, dan tanpa pengalaman pribadi saya tidak akan memberikan rekomendasi.

Jika di dokumen HTML Tidak ada tag meta yang memberi tahu browser seluler apa pun tentang lebar tampilan dokumen, maka browser akan berperilaku seolah-olah lebar dokumen adalah 980 piksel. Hal ini berlaku untuk ponsel dengan lebar layar 320 piksel, serta untuk tablet 10 inci yang menggunakan Android dan iOS serta browser Webkit. Pendekatan ini berarti bahwa situs dengan lebar minimum 960 piksel akan memiliki margin kecil agar konten lebih mudah dibaca.

Jika lebar minimum dokumen lebih besar, maka perilaku browser mulai berbeda. Safari di iPhone/iPad hanya akan memampatkan konten dalam banyak kasus. Di Android, DIP - piksel yang tidak bergantung pada kepadatan akan muncul, lebih lanjut tentang itu nanti. Jika lebar dokumen lebih besar dari 980 dan lebih besar dari lebar perangkat dalam DIP, akan muncul gulir ke kanan. Jadi, situs dengan lebar konten 1040 piksel akan ditampilkan tanpa pengguliran horizontal di iPhone dan iPad (1024 piksel), tetapi dengan pengguliran di ponsel seperti Galaxy S3 (resolusi fisik 1280x720) atau tablet Nexus 7 (resolusi fisik 1280x800 ).

Kesimpulan apa yang harus diambil? Meskipun banyaknya tampilan layar lebar di desktop dan laptop, grid 960 piksel lama yang bagus tidak kehilangan relevansinya. Browser seluler juga memiliki kemampuan untuk memasukkan blok teks ke dalam format yang mudah dibaca di perangkat, misalnya, mengompresi teks ke dalam kolom sempit di ponsel dan memperbesar fontnya. Ini tidak akan berfungsi jika tinggi teks yang berisi blok dibatasi secara ketat. Faktanya, Anda tidak boleh membuat situs web yang tingginya dibatasi, terutama jika Anda berencana menerima pengunjung dari perangkat seluler. Musuh lain perangkat seluler, khususnya ponsel, adalah elemen dengan posisi: tetap. Misalnya, tombol kembali yang sekarang modis, yang terus-menerus mengikuti pengguna di sekitar halaman. Yang lebih buruk lagi adalah cetakan besar, seperti tutup tetap. Elemen seperti itu tidak hanya memakan ruang yang berguna di layar kecil, tetapi juga tetap berada di tempat yang sama saat diperbesar. Masalahnya juga khas untuk modal windows. Jika ditampilkan di tengah layar, maka memperbesar isinya dari ponsel membutuhkan ketangkasan yang cukup. Menggunakan popup seperti “tetap terhubung dengan kami jejaring sosial!”, berperilaku seperti ini umumnya merupakan tindakan yang tidak menghormati pengguna perangkat seluler, karena sering kali lebih mudah meninggalkan situs daripada menutup munculan ini.

Mari kita lihat beberapa situs sebagai contoh.

Terlepas dari kenyataan bahwa Lenta.ru memiliki versi seluler yang sangat bagus, tidak ada transisi otomatis ke sana. Di desktop, menu tetap tumpang tindih dengan teks dengan penskalaan otomatis. Pengguna dihadapkan pada pilihan untuk melakukan penskalaan dengan tangan atau tidak terlalu malas untuk menulis m. di url.

RBC. Secara umum, mereka juga memiliki versi seluler, tetapi transisi ke versi tersebut hanya dilakukan dengan menggunakan halaman rumah. Melalui tautan langsung (khususnya dari Google Berita) Anda dapat melihat kanvas yang tidak dapat dibaca ini. Akankah pengunjung tetap berada di situs seperti itu? Hampir tidak.

Pop-up super kanonik dengan gaya RBC. Sebuah contoh luar biasa tentang apa yang tidak boleh dilakukan.

Intan yang mengetik, tebak siapa. Saya, tentu saja, mengerti betul mengapa Anda tidak bisa melakukan ini dengan menunya, tapi entah kenapa saya sedang tidak ingin berdebat. Mengajukan pertanyaan sama sekali di luar topik.

Hal lain yang biasanya tidak sepadan dengan waktu di desktop dan menyebabkan masalah di seluler adalah elemen formulir khusus. Fakta bahwa mereka hampir tidak dapat dikustomisasi menggunakan CSS bukan hanya karena World Wide Web Consortium malas.

Misalnya, Anda menggambar daftar drop-down yang indah. Katakanlah di browser desktop tampilannya seperti yang lainnya, ia terbuka dengan satu klik mouse dan digulir dengan rodanya. Namun di perangkat seluler, bekerja dengan elemen seperti itu akan menimbulkan masalah besar bagi Anda. Jika pilihannya standar, pengguna akan diperlihatkan jendela sistem dengan daftar drum/dropdown, tergantung pada OS.

Tidak ada opsi untuk melampirkan file di iOS. Dan jika tampilan standar sebuah tombol memberi petunjuk kepada pengguna bahwa tombol tersebut dinonaktifkan, maka beberapa tombol yang cerah dan indah akan memberikan kesan bahwa ada sesuatu yang tidak berfungsi di situs Anda.

Tentu saja, idealnya perangkat seluler harus diidentifikasi, dan untuk perangkat seluler, skrip yang bertujuan mengubah antarmuka standar tidak boleh dijalankan.

Fitur menjengkelkan lainnya dari browser seluler adalah saat ini mereka tidak menyimpan font plug-in dalam cache. PT Sans yang sama dalam semua gaya, terhubung dengan Google Web Fonts, membutuhkan waktu yang sangat lama untuk dimuat. Pada saat yang sama, ia hampir tidak kalah dengan Helvetica / Roboto bawaan. Pikirkan baik-baik apakah waktu pemuatan tambahan font khusus Anda sepadan.

Ukuran dan resolusi layar perangkat seluler. Perbedaan antara resolusi layar fisik dan resolusi browser seluler

IPhone dan iPad menggunakan konsep poin apel. Resolusi iPhone hingga model 5 adalah 320 x 480 piksel. Apa itu Tampilan Retina? Retina Display menggunakan kerapatan piksel ganda, artinya terdapat 4 piksel fisik per piksel. Jadi, iPhone 4 dengan resolusi layar fisik 640 x 960 piksel masih memiliki 320 x 480 piksel. Namun di saat yang sama, grafiknya lebih detail karena penggunaan gambar dua kali lebih besar dalam aplikasi. Untuk iPhone 5, nilai piksel meningkat dari 480 menjadi 568. Untuk iPad semua versi, termasuk Mini, tetap tidak berubah - 1024x768.

Secara default, pada skala 1 banding 1, grafik standar di web (misalnya, gambar latar belakang) akan ditampilkan seolah-olah berukuran dua kali lipat; satu piksel akan dibentangkan sebesar 4 piksel pada layar fisik bitmap. Cara menggunakan grafik resolusi tinggi dalam situasi seperti ini kita akan membahasnya di bagian selanjutnya. Hal utama yang perlu diingat tentang izin perangkat iOS- jangan mengira halaman retina dan non-retina memiliki lebar yang berbeda. Tidak, perbedaannya hanya pada kerapatan piksel, proporsinya persis sama.

Di Android, situasinya jauh lebih rumit, lebih tepat, dan lebih beragam. Android menggunakan konsep kepadatan layar (DPI) yang berbeda. Esensinya adalah untuk hal yang berbeda dimensi fisik tampilan dan resolusi, pola perilaku titik-titik berbeda tergantung pada tujuan perangkat. Analog dari Poin adalah DIP yang disebutkan di atas.

Kepadatan layar - 1. Kategori ini mencakup banyak perangkat, seperti ponsel 320x480 (HTC Hero, LG Optimus One), tablet 7 inci 1024x600 ( Samsung Galaksi Tab, Kindle Fire), tablet 10 inci (Asus Transformer, Acer A500, Galaxy Tab 10’1).

Kepadatan layar 1,33 digunakan pada tablet 7 inci seperti Nexus 7. Resolusi fisik 1280x800, dalam DIP - 960x600.

Kepadatan layar 1,5 - ponsel tinggi kategori harga 2011 dan rata-rata 2012, 10 tablet inci dengan FullHD. Misalnya, Nexus One 480x800 piksel, 360x533* DIP, HTC Satu S - 540x960 piksel, 360x640 DIP, dan Asus Bantalan Transformator Tak terhingga 1920x1200 piksel, 1280x800 DIP.

*pada Pengembang Android nilainya 534, tetapi mengukur lebar browser melalui JS menunjukkan persis 533, jadi dalam kueri media Anda harus fokus pada angka ini.

Kepadatan layar 2 - ponsel kategori harga tinggi tahun 2012 dan hanya beberapa tablet. Misalnya HTC One X, Samsung Galaxy S3 - resolusi layar 1280x720, dimensi dalam DIP 360x640. Tablet Google Nexus 10 - resolusi 2560x1600 piksel, 1280x800 DIP.

Kepadatan layar 3 - Flagship 2013 dengan tampilan FullHD. Dengan resolusi 1920x1080 piksel, masih memiliki DIP 360x640 yang sama.

Dengan semua itu, ada juga Google Nexus 4 out-of-touch dengan layar 1280x768 piksel dan kepadatan 2 (384x640). Pada model dengan tombol di layar, 42DIP menempati panelnya, jadi pada model semacam ini (Galaxy Nexus, Nexus 4, Sony Xperia Z) masuk mode potret resolusi potret akan sedikit lebih rendah, yaitu sebesar 598 piksel.

Jadi, kami memiliki tiga resolusi untuk potret - 320, 460 dan 384 yang langka, dan empat setengah resolusi lanskap - 480, 533, 568, 640 (598 dengan tombol lunak).

Untuk tablet, ini adalah potret 600 dan 800, dan lanskap 960, 1024 dan 1280.

Tabel di bawah mencantumkan resolusi paling umum untuk produk populer:

Bagaimana cara mulai mengerjakan tata letak aplikasi seluler?

Pertama, baca pedomannya. Aplikasi untuk platform yang berbeda akan terlihat berbeda. Misalnya, dengan mengikuti tautan ini Anda dapat membandingkan elemen khas dari sistem operasi yang berbeda

Untuk mengerjakan tata letak aplikasi iPhone Anda, buat kanvas 640x1136 (960) dan gunakan kelipatan dua dimensi. Semua grafik, semua font harus seperti ini.

Bagian tertentu dari layar di aplikasi Anda yang akan datang mungkin ditempati oleh bilah status dengan indikator sinyal, indikator baterai, dll. Ini adalah 20 poin di iOS dan 25 DIP di Android. DI DALAM ponsel Android dengan tombol lunak dan tablet, 48 ​​DIP di bagian bawah layar ditempati oleh ruang untuknya (Bilah Navigasi). Apalagi di perangkat non-kanonik seperti tablet Samsung karena penggunaan shell Navigation Bar berpemilik dan Bilah Status digabungkan.

Untuk aplikasi untuk ponsel Android, penting untuk mengambil host minimal 720x1280. Lebih baik langsung menggunakan 1080x1960, berdasarkan ponsel andalan modern.

Untuk kanvas 720x1280, dimensinya juga harus kelipatan dua, untuk 1080x1960 kelipatan tiga. Menggunakan 480x800 atau 640x960 sebagai kanvas adalah ide yang sangat buruk.

Saat mengerjakan tata letak, Anda perlu mengurangi ukuran jendela secara berkala. editor grafis dengan perkiraan ukuran perangkat sebenarnya, serta menyimpan JPG dan melihatnya di perangkat nyata. Apakah mungkin menekan tombol dengan jari Anda? Apakah teksnya terlalu kecil?

Jika Anda menggunakan tata letak dengan ukuran yang tidak tepat, kesalahan tampilan aplikasi yang bengkok atau grafiknya yang buram akan sepenuhnya menjadi tanggung jawab Anda.

Secara umum, perhatikan detailnya dan ingat - piksel dan titik/penurunan bukan lagi hal yang sama.

Mengoptimalkan grafik Web untuk layar dengan kepadatan tinggi

Jadi, kami mengetahui bahwa ada beberapa pilihan yang memungkinkan kerapatan piksel pada layar. Oleh karena itu, untuk menghindari efek grafik buram, yang juga dikenal sebagai “efek Playstation”, kita perlu menggunakan grafik raster beresolusi lebih tinggi, atau grafik vektor, misalnya SVG.

Namun, dukungan SVG masih sangat terbatas, dan untuk kompatibilitas dengan browser lama Anda masih harus menggunakan raster. Sakit kepala lainnya adalah penggunaan sprite - nilai posisi latar belakang perlu ditentukan sebagai persentase, yang akan membutuhkan banyak perhitungan matematika. Cara yang paling tidak rumit adalah dengan menggunakan beberapa variasi gambar yang sama melalui kueri media, misalnya -webkit-min-device-pixel-ratio: 2.

Seperti yang Anda lihat, tekniknya sendiri sangat sederhana dan hanya membutuhkan kehadiran beberapa versi gambar yang sama jika digunakan sebagai gambar latar. Gambar biasa, jika perlu, dapat diunggah dua kali lebih besar dari yang seharusnya dan ukuran yang diperlukan pada halaman dapat ditentukan menggunakan atribut style.

Faktanya, sisi negatifnya adalah bobot gambar beresolusi tinggi yang lebih besar. Di sini Anda perlu memutuskan apa yang lebih penting - konten yang akan dilihat pengguna setelah jangka waktu yang lebih lama karena bobot halaman, atau desainnya.

Suara: 416 | Dilihat: 4271