طراحی سایت واکنشگرا مفهومی به معنی تغییر لایه‌های سایت شما با توجه به وضوح صفحه نمایشگر شماست. به بیان عمیق‌تر، ۴ ستون در پهنای ۱۲۹۲ پیکسل به دو ستون در طول ۱۰۲۵ پیکسل تغییر میکند. همچنین در صفحه نمایشگرهای موبایل و تبلت نیز به درستی نمایش داده میشود. این تکنیک طراحی را طراحی ریسپانسیو یا واکنشگرا می نامند.
طراحی سایت واکنشگرا به طور کلی متفاوت از طراحی‌های سنتی است و برنامه نویسان مخصوصا برنامه نویسان مدرن باید با مفاهیم این طراحی‌ها آشنا باشند.
صفحه هایی که دارای جدول داده هستند یکی از چالش‌های مهم برای طراحی واکنشگرا هستند. جدول‌های داده به طور پیش فرض بسیار پهن هستند، و وقتی کاربران بزرگنمایی صفحه را کم می کنند تا کل جدول را ببیند، نوشته‌ها بسیار کوچک می شوند. یا وقتی کاربران سایت، بزرگنمایی را بیشتر میکنند باید عمودی و افقی حرکت کنند تا نوشته‌ها را ببینند. چند راه برای اجتناب از این مشکل وجود دارد. تغییر فرمت جدول داده به مینی-نمودارها یا نمودارهای دایره ای یک راه حل تایید شده است. نمودارهای کوچک حتی در نمایشگرهای باریک هم درست نشان داده می شوند.
طراحی سایت های واکنش گرا در مقایسه با روش های سنتی بسیار خلاقانه تر است و جلوه های شگفتی بسیار زیادی را به وجود می آورند.
یک طراحی سایت واکنش گرا (ریسپانسیو) به طور معمول دارای سه ویژگی است.
- شبکه شناور (Fluid Grid): در سیستم شبکه شناور به جای استفاده از پیکسل از درصدها برای تعریف طول و عرض عناصر استفاده می شود. برای مثال کلمه “پرواز” ممکن است طولی به اندازه ۶۵۰ پیکسل در طراحی عرض ثابت داشته باشد در صورتی که در طراحی شبکه شناور در CSS این طول تحت عنوان ۱۰۰% مقداردهی می شود.
- متناسب با نمایشگرها (media queries): این ویژگی CSS شخصی سازی شده را قادر می سازد تا اطلاعات را بر مبنای حداکثر و حداقل پهنای مرورگر نمایش دهد. برای مثال یک نمایشگر رسانه ای با عرض حداکثر ۴۵۰ پیکسل تنها برای مرورگرهای تلفن همراه خواهد بود
<link href=”css/phone.css” rel=”stylesheet” type=”text/css” media=”only screen and (max-width: 450px)”>
- تصاویر واکنشگرا (Responsive Images): همانند شبکه شناور تصاویر واکنشگرا عرض ثابتی ندارند و به جای آن از حداکثر عرض (هنگام نمایش در صفحه دسکتاپ به عنوان ۱۰۰% در نظر گرفته می شود) استفاده می کند. این توانایی تصاویر را قادر می سازد تا به تناسب عرض صفحه نمایش کوچک شوند.
خروجی این ویژگی ها به راحتی قابل تشخیص است. یک سایت با طراحی ریسپانسیو مانند IPT24.com را در مرورگر خود باز کنید و آن را تغییر سایز دهید. حال شما تغییرات المانهای سایت را بر اساس پهنای مرورگر مشاهده می کنید.
سه دلیل که چرا طراحی سایت واکنشگرا بهترین گزینه برای استراتژی سئوی تلفن همراه است؟
از آنجایی که استفاده از تلفنهای هوشمند و تبلت روز به روز در حال افزایش است نیاز به استفاده از قالبهای واکنشگرا نیز بیشتر میشود.
اگر بهینه سازی وبسایت جزء اصلی استراتژی بازاریابی اینترنتی شماست بنابراین داشتن یک قالب واکنشگرا نیز امری مهم و ضروری خواهد شد.
آمارها نشان می دهد که فروش تلفن همراه در حال حاضر از سیستم های خانگی پیشی گرفته، بنابراین می توان گفت که استفاده از تلفنهای هوشمند و تبلتها برای جستجو در اینترنت نیز از جستجو به وسیله سیستمهای خانگی پیشی گرفته است.
۶۷% از کاربران اینترنت جستجو به وسیله تلفنهای هوشمند را ترجیح میدهند. بنابراین بسیاری از کمپانیهای بزرگ که استراتژی سئوی قوی داشتهاند از طراحی سایت واکنشگرا برای سایت خود استفاده کردهاند.
اختلاف نظر بین اینکه برای یک وبسایت، بهتر است از یک طراحی جداگانه برای نسخه موبایل استفاده شود یا سایت اصلی به صورت ریسپانسیو طراحی شود بسیار است اما حقیقت این است که هر دوی این گزینه ها محاسن و معایب خود را دارند. اینکه کدام گزینه برای تجارت شما بهتر است بستگی به فاکتورهای زیادی مانند هدف وبسایت، مشتریان بالقوه و اهمیت سئو برای شما دارد.
اگر سئو یک عامل تعیین کننده در موفقیت شماست، در اینجا سه دلیل که چرا طراحی سایت واکنش گرا بهترین گزینه برای استراتژی سئوی تلفن همراه است بیان شده است.
۱. توصیه شده توسط گوگل
موتور جستجوگر گوگل با داشتن ۶۷% از سهم بازار جستجو، زمانی که صحبت میکند بازاریابان اینترنتی گوش میکنند. گوگل اعتقاد دارد که طراحی وبسایت واکنشگرا برای پیکربندی موبایل بهترین گزینه است و حتی تا آنجا پیش می رود که از طراحی سایت واکنش گرا به عنوان یکی از حرفهای ترین فعالیت یک کمپانی یاد میکند.
دلیل تاکید گوگل این است که طراحی سایت واکنشگرا یک آدرس و یک کد HTML واحد دارد که صرف نظر از نوع دستگاه به رباتهای گوگل برای خزیدن، فهرست بندی و سازماندهی یافته ها کمک میکند. اما طراحی جداگانه سایت برای نسخه موبایل که یک آدرس و HTML متفاوت از نسخه دسکتاپ دارد کار رباتهای گوگل برای خزش و فهرستبندی را سختتر میکند.
علاوه براین، گوگل طراحی سایت واکنش گرا را به این دلیل ترجیح می دهد که محتوایی که در یک وبسایت با یک آدرس URL وجود دارد برای اشتراکگذاری، لینکدهی و تعامل توسط کابران بسیار آسانتر است.
برای مثال یک کاربر موبایل را در نظر بگیرید که محتوایی را از ورژن موبایل یک سایت با یک کاربر فیسبوک که از دسکتاپ برای دسترسی استفاده میکند به اشتراک بگذارد، بنابراین وقتی که کاربر با استفاده از دسکتاپ، نسخه موبایل سایت را باز میکند با محیطی باکیفیت کم و غیرقابل استفاده برای مرورگر دسکتاپ مواجه میشود که این امر بر روی تجربه کاربری سایت تاثیر منفی میگذارد و از آنجایی که گوگل به عنوان یکی از بزرگترین موتورهای جستجوگر اهمیت زیادی برای تجربه کاربری در رنکدهی سایت قائل است این امر تاثیر منفی بر سئوی سایت خواهد گذاشت.
۲. یک وبسایت و هزاران دستگاه
یکی از جذابترین جنبههای طراحی سایت واکنش گرا این است که یک وبسایت واکنشگرا میتواند یک تجربه کاربری عالی در دستگاههای مختلف با اندازه صفحه نمایشهای متفاوت فراهم کند. اندازه صفحه نمایشها در دستگاههای مختلف متفاوت است و طراحی ریسپانسیو صرفنظر از تنوع زیاد صفحه نمایشها یک تجربه کاربری بهتر و منسجمتر نسبت به یک طراحی جداگانه برای یک اندازه دستگاه خاص را ارائه می دهد.
برای مثال فرض کنید که شخصی به جستجوی یک محصول توسط مرورگر تلفن هوشمند خود در خارج از منزل میپردازد و سایتی خوب برای این محصول میابد، پس از بازگشت به منزل تصمیم به ادامه جستجو در مورد آن محصول خاص در سایت مورد نظر میگیرد، با این تفاوت که در منزل از مرورگر دسکتاپ به جای گوشی هوشمند استفاده می کند.
اگر سایت مثال ما واکنشگرا باشد در این صورت یک تجربه کاربری مثبت در ذهن استفاده کننده ایجاد میکند چون شخص همان سایتی را بر روی مرورگر دسکتاپ مشاهده می کند که در تلفن هوشمند با آن ارتباط برقرار کرده بود، به عبارت دیگر اگر سایت از یک طراحی ثانویه برای نسخه موبایل استفاده میکرد کاربر در هنگام استفاده از نسخه دسکتاپ دچار سردرگمی میشود.
۳. مدیریت آسان
داشتن یک نسخه موبایل جداگانه از سایت نیاز به ایجاد یک برنامه جداگانه برای سئو است. مدیریت یک سایت با یک برنامه سئو بسیار آسانتر از مدیریت دو سایت با دو سئو متفاوت است و این مزیت کلیدی وبسایتهای واکنشگرا نسبت به یک سایت با نسخه موبایل جداگانه است.
با این وجود یکی از مزایای داشتن نسخه موبایل برای سایت بهینه سازی برای کلمات کلیدیست که بیشتر توسط کاربران با تلفن هوشمند جستجو می شود
برای مثال، در جستجو با تلفن هوشمند برای یافتن یک رستوران محلی کاربر تلفن همراه بیشتر تمایل به استفاده از کلمه “در نزدیکی” در جستجوهای خود دارد. با این وجود یک سایت تلفن همراه جداگانه در استراتژی سئوی سایت تاثیر چندانی ندارد.
مزایای طراحی سایت واکنش گرا :
- کاربر مجبور نیست برای مطالعه مطالب شما زوم کند و مطالب با سایز مناسب به او نمایش داده میشود.
- در سایت واکنشگرا نیازی به اسکرول کردن به چپ و راست نیست و مطالب با توجه به عرض صفحه فیت میشود.
- منوهای کاربری بهینهسازی شدهاند و به راحتی در دسترس کاربر هستند.
- به دلیل راحتی کاربر در استفاده از سایت زمان ماندن کاربر در سایت Time on Page افزایش میابد و همین باعث کاهش نرخ پرش Bounce Rate میشود.
- در سال ۲۰۱۲ شرکت گوگل به همه سایتها تاکید کرد که باید واکنشگرا باشند و این یک امتیاز مثبت در رنکینگ سایت است.
خلاصه
طراحی وبسایت واکنشگرا توسط گوگل توصیه شده است، چون یک تجربه کاربری بسیار عالی در دستگاههای مختلف و با اندازه صفحه نمایشهای مختلف فراهم میکند، همچنین مدیریت استراتژی سئوی سایت را نیز آسانتر می کند.
سایت واکنش گرا Responsive یعنی در هر اندازه صفحه نمایش به صورت درست نمایش داده شود.