Pernahkah Anda mengalami situasi di mana teks dan blok yang pas di tata letak Photoshop untuk beberapa alasan keras kepala tidak mau menuruti tata letak - tidak sesuai dengan lebar yang ditentukan oleh tata letak? Pada saat yang sama, baik perancang maupun perancang tata letak menggunakan kisi yang sama, misalnya kisi Bootstrap 3.
Setelah meninjau sejumlah besar situs, saya sampai pada kesimpulan bahwa di tengah-tengah perancang dan perancang tata letak, satu kesalahan umum muncul.
Kotak bootstrap, sebagai contoh kotak umum, mengatur tata letak 12 kolom, yang pada layar 1200px atau lebih lebar memiliki dimensi antara kolom 30px dan margin sisi 15px konten di kiri dan kanan. Menimbang bahwa lebar kolom ditetapkan oleh perancang dalam piksel, dan perancang tata letak sebagai persentase, kesalahan yang dijelaskan di bawah ini tidak segera terlihat.
Bagaimana cara desainer bekerja dengan kisi? Biasanya kisi ini dihasilkan oleh beberapa layanan, diunduh dan diinstal di Photoshop. Bagaimana cara kerja perancang tata letak dengan kisi? Mesh diambil dari kerangka Bootstrap 3.
Lalu apa masalahnya jika dimensi grid (kolom dan interval) sama?
Inti dari masalah terletak pada properti CSS yang nyaman "kotak-ukuran" dengan nilai "batas-kotak", yang ditetapkan secara default di bootstrap. Karena itu, perancang mempertimbangkan lebar margin samping selain lebar konten (1170px plus margin samping 15px di kanan dan kiri), dan perancang tata letak sendiri, tanpa mengetahuinya, memasukkannya dalam lebar konten (1170px, termasuk margin sisi 15px, yaitu. Lebar konten adalah 1140px). Jadi, ternyata dalam proyek pada tahap yang berbeda dua grid yang berbeda digunakan dan perancang tata letak memiliki yang lebih sempit.
Kesalahan ini juga terjadi ketika menggunakan kisi selain Bootstrap. Rupanya, itu lahir dengan munculnya "kotak perbatasan".
Solusinya sederhana - sesuaikan ukuran wadah: "wadah {width: 1200px;}" (1170px - konten plus indentasi 15px di kanan dan kiri). Juga perlu untuk melakukan penyesuaian wadah yang sesuai dengan jumlah jarak sisi untuk layar resolusi lainnya.
Sepertinya saya tidak masuk akal untuk berdebat tentang siapa yang bertanggung jawab untuk memperbaiki kesalahan. Ini adalah bentuk yang baik bagi perancang untuk mengklarifikasi pertanyaan ini dengan perancang tata letak, dan perancang tata letak harus mengingat fitur ini menggunakan "kotak batas" untuk kisi. Perbaikan bug dalam kerangka luas juga akan meningkatkan jumlah situs yang benar-benar sesuai dengan desain.