با افزایش روز افزون دستگاه‌های تلفن همراه، اهمیت طراحی سایت ریسپانسیو یا واکنش گرا تثبیت شده است.
بگذارید با یک سوال بحث را پیش ببریم شما چند درصد از کارها و جستجو‌های خود را از طریق تلفن همراه انجام می‌دهید؟ بدون شک در صورت عدم دسترسی و وقت کافی، تلفن‌های همراه گزینه‌ی مناسبی برای جستجو روزانه‌ی شما خواهند بود.
یکی از مهم‌ترین دلایل افزایش روزانه کاربران دستگاه‌های تلفن همراه در دسترس بودن و راحتی استفاده از آن‌ها است.
با گسترش تلفن‌های همراه موتور جستجوی گوگل نیز برای ترغیب صاحبان سایت، امتیازاتی را برای طراحی ریسپانسیو یا واکنش گرا در نظر گرفت و وب سایت‌هایی که به صورت ریسپانسیو طراحی و اجرا می‌شدند رتبه‌ی آن‌ها در نتایج جستجوی گوگل بهبود پیدا می‌کرد.
تاریخچه طراحی سایت ریسپانسیو
تاریخچه‌ی طراحی وب سایت به صورت ریسپانسیو امروزی به اوایل دهه‌ی ۲۰۱۰ باز می‌گردد، زمانی که استفاده‌ی افراد از تلفن‌های همراه رو به افزایش بود.
تا چند سال گذشته اکثر نمایشگرهای دسکتاپ با عرض ۸۰۰ یا ۱۰۲۴ عرضه می‌شدند، بنابراین وب سایت‌ها با این دو اندازه طراحی و اجرا می‌شدند.
اوایل سال ۲۰۰۰ میلادی طراحی سیال برای بهبود عرض صفحه نمایش‌ها به وجود آمد که تا حدودی مشکل نمایش در عرض‌های مختلف صفحه نمایش‌ها را برطرف می‌کرد.
تلفن‌های همراه در اواخر دهه‌ی ۱۹۹۰ میلادی قابلیت دسترسی به اینترنت را داشتند اما فقط امکان نمایش داده‌های متنی در این نوع تلفن‌ها میسر بود.
اواسط سال ۲۰۰۰ میلادی تلفن‌های همراه محبوبیت زیادی در بین مردم پیدا کردند و مرورگر‌های موبایل شروع به پشتیبانی از کدهای CSS۲ و جاوا اسکریپت کردند و نمایش وب سایت بر روی این دستگاه‌ها در این سال‌ها امکان‌پذیر شد.
در اواخر سال ۲۰۰۰ میلادی تلفن‌های همراه برای اولین بار توانستند همان چیزی که در نسخه‌ی دسکتاپ نمایش داده می‌شود را به نمایش بگذارند اما مشکل اساسی که همچنان وجود داشت دسترسی دشوار به صفحات بود. کاربران موبایل برای انجام هر کاری می‌بایست صفحات را با صفحه کلید موبایل خود و یا با دست نزدیک یا زوم می‌کردند.
ایتان مارکوته (Ethan Marcotte) را می‌توان پدرخوانده طراحی ریسپانسیو امروزی دانست و مفهوم امروزی صفحات واکنش گرا برای اولین بار توسط ایتان مارکوته مطرح و اجرا شد و همانطور که در بالا ذکر گردید طراحی ریسپانسیو به صورت امروزی از سال ۲۰۱۰ شکل گرفت.
در نهایت می‌توان وجود نمایشگرهای مختلف از جمله تلفن‌های همراه را مهم‌ترین دلیل برای به وجود آمدن طراحی ریسپانسیو وب سایت‌ها دانست.
وب سایت ریسپانسیو یا واکنش گرا چیست؟
هر وب سایتی که بتواند عناصر و محتوایش را با صفحه نمایش دستگاه‌های مختلف تطبیق دهد را می‌توان یک وب سایت واکنش گرا یا ریسپانسیو دانست.
طراحی ریسپانسیو باعث می‌شود تا تجربه‌ی کاربری در صفحه نمایش‌های مختلف لذت بخش‌تر باشد و کاربران بدون نیاز به انجام کار خاصی مثل زوم کردن و … بتوانند به راحتی از محتوای وب سایت استفاده کنند.
در ادامه با کمک یک مثال، بهتر متوجه معنا و مفهوم طراحی سایت واکنش گرا می‌شوید.
تصویر زیر مربوط به وب سایت شرکتی پارس سمنگان است که این وب سایت به صورت ریسپانسیو طراحی و اجرا گردیده است یعنی عناصر و محتواها در نمایشگرهای مختلف به صورت خودکار تغییر می‌کنند.
اما وب سایت زیر که مربوط به سنجش آموزش کشور است را مشاهده کنید؛ این وب سایت با کوچک شدن صفحه نمایش تغییری در عناصر و محتوایش به وجود نمی‌آید.
افرادی که با تلفن همراه یا تبلت به این وب سایت مراجعه می‌کنند برای خواندن و حتی کلیک کردن بر روی محتوای خاص با مشکل جدی روبرو خواهند شد.
با طراحی سایت به صورت ریسپانسیو شما بدون نیاز به طراحی مجدد برای صفحه نمایش‌های مختلف مانند تلفن همراه می‌توانید با یک طراحی اصلی وب سایت خود را برای تمامی نمایشگرها واکنش گرا کنید.
چرا باید یک سایت با طراحی ریسپانسیو داشته باشیم؟
در حال حاضر ما در جامعه‌ای زندگی می‌کنیم که تنوع در صفحه نمایش‌های مختلف بسیار زیاد است، به همین دلیل بسیار مهم است که سایت شما در صفحه نمایش‌های مختلف بتواند به خوبی نمایش داده شود زیرا شما نمی‌دانید کاربرانی که به سمت سایت شما هدایت می‌شوند از چه دستگاه‌هایی استفاده می‌کنند.
نکته‌ی قابل توجه در مورد استفاده از تلفن‌های همراه این است که در حال حاضر تعداد بازدیدکنندگان سایت از طریق تلفن‌های همراه از دسکتاپ بیشتر است و این امکان وجود دارد که در سال‌های آینده تعداد بازدیدکنندگان موبایل بسیار بیشتر هم خواهد شود.
علاوه بر این گوگل در سال ۲۰۱۵ اعلام کرد که موبایل-فرندلی یکی از فاکتور‌های تاثیرگذار در رتبه‌بندی سایت‌ها خواهد بود؛ این بدان معناست که سایت‌هایی که با تلفن‌های همراه سازگار هستند رتبه‌ی بهتری را در نتایج جستجوی گوگل کسب خواهند کرد و وب سایت‌هایی که از طراحی ریسپانسیو برخوردار نیستند و تجربه‌ی کاربری خوبی را برای کاربران موبایل به نمایش نمی‌گذارند ممکن است از برخی نتایج جستجو حذف شوند.
مزایای طراحی وب سایت به صورت ریسپانسیو
به طور خلاصه مزایای طراحی وب سایت ریسپانسیو را اینگونه می‌توان بیان کرد:
- صرفه جویی در هزینه و زمان
- انعطاف‌پذیری
- بهبود تجربه‌ی کاربری
- امکان کسب رتبه‌ی بهتر در موتورهای جستجو
۱- صرفه جویی در هزینه و زمان
ایجاد و طراحی مجدد سایت برای صفحه نمایش‌های مختلف مانند موبایل و دسکتاپ می‌تواند هزینه‌ی زیادی را برای شما در بر داشته باشد.
با استفاده از طراحی ریسپانسیو می‌توانید هزینه‌های اضافی طراحی جداگانه موبایل را از بین ببرید. برای درک این موضوع بد نیست نگاهی به وب سایت زیر بیندازیم.
لینک زیر برای دستگاه‌های دسکتاپ بهینه شده است.
اما لینک زیر برای نسخه‌ی موبایل طراحی و اجرا شده است.
هر دو این سایت یک محتوا را به نمایش می‌گذارند اما برای نسخه‌ی دسکتاپ و موبایل دو طراحی مجزا انجام شده است که این بدان معناست که هزینه‌های کارفرما افزایش پیدا کرده است، در طراحی ریسپانسیو شما هزینه طراحی یک سایت را می‌پردازید اما تمام بازدیدکنندگان دستگاه‌های مختلف می‌توانند تجربه‌ی کاربری خوبی را از وب سایت شما داشته باشند.
۲- انعطاف پذیری
زمانی که شما وب سایتی با طراحی ریسپانسیو دارید، می‌توانید به راحتی و در کوتاه‌ترین زمان تغییرات مورد نظر خود را در وب سایت اعمال کنید و دیگر نگرانی بابت ایجاد تغییرات در دو وب سایت مجزا ندارید. تنها با یک بار تغییر می‌توانید محتوا یا عناصر مد نظر خود را در صفحه نمایش‌های مختلف به نمایش گذارید.
۳- بهبود تجربه‌ی کاربری
امروزه اهمیت تجربه‌ی کاربری (UX) چه در وب سایت و چه در اپلیکیشن‌ها بسیار پر رنگ‌تر از گذشته شده است، حتی موتورهای جستجو مانند گوگل نیز توجه ویژه‌ای به تجربه‌ی کاربری مخاطبین خود دارند زیرا تمامی این عناصر برای راحتی کاربران فراهم شده است.
یکی از اهداف اغلب کسب و کارهای آنلاین این است که کاربران خود را به گونه‌ای متقاعد کنند تا با گذشت زمان مجددا به سایت آن‌ها بازگردند. اما عوامل زیادی در نرخ بازگشت یک وب سایت تاثیرگذار هستند که یکی از مهم‌ترین آن‌ها ریسپانسیو بودن وب سایت نسبت به صفحه نمایش‌های مختلف است.
اگر وب سایت شما در نمایش تصاویر و محتواها در دستگاه‌های مختلف به خصوص موبایل مشکل جدی داشته باشد بسیاری از کاربران با مراجعه اول از بازدید وب سایت شما منصرف خواهند شد.
۴- امکان کسب رتبه‌ی بهتر در موتورهای جستجو
بهینه سازی برای موتورهای جستجو یا همان (SEO) یکی از مهم‌ترین دلایل افزایش بازدید از طریق موتورهای جستجو است. با توجه به افزایش روز افزون بازدید کنندگان موبایل، گوگل در سال ۲۰۱۵، Mobile-Friendly را یکی از مهم‌ترین فاکتور‌ها در الگوریتم موتور جستجوی خود قرار داد.
وب سایت‌هایی که از طراحی ریسپانسیو برخوردار هستند احتمال رتبه گرفتن و بالا آمدنشان در موتورهای جستجو نسبت به سایر سایت‌ها بالاتر خواهد بود (البته این یکی از فاکتور‌های گوگل برای رتبه بندی وب سایت‌ها است).
معایب طراحی وب سایت به صورت ریسپانسیو
شاید از خود بپرسید که با این مزایای عالی مگر طراحی ریسپانسیو معایبی را هم در خود دارد؟ بله ریسپانسیو هم معایب خاص خود را دارد البته این ایرادها برای همه‌ی کسب و کارها و وب سایت‌ها صادق نیست.
- ممکن است طراحی ریسپانسیو بر روی تمامی دستگاه‌ها عالی و بی عیب و نقص نباشد.
- ممکن است یک وب سایت نیاز داشته باشد چیزهای متفاوتی را برای دستگاه‌های خاص نمایش دهد به عنوان مثال یک محصول مانند شارژر در صفحه‌ی اصلی تنها برای کاربران موبایل نمایش داده شود و برای کاربران دسکتاپ به جای شارژر، ماوس نمایش داده شود. بنابراین وب سایت‌هایی که به صورت ریسپانسیو طراحی و اجرا شده‌اند با یک چالش و مشکل جدی مواجه خواهند شد.
- تغییر اندازه در بنر‌های تبلیغاتی ممکن است وب سایت شما را نمایش به بازدیدکنندگان دچار مشکل کند.
با این وجود نه تنها طراحی ریسپانسیو بلکه هر نوع طراحی می‌تواند معایب خاص خود را داشته باشد، اما امروزه با توجه به آمارهای منتشر شده طراحی وب سایت به صورت ریسپانسیو یکی از بهترین روش‌ها به حساب می‌آید.
نکته‌ی قابل تامل در مورد وب سایت‌ها و کاربران این است که ۶۱ درصد از کاربران تلفن همراه می‌گویند اگر نتوانند به راحتی آن‌چیزی را که به دنبالش هستند پیدا کنند همان لحظه سایت را ترک خواهند کرد، بنابراین حتی با وجود مشکلاتی که در بالا ذکر شد وجود یک سایت ریسپانسیو یا واکنش گرا باعث می‌شود تجربه‌ی کاربری بهتری برای کاربران موبایل مهیا گردد.
چگونه متوجه شویم سایت ما ریسپانسیو است؟
اگر وب سایتی دارید که مطمئن نیستید برای دستگاه‌های مختلف ریسپانسیو است یا خیر ما روشی را به شما نشان خواهیم داد تا به راحتی از ریسپانسیو بودن وب سایت خود آگاهی پیدا کنید.
این روش کمی تخصصی است و شما می‌توانید ریسپانسیو وب سایت خود را در دستگاه‌های مختلف بسنجید.
برای این کار می‌بایست از طریق رایانه یا لپ‌تاپ و مرورگر کروم یا فایرفاکس استفاده کنید.
در مرحله‌ی اول وب سایتی که مد نظر دارید را باز کنید، پس از باز کردن وب سایت مد نظر با استفاده از دکمه‌های ترکیبی Crtl + Shift + I یا با کلیک راست بر روی وب سایت و انتخاب گزینه‌ی Inspect صفحه‌ای همانند صفحه‌ی زیر برای شما باز خواهد شد.
در گوشه‌ی سمت چپ تصویر آیکون موبایل و صفحه‌ی مانیتور دیده می‌شود (در مرورگر فایرفاکس این ایکون در سمت راست قرار دارد).
با کلیک بر روی آن می‌توانید حالت‌های مختلف اندازه‌های صفحه نمایش را مشاهده کنید و سایت خود را نسبت به صفحه‌نمایش‌های مختلف بسنجید.
نتیجه‌گیری
با توجه به افزایش روز افزون کاربران تلفن‌های همراه بحث طراحی ریسپانسیو یا واکنش گرا بسیار پررنگ‌تر از گذشته شده است.
همچنین اهمیت موتورهای جستجو نسبت به کاربران تلفن‌های همراه باعث شده تا طراحی‌های امروزی بیشتر به سمت طراحی‌های Mobile-First بروند و اولویت بسیاری از کسب و کارها در بستر وب، کاربران تلفن همراه شده است.
نظر شما در مورد طراحی صفحات به صورت ریسپانسیو چیست؟
