rumah > Windows 10 > Gaya untuk tata letak adaptif. Tata letak adaptif: pelajaran atau langsung berperang? Apakah sulit menguasai tata letak adaptif?


Gaya untuk tata letak adaptif. Tata letak adaptif: pelajaran atau langsung berperang? Apakah sulit menguasai tata letak adaptif?




Agar tata letak situs Anda terlihat bagus di iPhone atau tablet, tata letak harus disesuaikan dengan perangkat ini dan penting untuk melakukannya secara efisien...

Tata letak situs web adaptif (terkadang juga disebut ramah seluler) - RINCI dan langkah demi langkah seperti dalam pelajaran:

Harap diperhatikan: Yandex dan Google memiliki alatnya sendiri yang dapat digunakan untuk memeriksa kemampuan beradaptasi situs. Di versi baru Yandex Webmaster letaknya seperti ini: alat - memeriksa halaman seluler.

Jika anda ingin mengetahui cara membuat desain website responsive maka akan dijelaskan dibawah ini dan detail pada contohnya, TETAPI jika anda tidak mempunyai skill dalam bekerja dengan css akan lebih sulit. Atau programmer atau webmaster Anda dapat melakukan ini.

Desain situs web responsif - melibatkan pengaturan lebar jendela halaman dan lebar kolom dan sidebar dalam %, dalam adaptif - dalam px.

Harap diperhatikan: jika Anda memiliki mesin populer untuk situs Anda, seperti wordpress, maka mereka tidak mengalami "sakit kepala" dengan desain adaptif - semuanya dilakukan di sana dalam beberapa klik mouse - plugin cukup diinstal dan diaktifkan dan hanya itu SEMUA). Misalnya untuk WP - Saya menggunakan WPtouch - ini sangat bagus, tetapi jika Anda memiliki programmer penuh waktu, lebih baik melakukan momen ini secara individual.

Perlu Anda pahami bahwa pada dasarnya, dengan tata letak adaptif, hal-hal berikut ini sering dimanipulasi: lebar (lebar elemen: lebar maksimal dan lebar minimum), float (pembungkusnya, dihapus seiring dengan berkurangnya lebar jendela), font -size (ketinggian huruf diubah).

1) Pertama, Anda perlu menulis tag meta khusus untuk berbagai jenis perangkat:

2) Parameter halaman adaptif (lebar dan tinggi):

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

Dalam hal ini, lebar wadah tetap diatur, tetapi tidak boleh lebih dari 90% lebar jendela, dan ini sangat nyaman - maka situs itu sendiri akan beradaptasi dengan ukuran jendela.

3) Tata letak adaptif Css untuk gambar seluruh situs:

img (lebar maksimal: 100%;
tinggi: otomatis;
}

Di sini kami menunjukkan bahwa ukuran gambar: lebar maksimumnya tidak boleh lebih dari 100% mata - dengan cara ini gambar itu sendiri menyesuaikan dengan ukuran ponsel atau gadget lainnya. Inilah metode sederhana - desain gambar adaptif.

4) Tata letak adaptif teks situs web: dalam hal ini, manipulasi terjadi dengan tinggi font: ukuran font, dan parameter lainnya.

Kata ganti ( bungkus kata: kata putus; )

CSS ini dirancang untuk tanda hubung ketika ada kata-kata panjang yang tidak diberi tanda hubung.

Ada banyak kesalahan dalam ukuran font: Yandex suka menulis - Ukuran teks terlalu kecil untuk dibaca di perangkat seluler - untuk ini kami melakukan ini:

body (ukuran font: 16px) - ini akan menghindari kesalahan ini, dan untuk tag p dan untuk tautan Anda harus meletakkannya secara terpisah. Justru karena tag body berisi ukuran font: 12 atau 14 px maka kesalahan ini terjadi! Dan inilah putusannya:

5) Mengadaptasi desain 3 kolom atau tata letak 2 kolom - tidak ada yang rumit dalam hal ini jika semuanya dilakukan pada div - oh, biasanya Anda perlu membatalkan pembungkusnya, yaitu menyetel float ke none dan blok akan hilang turun.

6) CSS adaptif untuk video (dari Habr):



Video (
posisi: relatif;
bantalan-bawah: 56,25% ;
tinggi: 0 ;
meluap: tersembunyi;
) .video iframe ,
objek .video
.penyematan video (
posisi: mutlak;
atas: 0 ;
kiri: 0 ;
lebar: 100%;
tinggi: 100%;
}

Kueri Media - kueri media

Untuk membuat desain adaptif, media queries sering digunakan (mereka menetapkan aturan berdasarkan lebar layar - berdasarkan resolusi layar).

Berikut ini contoh pertanyaan media - resolusi apa yang digunakan untuk desain adaptif:


@media hanya layar dan (lebar maksimal: 1200px) (


@media hanya layar dan (lebar maksimal: 992 piksel) (

/* Perangkat Kecil, Tablet */
@media hanya layar dan (lebar maksimal: 768 piksel) (


@media hanya layar dan (lebar maksimal: 480 piksel) (

/* Khusus, iPhone Retina */
@media hanya layar dan (lebar maksimal: 320 piksel) (
/**/
}

/*========== Metode Seluler Pertama ==========*/

/* Khusus, iPhone Retina */
@media hanya layar dan (lebar minimum: 320 piksel) (
/**/
}

/* Perangkat Ekstra Kecil, Telepon */
@media hanya layar dan (lebar minimum: 480 piksel) (
/**/
}

/* Perangkat Kecil, Tablet */
@media hanya layar dan (lebar minimum: 768 piksel) (
/**/
}

/* Perangkat Sedang, Desktop */
@media hanya layar dan (lebar minimum: 992 piksel) (
/**/
}

/* Perangkat Besar, Layar Lebar */
@media hanya layar dan (lebar minimum: 1200 piksel) (
/**/
}

Namun Anda juga dapat menghindari kueri media dengan mengatur lebar kolom dan blok dalam persentase.

Untuk pertanyaan media, kami memulai dari atas: semua yang kami lakukan dapat diterima untuk lebar maksimal: 768 juga akan berfungsi pada 480.

Apa saja masalah saat mengadaptasi situs web untuk perangkat seluler?

Misalnya, Yandex dapat menunjukkan ini - Ada pengguliran horizontal:

Anda memiliki sesuatu dengan padding atau margin - setel ulang ke nol untuk penyeleksi induk (blok) dan Anda akan senang.

Dan pada akhirnya, Yandex Webmaster menunjukkan ini:

Saya juga melakukannya selama 4 jam, pertama kali selalu sulit! Tapi, Anda bisa melakukannya hanya dalam beberapa jam! Dan kami mengirimkannya ke webmaster untuk diperiksa ulang agar lebih cepat - penting untuk SEO.

Secara umum, saat ini banyak orang menggunakan template yang sudah jadi - Bootstrap dan praktis tidak ada rasa sakit -

Kami telah merilis buku baru, Pemasaran Konten Media Sosial: Cara Memahami Pikiran Pengikut Anda dan Membuat Mereka Jatuh Cinta dengan Merek Anda.

Secara khusus, teknologi ini digunakan secara aktif untuk memastikan bahwa situs ditampilkan secara merata di berbagai jenis perangkat: komputer/laptop dan ponsel pintar/tablet dengan ukuran layar berbeda.

Saat ini, situs web responsif dibuat menggunakan bahasa markup HTML5 dan cascading style sheet CCS3. Namun hingga teknologi terkait menjadi standar untuk semua browser populer, bahasa pemrograman JavaScript digunakan untuk tujuan terkait. Bahkan sebelumnya (sebelum 2010), mereka harus membuat beberapa versi halaman yang sama, namun dengan markup yang berbeda, agar situs yang mereka kembangkan dapat ditampilkan dengan benar di layar yang berbeda.

Mengapa Anda memerlukan tata letak halaman adaptif?

Hingga baru-baru ini, ketika mengunjungi banyak situs web, Anda dapat melihat penggeser di bagian bawah browser yang menggulir halaman secara horizontal. Hal ini terjadi misalnya jika jendela browser Internet tidak memenuhi seluruh layar secara maksimal, namun menempati area yang relatif kecil. Hal ini juga hampir selalu terlihat bila resolusi layar tempat gambar ditampilkan adalah 800 x 600 atau, terlebih lagi, 640 x 480 piksel.

Saat ini, bahkan pemilik perangkat seluler pun jarang menghadapi hal ini. Dan alasannya tidak hanya terletak pada kenyataan bahwa resolusi tampilan modern adalah HD atau lebih tinggi, tetapi juga pada kenyataan bahwa tata letak halaman adaptif kini hampir menjadi standar.

Mengapa dan kapan desain responsif muncul?

Pada awal dekade kedua abad ke-21, terdapat kebutuhan mendesak untuk menciptakan teknologi yang memungkinkan pengembangan halaman web universal. Prasyarat utama yang memicu penciptaan dan pengembangan desain adaptif adalah:

  • masuknya banyak pengguna baru ke Internet;
  • munculnya banyak perangkat dengan resolusi layar berbeda;
  • tekanan dari mesin pencari yang mulai menerapkan sanksi terhadap situs yang memiliki beberapa versi halaman dengan konten yang sama.

Orang yang pertama kali membuat secara resmi adalah web designer Ethan Marcotte. Pada pertengahan tahun 2010, ia menerbitkan materi yang membahas tentang teknologi yang seharusnya memecahkan masalah tampilan normal halaman web di browser dengan resolusi ruang kerja yang berbeda.

Setelah beberapa waktu, podcaster lain yang terkenal menawarkan tambahan pada konsep yang dibicarakan rekannya.

Dengan apa dan bagaimana tata letak adaptif dibuat?

Sebelum kita mulai mempertimbangkan bagaimana membuat tata letak adaptif, kita perlu mempertimbangkan secara singkat teknologi utama yang digunakan. Sekarang ada dua di antaranya: HTML5 dan CSS3. Sampai saat ini, HTML4 dan CSS2 digunakan, tetapi untuk membuat desain universal dengannya, Anda juga harus menggunakan JavaScript.

CSS3 adalah generasi berikutnya dari Cascading Style Sheets. Teknologi ini dimaksudkan untuk membuat aturan untuk menampilkan elemen halaman di browser pengguna. Dengan menggunakannya, Anda dapat menentukan, misalnya, ukuran apa yang harus dimiliki suatu elemen pada resolusi layar pengguna tertentu, atau menetapkan aturan bahwa elemen tersebut harus selalu menempati persentase ruang tertentu (100% - mengisi seluruh area kerja dari peramban).

Pada generasi ketiga aturan "kueri media" muncul, yang dengannya perancang tata letak dapat membuat kelas terpisah untuk setiap resolusi tertentu.

Poin yang sangat penting!

Seseorang yang berencana menggunakan CSS3 untuk desain responsif harus mengetahui bahwa, tidak seperti CSS2, Cascading Style Sheets generasi ketiga menggunakan persentase, bukan piksel, untuk menentukan ukuran objek.

Sedangkan untuk HTML5 digunakan untuk menandai halaman secara langsung, yaitu menunjukkan di mana elemen tertentu harus ditempatkan. Agar objek dapat beradaptasi dengan resolusi, kelas yang dibuat sebelumnya menggunakan CSS3 ditentukan dalam parameter tag HTML.

Contoh sederhana tata letak adaptif

Untuk memahami apa itu tata letak adaptif, contoh yang diberikan harus sesederhana mungkin. Oleh karena itu, kami akan mempertimbangkan opsi di mana gambar yang disiapkan secara otomatis disesuaikan dengan resolusi ruang kerja browser.

Pertama, dengan menggunakan HTML, kita akan menempatkan elemen itu sendiri di halaman:

Tag DIV - menunjukkan bahwa semua yang ada di dalamnya adalah blok terpisah. Jika ada banyak blok seperti itu pada suatu halaman, atribut "kelas" ditentukan. Hal ini diperlukan agar browser memahami aturan mana yang diterapkan untuk blok tertentu.

Sekarang Anda perlu membuat aturan itu sendiri, yang disebut

wadah CSS:

Div ( lebar: 100%; perataan teks: tengah; ) div img( berat: 100%; tinggi: otomatis; )

Dalam kode ini, izin untuk tata letak adaptif ditetapkan. Secara khusus, dinyatakan bahwa lebarnya harus selalu 100% dari lebar area kerja browser web, sedangkan tingginya disesuaikan secara otomatis.

Memeriksa tata letak adaptif

Ada alat khusus untuk memeriksa tata letak adaptif. Misalnya, di browser GoogleChrome, Anda dapat menekan tombol “F12”, lalu, di panel yang terbuka, klik ikon dengan gambar ponsel cerdas dan tablet. Setelah tindakan ini, beberapa panel lagi akan muncul di mana Anda perlu menentukan resolusi yang diinginkan.

Ini bisa dibuat lebih sederhana. Untuk memeriksa apakah desain responsif berfungsi, Anda perlu menahan CTRL lalu klik “+” atau “-”. Setelah tindakan ini, halaman akan bertambah atau berkurang, tetapi elemen yang menerapkan tata letak adaptif akan mempertahankan rasio proporsinya (atau melakukan hal lain, yang ditentukan dalam aturan).

Alat yang membuat desain responsif menjadi lebih mudah

Tata letak desain adaptif adalah tugas yang agak memakan waktu. Oleh karena itu, untuk mengurangi waktu pelaksanaan semua prosedur ini, lebih baik menggunakan alat khusus. Salah satunya adalah kerangka Bootstrap* yang terkenal.

Toolkit untuk HTML dan CSS ini, misalnya, mencakup sejumlah besar kelas siap pakai yang dapat Anda gunakan dalam desain Anda. Ini juga berisi elemen dinamis, yang sesuai dengan semua aturan dan standar, memungkinkan Anda membuat elemen adaptif.

Untuk mulai menggunakannya, Anda harus terlebih dahulu memperoleh pengetahuan langsung tentang CSS3 dan HTML5 itu sendiri, lalu mempelajari fitur-fitur frameworknya. Namun, setelah memahami sebagian besar seluk-beluk bekerja dengannya, Anda selanjutnya dapat mengurangi waktu secara signifikan untuk mengembangkan desain situs web adaptif.

*Bootstrap adalah perangkat lunak sumber terbuka yang dikembangkan oleh Twitter Inc. Ini didistribusikan secara gratis dan memiliki komunitas luas yang selalu dapat Anda mintai nasihat.

Salam untuk semua pembaca blog HeavenWeb. Hari ini di blog saya akan memberikan contoh apa yang disebut tata letak adaptif, dan juga, sebagai contoh, saya akan menunjukkan cara membuat tata letak sederhana dengan mempertimbangkan kemampuan beradaptasi untuk resolusi layar yang berbeda.

Secara sederhana, tata letak adaptif atau “responsif” berarti susunan blok dan elemen yang menyesuaikan dengan ukuran dan resolusi layar perangkat yang digunakan untuk membuka halaman.

Dengan semakin populernya tablet PC dan ponsel pintar, web master diharuskan mendukung format baru untuk menampilkan situs, dan, oleh karena itu, resolusi layar baru saat situs tersebut dibuka.

Nilai yang paling penting adalah lebar jendela browser. Minimal, pada sebagian besar smartphone beranggaran rendah, adalah 240-360 piksel, namun dalam kebanyakan kasus masih 480 piksel dan lebih tinggi. Dan itu lebih dari setengah ukuran monitor standar dengan lebar 1024 piksel.

Poin penting lainnya adalah monitor besar beresolusi tinggi, yang juga tidak boleh dilupakan. Tujuan webmaster adalah membuat situs menyesuaikan dengan resolusi dan menghindari pengguliran horizontal di layar mana pun.

Hal ini dapat dicapai melalui kueri media CSS, serta properti gaya yang membatasi lebar dan tinggi minimum dan maksimum dalam batas yang ditentukan.

Tapi lebih baik menunjukkan semuanya dengan sebuah contoh. Mari kita membuat tata letak adaptif sederhana dengan elemen minimal; Anda dapat melihat tampilan contoh yang sudah selesai di halaman demo:

Jadi, persyaratan kami untuk kemampuan beradaptasi adalah sebagai berikut:

  • Lebar bagian utama harus diregangkan pada resolusi tinggi, tetapi hingga jumlah tertentu, karena garis yang terlalu panjang tidak nyaman untuk dibaca.
  • Saat lebar browser berkurang, gambar harus menyusut secara proporsional agar tetap berada dalam batas area.
  • Dengan lebar kurang dari 700 piksel (minimal - tablet atau ponsel cerdas dengan layar HD dalam orientasi potret), tiga blok di bawah harus berbaris satu demi satu dan menempati 100% lebar blok utama.
  • Selain itu, dalam hal ini, sidebar kiri harus diciutkan menjadi strip sempit, sehingga memberikan ruang untuk bagian utama.
  • Sediakan tombol, ketuk untuk membuka dan menutup sidebar, yang kini berada di atas blok utama, dalam bentuk menu pop-up.

Mari kita mulai. Saya membuat file index.html, dan folder css dan gambar, tempat saya menempatkan masing-masing file gaya dan gambar yang dipotong dari tata letak.

Dalam file HTML kita akan membuat dua container root. left_side dan .wrapper, masing-masing, untuk menu kiri dan bagian utama. Di .left_side kita akan menempatkan beberapa markup untuk logo, link sosial dan daftar menu yang tidak diberi nomor.

Di blok utama kanan, kita akan membungkus setiap posting dengan div dengan kelas .text_block, menambahkan teks placeholder dari alat abstrak Yandex, dan gambar misalnya.

Mari tambahkan tiga blok .footer_block ke bawah dan bungkus dalam .footer yang sama. Mari tambahkan judul H2, H3 ke artikel, dan hasilnya kita akan mendapatkan markup seperti ini:

Contoh tata letak tata letak adaptif. Heaven Web - blog untuk master web. Blog tentang pengembangan web

  • rumah
  • Tata Letak
  • Jquery
  • Drupal
  • Lainnya
  • Kontak
Rencana penempatan yang tidak biasa: metodologi dan fitur

Ini teks dari abstrak Yandex...

Beberapa teks lagi dengan gambar

Judul pertama

Pada saat yang sama, pembangunan merek mengatur survei sublimasi, dengan mempertimbangkan hasil kampanye media sebelumnya.

Judul kedua

Berdasarkan struktur piramida Maslow, kepemimpinan penjualan menyederhanakan prinsip persepsi, memenangkan pangsa pasarnya.

Judul ketiga

Meningkatkan taraf hidup, sebagai berikut di atas, mengembangkan pembentukan citra, berapa pun biayanya.

Perhatikan baris 6. Faktanya adalah perangkat seluler menskalakan halaman web agar mudah dilihat, namun kita tidak memerlukannya. Dengan entri meta ini kami melarang penskalaan halaman.

Sekarang mari beralih ke gaya CSS. Mari kita desain blok kiri:

Sisi_kiri( latar belakang: #1d282b; lebar: 300px; posisi: tetap; kiri: 0; atas: 0; tinggi: 100%; indeks-z: 5; ) .logo_text( padding: 20px 10px; warna:#ffffff; font- ukuran: 24px; tinggi garis: 30px; font-family: myPTNarrow; perataan teks: tengah; .logo_text a( tampilan: blok-sebaris; ) .logo_text span( warna:#72898f; font -ukuran: 18px; garis- tinggi: 24 piksel; perataan teks: tengah; tampilan: blok ) .menu_kiri( margin-atas: 30px; ) .menu_kiri ul( tampilan: blok; tipe gaya daftar: tidak ada; ) .menu_kiri li( tampilan: blok; tinggi : 30px; tinggi garis: 30px; ) .left_menu li a( tampilan: blok; tinggi garis: 30px; ukuran font: 18px; font-family: myPTNarrow ; warna:#ffffff; dekorasi teks: tidak ada; bantalan- kiri: 60px; .left_menu li a:hover( latar belakang: #343e41; ) .social_img( perataan teks: tengah; ) .social_img a( tampilan: blok sebaris; margin: 0 10px; tinggi: 30px; overflow: tersembunyi ) . social_img a:hover( opacity: 0.7; ) .tw_icon( background: url("../images/social.png") kiri atas tanpa pengulangan; ) .go_icon( background: url("../images/social.png") kanan atas no-repeat; ) .left_swap( display: none;/* Secara default blok tidak terlihat, ini ditampilkan jika media query dipicu */ posisi : tetap; lebar: 0px; tinggi: 100%; latar belakang: url(../images/swipe.png) #1d282b tengah 20px tanpa pengulangan

Di sini untuk container.left_side kami menentukan posisi: tetap. Properti ini akan memungkinkan blok untuk selalu berada di kiri (berkat kiri: 0; atas: 0; dan tinggi: 100%;) dan tidak menggulir dengan konten utama. Untuk memastikan blok tidak tumpang tindih dengan apa pun, tambahkan indeks-z: 5.

Karena lebar blok kiri adalah 300 piksel, blok tengah (.wrapper) harus memiliki padding internal dari tepi kiri - padding-kiri: 300px, agar tidak “jatuh” di bawah menu kiri.

Kode umum untuk blok pusat:

Pembungkus( posisi: relatif; latar belakang: #ffffff; tinggi minimum: 200%; lebar minimum: 400px; lebar maksimal: 1200px; bantalan-kiri: 300px; bantalan-kanan: 0px; bayangan kotak: 0 0 10px rgba (0,0,0,0.2); ; tinggi garis: 24px; latar belakang: url("../images/hr.png") kiri bawah ulangi-x; ; ) .auto_img( tampilan: blok; lebar maksimal: 100%; margin: 0 otomatis 24 piksel; )

Yang terpenting disini adalah desain lebar balok ini. Untuk .wrapper kami menentukan properti

Lebar minimum: 480 piksel; lebar maksimal: 1200 piksel;

Artinya, ketika lebar layar bertambah, blok akan meluas seiring dengan konten menjadi 1200 piksel, kemudian akan tetap berada di sisi kiri, dan hanya akan ada latar belakang di sebelah kanan. Jika diperkecil maka akan mengecil menjadi 400px; jika lebih kuat maka akan muncul scroll horizontal.

Gambar di dalam blok pusat harus memiliki kelas .auto_img. Jika lebarnya tidak pas, maka akan menyusut secara proporsional dan sama dengan 100% lebar wadah.

Selanjutnya, mari kita lihat kueri media CSS. Semua permintaan tersebut terlihat seperti ini. Pertama muncul header @media, lalu jenis perangkat yang ingin Anda gunakan kode css permintaan ini ditunjukkan. Untuk layar berwarna biasa, ini adalah kata layar (atau lebih sering mereka menulis semua, yaitu untuk semua perangkat). Kondisi dan parameter kemudian ditentukan dalam tanda kurung.

Yang kami minati sekarang adalah kondisi lebar perangkat maksimal, yang menetapkan bahwa aturan selanjutnya hanya akan berlaku bila lebar maksimum browser kurang dari nilai tertentu yang ditentukan setelah titik dua.

Artinya, salah satu syarat kita akan terlihat seperti ini:

@layar media dan (lebar maksimal:800px)( .left_side( display: none; ) .left_swap( display: block; ) .wrapper( padding-left: 50px; ) )

Dalam kurung kurawal kita telah memasukkan aturan CSS yang diperlukan, yaitu kita menyembunyikan menu sebelah kiri dan menampilkan blok kiri sempit bantu yang sebelumnya tersembunyi - .left_swap.

Mari tambahkan satu kondisi lagi untuk memindahkan balok horizontal bawah ke baris vertikal.

@layar media dan (lebar maksimal:720px)( .footer_block( tampilan: blok; lebar: 96%; ) )

Itu. elemen-elemennya tidak lagi sejajar dan menjadi berbasis blok, sehingga elemen-elemen tersebut berbaris satu demi satu. Dengan properti width: 96% , kami meningkatkan lebarnya hingga maksimum (tidak hingga 100%, karena kami mempertahankan padding - margin internal).

Di sini saya mulai dari fakta bahwa resolusi tablet dan smartphone HD biasanya 800 piksel dalam orientasi potret, jadi untuk semua yang ada di bawah, blok menu disembunyikan.

Faktanya, kueri media CSS dapat dibuat lebih kompleks dengan menambahkan beberapa kondisi sekaligus menggunakan operator dan. Anda tidak hanya dapat menentukan lebar layar, tetapi juga tinggi, orientasi, jumlah warna yang didukung, dan parameter lainnya.

Terakhir, mari gunakan jQuery untuk membuka menu sebelah kiri dengan mengklik blok kiri sempit yang diciutkan – on.left_swap. Misalnya seperti ini:

JQuery(fungsi($) ( $(".left_swap").klik(fungsi ()( $(".left_side").toggle(); return false; )); ))

Semuanya di sini sangat sederhana, kami memproses klik pada blok dan menampilkan atau menyembunyikan blok dengan menu. Kode ini mungkin terlalu sederhana dan dapat ditingkatkan, tetapi kode ini dapat digunakan sebagai contoh.

Jadi, kita melihat contoh layout website responsif, dan hasil yang dihasilkan dapat dilihat seperti biasa di halaman demo. Coba tambah atau kurangi lebar jendela browser dan amati perilaku bloknya.

PS: Akhir-akhir ini banyak sekali spam pada komentar di blog, saya tidak selalu punya waktu untuk menghapusnya, tapi saya tetap membaca semua komentar anda to the point dan akan berusaha menanggapinya.

Ada dua kesalahpahaman utama tentang apa itu desain situs web responsif. Beberapa orang berpikir bahwa ini hanyalah tampilan situs yang diperkecil, di mana elemen-elemennya dikompresi. Yang lain terus-menerus menyamakan desain responsif dengan versi seluler situs tersebut. Dalam artikel ini kami akan memberi titik pada huruf i dan memberi tahu Anda bagaimana sebenarnya.

Apa itu tata letak adaptif

Adaptif adalah tata letak di mana situs ditampilkan dengan benar di perangkat berbeda karena elemennya secara dinamis menyesuaikan dengan resolusi layar yang berbeda.

Sederhananya, daya tanggap adalah penumpukan blok secara dinamis, bukan versi situs yang lebih kecil.

Tidak masalah dari perangkat mana pengguna mengakses situs: dari komputer, tablet, atau ponsel - situs ini akan sama nyamannya digunakan, dan fungsionalitas yang diperlukan akan tetap lengkap.

Mengapa Anda memerlukan tata letak adaptif?

Saat ini, Anda tidak perlu lagi mencari riset dan statistik untuk membuktikan seberapa sering orang mengakses Internet dari tablet dan ponsel. Kenyataan ini mengelilingi kita di mana-mana: di angkutan umum, di kafe, di antrean - orang rela mengisi waktunya dengan berselancar di Internet, dan Anda sendiri tahu betapa nyamannya hal itu. Untuk memilih dan memesan pizza, tidak seorang pun akan pulang terlebih dahulu untuk membuka komputer, tetapi akan segera membuka situs tersebut dari ponselnya, melakukan hal lain pada saat yang bersamaan. Ketika ide membeli muncul, cara termudah adalah segera online, membandingkan penawaran dari toko pesaing dan, tanpa penundaan, memesan produk. Dan ada banyak sekali contoh seperti itu!

Kemampuan beradaptasi adalah salah satu syarat penting dan wajib untuk sebuah website modern.
Jika situs ditampilkan dengan benar hanya dari komputer, maka ketika dilihat dari tablet atau ponsel sulit dinavigasi, blok tidak berskala, sulit untuk mengarahkan jari Anda ke tautan yang diinginkan - akibatnya, pengguna mendapat kesal, tidak dapat melakukan tindakan target, dan membuang waktu untuk mencoba memahami tampilan yang bengkok dan meninggalkan sumber daya. Dan kemudian dia tidak pernah kembali ke sana. Dan pergi ke pesaing.

Oleh karena itu, keputusan memesan website adaptif bukanlah suatu keinginan, melainkan suatu kondisi yang secara langsung mempengaruhi tingkat penjualan.

Bagaimana cara kerja situs web responsif?

Sangat mudah untuk mengenali situs web yang tidak responsif - saat melihat dari tablet atau ponsel, Anda hanya akan melihat sebagian area; Anda harus memindahkan area yang terlihat ke kiri dan kanan, memperbesar agar font dapat dibaca, dan memperkecil untuk menemukan bagian atau formulir aplikasi yang diinginkan.

Situs web dengan tata letak responsif menyesuaikan dengan perangkat, bergantung pada lebar layarnya. Semua elemen pada halaman beradaptasi: ukurannya berubah, beberapa konten tambahan dan elemen dekoratif muncul/menghilang. Pada saat yang sama, blok-blok tersebut disusun ulang sehingga nyaman bagi pengguna - penekanannya adalah pada informasi penting, dan data yang tidak penting dihapus atau diminimalkan.

Biasanya, semakin kecil lebar layar, semakin terkonsentrasi penyajian informasi dan semakin sedikit blok yang terlibat. Pada saat yang sama, pengguna tidak perlu mengubah skala: semuanya sederhana dan jelas bahkan di layar kecil.

Fitur lain dari situs responsif: pembesaran elemen penting sehingga pengguna dapat dengan mudah menekan tombol di layar dengan jarinya atau mengikuti tautan. Konversi situs secara langsung bergantung pada hal ini, jadi penting untuk membuat desain adaptif ramah pengguna.

Fakta penting yang perlu Anda ketahui tentang website responsif

1. Situs web responsif dan versi seluler bukanlah hal yang sama.

Ketika kita berbicara tentang situs web responsif, yang kami maksud adalah itu adalah satu situs web untuk perangkat yang berbeda. Inilah perbedaan utamanya dari situs versi seluler. Versi seluler adalah situs web lengkap yang terpisah, yang memiliki fungsi, tata letak sendiri, dan seringkali kontennya sendiri. Versi seluler dikembangkan dengan mempertimbangkan kenyamanan pengguna mengakses situs dari perangkat seluler: apa yang sangat penting bagi mereka dari versi desktop, dan apa yang berlebihan dan dapat dengan mudah dihapus.

2. Fungsinya sama di semua perangkat.

Semuanya jelas di sini: karena hanya ada satu situs, kemampuannya sama, apa pun perangkat yang digunakan pengguna untuk mengakses situs tersebut.

3. Desain responsif memiliki keterbatasan.

Mereka terutama terkait dengan mempertahankan struktur asli konten saat mengubah ukuran layar. Seringkali pada versi adaptif kita mengabaikan slider dan gambar background berukuran besar yang ada pada versi desktop, dan tidak menggunakan Flash. Kami biasanya merekomendasikan opsi terbaik.

Tetapi kebetulan juga desainnya disepakati dalam versi yang diminta oleh klien, tetapi tata letak yang sudah selesai ternyata tidak nyaman. Kemudian semua perubahan dilakukan dengan biaya tambahan, karena kami bekerja secara ketat sesuai dengan spesifikasi teknis.

4. Kemampuan beradaptasi bisa lengkap atau sebagian.

Kemampuan beradaptasi penuh - dari perangkat seluler ke desktop, sebagian - misalnya, dari tablet atau laptop ke desktop. Saat mengembangkan desain responsif, penekanan biasanya diberikan pada perangkat tertentu yang menjadi tempat klien menghasilkan lalu lintas terbanyak.

5. Tidak semua situs web mendapat manfaat dari desain yang sepenuhnya responsif.

Untuk situs dengan fungsionalitas kompleks dan/atau konten yang memerlukan jumlah ruang layar yang cukup untuk persepsi, kemampuan beradaptasi penuh sering kali merugikan. Lebih baik memilih daftar perangkat yang fungsinya akan lengkap, dan membuat versi dengan kemampuan adaptasi sebagian untuk perangkat tersebut, dan sisanya, membuat versi seluler dengan fungsionalitas yang dikurangi dan kemampuan untuk beralih ke versi layar penuh. .

6. Kompatibilitas lintas browser bertanggung jawab atas tampilan yang sama di browser yang berbeda.

Pastikan untuk menunjukkan item ini dalam spesifikasi teknis jika penting bagi Anda agar situs tersebut menampilkan hal yang sama di browser yang berbeda. Jika tidak, di browser versi lama, situs mungkin menampilkan kesalahan dan menampilkan font yang tidak dapat dibaca. Dan ini adalah jalan langsung menuju hilangnya target audiens.

Apa yang perlu Anda ketahui jika ingin memesan tata letak adaptif

Perusahaan "Teknologi Sukses" menyediakan layanan untuk membuat tata letak situs web adaptif. Lebih baik menyediakan desain adaptif pada tahap pengembangan situs utama dan menuliskannya dalam spesifikasi teknis. Namun jika Anda datang kepada kami dengan desain siap pakai dalam format .psd, kami juga dapat membantu Anda. Kami tidak melakukan tata letak tata letak yang dibuat di CorelDraw - dalam hal ini, kami menawarkan klien untuk menyiapkan desain terlebih dahulu dan baru kemudian tata letaknya.

Tanpa mengetahui secara spesifik lokasi dan spesifikasi teknis, tidak mungkin menentukan waktu tata letak.

Biasanya, tata letak situs web perusahaan yang responsif memakan waktu rata-rata 15 hari; waktu desain untuk toko online yang responsif secara langsung bergantung pada kompleksitas situs.

Kami tidak pernah mentransfer tata letak ke tahap berikutnya - pemrograman - sampai klien memeriksa kemampuan beradaptasi situs dan pengoperasian yang benar dari semua elemennya sesuai dengan spesifikasi teknis.

Masih ada pertanyaan: atau versi seluler? Hubungi nomor bebas pulsa 8 800 775-17-11 atau tinggalkan nomor Anda dan kami akan menghubungi Anda kembali dan menceritakan semuanya.

Halo semua!

Ketika prinsip tata letak adaptif muncul, ternyata menjadi mimpi buruk bagi saya, yang masih belum dapat saya pulihkan, sangat merepotkan - lagipula, untuk setiap resolusi Anda praktis perlu mengatur ulang tata letak, menulis kode baru, Anda akan mendapatkan banyak kode yang lebih sulit dipertahankan. Mari kita pahami rasa sakit ini sebagai "entropi kode"

Baru-baru ini saya diberi kesempatan untuk membuat tata letak untuk aplikasi seluler dan akhirnya saya memutuskan untuk mencoba mengatasi rasa sakit ini, membuatnya indah dan ringkas - gunakan rem. Ini sepertinya solusi paling sederhana bagi saya, 100% browser seluler mendukung unit ini. Intinya adalah kita menulis beberapa baris media queries untuk tag html, yang hanya menunjukkan ukuran font dasar dalam piksel, sebanding dengan tampilan tata letak kita dalam resolusi yang berbeda, dan sisa tata letak tanpa kueri media ditata sebagai biasa, hanya saja kami menggunakan piksel sebagai pengganti rem. Teknik ini mudah diskalakan dan menyesuaikan tata letak tergantung pada ukuran font dasar.
Minimalkan kode dan kemudahan tata letak adaptif dengan cara ini sungguh luar biasa!

Hanya ada satu kelemahan dari metode ini: piksel tata letak psd harus terus-menerus dihitung ulang menjadi rem, tetapi saya dengan cepat menyelesaikan masalah ini - saya menulis fungsi khusus dan meletakkannya seperti sebelumnya dalam piksel, praprosesor itu sendiri diterjemahkan ke dalam rem.

Tetapi! Lelucon utamanya adalah saya menggunakan metode ini untuk merancang aplikasi seluler adaptif, yang desainnya sama.

Ketika saya kembali ke adaptif untuk situs biasa- rasa sakitnya telah kembali padaku bahkan lebih kuat dari sebelumnya, karena biasanya kami memiliki 3 hingga 6 desain berbeda:
1) Desktop besar 1600-1920 piksel
2) Desktop/laptop kecil ~1100-1400 piksel
3) Monica/tablet lama - 768-1024 piksel
4) Ponsel cerdas berukuran di bawah tablet/lebih besar ~600 piksel
5) Ponsel pintar 300-480
6) Smartphone lama 250 piksel.

Tentu saja saya melebih-lebihkannya, tetapi setidaknya ada tiga tata letak yang perlu dilakukan secara pasti.

Jadi inilah pertanyaan No. 1 dan yang paling penting: bagaimana cara meminimalkan tata letak adaptif dan membuat kode menjadi indah? Cara mengurangi apa yang disebut entropi kode? Apakah ada pendekatan/teknik yang keren?

Saya melihat berbagai situs studio web keren untuk menemukan jawabannya di sana dan melihat bahwa semua orang meletakkan secara sembarangan, yaitu secara umum tanpa mengganggu.
Satu-satunya hal yang saya lihat adalah karena alasan tertentu beberapa orang menggunakan em dan persentase untuk font, bukan piksel biasa. Tampaknya untuk penskalaan teks, meskipun tidak jelas bagaimana ini mengurangi kode untuk adaptasi, menurut saya itu hanya memperumit segalanya - Anda perlu melakukan perhitungan tergantung pada ukuran font blok induk dan bahkan praprosesor kemungkinan besar tidak akan membantu... Saya tidak tahu mengapa Anda perlu khawatir tentang pengaturan ukuran font dalam unit em, masalah dengan rem masih belum hilang... Mungkin saya perancang tata letak yang buruk... Oleh tentu saja, situs yang paling keras kepala menggunakannya untuk margin dan properti ukuran kotak lainnya...
Pertanyaan #2:
Apa gunanya menggunakannya?
Dan sekarang pertanyaan nomor 3:
Apakah benar-benar tidak ada metodologi tunggal, apakah tata letaknya sangat buruk sehingga setiap orang dapat melakukan apa pun yang mereka inginkan? Atau apakah saya melihat contoh yang gagal (walaupun saya sedang mencari di antara tema-tema teratas dari themeforest dan situs-situs studio web terkemuka)?