Tasarımda kullanacağın çerçevelere yüzdelik genişlik ver. Mesela bütün herşeyin içinde olduğu çerçeveyi (div) width: 100%; olarak ayarla. Bu şekilde her ekrana göre uyarlayabilirsin. İç bölümleri de yine buna göre yüzde olarak belirle. Content dediğimiz içerik kısmını 69% olarak, sidebar kısmını da 30% olarak belirlersen tasarımda sorun çıkmaz. Sidebarı sağda veya solda kullanacaksan ona göre içerik kısmını float:left yada float:right olarak belirlersin, aynı şekilde sidebarı da ayarlarsın. Sağdaki sağa yapışacak şekilde soldaki de sola yapışacak şekilde durur böylelikle.

Bunların dışında geniş ekranlı cihazlar ve mobil cihazlara da bir uyarlama yapman gerekiyor. Genellikle tasarımcılar geniş ekranlı cihazlarda sorun çıkmaması için maks-width özelliğini kullanırlar. max-width:1200px yapan da var max-width:1300 yapan da var. Mobil cihazlar için de min-width değeri belirlemen gerekiyor. Onun da min-width:300px olması gerek.

Çerçeve genişliklerini bitirdikten sonra geriye çerçeve içine ekleyeceğin görsellerin genişlik ayarlamaları kalıyor. Görselleri de yine 100% olarak ayarlayabilirsin. Kullanacağın border ve padding değerlerine göre de yüzdelikler ile oynaman gerek. Bunlardan sonra mobil ve tablet genişliklerine göre ayrı bir css kodu eklemen ile tasarımın tamamlanmış olur.

Olayı baştan sona aşama aşama anlatmak baya uzun sürer. Temel mantık bu şekildedir. Gerisini de kendine göre bölüm bölüm uyarlaman gerekiyor.