راهکارهای عملی برای بررسی ریسپانسیو بودن یک وبسایت
قبل از اینکه بحث در مورد طراحی سایت ریسپانسیو و یا استفاده از سایت ساز سایتی شو را شروع کنیم، به این سوال جواب دهید: شما برای جستجو در سایتها، موضوعات مختلف یا خرید اینترنتی بیشتر از تلفن همراهتان استفاده می‌کنید یا کامپیوتر؟ احتمالا جواب شما گزینۀ اول یعنی جستجو با استفاده از موبایل است. این را از روی اطلاعات و آمار وبسایت خودمان با استفاده از ابزارهای گوگل می‌گوییم. این نتیجه، برای عمدۀ سایتها وجود دارد!
به این ترتیب، داشتن یک وب سایت ریسپانسیو responsive که نمایش آن، در همۀ دستگاهها یکسان باشد، به یکی از ضرورت‌های طراحی سایت تبدیل شد.
اگر شما هم به‌دنبال داشتن یک وبسایت ریسپانسیو هستید، این مقاله به همۀ سوالات شما جواب داده و شما را یک گام تا داشتن یک سایت حرفه‌ای نزدیک می‌کند. در این مقاله به شما می‌گوییم سایت ریسپانسیو چیست؟ چه اهمیتی دارد؟ همچنین راهکارهای عملی برای بررسی ریسپانسیو بودن یک وبسایت در اختیار شما قرار می‌دهیم. اگر تا انتها همراه ما باشید، یک پیشنهاد عالی نیز برای شما آماده کرده‌ایم.
وب سایت ریسپانسیو (Responsive) چیست؟
زمانی که گوشی هوشمند و تبلت به جهان معرفی شد، یک راه جدید و جذاب برای گشت و گذار در اینترنت پیدا کردیم؛ اما مسئله اینجا بود که سایت ها برای دیده شدن در صفحۀ مانیتور کامپیوترها طراحی شده بودند. بنابراین در گوشی‌های موبایل که صفحه کوچکی داشتند، کار با آنها چندان راحت نبود.
اینجا بود که قابلیت واکنش گرایی یا ریسپانسیو بودن (responsive)، در طراحی سایت اهمیت بسیار زیادی پیدا کرد. یعنی اینکه یک وب سایت بتواند خودش را با صفحه دستگاههای گوناگون تطبیق دهد تا هر کاربری، با هر دستگاهی که سایت را باز کرد، به‌راحی بتواند از آن استفاده کند و باز هم تجربه خوبی داشته باشد.
اگر به تصاویر زیر نگاه کنید، بهتر متوجه موضوع شوید. وب سایت سازمان سنجش که در تصویر سمت راست باز شده، هیچ تفاوتی با نسخه کامپیوترش ندارد. همین موضوع باعث شده عکس‌ها، دکمه‌ها، نوشته‌ها و … ریز نمایش داده شوند و کار را سخت کنند. اما در تصویر سمت چپ، همه‌چیز کاملا با اندازه صفحه هماهنگ شده است و به زوم کردن صفحه نیازی نیست. این است هنر طراحی سایت ریسپانسیو!
حالا بیایید یک وبسایت را در نظر بگیریم که در مانیتورهای معمولی سه ستونِ محتوا دارد. اگر این وبسایت واکنش گرا باشد، در تبلت که آن را باز کنید، تمام محتواها در دو ستون به شما ارائه می‌شود. زمانی هم که آن را با گوشی باز کنید، همه چیز در یک ستون قرار می‌گیرد. علاوه بر این، حتی ممکن است برخی اطلاعات بی‌اهمیّت در نسخه گوشی حذف شوند یا حتی اطلاعاتی مخصوص گوشی اضافه شود.
فکر می‌کنم اکنون به خوبی مفهوم واکنش گرایی را در طراحی سایت فهمیده باشید. حالا بیایید ببینیم که این موضوع اصلاً چرا اینقدر اهمیّت دارد؟!
اهمیت طراحی سایت ریسپانسیو چیست؟
بسیاری از مشتریانی که برای طراحی سایت یا فروشگاه اینترنتی با ما تماس می‌گیرند، در مورد ریسپانسیو بودن سایتها می‌پرسند. می‌خواهیم دلیل اهمیت و ضرورت زیاد این موضوع را بدانیم.
میزان بازدید و رتبۀ سایت‌تان افزایش می‌یابد
نگاهی به اطراف خود بیاندازید. آدم‌ها معمولاً از چه دستگاهی برای وصل شدن به اینترنت استفاده می‌کنند؟ کامپیوتر، لپ تاپ، تبلت یا موبایل؟ اگر جواب شما موبایل است، پس درست فکر می‌کنید.
در سال 2015 بود که گوگل اعلام کرد جستجوهای انجام شده با موبایل بیش از 51% کل جستجوهای گوگل را شامل می‌شوند. و کاملاً طبیعی است که این موضوع در اکثر سایتهای دیگر نیز صادق باشد. در واقع، خود ما هم تا به حال آمار سایتهای بسیار مختلفی را دیده‌ایم و به ندرت به سایتی برخورده‌ایم که ورودی موبایل آن کمتر از کامپیوتر باشد.
نمودار زیر روند صعودی محبوبیت استفاده از موبایل برای وصل شدن به اینترنت را به شما نشان می‌دهد. فکر می‌کنم بررسی این نمودار برای شما جالب باشد. همانطور که می‌بینید، در سال 2018، استفاده از موبایل برای جستجو، چیزی حدود دو برابر دسکتاپ یا لپ تاپ است.
با این وجود، اگر نسخه موبایل یک وب سایت، بیشتر از نسخه‌های دیگر آن اهمیت نداشته باشد، حداقل کمتر هم ندارد. شما حتماً باید سایت خود را برای موبایل (در کنار دیگر اندازه‌های صفحه) بهینه کنید تا مطمئن شوید همه کاربران به خوبی از سایت شما استفاده می‌کنند.
ریسپانسیو بودن سایت در رتبه گوگل تاثیر دارد
واکنش گرایی وب سایت شما می‌تواند یک تجربه بهتر برای کاربران ایجاد کند… اما قضیه به همینجا ختم نمی‌شود. بلکه علاوه بر این، ریسپانسیو بودن سایت باعث کسب رتبه‌های بهتری در گوگل هم می‌شود (یا اگر بخواهیم کمی تخصصی‌تر صحبت کنیم، در شما هم تاثیرگذار خواهد بود.) اما چگونه؟
طبیعتاً گوگل می‌خواهد، هوای کاربران خود را داشته باشد؛ بنابراین تلاش می‌کند بهترین نتایج را به آنها نمایش دهد. پس کاملاً طبیعی است که وقتی کاربری با گوشی موبایل خود در گوگل جستجو کرد، اولویت را به سایتهای ریسپانسیو بدهد؛ (در واقع، نتایج جستجو یک کلمه در کامپیوتر و موبایل معمولاً با هم متفاوت است.) این یعنی اگر سایت شما ریسپانسیو نباشد، خیلی سخت در نتایج موبایل می‌توانید رتبه کسب کنید. بنابراین باید قید بسیاری از بازدیدکنندگان خود را بزنید. به‌خاطر همین می‌گوییم: اگر برایتان ورودی گرفتن از گوگل (سئو) مهم است، حتماً باید یک سایت ریسپانسیو داشته باشید.
سایت ریسپانسیو هزینه‌ها را بهینه کرده است
بازاریابان در عصر گذشته زمانی که اقدام به طراحی سایت می نمودند متحمل هزینه های زیادی می شدند، به این صورت که هزینه ای را به طور جداگانه صرف سایت و طراحی آن می کردند. از طرفی هزینه ای را نیز برای سایتی دیگر تحت عنوان ورژن موبایل، برای دستگاه های تلفن همراه می نمودند. اما الان این هزینۀ اضافی حذف شده است و بعضی از طراحان سایت مانند ، این قابلیت را روی سایت یا فروشگاه اینترنتی شما اعمال می‌کنند.
آیا طراحی سایت ریسپانسیو برای تمام سایز‌ها شدنی است؟
شما زمانی که به‌دنبال یک سایت ریسپانسیو هستید، یک مانع بزرگ بر سر راه شما قرار خواهد گرفت: هزاران مدل مانیتور، لپتاپ، تبلت و موبایل در دنیا وجود دارد و در نتیجه، تنوع اندازه‌های صفحه بسیار بالاست. حالا سوال پیش می‌آید، اصلاً چطور باید سایت خود را برای این همه این اندازه‌ها آماده کنید؟ آیا می‌خواهید تک تک آنها را بررسی کنید و مطمئن شوید که سایت شما در هر اندازه‌ای درست نمایش داده می‌شود؟ قطعاً این مساله حتی اگر ممکن باشد، چیزی شبیه به دیوانگی است.
بهینه کردن یک سایت برای تمام اندازه‌های صفحه چندان عملی نیست. بنابراین بهتر است قبل از هر کار، اولویت‌های خود را مشخص کنیم. چگونه؟ کافی است به آمار مختلف رجوع کنیم. آمار زیر به ما نشان می‌دهد که تعداد جستجوهای انجام شده در گوگل با توجه به نوع دستگاه چقدر است:
موبایل: 51 درصد
دسکتاپ و لپتاپ: 45 درصد
تبلت: 3.5 درصد
تلویزیون‌های هوشمند و غیره: 0.5 درصد
همانطور که می‌بینید، میزان استفاده از موبایل، کامپیوتر و لپتاپ برای وب‌گردی بیش از سایر دستگاهها می‌باشد. پس بهتر است وقت گرانبهای خود را صرف واکنش گرا کردن سایت برای این دستگاهها کنید و وقت چندانی را برای تبلت یا سایر دستگاهها نگذارید.
حالا بیایید کمی در دستگاههای موبایل دقیق شویم. در اینجا باز هم با تنوع مواجه می‌شویم. یعنی سایز صفحه‌های موبایل نیز با هم متفاوتند. پس باز هم بهترین راه این است که به سراغ گوشی‌ها و اندازه صفحه‌های رایج بازار برویم. این یعنی واکنش گرایی خود را در گوشی های مطرح (برای مثال سری آیفون و همینطور موبایلهای سامسونگ) تست کنید. اما حتی از این هم می‌توان دقیق‌تر شد. طبق آمار، رایج‌ترین اندازۀ صفحه در گوشی‌ها، 1366*768 است. پس اگر نمی‌خواهید خیلی وقت بگذارید، حداقل ریسپانسیو بودن وبسایت خود را در این سایز بررسی کنید.
چطور از واکنش گرا بودن سایت خود مطمئن شوید؟
از آن‌جا که طراحی سایت ریسپانسیو به مهارت کدنویسی نیاز دارد، یک کاربر معمولی از پس آن بر نمی‌آید. اما به عنوان صاحب یک وبسایت، قطعاً می‌توانید هنگام طراحی سایت، مساله واکنش گرایی را در نظر بگیرید و از ریسپانسیو بودن سایت خود مطمئن شوید. می‌پرسید چگونه؟
در ادامه به شما چند راه کاربردی معرفی می‌کنیم که به‌وسیلۀ آن بتوانید، واکنش‌گرایی سایت خود را چک کنید. (بدون اینکه نیاز باشد سایت خود را در گوشی موبایل یا تبلت باز کنید.)
دو راه ساده برای بررسی ریسپانسیو بودن یک وبسایت
در ابتدا بگذارید دو مسیر راحت برای چک کردن واکنش گرایی یک وب سایت را بشناسیم:
- وبسایت Am I Responsive: به سایت مراجعه کنید و آدرس سایت خود را وارد کنید. این سایت به سرعت چهار نسخه کامپیوتر، لپتاپ، تبلت و موبایل از سایت شما را برایتان نمایش خواهد داد و به همین راحتی می‌توانید واکنش گرایی آن را تست کنید.
- تغییر اندازۀ صفحه مرورگر: اگر می خواهید دقیق‌تر نسخه‌های مختلف را بررسی کنید، می‌توانید مرورگر خود را از حالت تمام صفحه خارج کنید و با صفحه آن را به دلخواه بزرگ و کوچک کنید. وقتی شما اندازه مرورگر را تغییر می‌دهید، سایت شما خودش را تطبیق خواهد داد؛ به این ترتیب، از نمایش درست آن در تمام اندازه‌ها مطمئن می‌شوید.
طراحی سایت ریسپانسیو به چه معناست؟
سایت واکنش گرا یا سایت ریسپانسیو (responsive) سایتی است که اندازه و چیدمان اجزای آن شناور است و با ابعاد و رزولوشن دستگاه های مختلف تغییر می کند تا کاربران صرف نظر از اینکه صفحه نمایش دستگاهشان کوچک باشد (مثل اکثر گوشی های هوشمند موبایل) یا نمایشگری متوسط و بزرگ داشته باشند مثل تبلت، لپتاپ و کامپیوترهای رو میزی، تجربه کاربری راحتی داشته باشند.
تفاوت سایت واکنشگرا و غیر واکنشگرا در چیست و چگونه می توان آن را تشخیص داد؟
برای تشخیص ریسپانسیو بودن یک سایت و تفاوت سایتهای ریسپانسیو و غیر ریسپانسیو، سایت مورد نظرتان را در لپ تاپ یا کامپیوتر باز کنید و عرض مرورگر را به آهستگی کم و زیاد کنید. اگر سایت واکنش گرا باشد مشاهده می کنید که اندازه و چیدمان اجزای آن مطابق با تغییر عرض صفحه تغییر می کند به گونه ای که هیچ اسکرول افقی پدید نمی آید. اما در سایتهای غیر ریسپانسیو چنین تطابقی رخ نمی هد و اسکرول افقی لازم است تا بتوان قسمتهای پنهان شده چپ و راست صفحه را مرور کرد. تصاویر زیر نمونه ای از یک سایت واکنش گرا در عرض های مختلف را نشان می دهد.
چگونه طراحی وبسایت ریسپانسیو بر روی دستگاه های مختلف نشان داده می‌شود؟
هدف طراحی وبسایت ریسپانسیو داشتن یک وبسایت اما با المان‌های مختلف است که به طور متفاوت در هنگام مشاهده بر روی دستگاهها با اندازه‌های مختلف پاسخ دهد. برای مثال هنگامیکه صفحه را بر روی دسکتاپ کامپیوتر مشاهده می‌کنید، وبسایت به صورت 3 ستون دیده می‌شود اما هنگامیکه همان صفحه را بر روی تبلت با صفحه نمایش کوچکتر مشاهده می‌کنید ممکن است آن را به صورت افقی حرکت دهید (scroll horizontally) یا برخی عوامل ممکن است از نظر پنهان شوند.
همچنین بسیاری از تبلتها می‌توانند یا در جهت عمودی مشاهده شوند و یا به صورت افقی (landscape) چرخیده شوند. بنابراین اندازه و چیدمان اجزای آن متناسب با ابعاد و رزولوشن دستگاههای مختلف از جمله موبایل، تبلت و لپتاپ تغییر می‌کند. سایتها در صورت داشتن گرافیک سنگین بر روی گوشی‌های هوشمند به آهستگی لود می‌شوند.
با این حال اگر سایت دارای طراحی ریسپانسیو باشد، نسخه تبلت به طور خودکار برای نشان دادن فقط دو ستون تنظیم می‌شود. به این ترتیب، محتوا قابل خواندن است و به آسانی قابل حرکت (navigate) است. بر روی گوشی‌های هوشمند، محتوا ممکن است به صورت یک ستون و یا شاید به طور عمودی قرار بگیرد و یا نیز کاربر این قابلیت را دارد که برای مشاهده ستون بعدی آن را به طرف بالا بکشد (swipe over).
بنابراین همه تصاویر و متنها با توجه به اندازه صفحه نمایش در جای خود قرار می‌گیرند. اگر وب سایتی به صورت ریسپانسیو طراحی نشود به مرور بازدید کنندگان و مشتریان را از دست خواهد داد و این امر منجر به کاهش رتبه سایت در گوگل و بنابراین از دست دادن مشتریان خواهد شد.
آیا طراحی سایت ریسپانسیو فقط برای بهبود نمایش در موبایل انجام می شود؟
سوالی که مطرح می شود این است که طراحی سایت ریسپانسیو صرفا برای نمایش در موبایل است؟ پاسخ این سوال منفی است! طراحی سایت ریسپانسیو باعث می شود که اندازه صفحه نمایش شما با اندازه تصویری که کاربر مشاهده می کند، وفق پیدا کند. بنابراین نحوه نمایش سایت بر روی مانیتورهای عریض و سیستم هایی که از وضوح تصویر بالا نیز استفاده می کنند بهبود پیدا خواهد کرد. البته نحوه پیاده سازی طراحی سایت اهمیت بسیار بالایی در این زمینه دارد و اگر طراح سایت شما تجربه مناسب در این زمینه نداشته باشد، شاید نتواند این موضوع را به خوبی مدیریت کند.
طراحی سایت ریسپانسیو چگونه و به چه دلیل بوجود آمد؟
برای درک بهتر طراحی سایت واکنش گرا بهتر است بررسی کنیم که طراحی سایت ریسپانسیو برای حل و فصل چه مشکلات و نیازهایی بوجود آمده است؟ همانطور که می دانید امروزه دیگر کامپیوترها و لپتاپها تنها وسایلی نیستند که برای مرور صفحات وب مورد استفاده کاربران قرار می گیرند.
انواع موبایلهای هوشمند، فبلت ها، تبلت ها، کنسولهای بازی و تلویزیون ها نیز قابلیت مرور صفحات وب را دارند و گجتهای پوشیدنی نظیر عینک گوگل نیز به بازار راه یافته اند. جدای از آمار تولید و فروش این دستگاهها، در کشور ما نیز به هر سو که بنگریم انواع گوشی ها و تبلت ها را در دست مردم می بینیم و با توجه به ارائه خدمات نسل جدید اینترنت های پر سرعت توسط اپراتورهای تلفن همراه، روند رو به رشد استفاده از این دستگاههای ریز و درشت برای اتصال به اینترنت و مرور صفحات وب امری بدیهی است.
بنابراین سایزهای مختلف و رزولوشن های مختلف این دستگاه ها تبدیل به مشکل بزرگی برای وبسایتهای اینترنتی شده است. چرا که یک سایت باید در ابعاد مختلفی برای مخاطبانش به نمایش در آید و طبیعی است که کاربران انتظار دارند با هر دستگاهی بتوانند صفحات وب را براحتی ببینند و مرور کنند.
برای رفع این مشکل ابتدا طراحی نسخه موبایل سایت مرسوم شد. یعنی مالکان و مدیران وبسایتها دو بار هزینه می کردند، یک بار برای طراحی و مدیریت و بهینه سازی سایت اصلی (جهت نمایش در کامپیوترهای رو میزی و لپتاپها) و بار دیگر برای سایت نسخه موبایل. اما گستره ابعاد نمایشگر دستگاه های مختلف چنان وسیع و متنوع شد که ساخت سایت برای هر یک از آنها عملا غیر اقتصادی و ناممکن است.
بنابراین طراحی سایت واکنشگرا برای رفع این مشکل به میدان آمد و بوسیله آن یک سایت به گونه ای طراحی می شود که اجزای آن شناور بوده و خود را با هر صفحه نمایشی چنان تطبیق دهد که کاربران از هر دستگاهی که استفاده کنند تجربه کاربری راحتی داشته باشند. آمارها حاکی از آن است که سایت هایی که بصورت واکنش گرا طراحی شده اند نسبت به رقبای خود دارای مزیت هستند و نرخ پرش بازدیدکنندگانی که از موبایل و تبلت استفاده می کنند در آنها کمتر است.
آیا طراحی سایت به صورت واکنشگرا تاثیری در نتایج گوگل دارد؟
گوگل رسما طراحی وبسایتها بصورت واکنش گرا را توصیه کرده است. طراحی یک سایت واکنش گرا برای یک پایگاه اینترنتی به جای طراحی سایت موبایل در کنار سایت اصلی، هم برای گوگل این مزیت را دارد که محتوای پایگاه اینترنتی را یکبار شاخصگذاری کرده و صفحات آن را امتیازدهی می کند و هم برای سایت این مزیت را دارد که رنک صفحات آن روی یک آدرس اینترنتی (URL) تجمیع می شود و این موضوع برای ارتقاء در نتایج جستجوی گوگل بسیار مهم است.
همچنین لینک دهی، به اشتراک گذاری و تعامل با محتوایی که در یک سایت و یک آدرس اینترنتی (URL) قرار دارد برای کاربران راحت تر است و گوگل به این موضوع نیز بسیار اهمیت می دهد. مطمئنا مدیریت محتوا و اجرای پروژه های (سئو) نیز در یک سایت آسان تر و اقتصادی تر از انجام آنها برای دو سایت است.
آیا طراحی سایت به صورت ریسپانسیو ضرورت دارد یا می توان از روش های دیگر طراحی سایت نیز استفاده کرد؟
در سال 2013 آمار فروش جهانی تبلتها و موبایلهای هوشمند از فروش کامپیوتر پیشی گرفت و پیش بینی می شود آمار بازدیدهای اینترنتی بوسیله این دستگاهها از لپتاپ و رایانه نیز بیشتر شود. پس می توان گفت در آینده ای نزدیک وبسایت شما بیشتر بوسیله موبایل و تبلت مورد استفاده بازدیدکنندگان قرار می گیرد و تحقیقات نشان داده است که حتی اگر سایتی در نتایج بالای گوگل باشد اما ریسپانسیو نباشد نرخ پرش (bounce rate) آن در موبایل و تبلت افزایش می یابد.
این به معنای زنگ خطری است برای وبسایتهای غیر واکنش گرا. مخصوصا اگر رقبای آنها از طراحی واکنش گرا استفاده کرده باشند. و از سوی دیگر طراحی سایت واکنش گرا مزیتی است نسبت به رقبایی که هنوز سایتشان ریسپانسیو نیست.