طراحی سایت ریسپانسیو

طراحی سایت واکنش‌گرا مفهومی به معنی تغییر لایه‌های سایت شما با توجه به وضوح صفحه نمایش‌گر شماست. به بیان عمیق‌تر، ۴ ستون در پهنای ۱۲۹۲ پیکسل به دو ستون در طول ۱۰۲۵ پیکسل تغییر می‌کند. همچنین در صفحه نمایشگرهای موبایل و تبلت نیز به درستی نمایش داده می‌شود. این تکنیک طراحی را طراحی ریسپانسیو یا واکنش‌گرا می نامند.

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

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

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

یک طراحی سایت واکنش گرا (ریسپانسیو) به طور معمول دارای سه ویژگی است.

• شبکه شناور (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 یعنی در هر اندازه صفحه نمایش به صورت درست نمایش داده شود.