Kami mulai dengan bermain-main dengan modul posting blog kami, mengotak-atik spasi. Kami juga menambahkan kotak kecil berwarna di kiri atas modul, penanda visual dari jenis konten itu.
Perubahan berikutnya yang kami lakukan adalah mengurangi beberapa celah di luar pada ukuran layar yang lebih sempit. Pada layar lebar, konten berukuran lebar 80% (tepi lebar 10%) tetapi lebih baik menampilkan lebih dari 90% pada layar yang lebih kecil (tepi lebar 5%).
Kami menambahkan sedikit transisi saat kueri media tersebut berhasil, yang bisa menjadi trik desainer yang sangat menyenangkan. Saya suka di video ini, tapi akhirnya ditarik dari desain. Ini bisa berubah-ubah jika ada lebih banyak konten di halaman dan agak mengganggu.
Kami mengubah sistem grid kami agar memiliki breakpoint pada ukuran terkecil. Ini sangat mudah, kita hanya berhenti mengapungkan kolom dan membuatnya width: 100%;Yay karena tidak terlalu memikirkan grid! Kami memerangi beberapa masalah kekhususan di jalan.
Kami membuka simulator iOS yang sebenarnya untuk memeriksa grid yang berfungsi pada perangkat seluler "asli". Kami kesulitan sedikit menemukan tag meta yang tepat, tetapi pada akhirnya mengambil yang benar dari CSS-Tricks.com. Berhasil! Tapi tentu saja kami memiliki beberapa masalah pemosisian yang perlu kami selesaikan. Sebagai catatan, meta tag tersebut adalah:
Kami mengotak-atik mengotak-atik jarak dan ukuran sampai semuanya terlihat baik-baik saja. Semuanya terlihat cukup responsif pada akhirnya!