صفحات Responsive یا واکنشگرا
در نرم افزار تحت وب یا سایت

آینده ی نرم افزارهای موبایلی جز در مواردی که لازمه بدون اینترنت کار کنن، همین نسخه های تحت وب هستن، چون ترجیح مردم دیگه اینه که به چند دلیل، هیچ اپ موبایلی نصب نکنن و از وب اپلیکیشن های واکنشگرا نسبت به سایز صفحه استفاده کنن، مهمترین این دلایل اینها هستن که:

- اپ تبلیغات یا ویروس میاره.
- اپ ممکنه باعث هک و دسترسی غیرمجاز بشه.
- اپ یعنی برای هر سیستم عامل یک نسخه ی خاص.
- اپ روی گوشی ها جا اشغال میکنه.
- اپ برای آپدیت نیاز به نصب مجدد داره.
- اپ ممکنه هنگ کنه و پشتیبانیش سخته ..

داستان اینه که از ۱۵ سال پیش ایده ی نمایش محتوا در موبایل به عنوان در دسترس ترین کامپیوتر برای همه به ذهن کارشناس ها رسیده بود که چهار سال بعد یعنی حوالی سال ۲۰۰۹ پخته تر شد و تصمیم بر این گرفته شده که طراحی برنامه های تحت وب (سایت ها) طوری انجام بشه که نمایش اونها در تبلت و موبایل با لپ تاپ و دسکتاپ فرق کنه.

معلومه که اگه سایتی مثل ایرانکد رو با موبایل باز کنید به عنوان یک اَپ غیر واکنشگرا مجبورید دائم صفحه رو زوم کرده یا اسکرول کنید تا به همه جای اون دسترسی داشته باشید. این اتفاق برای سایت خبرگزاری ها رخ نمیده چون با تکنیک های روز از طریق کدهای CSS که چیدمان و استایل صفحه رو تعریف می کنند خودشون رو با رزولوشن و ابعاد صفحه تطبیق میدن. به طور خلاصه در حالت Responsive از اسکرول عرضی و زوم خبری نیست و همه چیز درشت نمایش داده میشن. برای تست ساده ترین حالتش کافیه خودتون با Notepad یک فایل متنی به شرح زیر بسازید:

<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>تنظیم درگاه نمایش</h2>
<p>این مثال کار خاصی نمیکنه تنظیم نمایش</p>
</body>
</html>

بعد از ذخیره اگه پسوند فایل رو از txt. به htm. تغییر بدین و با مروگر بازش کنید شاهد نمایش ویژه ای خواهید بود. برای فهم موضوع در کامپیوتر در مروگر Chrome کلید F12 رو بزنید. در فرم مجاور کنار عبارت Element یک آیکون سوئیچ بین موبایل و دسکتاپ می بینید که میتونید حالت نمایش رو تغییر بدین. در موبایل هم داخل تنظیمات مرورگر بین حالت موبایل و دسکتاپ سوئیچ کنید.
تمام کارها رو اون تگ meta داره انجام میده که البته برای ایجاد یک پیج واکنشگرا با تمام عناصر مثل تصاویر، تکست باکسها یا کلیدها کفایت نمیکنه. ولی اگه همین تگ رو با تنظیمات داخلش از کدها حذف کنید متوجه ی تغییر میشد.
برای داشتن یک پیج کاملاً واکنشگرا مثلاً لازمه در استایل یک عکس هم عرض اون رو 100 درصد و ارتفاعش رو اتوماتیک بذاریم. یا تنظیم کنیم که از نظر عرضی عناصر مختلف در حالت موبایل چند درصد از صفحه رو بگیرن و بقیه ی اشیاء زیر اونها برن. علاوه برا اون مجموعه هایی از استایل های آماده برای صفحات نوشته شدن که امروز خیلی در ساخت نرم افزارها مورد استفاده قرار میگیرن و طیف وسیعی از تنظیمات رو در بر میگیرن که دیگه خود طراح وب لازم نیست دونه دونه برای هر عنصر استایل تعریف کنه و تنها به کلاسی که در اون مجموعه از قبل نوشته شده ارجاعشون میده. یکی از معروف ترین این استایل های آماده Bootstrap هست.

بوت استرپ که ترجمه اش چیزی شبیه "سرنخ" یا راه مفید میشه. چهار سال پیش مثل یک معجزه ظهور کرد و تا امروز که نسخه ی ۴ اون اومده بالای ۱۴ درصد از سایت های دنیا ازش استفاده میکنن! به طور خیلی ساده تعریفش اینه که تصور کنید شما به عنوان کسی که یک صفحه ی وب ساده ساختین یا حتا برنامه ی حرفه ای تحت وب نوشتین، دائم این دغدغه رو دارین که توی موبایل چطوری دیده میشه، توی تبلت چطور و حتا خود کامپیوتر. و بعد رویای اینکه بجای نوشتن صدها خط برای ساخت یک منوی ساده و رنگ آمیزی اون تنها تایپ کنید "منو-آبی" و اون بالا یه منو بیاد! همه ی اینها با افزودن فایل بوت استرپ کنار پروژه امکان پذیره. پدیده ای که گردانندگان سایت محبوب توئیتر برای اولین بار به دنیا هدیه کردن و استفاده ی اون رو از حالت اختصاصی خارج کردن!

اگر به مقوله ی طراحی نرم افزار یا رابط کاربری علاقه مند هستین، این ابزار مورد خوبی برای سرمایه گذاری و آموختن میتونه باشه.

#bootstrap #responsive #webdesign #skill