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 Berkat jenis tata letak ini, situs dapat dilihat di monitor dengan resolusi 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, revolusi seluler terjadi - jumlah koneksi ke Internet perangkat seluler (laptop, ponsel cerdas, tablet) meningkat nomor lebih banyak komputer desktop. Lalu lintas seluler meningkat, dan ada kebutuhan untuk menampilkan situs dengan benar di layar jumlah besar beragam perangkat yang berbeda. 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 dan pilih dari jumlah yang memadai daftar besar perangkat yang diinginkan. Bisa jadi komputer desktop , dan tablet berbagai jenis

, dan telepon seluler. 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. Menggunakan.

desain responsif Opsi mana yang akan diterapkan, tentu saja, terserah pada pemilik atau pelanggan situs untuk memutuskan. Jika situs sudah lama dibuat, memiliki desain gambar tangan yang merupakan bagian dari merek, maka mungkin ada baiknya membuat versi seluler

Apa itu desain responsif?

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.

Apa solusinya? Dia ada di dalam perubahan radikal halaman web. Perubahan ini terdiri dari fakta bahwa setelah pengurangan bertahap dalam lebar kolom, struktur halaman dibangun kembali - direntangkan menjadi satu kolom. Tapi ini bukan satu-satunya perbedaan.

• Menyesuaikan dengan ukuran dan orientasi layar, mulai dari monitor besar PC desktop ke 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 gulir untuk melihatnya. Saat menggunakan desain responsif, gambar juga “pas” dengan ukuran layar.
• Menghapus elemen template yang tidak penting. Ini dapat berupa elemen dekoratif atau perangkat lunak yang tidak berfungsi pada perangkat seluler.
• Kecepatan unduh tinggi. Kecepatan internet seluler masih relatif kecil, dan hal ini harus diperhitungkan saat mengembangkan situs yang dimaksudkan 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, misalnya, geolokasi.

Desain ini didasarkan pada penggunaan media query CSS. 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 mengubah templat situs web yang sudah ada menjadi versi responsif? 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, kini banyak template adaptif telah dikembangkan. Ngomong-ngomong, di artikel saya sekarang saya harus menambahkan satu item lagi "Memeriksa kemampuan adaptasi 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, dan untuk beristirahat, 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.

Membuat templat situs web responsif cukup mudah, namun menjaga keseimbangan elemen di semua titik di seluruh templat adalah seni yang nyata. Tutorial ini memperkenalkan 5 teknik yang digunakan dalam CSS untuk template responsif. Ada properti CSS yang sangat sederhana seperti min-width, max-width, overflow, dan nilai relatif, namun semuanya memainkan peran penting dalam mengembangkan desain responsif.

Trik CSS ini memungkinkan video yang disematkan melebar hingga batas yang ditentukan.

Video ( posisi: relatif; padding-bawah: 56,25%; tinggi: 0; luapan: tersembunyi; ) .video iframe, objek .video, .video embed ( posisi: absolut; atas: 0; kiri: 0; lebar: 100% ; tinggi: 100% )

Properti max-width memungkinkan Anda mengatur lebar maksimum suatu elemen. Ini harus digunakan untuk mencegah suatu elemen meluas melampaui batas tertentu.

Contoh di bawah mendefinisikan ukuran kontainer sebagai 800 piksel, namun menetapkan batas ukuran menjadi 90%.

Wadah (lebar: 800 piksel; lebar maksimal: 90%; )

Anda dapat mengubah ukuran gambar secara otomatis ke ukuran maksimumnya menggunakan properti max-width:100% dan height:auto.

Img (lebar maks: 100%; tinggi: otomatis; )

Kode di atas adalah untuk gambar adaptif berfungsi di IE7 dan IE9, tetapi tidak berfungsi di IE8. Untuk memperbaiki situasi ini, Anda perlu menambahkan properti width:auto. Anda dapat menggunakan kondisional aturan CSS khusus untuk IE8 atau di bawahnya diberikan trik untuk IE:

@media \0screen ( img ( lebar: otomatis; /* misalnya 8 */ ) )

Properti min-width adalah kebalikan dari properti max-width. Ini menetapkan lebar elemen minimum yang mungkin. Di bawah ini adalah contoh penggunaan properti min-width untuk mencegah kolom input menjadi terlalu kecil saat diperkecil.

DI DALAM templat adaptif Menggunakan nilai relatif dapat sangat menyederhanakan dan meningkatkan kode CSS Anda penampilan desain.

Di bawah ini adalah contoh komentar yang menggunakan lebar relatif margin kiri untuk membuat lekukan pada struktur pohon. Alih-alih nilai absolut dalam px, nilai ini digunakan nilai persentase untuk level berikutnya dalam daftar. Di sisi kiri gambar Anda dapat melihat bahwa pada perangkat seluler, ruang yang tersedia untuk item daftar mungkin tidak cukup untuk tampilan normal jika nilai absolut digunakan.

Dengan menggunakan nilai relatif untuk ukuran font (em atau %) Anda dapat dengan mudah mencapai perubahan yang sesuai pada tinggi garis dan ukuran lekukan saat mengadaptasi templat ke ukuran layar perangkat. Misalnya, semua elemen terkait secara otomatis diubah ukurannya saat Anda menetapkan ukuran font baru untuk elemen induk.

Gambar di bawah menunjukkan manfaat menggunakan nilai % relatif untuk padding. Blok di sebelah kiri memiliki ruang yang tidak seimbang ketika menerapkan nilai px absolut. Blok di sebelah kanan memiliki tampilan luar biasa dengan konten proporsional.

Anda dapat mencegah teks membungkus elemen menggunakan properti overflow. Sangat sederhana dan cara yang berguna. Anda dapat membuka bungkusan teks di sekitar elemen sebelumnya dan mempertahankan struktur konten.

Properti max-width membantu Anda memasukkan teks yang tidak dapat dipecahkan (seperti URL yang panjang) ke dalam beberapa baris, bukan hanya satu.

Kata ganti ( bungkus kata: kata putus; )

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 layar yang berbeda (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 website responsif yang baik membutuhkan banyak waktu dan tenaga, bukan hanya bantuan media queries. 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 untuk keduanya komputer desktop, dan untuk perangkat seluler. Ini nyaman karena kita tidak perlu menyesuaikan konten secara terpisah untuk setiap perangkat. Namun banyak situs menyembunyikan kontennya karena dianggap tidak perlu. 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. Lalu, 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 penempatan akun pada perangkat dengan ukuran berbeda. 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.

Ketika berbicara tentang CSS, pengaturan max-width adalah ide yang bagus, ini akan menghentikan penskalaan situs layar besar, namun tidak akan menghalangi Anda untuk memotong 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: 15px; 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. Oleh karena itu untuk tidak layar besar, terdapat metode responsif untuk gambar yang mendeteksi ukuran layar pengguna, dan menghasilkan gambar 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 dengan layar. 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).

Salam, pengunjung biasa dan pembaca tetap situs blog!

Selama keberadaan situs ini, saya beberapa kali mengganti template dan bahkan membuatnya sendiri dari awal.
Salah satu tugas utama saat memilih 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 dan mengapa 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.

Pertama, Jika Anda memutuskan untuk membuat desain website responsif, sisipkan kode berikut di antara tag:

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

Bayangkan, saya menggambar sebuah desain, lalu menuliskan semuanya gaya yang dibutuhkan dan permintaan, saya 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 tidak menuliskan kode yang saya sebutkan diatas, peramban seluler tidak memahami bahwa situs tersebut adaptif dan hanya mencoba memperkecil halaman situs agar sesuai dengan layar ponsel yang kecil.

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

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 maksimal: 1599 piksel) ( )

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

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

• 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 dan lebih banyak lagi - PC.

Izin-izin inilah yang perlu ditekankan dan diberikan perhatian khusus dengan tata letak adaptif. Ini adalah jenis resolusi layar yang paling umum.

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.

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

Layanan gratis yang sangat akurat dan terpenting yang patut dihormati dan berterima 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.

Terjemahan artikel yang sangat berharga “Teknik, Alat, dan Strategi Desain Web Responsif” dari publikasi online populer untuk pengembang Smashing Magazine.

Pada bulan Januari lalu, kami menerbitkan artikel tentang desain responsif, “Desain Web Responsif: Apa Artinya dan Cara Menggunakannya.” Desain web responsif terus mendapatkan banyak perhatian, namun mengingat betapa berbedanya dari... metode tradisional pengembangan situs web, mungkin tampak sangat rumit bagi para desainer dan pengembang yang belum mencobanya.

Untuk itu, kami telah menyusun ulasan sumber daya yang berguna saat membuat situs web responsif. Ulasannya disertakan panduan rinci, pendekatan, alat, artikel yang berisi nasihat praktis diperlukan untuk membuat situs web responsif Anda sendiri.

Elliot Jay Stocks menjelaskan secara detail tentang metode menggabungkan Kueri Media CSS dan transisi CSS. Ide utamanya adalah ini: mengembangkan situs web yang responsif dengan menggunakan Media Pertanyaannya, Anda terus-menerus mengubah lebar browser Anda untuk melihat bagaimana situs berperilaku dengannya. Namun setiap kali salah satu Kueri Media Anda diproses, transisi kaku antar gaya akan terlihat (yang pertama, misalnya, untuk desktop, yang kedua untuk tablet). Mengapa tidak menggunakan transisi CSS untuk memuluskan transisi sulit tersebut dengan animasi?

Gambar karet adalah salah satu tema sentral dalam desain web responsif. Artikel oleh Ethan Marcotte memberi ulasan rinci membuatnya menggunakan cuplikan kode img klasik ( max-width: 100%; ), bersama dengan semua detail penting yang Anda perlukan untuk memulai.

Untuk melihat email berukuran besar seringkali diperlukan pengguliran horizontal, apalagi jika ditempelkan gambar berukuran besar pada surat tersebut. Dalam studi ini, Campaign Monitor menjelaskan caranya email dapat dioptimalkan untuk perangkat seluler menggunakan Media Queries dan menyediakan beberapa teknik dan cuplikan kode yang berguna untuk penggunaan praktis.

Ini adalah Polyfill yang cepat dan ringan (sepotong kode yang menambahkan fungsionalitas yang tidak didukung oleh browser) yang dibuat oleh Scott Jehl untuk mendukung properti min-width dan max-width dari CSS3 Media Query di IE6-IE8 dan yang lebih baru.

Gunakan informasi dari alat kecil ini untuk membuat situs web responsif.

Alat untuk membuat prototipe cepat desain responsif. Anda dapat mendesain CSS untuk berbagai ukuran layar, orientasi, dan browser populer, baik itu ponsel (BlackBerry Torch, Google Perhubungan Satu, iPhone, Motorola Droid), tablet (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), monitor atau TV (720p, 1080p).

Anda dapat melihat hasil desain Anda langsung di browser dan menggunakan alat pengembangan favorit Anda, seperti Firebug. Coba juga alat alternatif ScreenFly.

Alat 320 dan Lebih Tinggi didasarkan pada prinsip seluler terlebih dahulu(mobile first), dimana desain dibuat terlebih dahulu untuk layar perangkat seluler dan kemudian diperluas untuk tablet, PC desktop, dan layar yang lebih besar. Ia bekerja dengan baik baik sebagai tambahan pada boilerplate HTML5 maupun sebagai tambahannya sendiri.

Ini adalah templat yang dapat disesuaikan untuk membuat kaya fitur dan berkinerja tinggi aplikasi web seluler. Anda akan mendapatkan kompatibilitas lintas browser untuk smartphone kelas A dan dukungan yang baik Untuk BlackBerry lama, Symbian dan IE Seluler. Serta sejumlah besar optimasi berbeda untuk browser seluler.

1140 CSS Grid dioptimalkan untuk bekerja pada layar mulai dari ukuran perangkat seluler hingga monitor lebar 1280px. Ini adalah grid sederhana dan fleksibel menggunakan Media Query.

Kerangka kerja CSS ini adalah dasar yang baik untuk dikembangkan pada layar kecil (seperti ponsel) dan layar kecil(misalnya tablet) langsung dari kotaknya dengan sedikit usaha. Selain itu, ada generator untuk membuat kerangka CSS yang fleksibel untuk Anda sendiri.

Flurid adalah jaring karet dengan 6, 7, 8, 9, 10, 12 dan 16 kolom.

FluidGrids - generator jaringan modular, yang membuat tata letak 6, 7, 8, 9, 10, 12, atau 16 kolom.

Kerangka kerja CSS untuk membuat tata letak responsif. Ini berisi 4 tata letak dasar dan tiga set tipografi.

Kerangka kerja yang cair dengan fokus pada tipografi.

Tiny Fluid Grid akan membantu Anda membuat grid fluida Anda sendiri yang terdiri dari 12, 16 atau 24 kolom, mengatur lebar maksimum dan minimum serta persentase padding.

Luke Wroblewski mencatat presentasi Ethan Marcotte tentang penerapan prinsip desain web responsif untuk memodernisasi situs web salah satu surat kabar terkemuka. Ethan antara lain menjelaskan bagaimana pendekatannya terhadap metodologi desain web responsif dan bagaimana proses prototyping dalam konteks desain web responsif.

Luke Wroblewski membuat catatan di Breaking Development Conference selama pembicaraan Stephen Hay tentang realitas perancangan perangkat yang berbeda.

Pengantar yang bagus untuk desain responsif sebagai cara berpikir, bukan sebagai alat atau teknik. Jeremy Keith berpendapat bahwa desain web responsif tidak bisa begitu saja ditambahkan sebagai langkah pada alur kerja yang sudah ada. Daripada mengupayakan kesempurnaan piksel, kita harus mengupayakan kesempurnaan proporsional.

Publikasi ini merupakan kombinasi filosofi dan strategi akumulasi praktik terbaik di bidang desain responsif.

Kumpulan situs web yang diperbarui secara berkala yang menggunakan Media Query.

Dalam episode 9 The Big Web Show, Jeffrey Zeldman dan Dan Benjamin mengundang Ethan Marcotte untuk mendiskusikan desain responsif.

Tambahan yang bagus untuk artikel ini adalah blog tentang desain responsif, tempat pengembang berbagi pengalaman dan menulis ulasan tentang alat responsif.