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

اما امروز شما در کوچه و خیابان، در قطار، در مسیر حرکت به محل کار، حتی در هنگام استراحت و … می توانید به راحتی با استفاده از تبلت و موبایل صفحات وب را مرور کنید. این راحتی در استفاده و سرمایه گذاری عظیم غول های تکنولوژی بر روی دستگاه های متنوعی مانند تبلت و تلفن های هوشمند، باعث شده است سهم کاربرانی که از دستگاه هایی به غیر از کامپیوتر های شخصی صفحات وب را مرور می کنند بیشتر و بیشتر شود.

در الگوریتم های جدید گوگل سایت های موبایل فرندلی در لیست برتر گوگل قرار خواهند گرفت ، قرار گرفتن در لیست برتر گوگل بدین معنی است که شما در رتبه بندی سایت ها در صفحات اول گوگل مشاهده خواهید شد. و این یعنی افزایش رتبه در گوگل !

با توجه به اینکه امروزه کاربران از سایز های گوناگون صفحات در ابعاد بزرگ و کوچک برای دستیابی به صفحات اینترنت استفاده میکنند ، با طراحی سایت واکنش گرا دیگر نیازی نیست که برای هر دستگاه موجود در بازار با نمایشگر متفاوت یک سایت اختصاصی طراحی کرد. در نتیجه به طور کلی نیاز به راه‌اندازی نسخه موبایل جداگانه برای سایت شما نیست و زمان و هزینه‌های توسعه و نگهداری وبسایت کاهش خواهد یافت . در طراحی سایت یک نگاه واحد وجود دارد و دیگر شاهد چند پارگی نسخه های مختلف سایت خود نیستید. لپ‌تاپ؟ تبلت؟ موبایل؟ یا حتی دستگاهی که هنوز وارد بازار نشده؟ مهم نیست شما همه را پشتیبانی می‌کنید!

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

وب سایت ریسپانسیو (Responsive) چیست؟

فهمیدن اینکه واکنش گرایی یک وب سایت دقیقاً چیست، آنقدر که فکر می‌کنید سخت نخواهد بود. به احتمال زیاد می‌دانید که انسان‌ها برای بقا می‌بایست خود را با محیط و شرایط زندگی تطبیق دهند. در مورد وب سایت ها نیز همین موضوع صادق است. اما منظور ما چیست؟

زمانی که گوشی های هوشمند و تبلت ها به جهان معرفی شدند، یک راه جدید و جذاب برای گشت و گذار در اینترنت را نشان ما دادند. اما مساله اینجا بود که سایت ها برای دیده شدن در صفحات مانیتور طراحی شده بودند و بنابراین در گوشی‌های موبایل که صفحه کوچکی داشتند، کار با آنها چندان ساده نبود.

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

فکر می‌کنم اگر به تصویر دو موبایل زیر نگاه کنید، بهتر متوجه موضوع شوید. وب سایتی که در تصویر سمت چپ باز شده، هیچ تفاوتی با نسخه کامپیوترش ندارد. همین موضوع باعث شده عکس‌ها، دکمه‌ها، نوشته‌ها و … ریز نمایش داده شوند و کار را سخت کنند. اما در تصویر سمت راست، همه‌چیز با اندازه صفحه هماهنگ شده است.

حالا بیایید یک وب‌سایت را در نظر بگیریم که در مانیتورهای معمولی سه ستونِ محتوا دارد. اگر این وب‌سایت واکنش گرا باشد، در تبلت که آن را باز کنید، تمام محتواها در دو ستون به شما ارائه می‌شود. زمانی هم که آن را با گوشی باز کنید، همه چیز در یک ستون قرار می‌گیرد. علاوه بر این، حتی ممکن است برخی اطلاعات بی‌اهمیّت در نسخه گوشی حذف شوند یا حتی اطلاعاتی مخصوص گوشی اضافه شود.

فکر می‌کنم اکنون به خوبی مفهوم واکنش گرایی را در طراحی سایت فهمیده باشید. حالا بیایید ببینیم که این موضوع اصلاً چقدر اهمیّت دارد.

اهمیت یک سایت ریسپانسیو چیست؟

نگاهی به اطراف خود بیاندازید. آدم‌ها معمولاً از چه دستگاهی برای وصل شدن به اینترنت استفاده می‌کنند؟ کامپیوتر، لپ تاپ، تبلت یا موبایل؟ اگر جواب شما موبایل است، پس درست فکر می‌کنید.

در سال ۲۰۱۵ بود که گوگل اعلام کرد جستجوهای انجام شده با موبایل بیش از ۵۱% کل جستجوهای گوگل را شامل می‌شوند. و کاملاً طبیعی است که این موضوع در اکثر سایت‌های دیگر نیز صادق باشد. در واقع، خود ما هم تا به حال آمار سایت‌های بسیار مختلفی را دیده‌ایم و به ندرت به سایتی برخورده‌ایم که ورودی موبایل آن کمتر از کامپیوتر باشد.

نمودار زیر روند صعودی محبوبیت استفاده از موبایل برای وصل شدن به اینترنت را به شما نشان می‌دهد. فکر می‌کنم بررسی این نمودار برای شما جالب باشد. همانطور که می‌بینید، در سال ۲۰۱۶، ۵۱/۳ درصد از مصرف اینترنت، به دستگاه‌های موبایل مربوط بوده است.

با این وجود، اگر نسخه موبایل یک وب سایت بیشتر از نسخه‌های دیگر آن اهمیت نداشته باشد، حداقل کمتر هم ندارد. شما حتماً باید سایت خود را برای موبایل (در کنار دیگر اندازه‌های صفحه) بهینه کنید تا مطمئن شوید همه کاربران به خوبی از سایت شما استفاده می‌کنند.

ریسپانسیو بودن وب سایت در رتبه گوگل هم تاثیر می‌گذارد

واکنش گرایی وب سایت شما می‌تواند یک تجربه بهتر برای کاربران ایجاد کند… اما قضیه به همینجا ختم نمی‌شود. بلکه در نهایت این موضوع باعث کسب رتبه‌های بهتری در گوگل هم می‌شود (یا اگر بخواهیم کمی تخصصی‌تر صحبت کنیم، در سئو شما هم تاثیرگذار خواهد بود.) اما چگونه؟

طبیعتاً گوگل می‌خواهد هوای کاربران خود را داشته باشد و بنابراین تلاش می‌کند بهترین نتایج را به آنها نمایش دهد. پس کاملاً طبیعی است که وقتی کاربری با گوشی موبایل خود در گوگل جستجو کرد، اولویت را با سایت‌هایی بگذارد که ریسپانسیو هستند (در واقع، نتایج جستجو یک کلمه در کامپیوتر و موبایل معمولاً با هم متفاوت است.) این یعنی اگر سایت شما ریسپانسیو نباشد، خیلی سخت در نتایج موبایل می‌توانید رتبه کسب کنید و بنابراین باید قید بسیاری از بازدیدکنندگان خود را بزنید. به خاطر همین است که می‌گوییم اگر برایتان ورودی گرفتن از گوگل (سئو) مهم است، حتماً باید بک سایت ریسپانسیو داشته باشید.

آیا ریسپانسیو کردن یک سایت برای تمام سایز‌ها شدنی است؟

اکنون وقت آن رسیده که به یک مساله مهم پاسخ بدهیم. زمانی که شما به دنبال یک سایت ریسپانسیو هستید، یک مانع بزرگ بر سر راه شما قرار گرفت: هزاران مدل مانیتور، لپ‌تاپ، تبلت و موبایل در دنیا وجود دارد و در نتیجه، تنوع اندازه‌های صفحه بسیار بالاست. اصلاً شما چطور باید سایت خود را برای این همه اندازه آماده کنید؟ آیا می‌خواهید تک تک آنها را بررسی کنید و مطمئن شوید که سایت شما در هر اندازه‌ای درست نمایش داده می‌شود؟ قطعاً این مساله حتی اگر ممکن باشد، چیزی شبیه به دیوانگی است.

بهینه کردن یک سایت برای تمام اندازه‌های صفحه چندان عملی نیست. بنابراین بهتر است قبل از هر کار، اولویت‌های خود را مشخص کنیم. چگونه؟ کافی است به آمار مختلف رجوع کنیم.

آمار زیر به شما نشان می‌دهد که تعداد جستجو‌های انجام شده در گوگل با توجه به نوع دستگاه چقدر است:

 موبایل: ۵۱ درصد 

 دسکتاپ و لپ‌تاپ: ۴۵ درصد 

 تبلت: ۳٫۵ درصد 

 تلویزیون‌های هوشمند و غیره: ۰٫۵ درصد 

همانطور که می‌بینید، میزان استفاده از موبایل، کامپیوتر و لپ‌تاپ برای وب‌گردی بیش از سایر دستگاه‌ها می‌باشد. پس بهتر است وقت گرانبهای خود را صرف واکنش گرا کردن سایت برای این دستگاه‌ها کنید و وقت چندانی را برای تبلت یا سایر دستگاه‌ها نگذارید.

حالا بیایید کمی در دستگاه‌های موبایل دقیق شویم… در اینجا هم مساله تنوع وجود دارد. یعنی سایز صفحه‌های مختلفی وجود دارند. پس باز هم بهترین راه این است که به سراغ گوشی‌ها و اندازه‌ صفحه‌های رایج بازار برویم. این یعنی واکنش گرایی خود را در گوشی های مطرح (برای مثال سری آیفون و همینطور موبایل‌های سامسونگ) تست کنید. اما حتی از این هم می‌توان دقیق‌تر شد. طبق آمار، رایج‌ترین اندازۀ صفحه در گوشی‌ها، ۱۳۶۶*۷۶۸ است. پس اگر نمی‌خواهید خیلی وقت بگذارید، حداقل ریسپانسیو بودن وب‌سایت خود را در این سایز بررسی کنید.

چطور از واکنش ‌گرا بودن سایت خود مطمئن شوید؟

طبیعتاً یک کاربر معمولی اینترنت، دانش کافی برای ریسپانسیو کردن یک سایت را ندارد. چرا که برای این کار، به مهارت کد نویسی نیاز است. اما به عنوان صاحب یک وب‌سایت، شما قطعاً می‌توانید هنگام ساختن سایت یا حتی پس از آن، مساله واکنش گرایی را در نظر بگیرید و از ریسپانسیو بودن سایت خود مطمئن شوید. می‌پرسید چگونه؟

در ادامه به شما چند راه کاربردی معرفی می‌کنیم تا به وسیلۀ آن‌ها بتوانید واکنش‌گرایی سایت خود را چک کنید. (بدون اینکه نیاز باشد سایت خود را در گوشی موبایل یا تبلت باز کنید.)

دو راه ساده برای بررسی ریسپانسیو بودن یک وب‌سایت

در ابتدا بگذارید دو مسیر راحت برای چک کردن واکنش گرایی یک وب سایت را بشناسیم:

۱٫     وب‌سایت Am I Responsive: به سایت Am I Responsive مراجعه کنید و آدرس سایت خود را وارد کنید. این سایت به سرعت چهار نسخه  کامپیوتر، لپ‌تاپ، تبلت و موبایل از سایت شما را برایتان نمایش خواهد داد و به همین راحتی می‌توانید واکنش گرایی آن را تست کنید.

۲٫     تغییر اندازۀ صفحه مرورگر: اگر می خواهید دقیق‌تر نسخه‌های مختلف را بررسی کنید، می‌توانید مرورگر خود را از حالت تمام صفحه خارج کنید و با صفحه آن را به دلخواه بزرگ و کوچک کنید. وقتی شما اندازه مرورگر را تغییر می‌دهید، سایت شما خودش را تطبیق خواهد داد و به این ترتیب، از نمایش درست آن در تمام اندازه‌ها مطمئن می‌شوید.

راه تخصصی برای چک کردن ریسپانسیو بودن وب سایت

اگر قصد دارید دقیق‌تر به بررسی سایت خود بپردازید و آن را در سایزهای دقیق بررسی کنید، یک روش حرفه‌ای برای شما وجود دارد. سایت خود را باز کنید و کلیدهای Ctrl+Shift+I را فشار دهید. شما همچنین می‌توانید بر روی سایت خود کلیک راست کنید و بر روی گزینه inspect (یا inspect element) کلیک نمایید. حالا دکمه‌های Ctrl+Shift+M را فشار دهید یا بر روی آیکون مشخص شده در تصویر کلیک کنید. سایت شما با اینکار وارد حالت ریسپانسیو می‌شود. اکنون شما می‌توانید از بین گوشی‌ها و تبلت‌های مطرح بازار، مدل مورد نظر خود را انتخاب کنید تا سایت شما در اندازه صفحه این مدل به خصوص نمایش داده شود. با نگاه به تصویر زیر، بهتر متوجه موضوع خواهید شد.

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

سایت ساز پرتال راه‌حل تمام مشکلات طراحی سایت شماست

شما نباید فراموش کنید که ریسپانسیو بودن، فقط یکی از ویژگی‌های خوبی است که سایت شما باید داشته باشد و عوامل بسیار زیاد دیگری هم در انتخاب شما مطرح خواهند بود. اما ما یک راه‌حل خوب برای شما داریم که تمام آنچه لازم دارید را در اختیارتان خواهد گذاشت:

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

سخن پایانی دربارۀ واکنش‌گرایی سایت

در این مقاله به شما گفتیم که سایت ریسپانسیو چیست و چرا اهمیت دارد، در ادامه هم تمامی راه‌های ممکن برای تست ریسپانسیو بودن سایت را به شما معرفی کردیم.

اکنون شما هستید که باید حواس خود را جمع کنید و در زمان طراحی سایت خود (البته اگر الان هم یک سایت دارید، به این معنی نیست که دیگر دیر شده است) تا مطمئن شوید سایت شما علاوه بر کامپیوتر، حداقل در دستگاه‌های موبایل هم درست نمایش داده می‌شود. با این کار یک تجربه لذت بخش برای کاربران خود فراهم کرده‌اید و رضایت آنها را به دست آورده‌اید.