وبسایت رسپانسیو یا واکنشگرا چیست؟
با دقت به تکثیر روز افزون تلفن همراه ها و تبلت ها ، دیگر بهره گیری از وسایلی مثل لپ تاپ و کامپیوتر های فردی برای انجام کارهای متدوال نزدیک به به صفر رسیده است.
از این رو بهره گیری از تلفن همراه ها و تبلت ها رو به تکثیر می باشد.
افراد برای بررسی کردن یک وبسایت دیگر احتیاجی ندارند که مثل قدیم کامپیوتر شخصی خود را روشن کرده و داخل وبسایت بروند و برای این عمل از تلفن همراه و تبلت بهره گیری می کنند.
پیاده سازی وبسایت ریسپانسیو یا واکنشگرا (RWD) ، یک پروسه طراحی وبسایت می باشد که منجر می شود صفحه های وب به خوبی روی انواع دستگاه ها و صفحه نمایش ها به نمایش در بیایند.
مطالب ، طراحی و روند کار در همه ی دستگاه ها برحسب همان دستگاه می باشد.
به این مفهوم می باشد که یوزر هم می تواند وبسایت را در صفحه نمایش کامپیوتر شخصی ، هم در لپ تاپ با اندازه بزرگتر و هم در تلفن همراه و تبلت خود با هر اندازه صفحه نمایش ببیند.
یکی از فریم ورک های اساسی که در پیاده سازی وبسایت رسپانسیو یا واکنشگرا بهره گیری می شود ، فریم ورک بوت استرپ می باشد.
تعریف فریم بوک به زبان آسان
یک فریم ورک کلکسیونی از استاندارد از مفهوم ها ، روند ها و مقیاس های پیوسته به برخورد با هر نوع دشواری می باشد که در حالتی که حل نشود می تواند منجر به ایجاد دشواری های تازه بشود.
در جهان طراحی وبسایت ، چنانجه بخواهیم تعریف راحت تر از فریم ورک ها داشته باشیم می گوییم : یک فریم ورک به عنوان یک بسته از قالب ، فایل ها و پوشه کد های استاندارد مثل css و html و js وغیره است ، که می تواند برای حمایت از گسترش وب سایت ها ، به عنوان بنیانی برای آغاز ساختن یک وبسایت بهره گیری می شود.
در سال های گذشته با دقت به افزایش بهره گیری از دستگاه های هوشمند و تلفن های همراه ، پیاده سازی وب وبسایت رسپانسیو یا واکنشگرا بسیار ارزش یافته است.
در دنیای امروز بیش از نیمی از ازدحام وبسایت ها توسط تلفن های همراه است.
همچنین گوگل از سال ۲۰۱۵ ، پیاده سازی وبسایت ریسپانسیو (RWD) را یکی از عامل های رتبه بندی اعلام کرد.
چطور بفهمیم یک وبسایت ، ریسپانسیو پیاده سازی شده؟
با معنی وبسایت رسپانسیو یا واکنشگرا آشنا شدیم حال برای تست وبسایت رسپانسیو می توانید مرورگر خود را از وضعیت maximize خارج کنید و با موس صفحه مرور گر را کوچک و بزرگ کنید.
مشاهده می کنید که اندازه صفحه تغییر می کند منتها نوشته ها و لینک ها همچنان خوانا می باشند و احتیاجی به zoom in و یا zoom out و اسکرول ندارند ، این کار را در صفحه اصلی و هم در صفحه های داخلی امتحان کنید.
گوگل هم رسما طراحی وبسایت ها به شکل ریسپانسیو یا واکنش گرا را پیشنهاد کرده است.
خصوصیت های وبسایت رسپانسیو یا واکنشگرا
یک وبسایت رسپانسیو یا واکنشگرا منجر به جذب زیادی از یوزرها به سمت خود می شود در صورتی که وبسایتی که رسپانسیو نباشد اکثر یوزرهایی را که با تلفن همراه یا تبلت داخل وبسایت شده اند را به دلیل دشواری کار از دست می دهد.
وبسایتی که رسپانسیو باشد مورد پسند یوزر و به عبارتی user friendly می باشد و این یک امتیاز بزرگ در جذب مشتری محسوب می شود.
یک وبسایت رسپانسیو یا واکنشگرا از دید گوگل دوست داشتنی تر می باشد .
واکنشگرا یا رسپانسیو بودن یک وبسایت می تواند بر روی سئو وبسایت اثر بگذارد.
تبدیل یک وبسایت واکنشگرا یا رسپانسیو به وب اپلیکیشن بسیار راحت می باشد.
با دقت به موارد گفته شده تا چندین سال آتی دیگر پیاده سازی وبسایت ها به شکل معمولی از رده خارج شده و وبسایت های رسپانسیو جانشین آن ها می شوند.
تگ viewport چیست؟
این تگ چه در پیاده سازی وبسایت ریسپانسیو و چه در وبسایت های غیر ریسپانسیو تگ سودمندی می باشد.
چون چنانچه وبسایت شما برای مقدار های بالاتر از ۹۰۰ پیکسل نوشته شده باشد زمان نمایش در اندازه های کوچکتر به هم می خورد.
بهره گیری از این متا تگ منجر به رندر شدن وبسایت در اندازه ۹۰۰ در تلفن همراه خواهد شد و از به هم ریختگی وبسایت در تلفن همراه خودداری می کند.
چطور از تگ viewport بهره گیری کنیم؟
برای ساخت نمونه وبسایت ریسپانسیو ، در قسمت head وبسایت ، کد زیر را بنویسید(مانند مثال):
meta name=”viewport” content=”width=device-width, initial-scale=1.0″
همانگونه که مشاهده میکنید در قسمت content می توانید شرایط گوناگونی را جهت نمایش وبسایت تعیین کنید.
مسئولیت width=device-width چیست؟
width=device-width به مرورگر فرمان می دهد که عرض صفحه وبسایت را با عرض گوشی یکی کند ، یعنی چنانچه وبسایت در گوشی تلفن همراه با اندازه ۳۶۰ مشاهده شود ، وبسایت نسبت به این مقدار واکنش نشان میدهد و عرض آن به ۳۶۰ تحول میابد.
این متغیر حتی توانایی دریافت مقدار عددی را هم دارد.
مسئویت initial-scale
مقدار zoom پیش فرض مرورگر را معین می کند ، امکان دارد بر اساس نوع وبسایت ، طراح بخواهد زمان نمایش وبسایت در یک دستگاه به کل پیش فرض در حالت zoom دوبرابر یاغیره قرار داشته باشد.
در حالت پیش فرض زووم روی ۱ تنظیم شده.
مسئولیت user-scalable=yes/noچیست؟
توانایی zoom کردن بر روی وبسایت را به شکل کلی می توان با بهره گیری از این متغیر به بازدید کننده داد (yes) و یا کلا زووم را غیر فعال کرد (no)
مسئولیت maximum-scale
مقدار حداکثر زومی که یوزر می تواند بر روی وبسایت داشته باشد.
ریسپانسیو کردن وبسایت با بهره گیری از افزونه WPtouch
WPtouch یک افزونه وردپرسی تلفن همراهی می باشد ، که به شکل اتوماتیک یک قالب تلفن همراه برای حالت ریسپانسیو را به وبسایت شما اضافه می کند.
گوگل توصیه می کند که وبسایت شما حتما حالت Mobile Friendly یا اصطلاحا ، سازگاری با دستگاه های هوشمند را داشته باشد از جمله تلفن همراه ها ، که این کار منجر می شود سئو وبسایت شما آسیب نبیند و حتی تکثیر یابد.
از طریق امکانات و توانایی هایی که این افزونه در اختیار شما قرار داده ، می توانید به شکل بهینه ، کارهای ریسپانسیو کردن قالب را انجام بدهید.
تماس با آرتایار