قالب واکنش گرا یا ریسپانسیو چیست؟

با پیشرفت تکنولوژی های وب و همچنین پیشرفت چشمگیر استفاده و سرمایه گذاری بر روی دستگاه های مرتبط با وب مانند تلفن های هوشمند، تبلت ها، تلویزیون های هوشمند و … نیاز به داشتن وب سایت هایی مطابق با تمامی دستگاه ها احساس شد.

جهت مشاهده متن کامل مطلب اینجا کلیک کنید / ادامه مطلب

تا چند سال پیش به ندرت یک وب سایت را مشاهده می کردید که یک نسخه موبایل نیز داشته باشد. شاید در آن زمان کاربرانی که از دستگاه هایی به غیر از کامپیوترهای شخصی صفحات وب را مرور می کردند بسیار اندک بود و طراحان صفحات وب و کمپانی های بزرگ از این درصد کوچک چشم پوشی می کردند.

اما امروز شما در کوچه و خیابان، در قطار، در مسیر حرکت به محل کار، حتی در هنگام استراحت و … می توانید به راحتی با استفاده از تبلت و موبایل صفحات وب را مرور کنید. این راحتی در استفاده و سرمایه گذاری عظیم غول های تکنولوژی بر روی دستگاه های متنوعی مانند تبلت و تلفن های هوشمند، باعث شده است سهم کاربرانی که از دستگاه هایی به غیر از کامپیوتر های شخصی صفحات وب را مرور می کنند بیشتر و بیشتر شود.

طراحان وب در گذشته نیز نسخه هایی برای موبایل به صورت مجزا طراحی می کردند، به طور مثال www.example.com/mobile و یا mobile.example.com که این نوع از آدرس دهی نشان می دهد که این نسخه ها کاملا از نسخه اصلی وب سایت مجزا هستند و به صورت جدا گانه ای طراحی شده اند.

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

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

با توجه به موارد ذکر شده و ایجاد محدودیت ها در این زمینه و نیاز رو به افزایش در زمینه طراحی وب سایت های واکنش گرا، تلاش هایی برای طراحی این نوع از وب سایت ها از طرف طراحان وب و کمپانی های مطرح صورت گرفت و با ظهور تکنیک ها و امکانات کاربردی بسیار در نسخه های جدید سی اس اس  css3 و به خصوص مدیا کوئری ها طراحان وب توانستند وب سایت های کاملا واکنش گرا طراحی کنند.

در طرح ریسپانسیو برای هر محدوده پیکسلی یک سری قوانین با CSS روی صفحه اجرا می شود که هدف از آن بهتر نمایش دادن سایت در آن عرض می باشد. به صورتی که صفحه بهم نمی ریزد. در صفحه های موبایل و همچنین تبلت ها طرح نیاز به زوم کردن ندارد.

مهمترین نکته و بحثی که ما را به بحث قالب واکنش گرا یا ریسپانسیو (responsive) می کشاند عرض صفحه ی نمایش دستگاه های مختلی است که توسط آن به وسیله ی یک مرورگر اینترنتی به مشاهده ی یک وبسایت می پردازیم.

در اینجا (بحث قالب واکنش گرا) ارتفاع صفحه ی نمایش اهمیت چندانی ندارد و باز هم تاکید می کنم که «عرض» صفحه ی نمایش از اهمیت بالایی برخوردار است زیرا امروزه با ورود دستگاه های همراه مانند گوشی های تلفن همراه و تبلت ها به دنیای دستگاههای پیشمایش صفحات اینترنتی تنوع “عرض” این دستگاه ها بسیار زیاد شده است.

این تنوع عرض از دستگاههای موبایل کوچک با کمتر از چند صد پیکسل شروع می شود و تا کامپیوترهای رو میزی که گاه عرض مانیتور آنها به چند هزار پیکسل میرسد را شامل می شود. در گذشته سایت ها به گونه ای طراحی می شدند که از یک عرض پرکاربرد به بالا را پاسخ دهند (مثال ده سال پیش عرض 800 در ارتفاع 600 پیکسل به بالا و پنج سال پیش عرض 1024 در ارتفاع  768 اهمیت بیشتری برای طراحان قالب داشت) و بدیهی است که زمانی که یک عرض به عنوان عرض پایه برای طراحی در نظر گرفته می شود آن قالب نباید برای عرض های بزرگتر مشکلی داشته باشد اما مشکل از زمانی شروع می شود که قصد داشته باشیم در یک دستگاه با عرض کمتر سایت را مشاهده کنیم. در این زمان برای استفاده از صفحه اسکرول افقی در صفحه به وجود خواهد آمد که به دلیل دشوار نمودن پیمایش صفحات اینترنتی برای کاربر یک نکته ی بسیار منفی در طراحی محسوب می شود.

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