چرا باید از سایت واکنش گرا استفاده کنیم؟

با توجه به آمار فروش جهانی تلفن های همراه و تبلت ها و انجام کارهای اینترنتی روزانه با آنها، توجه به سایت واکنش گرا از اهمیت بیشتری برخوردار است. در آینده ای بسیار نزدیک، وب سایت شما توسط این ابزار ها مورد بازدید قرار خواهد گرفت. از آنجائیکه اندازه ی صفحات در تلفن های همراه و تبلت ها یکسان نیستند لذا ریسپانسیو بودن یک سایت بسیار حائز اهمیت است. توجه داشته باشید اگر سایتی در رتبه های بالای گوگل قرار داشته باشد ولی ریسپانسیو نباشد میزان پرش یا همان bounce rate آن توسط بازدیدکنندگان تبلت و موبایل های هوشمند افزایش خواهد یافت و این هشداری است برای شمایی که در این بازار رقابتی سخت به فکر ریسپانسیو کردن سایت خود باشید تا از رقبا پیشی بگیرید.

  

چگونه می توان سایت واکنش گرا را از غیر واکنش گرا تشخیص داد؟

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

آیا طراحی سایت واکنش گرا تاثیری در نتایج گوگل دارد؟

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

موضوع مهم دیگری که گوگل مدنظر دارد این است که برای کاربران یک پایگاه اینترنتی قطعا ارتباط، لینک دهی و اشتراک گذاری روی یک URL راحت تر خواهد بود.

مزیت دیگر طراحی ریسپانسیو برای طراحان، امکان مدیریت محتوا و اجرای تکنیک های سئو برای یک سایت بسیار اقتصادی تر و آسانتر از دو یا چند سایت است.

چگونه یک سایت واکنش گرا طراحی کنیم؟

از عوامل مهم ریسپانسیو بودن سایت ها تنوع سیستم های عامل و مرورگرهها و هم چنین تنوع در استفاده از زبان ها، ابزارها و فوت و فن های مختلف برنامه نویسی می باشد. برای ریسپانسیو کردن سایت ها می توان از ویژگی های مختلف CSS مثل Float یا شناور سازی عناصر سایت استفاده کرد. البته که شناور سازی به تنهایی برای ریسپانسیو کرده سایت کافی نیست و باید با کمک کدهای Java script آن ها را کامل کرد. به این ترتیب شما می توانید به شکل دستی کدنویسی کرده و تعیین کنید که در هر حالت صفحه ی سایت با چه رزولوشنی به نمایش در آید.

در ادامه یکی از ساده ترین روش های کدنویسی ریسپانسیو با CSS را با هم مرور خواهیم کرد.

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

برای شروع کار، کد زیر را بین دو تگ head اضافه کنید:

<meta name=”viewport” content=”width=device-width”>

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

نگران نباشید در زیر 3 فایل CSS برای رزولوشن های مختلف طراحی کرده و در صفحه ی HTML لینک نمائید:

<link href=”template.css” rel=”stylesheet” type=”text/css” media=”only screen and (min-width: 1024px)” />

<link rel=”stylesheet” media=”only screen and (min-width: 0px) and (max-width: 327px)” href=”mobile.css”>

<link rel=”stylesheet” media=”only screen and (min-width:328px) and (max-width: 768px)” href=”templates/template/tablet.css”>

فایل اول برای کامپیوتر ها و لب تاپ ها با رزولوشن بیش از 1024 است.

فایل دوم برای موبایل ها با رزولوشن 327 به پائین و فایل سوم برای گجت های میان سایز مثل تبلت ها با رزولوشن بین 327 و 1024 پیکسل است.

هر عرضی که دارید مهم نیست، فقط عرض مرورگر را در محدوده سایز مد نظر خود قرار داده و کدهای CSS آن را به فایل اضافه کنید. در مورد سایت هایی با عرض بین 327 و 1024 نگران نباشید. بهتر است محدوده ها را کوچک تر کرده و فایل CSS را برای هر کدام اضافه کنید.

فریم ورک های طراحی سایت واکنش گرا 

اگر به اندازه ی کافی با زبان Java scipt آشنا نیستید و یا صرفا می خواهید کلیشه وار سایت ریسپانسیو طراحی کنید، بهتر است به سراغ فریم ورک های آماده بروید. فریم ورک هایی مثل Bootstrapt، Gumby و یا Foundation web که در عین کمی پیچیدگی امکانات بسیاری را در اختیار طراحان سایت قرار می دهند.

منبع: چرا باید از سایت واکنش گرا استفاده کنیم؟