Halo semuanya! Baru-baru ini, melihat statistik salah satu proyek saya, saya menyadari bahwa sudah waktunya mempelajari cara membuat desain situs web adaptif, yaitu desain yang akan terlihat bagus baik di komputer desktop dan laptop, serta di perangkat seluler Oh. Coba lihat sendiri, petunjuk Metrica.

Bagaimana Anda menyukai gambar ini? Mungkin di beberapa topik persentase lalu lintas seluler akan lebih sedikit, di topik lain lebih banyak, namun bagaimanapun juga, Anda tidak dapat lagi mengabaikan pengunjung yang membaca Anda dari ponsel cerdas atau tablet.

Tahukah Anda bagaimana pengguna perangkat seluler melihat situs Anda? Untungnya, ada layanan pemeriksaan yang sangat baik - responsinator.com

Semuanya di sini sangat sederhana - Anda memasukkan alamat situs dan melihat tampilannya di perangkat seluler. Mari kita ambil contoh sebuah blog yang mungkin sudah familiar bagi semua orang.

Alexander Borisov memiliki template yang indah, terlihat jelas bahwa banyak uang telah diinvestasikan dalam desain dan tata letak. Namun, membaca blog dari ponsel sangatlah merepotkan, dan saya tidak heran jika tingkat kegagalan di antara pengguna perangkat seluler jauh lebih tinggi dibandingkan mereka yang mengakses situs dari komputer.

Apa yang harus dilakukan? Ada dua jalan keluar: biarkan semuanya apa adanya dan perhatikan bagaimana proyek lain melewati proyek Anda di hasil mesin pencari, atau buat desain situs web Anda adaptif.

Pada awalnya, saya tidak melihat perbedaan antara tata letak adaptif dan “fluid”, ketika ukuran blok berubah tergantung pada lebar layar. Namun, ada perbedaan.

Desain responsif tidak hanya melebar atau menyusut lebarnya, tetapi juga menyesuaikan dengan ukuran layar, terkadang mengubah gaya balok sepenuhnya.

Contoh paling sederhana: area konten direntangkan ke seluruh lebar layar, dan bilah sisi dipindahkan ke bawah atau hilang sama sekali dari halaman. Atau menu berubah dari menu horizontal biasa menjadi daftar drop-down.

Tergantung pada anggaran dan pengetahuan Anda tentang CSS/HTML, mungkin ada beberapa opsi.

Pilihan yang paling tepat menurut saya juga paling tidak populer. Karena kesenangan itu tidak murah. Namun, jika dana memungkinkan, dan tidak ada keinginan untuk memahami seluk-beluk tata letak, lebih baik mencari studio atau freelancer yang akan menyesuaikan template Anda untuk perangkat seluler atau membuat yang baru. Dan Anda sudah tahu cara memeriksa pengoperasiannya pada perangkat dengan resolusi berbeda - responsinator.com dapat membantu.

Baru-baru ini, hampir semua desainer mencoba mengadaptasi template mereka untuk perangkat seluler. Anda bisa mencari desain yang sudah jadi, misalnya di sini:

• www.templatemonster.com adalah salah satu koleksi template berbayar terpopuler untuk berbagai CMS dan hanya situs HTML.
• www.templatemo.com - banyak pilihan gratis desain modern.

Opsi ini cocok untuk mereka yang tidak mengejar desain eksklusif atau mampu membuat perubahan sendiri pada kode untuk membuat template menjadi unik.

Kerangka kerja - bisa dikatakan, kerangka templat, file utamanya, dan kisi-kisi blok. Desainer menyukainya karena kemudahan penggunaan dan penghematan waktu, karena template “ikan” yang sudah jadi memungkinkan Anda tidak membuang waktu untuk rutinitas. Jika Anda tahu cara bekerja dengan kerangka kerja, menggunakannya untuk membuat desain responsif adalah solusi yang bagus.

Anda akan menemukan daftar besar kerangka kerja adaptif untuk setiap selera di Habré. Namun kebanyakan cukup sulit digunakan dan volumenya berat. Oleh karena itu, bagi mereka yang menyukai minimalis, saya merekomendasikan daftar framework adaptif ringan lainnya dari Beloweb.ru. Pada saat yang sama, lihat lebih dekat blog ini, ada banyak “barang” yang berguna untuk desainer dan perancang tata letak.

Metode ini diperuntukkan bagi mereka yang tidak mencari cara mudah dan ingin menyelesaikan semuanya sendiri. Pada dasarnya, untuk membuat template Anda responsif, Anda perlu menggunakan dua hal:

Tag meta area pandang
Yang menentukan jenis perangkat yang digunakan pengunjung untuk mengakses situs dan mengatur lebar layar yang benar. Cukup salin kode ini ke kepala situs Anda.

@aturan media
Berkat itu kita bisa menulis gaya yang berbeda untuk blok yang sama di file css Anda. Ini terlihat seperti ini:

#kiri( lebar: 600px; float: kiri; margin-kanan: 10px; ) #kanan( lebar: 400px; float: kanan; ) @media hanya layar dan (lebar maksimal: 1010px)( #kiri, #kanan( lebar : 98%; mengambang: tidak ada; margin: 10px otomatis;

Dalam contoh ini, blok #kiri memiliki lebar 600 piksel dan akan diposisikan di sebelah kiri blok #kanan dengan lebar 400 px. Namun jika resolusi monitor kurang dari 1010 piksel, kami menghapus pembungkus dari kedua blok dan meregangkannya hingga 98% lebar layar.

Dan inilah cara Anda perlu menulis aturan untuk ukuran layar berikut:

• 320px untuk iPhone 3-5 dalam posisi vertikal
• 480px untuk iPhone 3-4 dalam posisi horizontal
• 568px untuk iPhone 5 secara horizontal
• 384px untuk ponsel cerdas dalam posisi vertikal
• 600px untuk ponsel cerdas dalam posisi horizontal
• 768px untuk iPad secara horizontal
• 1024px untuk iPad dalam posisi vertikal

Daftar lengkap resolusi dapat ditemukan di responsinator.com atau dalam laporan Yandex.Metrica untuk situs Anda (bagian Teknologi/Resolusi Tampilan). Singkatnya, bagi mereka yang akrab dengan tata letak situs web, tidak akan sulit untuk memahami masalah ini.

Tahukah Anda, saya jarang memberikan link kursus berbayar (karena saya sendiri tidak pernah merekomendasikan sesuatu yang belum pernah saya gunakan), tapi ini benar-benar materi pelatihan layout terbaik yang pernah saya tonton. Berkat Mikhail, template blog saya kini tidak hanya disesuaikan dengan resolusi layar yang berbeda, tetapi juga menjadi lebih ringan dari versi sebelumnya dan lebih dioptimalkan untuk mesin pencari.

Ngomong-ngomong, jika Anda membaca artikel dari ponsel, tulislah jika semuanya sudah siap, apakah semuanya nyaman? Itu saja untuk hari ini. Jika Anda memiliki pertanyaan atau tambahan, selamat datang di komentar; seperti biasa, komentar terbuka untuk semua orang.

Baru-baru ini, 10 tahun yang lalu, saat membuat situs web, desainer web dipandu oleh lebar layar rata-rata tertentu dari monitor pengguna. Awalnya resolusi paling umum adalah 800*600, kemudian berkembang menjadi 1024*768. Di Internet seseorang dapat menemukan kata-kata berikut: “Situs ini dioptimalkan untuk resolusi ini dan itu.” Dengan bertambahnya jumlah ukuran layar, ini menjadi populer tata letak karet situs, yang saya tulis di artikel dengan nama yang sama. Berkat jenis tata letak ini, situs web dapat dilihat di monitor dengan resolusi yang berbeda.

Namun, dalam beberapa tahun terakhir, tata letak karet tidak lagi menjadi “obat mujarab”. Di satu sisi, monitor dengan ukuran layar besar muncul, di sisi lain, terjadi revolusi seluler - jumlah koneksi Internet perangkat seluler (laptop, ponsel cerdas, tablet) meningkat nomor lebih banyak komputer desktop. Lalu lintas seluler berkembang, dan ada kebutuhan untuk menampilkan situs dengan benar di layar jumlah besar berbagai perangkat. Kisaran ukurannya terlalu lebar.

Jika situs terlihat buruk di layar kecil, pengunjung akan meninggalkannya begitu saja, lalu lintas turun, dan faktor perilaku memburuk.

Untuk memeriksa bagaimana tampilan situs Anda saat dilihat berbagai perangkat, Anda dapat menggunakan layanan Screenfly.

Untuk melakukan ini, masukkan alamat situs web dan pilih perangkat yang diinginkan dari daftar yang cukup besar. Ini bisa berupa komputer desktop, berbagai jenis tablet, dan ponsel. Anda dapat mengubah orientasi layar dari lanskap ke potret dan sebaliknya.

• Bagaimana cara mengatasi masalah tampilan website normal di perangkat berbeda? Ada dua jalan keluar:
• Gunakan dua versi situs, versi reguler untuk komputer desktop, dan versi seluler.

Gunakan desain responsif.

Apa itu desain responsif?

Desain macam apa ini dan apa bedanya dengan karet?

Templat karet tidak mengubah strukturnya ketika lebar layar berubah, tetapi hanya mengubah dimensinya. Misalnya, halaman web memiliki tiga kolom: di sebelah kiri adalah menu dengan lebar 25% dari lebar jendela, di tengah adalah konten – 50%, di sebelah kanan adalah sidebar – 25%. Dengan lebar jendela 1000 px, mereka akan memiliki ukuran masing-masing 250, 500 dan 250 px, dan ini cukup normal. Namun jika Anda menggunakan ponsel dengan layar kecil lebar 320 px, kolomnya akan menyusut menjadi ukuran 80, 160, 80 px dan menjadi tidak terbaca.

• Persyaratan desain responsif Beradaptasi dengan ukuran dan orientasi layar, dari monitor desktop besar hingga.
• ponsel Ubah ukuran gambar saat mengubah resolusi layar. Bahkan di situs dengan desain “fluid”, ukuran gambar tidak berubah, dan pada lebar layar tertentu, garis horizontal
• Menghapus elemen template yang tidak penting. Mereka dapat berupa elemen dekoratif dan perangkat lunak yang tidak berfungsi pada perangkat seluler.
• Kecepatan unduh tinggi. Kecepatan Internet seluler masih relatif rendah, dan hal ini harus diperhitungkan saat mengembangkan situs web yang dirancang untuk dilihat di perangkat seluler.
• Pemakaiannya bersifat relatif tombol besar. Penggunaan perangkat seluler masukan sentuh dan tidak adanya kursor harus diperhitungkan saat mengembangkan desain.
• Bekerja dengan fungsi seluler, seperti geolokasi.

Desain ini didasarkan pada menggunakan CSS pertanyaan media Berkat permintaan ini, parameter perangkat yang digunakan pengunjung ditentukan terlebih dahulu, dan, bergantung pada pilihan ini, gaya yang sesuai dihubungkan, yaitu, dengan desain adaptif, satu situs digunakan dengan serangkaian gaya untuk berbeda perangkat. Misalnya jika pengunjung mengakses situs dengan komputer biasa, satu style sheet terhubung, dan dia melihat situs dengan header besar berwarna-warni, menu horisontal, beberapa kolom konten, dan saat menggunakan iPad, gaya yang berbeda diterapkan, dan alih-alih header besar, logo kecil ditampilkan, menu berubah menjadi daftar vertikal, dan konten ditarik ke dalam satu kolom.

Apakah mungkin untuk membuat ulang templat situs web yang sudah ada versi adaptif? Tentu saja bisa jika Anda memiliki pengetahuan yang memadai tentang HTML dan CSS. Namun, jika Anda menggunakan sistem manajemen konten apa pun - WordPress, Joomla!, Drupal, lebih baik mencarinya templat yang sudah jadi, Sekarang templat adaptif banyak yang telah dikembangkan. Omong-omong, di artikel saya “Cara memilih template untuk WordPress” Anda sekarang harus menambahkan item lain “Memeriksa respons template”.

Jadi, bisa dibilang desain responsif saat ini adalah yang paling banyak dengan cara modern pengembangan situs web dan, meskipun relatif rumit, ini adalah masa depan. Kemajuan tidak berhenti, perangkat baru yang lebih kompleks bermunculan, dan perangkat lunak itu juga menjadi lebih sulit bagi mereka.

Omong-omong, kursus unik Andrei Kudlay baru saja muncul. Dengan menggunakan framework Bootstrap, saat ini Anda dapat membuat website dengan desain yang indah, menyenangkan, profesional, tanpa perlu menjadi seorang profesional dalam tata letak. Dengan menggunakan kerangka kerja, bahkan pemula dalam pembuatan situs web pun dapat mengatur tata letak halaman, membuat situs web satu halaman, atau halaman arahan. Selain itu, situs ini akan cukup profesional, dan waktu yang dihabiskan untuk pembuatannya minimal.

Semua ini sangat serius, tetapi untuk istirahat, saya sarankan menyusun teka-teki dan melihat lukisan lain karya rekan senegara saya, Artis Rakyat Rusia N.P.

Tulis pendapat Anda tentang desain responsif di komentar.

Tata letak adaptif mengubah desain halaman bergantung pada perilaku pengguna, platform, ukuran layar, dan orientasi perangkat dan merupakan bagian integral dari pengembangan web modern. Ini memungkinkan Anda menghemat secara signifikan dan tidak perlu menggambar desain baru untuk setiap resolusi, tetapi mengubah ukuran dan lokasi masing-masing elemen.

Artikel ini akan membahas elemen utama situs dan cara mengadaptasinya.

Pada prinsipnya, Anda dapat membagi perangkat ke dalam kategori berbeda dan mendesain masing-masing perangkat secara terpisah, tetapi ini akan memakan banyak waktu, dan siapa yang tahu standar apa yang akan berlaku dalam lima tahun? Selain itu, menurut statistik, kami memiliki beragam resolusi yang berbeda:

Jelas terlihat bahwa kami tidak akan dapat terus mendesain untuk setiap perangkat secara terpisah. Tapi apa yang harus dilakukan?

Tentu saja, ini bukan metode yang sempurna, namun menghilangkan sebagian besar masalah.

Ethan Marcotte membuat template sederhana yang menunjukkan penggunaan tata letak responsif:

Pada pandangan pertama tampaknya semuanya mudah, tetapi sebenarnya tidak. Lihatlah logonya:

Jika Anda memperkecil seluruh gambar, tulisannya menjadi tidak terbaca. Oleh karena itu, untuk menyimpan logo, gambar dibagi menjadi dua bagian: bagian pertama (ilustrasi) dijadikan background, bagian kedua (logo) diubah ukurannya secara proporsional.

Elemen h1 berisi gambar sebagai latar belakang, dan gambar tersebut disejajarkan dengan latar belakang wadah (header).

Bekerja dengan gambar adalah salah satu masalah terpenting saat bekerja dengan desain responsif. Ada banyak cara untuk mengubah ukuran gambar, dan sebagian besar cukup mudah diterapkan. Salah satu solusinya adalah dengan menggunakan max-width di CSS:

Gambar (lebar maksimal: 100%;)

Lebar maksimum suatu gambar adalah 100% dari lebar layar atau jendela browser, jadi semakin kecil lebarnya maka semakin kecil pula gambarnya. Perhatikan bahwa max-width tidak didukung di IE, jadi gunakan width: 100% .

Metode yang disajikan adalah pilihan yang baik untuk membuat gambar adaptif, tetapi dengan hanya mengubah ukurannya, kita akan membiarkan bobot gambar tetap sama, yang akan menambah waktu pemuatan di perangkat seluler.

Teknik yang diperkenalkan oleh Filament Group ini tidak hanya mengubah ukuran gambar, tetapi juga mengompresi resolusi gambar di layar kecil untuk mempercepat pemuatan.

Teknik ini memerlukan beberapa file yang tersedia di Github. Pertama kita ambil file JavaScript ( rwd-images.js), berkas .htaccess Dan rwd.gif(berkas gambar). Kemudian kami menggunakan beberapa HTML untuk mengasosiasikan resolusi besar dan kecil: pertama gambar kecil dengan awalan .R(untuk menunjukkan bahwa gambar harus responsif), lalu link ke gambar besar menggunakan data-fullsrc:

Untuk layar apa pun yang lebih lebar dari 480 piksel, gambar akan dimuat resolusi tinggi (resolusi besar.jpg), dan di layar kecil itu akan dimuat ( resolusi kecil.jpg).

Di iPhone dan iPod Sentuh ada kekhasan: desain yang dibuat untuk layar besar akan menyusut begitu saja di browser dengan resolusi kecil tanpa menggulir atau tata letak seluler tambahan. Namun, gambar dan teks tidak akan terlihat:

Untuk mengatasi masalah ini, gunakan tag meta:

Jika skala awal sama dengan satu, lebar gambar menjadi sama dengan lebar layar.

Untuk perubahan signifikan pada ukuran halaman, Anda mungkin perlu mengubah susunan elemen secara keseluruhan. Hal ini dapat dilakukan dengan mudah melalui file gaya terpisah atau, lebih efisien, melalui kueri media CSS. Seharusnya tidak ada masalah karena sebagian besar gaya akan tetap sama dan hanya sedikit yang berubah.

Misalnya, Anda punya berkas utama dengan gaya yang menentukan #wrapper , #content , #sidebar , #nav beserta warna, latar belakang, dan font. Jika gaya utama Anda membuat tata letak Anda terlalu sempit, pendek, lebar, atau tinggi, Anda dapat mengidentifikasinya dan memasukkan gaya baru.

style.css (utama):

/* Gaya dasar yang akan diwarisi oleh style sheet anak */ html,body( background... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Elemen struktural */ #wrapper( lebar: 80%; margin: 0 otomatis; latar belakang: #fff; padding: 20px; ) #content( lebar: 54%; float: kiri; margin-kanan: 3%; ) # sidebar-kiri( lebar: 20%; float: kiri; margin-kanan: 3%; ) #sidebar-kanan( lebar: 20%; float: kiri; )

mobile.css (anak):

#wrapper( lebar: 90%; ) #content( lebar: 100%; ) #sidebar-left( lebar: 100%; jelas: keduanya; /* Gaya tambahan untuk desain baru */ border-top: 1px solid #ccc ; margin-top: 20px; ) #sidebar-right( lebar: 100%; jelas: keduanya; /* Gaya tambahan untuk tata letak baru kita */ border-top: 1px solid #ccc; margin-top: 20px; )

Di layar lebar kiri dan kanan panel samping pas di bagian samping. Pada layar yang lebih sempit, blok-blok ini terletak satu di bawah yang lain untuk kenyamanan yang lebih baik.

Mari kita lihat bagaimana Anda dapat menggunakan media queries CSS3 untuk membuat desain responsif. min-width menentukan lebar minimum jendela atau layar browser tempat gaya tertentu akan diterapkan. Jika ada nilai di bawah min-width , gaya akan diabaikan. max-width melakukan yang sebaliknya.

@media screen dan (min-width: 600px) ( .hereIsMyClass ( lebar: 30%; float: right; ) )

Kueri media hanya akan berfungsi jika lebar minimum lebih besar dari atau sama dengan 600 piksel.

@media screen dan (lebar maksimal: 600px) ( .aClassforSmallScreens ( hapus: keduanya; ukuran font: 1.3em; ) )

Dalam hal ini kelas ( aClassforSmallscreens) akan berfungsi bila lebar layar kurang dari atau sama dengan 600 piksel.

Meskipun lebar minimum dan lebar maksimal dapat diterapkan pada lebar layar dan lebar jendela browser, kami mungkin hanya perlu bekerja dengan lebar perangkat. Misalnya saja mengabaikan browser yang dibuka di jendela kecil. Anda dapat menggunakan min-device-width dan max-device-width untuk ini:

@media screen dan (max-device-width: 480px) ( .classForiPhoneDisplay ( font-size: 1.2em; ) ) @media screen dan (min-device-width: 768px) ( .minimumiPadWidth ( clear: keduanya; margin-bottom : 2px padat #ccc;) )

Khusus untuk iPad, media queries memiliki properti orientasi, yang nilainya dapat berupa keduanya lanskap(horizontal), atau potret(vertikal):

@layar media dan (orientasi: lanskap) ( .iPadLandscape ( lebar: 30%; float: kanan; ) ) @layar media dan (orientasi: potret) ( .iPadPortrait ( jelas: keduanya; ) )

Anda juga dapat menggabungkan nilai kueri media:

@media screen dan (min-width: 800px) dan (max-width: 1200px) ( .classForaMediumScreen ( latar belakang: #cc0000; lebar: 30%; float: right; ) )

Kode ini hanya akan dijalankan untuk layar atau jendela browser dengan lebar antara 800 dan 1200 piksel.

Anda dapat memuat lembar tertentu dengan gaya untuk nilai kueri media yang berbeda seperti ini:

Jika browser Anda tidak mendukung media queries CSS3, maka penggantian gaya dapat dilakukan dengan menggunakan jQuery:

$(document).ready(function())( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // Jika lebarnya kurang dari 600 piksel, stylesheet seluler digunakan jika(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Jika lebarnya lebih besar dari 600 px, stylesheet desktop digunakan $("link").attr((href: "style.css")); ) ) ));

Kemampuan untuk mengecilkan dan mengatur ulang elemen agar muat di layar kecil sangatlah bagus. Tapi ternyata tidak pilihan terbaik. Perangkat seluler biasanya menampilkan serangkaian perubahan yang lebih luas: navigasi yang disederhanakan, konten yang lebih terfokus, daftar atau baris, bukan kolom.

Inilah markup kami:

Konten Bilah Sisi Kiri | Konten Sidebar Kanan

style.css (utama):

#content( lebar: 54%; float: kiri; margin-kanan: 3%; ) #sidebar-kiri( lebar: 20%; float: kiri; margin-kanan: 3%; ) #sidebar-kanan( lebar: 20 %; mengambang: kiri; ) .sidebar-nav( tampilan: tidak ada; )

mobile.css (disederhanakan):

#content( lebar: 100%; ) #sidebar-kiri( tampilan: tidak ada; ) #sidebar-kanan( tampilan: tidak ada; ) .sidebar-nav( tampilan: inline; )

Jika ukuran layar diperkecil, Anda dapat, misalnya, menggunakan skrip atau file gaya alternatif untuk menambah spasi atau mengganti navigasi agar lebih nyaman. Jadi, dengan kemampuan menyembunyikan dan menampilkan elemen, mengubah ukuran gambar, elemen, dan banyak lagi, Anda dapat menyesuaikan desain ke perangkat dan layar apa pun.

Semua orang membicarakan tentang desain web responsif. Namun apakah ini berarti semua orang memahami tujuannya?

Desain responsif bukan hanya tentang mengembangkan website untuk perangkat seluler, nih yang sedang kita bicarakan tentang mengadaptasi tata letak untuk ukuran yang berbeda layar (area pandang).

Dalam tutorial ini, kita akan melihat prinsip dasar di balik desain web responsif untuk lebih memahami teknik ini. Selanjutnya, kita akan membuat situs web responsif yang dapat diskalakan dengan sempurna pada layar besar dan kecil. Desain web responsif telah menjadi sangat populer karena semakin banyak orang yang menggunakan perangkat seluler seperti iPhone, iPad, BlackBerry, serta ponsel cerdas dan tablet berkemampuan internet lainnya.

Penting untuk dipahami bahwa situs tidak boleh dibuat untuk desktop atau perangkat seluler tertentu. Yang penting di sini adalah kemampuan tata letak untuk beradaptasi dengan ukuran yang berbeda.

Frustrasi pengguna

Beberapa orang menganggap wajar jika pengguna mengurangi fungsionalitas dan menghilangkan konten yang mereka anggap tidak penting. Namun bagaimana Anda bisa yakin bahwa informasi yang Anda potong atau pindahkan ke halaman sekunder bukanlah konten yang paling penting bagi saya?!

Pertama, Anda perlu memahaminya desain responsif, ini bukan hanya tentang kepedulian desain seluler. Kedua, mengembangkan situs web responsif yang baik membutuhkan jumlah besar waktu dan tenaga, bukan hanya bantuan pertanyaan media. Dengan jumlah perangkat web yang sangat besar dan terus bertambah, sangat penting untuk memberikan kesempatan pada situs web Anda untuk memfasilitasi pengalaman pengguna secara efektif.

Untuk website responsive, kita bisa menggunakan kode yang sama baik untuk desktop maupun mobile. Ini nyaman karena kita tidak perlu menyesuaikan konten secara terpisah untuk setiap perangkat. Namun banyak situs menyembunyikan kontennya karena dianggap tidak diperlukan. pengguna seluler. Ada dua masalah dengan ini:

• Pertama, ini secara efektif memberikan sanksi kepada pengguna seluler yang menjelajahi situs.
• Kedua, gaya tersembunyi di CSS tidak berarti konten tidak dapat dimuat. Hal ini dapat berdampak besar pada efisiensi, terutama bagi mereka yang konektivitasnya buruk.

Oleh karena itu, pendekatan terbaik untuk pengembangan situs web adalah dengan mempertimbangkan seluler atau perangkat kecil, Pertama. Dengan cara ini Anda bisa fokus secara maksimal informasi penting, yang harus dihasilkan situs web Anda. Dan kemudian, jika perlu, Anda dapat menggunakan metode pemuatan bersyarat, di mana kisi tata letak, gambar besar, dan kueri media ditempatkan di atas desain layar kecil yang ada.

Panduan langkah demi langkah

Untuk tutorial ini, kami membuat situs web yang berskala sempurna antara layar besar dan kecil. Anda menyimpan semua konten, di semua ukuran layar. Dan dengan menggunakan kueri media, navigasi akan dialihkan dari tampilan horizontal ke vertikal untuk perangkat yang lebih kecil.

Elemen kunci fleksibilitas dalam desain responsif adalah lebar tata letak yang dapat disesuaikan. Yang perlu Anda lakukan hanyalah membuat lebar pembungkus, konten, dan kolom yang akan beradaptasi dengan lebar perangkat yang berbeda. Hal ini bukanlah hal yang baru, namun saat ini hal ini lebih penting daripada sebelumnya. Untuk mempermudah, kami akan membuat halaman lancar yang terdiri dari navigasi, gambar utama, dan dua kolom, yang memperhitungkan lokasi pada perangkat berbagai ukuran. Kami juga menyertakan respond.min.js, yang memungkinkan kueri media berfungsi di IE6-8.

Struktur HTML dasar:

Demo situs responsif

• Gulir ke konten

• Rumah
• Membeli
• Melayani
• Kontak

Sejarah model Mercedes SL dimulai pada tahun 1954 - saat itulah Jerman menghadirkan Mercedes 190 SL dua pintu di New York Auto Show. Bisa dibayangkan betapa terkejutnya para pengunjung pameran motor saat itu. Di bawah bodi keindahan menawan terdapat platform pendek dari sedan Mercedes W120 Ponton dan monocoque baja. Suspensinya sepenuhnya independen - dengan double wishbone di depan dan poros ayun di belakang. Panjang - 4290 mm, jarak antar gandar - 2400 mm.

Terkait CSS, menyetel lebar maksimal adalah ide yang bagus; ini akan menghentikan penskalaan situs di layar besar, namun tidak akan menghentikan penyusutan halaman. Salah satu masalah utama saat beralih dari lebar tetap ke lebar lancar adalah gambar. Di CSS, ada solusi sederhana untuk masalah ini. Cukup atur lebar gambar menjadi 100%. Mari tambahkan juga otomatis untuk tinggi gambar guna menghindari gambar tergencet di Opera dan Safari pada layar kecil:

/* Tata letak */ #wrapper ( lebar: 96%; lebar maksimal: 920 piksel; margin: otomatis; padding: 2%; ) #main ( lebar: 60%; margin-kanan: 5%; float: kiri; ) samping ( lebar: 35%; float: kanan; ) /* Logo H1 */ header h1 ( tinggi: 98px; lebar: 216px; float: kiri; tampilan: blok; latar belakang: url(images/sllogo.png) 0 0 tidak- ulangi; indentasi teks: -9999px; ) /* Navigasi */ navigasi header ( float: kanan; margin-atas: 40px; ) navigasi header li ( tampilan: inline; margin-kiri: 15px; ) navigasi header ul li a ( dekorasi teks:tidak ada; warna:#333;) #skipTo ( tampilan: tidak ada; ) #skipTo li ( latar belakang: #ccc; ) /* Gambar utama*/ #banner ( float: kiri; margin-bawah: 15 piksel; lebar : 100%; ) #banner img ( lebar: 100%; tinggi: otomatis; )

Gambar Anda akan muncul pada elemen induknya dengan lebar penuh, dan akan menyusut seiring dengan itu. Pastikan saja lebar maksimum gambar tidak melebihi lebar maksimum wadahnya.

Menggunakan gambar berukuran besar dapat memengaruhi waktu pemuatan. Jadi untuk layar yang lebih kecil, terdapat metode gambar responsif yang mendeteksi ukuran layar pengguna dan menghasilkan gambar yang lebih kecil/besar tergantung kebutuhan. Cara ini masih sulit disebut ideal, namun tetap patut dipertimbangkan.

Ganti navigasi utama

Alasan utama mengapa Anda perlu mengubah navigasi adalah karena minimisasi yang terjadi, yang dapat membuat tombol tidak terbaca dan sulit untuk diklik. Menggunakan metode ini akan membuat hidup pengguna lebih mudah. Anda juga akan melihat dalam kode bahwa kami telah membuat perubahan pada bagian #main dan samping untuk menggabungkannya menjadi satu kolom.

/* Kueri media */ @media screen and (max-width: 480px) ( #skipTo ( display: block; ) navigasi header, #main, side ( float: left; clear: left; margin: 0 0 10px; width : 100%; ) navigasi header li ( margin: 0; latar belakang: #ccc; tampilan: blok; margin-bawah: 3px; ) navigasi header a ( tampilan: blok; padding: 10px; perataan teks: tengah; )

Anda akan melihat bahwa pada beberapa perangkat seluler, situs web Anda akan secara otomatis menyusut agar sesuai. dari layar ini. Poin ini menjadi masalah ketika kita perlu memperbesar ukuran layar untuk menavigasi konten yang tidak nyaman.

Agar pertanyaan media dapat diterapkan sepenuhnya, situs responsif yang dioptimalkan untuk seluler harus berisi sesuatu seperti berikut:

Properti width bertanggung jawab atas ukuran viewport. Ini dapat diatur ke jumlah piksel tertentu, lebar=960, atau ke nilai lebar perangkat, yaitu lebar layar dalam piksel pada skala 100%. Properti skala awal mengontrol skala saat halaman pertama kali dimuat. Properti skala maksimum, skala minimum, dan dapat diskalakan pengguna mengontrol bagaimana pengguna dapat menskalakan halaman (lebih besar/lebih kecil).

Pengguna internet menjelajahi situs web perangkat yang berbeda dengan layar berbagai ukuran. Ukuran layar terus berubah, jadi penting bagi situs untuk beradaptasi dengan salah satunya. Ada dua pendekatan utama untuk membuat situs web yang mudah diadaptasi jenis yang berbeda perangkat:

Desain Responsif (RWD) - desain responsif - mendesain situs dengan nilai properti tertentu, misalnya, kisi tata letak fleksibel yang memungkinkan satu tata letak berfungsi pada perangkat berbeda;

Desain Adaptif (AWD) - desain adaptif, atau tampilan dinamis - mendesain situs dengan kondisi yang berubah bergantung pada perangkat, berdasarkan beberapa tata letak dengan lebar tetap.

Filsafat desain web responsif adalah situs tersebut nyaman untuk dilihat dari perangkat apa pun, berapa pun ukuran layarnya. Ungkapan desain responsif diciptakan oleh Ethan Marcotte pada tahun 2011. Fitur utama desain web responsif - karena grid yang berubah-ubah, tata letak secara otomatis merespons perubahan ukuran layar, menggembung atau menyusut seperti balon.

Desain Web Responsif menggabungkan tiga teknik - tata letak berbasis grid yang fleksibel, gambar yang fleksibel, dan kueri media.

Fleksibilitas tata letak berdasarkan penggunaan unit relatif dimensi, bukan nilai piksel tetap, sehingga lebarnya dapat disesuaikan agar sesuai dengan ruang yang tersedia.

Fleksibilitas konten teks dicapai dengan menghitung ukuran font relatif terhadap ukuran font default browser sebesar 16 piksel, misalnya tetap ukuran font: Ukuran relatif 42px adalah 42px / 16px = 2.625em.

Masalah gambar yang fleksibel diselesaikan menggunakan aturan img (lebar: 100%; lebar maksimal: 100%;) untuk semua gambar di situs. Aturan ini memastikan bahwa gambar tidak pernah lebih lebar dari wadahnya dan tidak pernah melebihi ukuran sebenarnya di layar yang lebih besar.

Kueri media mengubah gaya berdasarkan karakteristik perangkat yang terkait dengan tampilan konten, termasuk jenis layar, lebar, tinggi, orientasi, dan resolusi. Kueri media membuat desain responsif yang menerapkan gaya yang sesuai untuk setiap ukuran layar.

Dapat diskalakan grafis vektor- gunakan gambar svg yang dapat disesuaikan dengan ukuran apa pun tanpa kehilangan kualitas dan terlihat bagus di layar Retina.

Antarmuka kartu - gunakan apa yang disebut antarmuka kartu - bentuk persegi panjang dengan sudut membulat yang mewakili wadah konten. Blok tersebut adalah unit antarmuka mandiri dan mudah untuk dipindahkan di sekitar tata letak.

Tinggalkan hanya yang penting - selamat datang, terutama untuk desain responsif. Ciptakan antarmuka minimalis yang responsif dan ramah yang semakin populer saat ini.

Prioritaskan dan sembunyikan konten dengan benar - gunakan elemen tersembunyi kontrol, terutama untuk perangkat dengan layar kecil. Jendela pop-up, tab, menu di luar kanvas, dan teknik serupa lainnya akan membantu mengurangi jumlah elemen pada halaman. Mengosongkan ruang dari elemen yang tidak perlu, Anda akan membuat antarmuka menjadi nyaman dan ramah pengguna.

Buat ruang besar yang dapat diklik untuk tombol Anda - semakin besar area tombol yang dapat diklik, semakin mudah bagi pengguna untuk berinteraksi dengannya.

Tambahkan interaktivitas ke antarmuka Anda - sebagai respons terhadap tindakan pengguna, buat tindakan respons - animasi yang akan berfungsi saat mengarahkan kursor ke elemen di perangkat desktop dan saat menyentuh elemen di perangkat seluler.

Ke browser seluler untuk sistem operasi Android dan iOS, ukuran halaman situs tidak diubah secara otomatis; tag khusus dengan atribut name="viewport" digunakan. DI DALAM tanda ini diperbolehkan untuk menetapkan nilai tertentu parameter lebar dan skala awal:

— skala awal=1 berarti ukuran halaman di browser akan sama dengan 100% ukuran area pandang. Artinya, rasio antara piksel fisik dan piksel css adalah 1:1;

— width=device-width berarti lebar halaman akan sama dengan 100% lebar jendela browser apa pun. Artinya, lebar halaman situs sesuai dengan lebar perangkat, sehingga tidak perlu diskalakan.

DI DALAM dalam contoh ini konten di jendela browser akan 2 kali lebih besar dibandingkan ukuran fisiknya.

Tag juga dapat digunakan untuk mengontrol seberapa banyak pengguna dapat menambah atau mengurangi lebar laman:

Kode ini memungkinkan Anda menambah lebar halaman ke nilai yang sama dengan 3 kali lebar layar perangkat dan menguranginya menjadi setengah lebar layar perangkat.

Anda dapat menolak kemampuan pengguna untuk melakukan penskalaan menggunakan atribut user-scalable :

Sebagian besar tata letak yang digunakan untuk membuat desain web responsif termasuk dalam salah satu dari lima kategori pola yang ditentukan oleh Luke Wroblewski:
Kebanyakan Cairan (Paling kenyal),
Column Drop (Kolom di bawah satu sama lain),
Layout Shifter (Memindahkan tata letak),
Perubahan Kecil (Perubahan kecil),
Di Luar Kanvas.
Dalam beberapa kasus, halaman mungkin menggunakan kombinasi templat, seperti Column Drop dan Off Canvas.

Tata letak populer yang sebagian besar terdiri dari jaring karet. Pada layar berukuran besar atau sedang, ukurannya biasanya tidak berubah; pada layar besar, hanya margin yang disesuaikan. Pada layar kecil kotak karet menyebabkan tata letak dihitung ulang untuk konten utama, dan kolom ditempatkan satu di bawah yang lain. Kelebihan template adalah hanya memerlukan satu titik kontrol antara layar kecil dan layar besar.

Kolom ditempatkan satu per satu secara vertikal jika lebar jendela tidak dapat menampilkan seluruh konten. Hasilnya, kolom-kolom tersebut akan ditempatkan secara vertikal di bawah satu sama lain. Pilihan breakpoint untuk template tata letak ini bergantung pada konten dan ditentukan untuk setiap opsi desain secara terpisah.

Paling templat responsif, karena menyediakan beberapa titik kontrol untuk layar dengan lebar berbeda. Perbedaan utama dengan tata letak ini adalah alih-alih menghitung ulang pohon render dan menempatkan kolom di bawah satu sama lain, kontennya dipindahkan. Karena perbedaan yang signifikan antara yang utama titik kontrol, dukungan untuk tata letak ini lebih banyak tugas yang menantang, selain itu, Anda mungkin harus mengubah tidak hanya tata letak konten secara keseluruhan, tetapi juga elemennya.

Templat berkontribusi perubahan kecil hingga tata letak, misalnya mengatur ukuran font, mengubah ukuran gambar, atau memindahkan konten. Ini berfungsi dengan baik pada tata letak satu kolom, seperti situs satu halaman dan artikel dengan sejumlah besar teks.

Konten yang jarang digunakan, seperti elemen navigasi atau menu aplikasi, ditempatkan di luar layar dan hanya ditampilkan jika ukuran layar memungkinkan. Pada layar yang lebih kecil, konten terbuka dengan satu klik.

Berbeda dengan desain responsif, Desain Web Adaptif berfokus pada ukuran perangkat. Ia menggunakan beberapa tata letak statis untuk berbagai jenis perangkat (perangkat seluler, tablet, komputer desktop), berdasarkan titik kontrol (pemutus). Artinya, tata letak dimuat ketika ukuran tertentu jendela browser perangkat, dan transisi antar tata letak terjadi secara tiba-tiba, bukan mulus.

Biasanya, tata letak responsif memiliki enam opsi tata letak bergantung pada lebar layar:
320
480
760
960
1200
1600.

Dalam tata letak responsif peran utama fungsionalitas berperan, yaitu, saat membuat desain, fitur perangkat diperhitungkan, misalnya, kontrol sentuh untuk perangkat seluler atau ruang besar untuk monitor desktop.

Pertahankan konsistensi - situs web apa pun harus dibuat hubungan kepercayaan dengan pengguna sehingga ia merasa nyaman saat bernavigasi dan berinteraksi dengannya. Desain yang konsisten berarti ketika berpindah ke halaman lain di suatu situs, pengguna tidak merasa seperti berada di situs lain. Memperhatikan detail kecil, membangun hierarki visual, elemen penting sorot dalam huruf tebal. Gunakan skema warna yang konsisten di seluruh situs, gunakan kembali elemen yang sama untuk situasi berbeda, seperti desain notifikasi popup yang sama.

Gunakan kisi—struktur 12 kolom lebih disukai untuk mengontrol lebar kolom dan jarak antar kolom.

Untuk membuat tata letak responsif, gunakan kueri media dan ukuran relatif elemen grid ditentukan menggunakan % . Dalam desain responsif, skrip sisi server terlebih dahulu menentukan jenis perangkat yang digunakan pengguna untuk mengakses situs (desktop, ponsel, atau tablet), kemudian memuat versi halaman yang paling optimal untuk perangkat tersebut. Elemen kisi diberi ukuran px tetap.

Oleh karena itu, perbedaan utama antara teknik ini adalah desain responsif - satu tata letak untuk semua perangkat, desain adaptif - satu tata letak untuk setiap jenis perangkat.

Emulator Android untuk Windows, Linux dan Mac OS X. Simulator iOS hanya tersedia untuk pengguna Mac OS X dan merupakan bagian dari paket Xcode (dapat diunduh secara gratis dari Aplikasi Mac Toko).

Skrip PHP yang berjalan di situs web mana pun mendeteksi ukuran layar dan menyesuaikan ukuran gambar agar sesuai, sehingga menghasilkan ukuran gambar kecil di layar kecil.

Tabel korespondensi dimensi fisik nilai tinggi dan lebar css perangkat, serta nilai rasio piksel untuk perangkat seluler.

Kumpulan situs web yang menggunakan media queries dan desain web responsif.

Kerangka kerja CSS berdasarkan tata letak 12 kolom, maksimum 960 piksel. Mendukung Chrome, Safari, Firefox, IE 7 dan yang lebih baru, versi seluler browser.

Seperangkat alat untuk mengembangkan aplikasi web. Bahasa KURANG, tata letak adaptif 12 kolom, dukungan untuk perangkat seluler, tablet dan monitor, banyak komponen, tombol, menu tarik-turun, gaya bidang masukan khusus, daftar, judul, label, ikon, peringatan, tab, bilah kemajuan, keterangan alat, “ accordion” ", "carousel", dan seterusnya, berbagai plugin Javascript, dukungan Scaffolding, termasuk penerapan gaya Bootstrap pada HTML yang sudah dibuat.