اگر به دنبال طراحی وب سایت بوده اید،حتما اصطلاح طراحی سایت واکنشگرا را نیز دیده اید ؟
احتمالا تابه حال با این موضوع روبرو شده اید که وقتی با موبایل یا تبلت خود در حال وبگردی هستید با صفحاتی مواجه شوید که از لحاظ سایز و اندازه با موبایل یا تبلت شما همخوانی نداشته باشند
و برای دیدن مطلب یا لینک مورد نظر مادام عملیات zoom in و zoom out کنید و خلاصه جهت خواندن مطالب سایت به زحمت بیافتید چنین سایتی از تکنولوژی واکنش گرا بهره نمی برد.
آمار کاربران گوشی در کشور عزیزمون 40 میلیون نفر می باشد و طبق پیش بینی های انجام شده تا 3 الی 5 سال دیگر این تعداد به عددی بین 68 تا 71 میلیون نفر خواهد رسید؛
در نتیجه واکنشگرا بودن سایت در چند سال آینده جزء مهم ترین و در اولوین بخش های طراحی سایت خواهد بود.
معمولا مشکلات یک سایت هنگامی طراحی سایت به طور کامل انجام می شود نمایان خواهند شد از جمله صفحاتی که ریسپانسیو نیستند.
بسیار مهم است که این مشکلات در اصرع وقت حل شوند چرا که هنگامی که برای یک سایت تبلیغات انلاین،تولید محتوا و در کل بازاریابی شروع می شود تعداد ورودی های سایت همواره افزایش خواهد داشت.
حال فرض کنید 70% کاربرانی که ورودی سایت شما هستند از موبایل و تبلت استفاده کنند.
اتفاقی که می افتد این است که هنگامی که یک کاربر با یکی از صفحات سایت مواجه می شود که واکنشگرا نیست به احتمال خیلی خیلی زیاد سریع از آن صفحه خارج می شود
و این عمل باعث بالا رفتن Bounce Rate سایت شما خواهد شد که در سئو سایت شما تاثیر منفی خواهد گذاشت که در آخر باعث کاهش تعداد ورودی و افزایش تعداد خروجی از سایت شما خواهد بود.
لطفا یک قاب عکس یا اسکلت بندی ساختمان را تصور کنید. کاری که این دو انجام میدهند چیست؟
هر دوی این ابزار، کمک میکنند که محتویات آنها، ساختار منظم‌تر و بهتری داشته باشد!
برای مثال اگر بخواهیم که عکسی را درون قاب عکس قرار دهیم، باید آن عکس را به اندازه‌ی آن قاب عکس درآوریم.
یا مثلا در ساختمان سازی، اسکلت بندی ساختمان به عنوان یک قاب (Frame) به ما کمک میکند که آن ساختمان را اصولی‌تر، بهتر و منظم تر بسازیم.
اگر بخواهیم بگوییم که فریم ورک چیست ، میتوانیم بگوییم که فریم ورک ها در برنامه نویسی نیز دقیقا همینکار را برای ما انجام میدهند.
یکی از مهم ترین نکات درباره‌ی کاربرد فریم ورک ها این است که کمک میکند که چرخ را از اول اختراع نکنید.
امکانات بسیار زیادی در فریم ورک ها از قبل تهیه و برنامه نویسی شده است که باعث میشود که شما کارهای روتین و ابتدایی یک پروژه را رد کنید و مستقیم به سراغ انجام کارهای اصلی پروژه بروید.
برای مثال اگر شما بخواهید اقدام به نوشتن یک اپلیکیشن آنلاین با PHP کنید، کارهای روتین زیادی را در ابتدا باید انجام دهید:
فولدر های اصلی را بسازید
فایل index.php را بسازید
فایل مربوط به اتصال به دیتابیس را بسازید (دیتابیس چیست؟)
با شرط if چک کنید که اگر در اتصال به دیتابیس با خطا مواجه شدید، خطا را چاپ کند
در ابتدای فایل index.php فایل دیتابیس خود را وارد (require_once) کنید
و ده ها مرحله‌ی ابتدایی دیگر
برای سایت واکنشگرا نیز فریم‌ورک‌هایی ارائه شده‌اند که یکی از پرکاربردترین آنها، فریم‌ورک بوت استرپ است.
طراحان بسیاری در سراسر جهان از بوت استرپ برای طراحی سایت واکنشگرا استفاده میکنند.
طراحی واکنشگرا با استفاده از بوت استرپ، کار دشواری نیست. فریم‌ورک بوت استرپ شامل کدهای CSS و JS است
که با استفاده از این کدها و قواعد بوت استرپ، طراحان می‌توانند سایت را به صورت ریسپانسیو طراحی کنند.
البته فریم ورک های دیگری نیز هستند که از جمله آنها می توان به Pure، Materialize، Foundation و Skeleton اشاره کرد .
برای این که متوجه شوید سایتی واکنشگرا است یا خیر، میتوانید صفحه مرورگر خود را کوچک یا بزرگ کنید.
در این صورت اگر سایت مورد نظر، واکنشگرا باشد، اندازه تصاویر و اجزاء صفحه مورد نظر تغییر میکند و در عین حال هیچ تغییری در خوانایی مطالب و لینک‌ها به وجود نخواهد آمد.
همچنین به اسکرول افقی نیازی نیست. اما در سایت‌های غیرواکنشگرا ، حتماً باید به سراغ اسکرول افقی بروید تا بتوانید قسمتهای دیگر صفحه که با بزرگ کردن آن، پنهان شده‌اند، مشاهده کنید.
از جمله نمونه سایت‌های واکنشگرا میتوان به سایت گیفت آس، مدیر وب و کافه ورزش اشاره کرد که خودتان میتوانید با مقایسه آنها با سایت‌های معمولی، متوجه تفاوتشان شوید.
در ابتدا بگذارید دو مسیر راحت برای چک کردن واکنشگرایی یک وب سایت را بشناسیم:
روش ساده :
وبسایت Am I Responsive: به سایت Am I Responsive مراجعه کنید و آدرس سایت خود را وارد کنید.
این سایت به سرعت چهار نسخه کامپیوتر، لپ‌تاپ، تبلت و موبایل از سایت شما را برایتان نمایش خواهد داد و به همین راحتی میتوانید واکنش گرایی آن را تست کنید.
روش تخصصی :
اگر قصد دارید دقیق‌تر به بررسی سایت خود بپردازید و آن را در سایزهای دقیق بررسی کنید، یک روش حرفه‌ای برای شما وجود دارد.
سایت خود را باز کنید و کلیدهای Ctrl+Shift+I را فشار دهید، یا اینکه بر روی سایت خود کلیک راست کرده و گزینه inspect (یا inspect element) را انتخاب کنید.
حالا دکمه‌های Ctrl+Shift+M را فشار دهید یا بر روی آیکون مشخص شده در تصویر کلیک کنید. سایت شما با اینکار وارد حالت ریسپانسیو میشود.
حالا شما میتوانید از بین گوشی‌ها و تبلت‌های مطرح بازار، مدل مورد نظر خود را انتخاب کنید، تا سایت شما در اندازه صفحه این مدل خاص نمایش داده شود.
اول از همه بیایید ببینیم AMP چیست. پروژه AMP که توسط گوگل آغاز شد، در تلاش بود تا روشی بهینه برای ارائه محتوا به دستگاه‌های تلفن همراه ایجاد کند.
این «صفحات سریع موبایل» از تعدادی تکنیک‌های بهینه‌سازی برای ارائه سریع محتوا به کاربران استفاده میکنند. AMP روشی کاملاً تخصصی در ایجاد صفحات سریع وب است.
در طراحی واکنشگرا فقط شکل ساختاری فرق می کند و کلیه اطلاعاتی که در موبایل یا دیسکتاپ بارگذاری می شود یکی است،
فقط بخشی از قسمت ها رو ممکنه در حالت موبایل نمایش ندهید ولی AMP در اصل یک ساختار کوچک از صفحه رو برای موبایل ارسال می کند
و قسمتهای اضافه نیاز به نمایش آن در نسخه موبایل نیست را حذف می کند.
اگر سایت شما به صورت واکنشگرا طراحی شده است لزومی به پیاده سازی amp ندارید چرا که به گفته خود گوگل فعلا استفاده از amp جزو فاکتور های سئو نیست
ولی طبق بررسی ها این نوع صفحه ها از رنک برین خوبی برخوردار هستن و توانسته اند نرخ بازگشت را افزایش بدهند.
همچنین در صورتی که شما محتوای زیادی منتشر نمی کنید ( سایت خبری نیستید) و یا سایت فروشگاهی هستید استفاده از amp توسعه نمی شود
طراحی موبایل واکنشگرا برای سرعت طراحی نشده است، برای طراحان طراحی میشود. همچنین برخی اطلاعات مانند جدول‌ها باید بر روی دستگاه‌های کوچک بهینه شوند.
بنابراین فقط طراحی واکنشگرا کافی نیست و امروزه بسیاری از سایت‌ها و صفحات پیش به سمت استفاده از صفحات AMP می‌روند.
گوگل تایید کرده است که هر وب سایتی می تواند از AMP استفاده کند. چند نوع وب سایت را که پتانسیل بیشتری برای جذب ترافیک از این طریق AMP را دارند عبارتند از :
اخبار و رسانه / تجارت الکترونیک/ناشران محتوا
eBay یکی از مشهور ترین فروشگاه های اینترنتی نیز هم اکنون توانسته است با کمک AMP تعداد بیشتری کاربر را به سمت خود جذب کرده و درآمد بیشتری را بدست آورد.
پس اگر شما هم در تجارت الکترونیک فعال هستید می توانید از AMP بهره ببرید.
1- سازگاری و همخوانی با انواع نمایشگرها در ابعاد مختلف
2-نمایش صحیح و مناسب در طیف وسیعی از مرورگرهای قدیمی و جدید
3- دارای بودن قابلیت انعطاف پذیری بالا و کاهش هزینه های جاری (عدم ساخت سایت با ساختار های مختلف)
4-کسب رتبه بندی بهتر در گوگل
5- بالا رفتن قدرت سئو سایت
6-افزایش چشم گیر بازدیدکننده
7-کسب رضایت بیشتر در موتورهای جستجوگر
از معایب وبسایت واکنشگرا (ریسپانسیو ) میتوان به عدم خوانایی متن های طولانی و فونت های ریز و درشت در deviceهای مختلف اشاره کرد.
البته ناگفته نماند که برای رفع این مشکل میتوانید برای مطالب طولانی از گزینه ” ادامه مطلب ” نیز استفاده کنید.
