اين فايل بهت کمک ميکنه که در زمان طراحي وب سايت ديد بهتري نسبت به طراحي نسخه رسپانسيو سايتت داشته باشي و توي اون بخش کمتر دچار مشکل بشي وبه راحتي بتوني وب سايتت رو براي ورژن موبايل و تبلت و ... سازگار طراحي کني .
طراحي رسپانسيو يا واکنشگرا چيست ؟
در گذشته ميزان استفاده از سخت افزار هاي متفرقه مثل موبايل و تبلت نزديک به صفر بود ولي در حال حاضر شرايط خيلي تغيير کرده و خيلي از کاربران ترجيح ميدن خيلي سريع از طريق موبايل و يا تبلت ايميل  هاشون رو چک کنن و يا به صفحات وب سايت دسترسي پيدا کنن . به همين علت ديگه هر وب سايتي بايد به اين موضوع يعني رسپانسيو بودن وب سايت اهميت بسيار زيادي بده
طراحي وب سايت Responsive يا واکنشگرا يک راهکار بسيار کارآمد براي بهينه سازي وب سايت در سخت افزار هاي مختلف مثل موبايل و تبلت :
اين نوع طراحي فاقد اندازه‌ي ثابت صفحه، فاقد ميلي‌متر و اينچ و فارغ از محدوديت‌هاي صفحه نمايش است. طراحي در واحد پيکسل فقط براي دستگاه‌هاي روميزي (desktop) يا همراه (mobile) ديگر قديمي شده، چراکه همواره گجت‌هاي بيشتر و بيشتري توانايي باز کردن يک وبسايت را دارند. بنابراين ميخوام در اين بخش چند اصل اساسي را درخصوص طراحي وب‌سايت واکنشگرا به شما دوستا و همراهان دوست داشتي آکادمي آي تي بگم  و به جاي مقابله با وبسايت شناور (fluid web) به استقبال آن بريم. براي حفظ سادگي کار، بر چيدمان (layout) تمرکز مي‌کنيم .
اما لازم که چند نکته رو  در اين مورد خدمت شما دوستان عزيز بگم :
جريان (flow)
زماني که شما در ابزاري مثل موبايل که عرض اون نسبت به صفحه کمتر هست وب سايت رو ميبينيد خوب طبيعتا ارتفاع وب سايت بسيار بيشتر ميشه مثلا اگر توي يک دريف در دسکتاپ 3 ستون اخبار جا ميشده توي موبايل هر ستون در يک سطر بايد قرار بگيره و اينکار يعني اشغال کردن بيشتر فضاي عمودي بايد باعث بشه همه محتويات بعدشون به پايين تر هل داده بشن نه اينکه به علت رعايت نکردن اصول طراحي رسپانسيو محتويات روي هم بيفتن به اين کار flow يا جريان ميگن . اگر شما به طراحي با پيکسل و پوينت (point) عادت کردي شايد درک اين قابليت کمي برات سخت باشه، اما وقتي به اون عادت کني به راحتي قابل درک مي‌شه.
واحدهاي نسبي (Relative units)
به جاي استفاده از واحد هاي ثابت مثل پيکسل و ... بهتره از واحد هاي نسبي مثل درصد  استفاده کنيم تا وب سايت رو نسبت به تغييرات عرض سازگارتر کنه . مثلا وقتي ميگيم 100% منظورمون کل عرض مرورگر توي هر سخت افزاريه حالا چه عرض اون سخت افزار 400px باشه جه 1900px فرقي نميکنه ولي وقتي ميگيم 800px ديگه توي سخت افزار هايي که صفحه نمايش اونها از 800px  کمتر هست قطعا به مشکل بر ميخوريم و اسکرول افقي خواهيم داشت . به طراحي با مقياس هاي ثابت مثل px , point و... Static Unit ميگن و به طراحي با واحد هاي نسبي مثل درصد Relative Units ميگن.
مقادير بيشينه (Max) و کمينه (Min)
بعضي وقت ها خيلي خوبه که محتوا همه‌ي عرض صفحه را بگيره يعني Full Width باشه ، مثلا روي يک دستگاه همراه. اما اينکه همان محتوا کل عرض صفحه نمايش تلويزيونتان را بگيرد معمولا کار معقولي نيست. اينجاست که مقادير min و max به کمک مي‌آد. مثلاً پهناي ????و عرض بيشينه‌ي ???? پيکسل به اين معناست که محتوا کاملا صفحه را پر مي‌کند، اما نبايد بيشتر از ???? پيکسل بشه .
نقاط شکست (Breakpoints)
نقاط شکست به چيدمان امکان مي‌دهد در نقاط معيني تغيير کند، مثلا در صفحه‌ي دسکتاپ سه ستون داشته باشد ولي در صفحه‌ي همراه فقط يک ستون. بيشتر خصوصيات CSS مي‌تواند از يک نقطه‌ي شکست به ديگري تغيير کند. معمولا مکان قرارگيري يک نقطه بستگي به محتوا دارد. اگر يک جمله بشکند بايد يک نقطه‌ي شکست اضافه کنيد. بايستي اين نقاط را با احتياط به‌کار بريد چراکه ممکن است کارتان خيلي سريع به هم ريخته شود و تشخيص اينکه چه چيزي بر ديگري اثر مي‌گذارد سخت شود.
عناصر تودرتو (Nested objects)
کنترل تعداد زيادي عنصر وابسته به هم کار سختيه مخصوصا توي طراحي نسبي ، بنابراين دسته‌بندي اين المان ها در يک مجموعه که داراي يک والد هستن کار رو به مراتب ساده تر و منظم تر ميکنه . اينجاست که واحدهاي ثابت مثل پيکسل‌ها مي‌توانند به کمک بيايند. اين واحدها براي محتوياتي که نمي‌خواهيد نسبي باشن و ميخوايد ثابت باشن مثل لوگو و دکمه‌ها کارآمد هستن .
اول نسخه موبايل رو طراحي کنيم يا دسکتاپ رو ؟
از نظر تکنيکي تفاوت زيادي نداره  که يک پروژه اول نسخه موبايلش ايجاد بشه يا نسخه دسکتاپش . اما اگر با نسخه موبايل کار رو شروع کنيد  محدوديت‌هاي زيادي داريد که به شما در تصميم‌گيري‌ها کمک مي‌کند. خيلي‌ها همزمان هر دو  رو آغاز مي‌کنن، پس امتحان کن و ببين کدام يکي براي تو بهتره .
مقايسه‌ي فونت‌هاي وبي (Webfonts) با فونت‌هاي سيستم (System fonts)
خوب اين واضحه که شما اگر از فونت هاي وبي مثل yekan  يا dinar استفاده کنيد وب سايت زيباتري داريد تا از فونت هاي استاندارد سيستمي مثل Tahoma و ... استفاده کنيد و اين هم بديهيه که استفاده از فونت هاي وبي باعث ميشه صفحه وب سايت شما دير تر لود بشه و حجمش بره بالاتر .
تصاوير Bitmap در برابر Vector
اگر درطراحي وب سايت از روش flat استفاده ميکني و نميخواي خيلي افکت و سايه و ... به آيکون ها و .. سايتت بدي قطعا وکتور گزينه بهتريه مثل فونت آيکون ها که به جاي تصاوير jpg و png و ... استفاده ميشن . گذشته از اين مورد بسيار مهم مسئله اي هست که هيچ وقت نبايد فراموش کني  اون هم بهينه سازي تمام تصاوير bitmap در سايتت هست . همه تصاوير رو با روش هاي مختلفي که بلد هستي  بهينه کن .