Normal şartlarda ekran içerisine sabit pozisyonlarda yerleştirilerek oluşturulan sabit tasarımı adaptif hale getirmek için cihazları tanımak tek başına yeterli değildir. Gerek HTML gerek CSS kullanarak yazacağımız tüm kod bloklarında muhtemeln senaryoları da düşünerek hareket etmeyi öğrenmemiz gerekir. Bunu yapabilmek için en temel kavramlardan olan genişlik; Yani “width” değerine yüzdelik dilimlerle kullanmayı veya en uç noktadaki genişlik değerlerini düşünerek hesap yapmayı bilmemiz gerekir.

960px Sistemi

Günümüzde desktop ve laptop kullanıcıları tarafından kullanılan minimum genişlik 1024px'dir. Mobil cihazlar ise istisnai durumlar hariç (ileride değinceğiz) 960px genişliğin üzerine çıkmazlar. 960 px rakamını seçmemizin birinci nedeni 1024px'lik ekranlarda tarayıcı çalıştırıldığında hem web sayfası en küçük ekranda dahi rahatça görüntülenebilir hem de scrollbar'a fazlasıyla yer kalır. 960 rakamının seçilmesinin bir ikinci nedeni ise bu rakamın 16, 12, 10, 8, 6, 4, 3, 2 rakamlarına tam bölünebiliyor oluşudur. (Neden bölme yapılacağına değineceğiz.)

Bölme İşlemi

960/16=60

960/12=80

960/10=96

960/8=120

960/6=160

960/4=240

960/3=320

960/2=480

Sabit Tasarımı Mobil Tasarıma Geçirme

Sabit bir tasarımı mobile geçirirken önemli olan nokta ,masaüstü kullanıcısının hala eski layoutu görürken, mobilden gelecek olan kullanıcıyı görünümde farklı fakat temelde aynı layoutun karşılayacağını unutmamaktır. Bu noktadan sonra yapılabilecek en doğru hareket sabit olan tasarım üzerinden adım adım ilerlemektir. Örnek olarak oluşturacağımız web sitesi için her web sitesi gibi header alanından başlamak en yerinde hareket olacaktır.