ریسپانسیو بودن سایت یعنی چه؟
واژه Responsive معادل کلمه واکنش گرا در زبان فارسی می باشد که همان طور که ذکر شد روشی برای طراحی می باشد که صفحات وب در انواع دستگاه ها و اندازه های صفحه نمایش به خوبی و بهینه ارائه شود.
برای طراحی ریسپانسیو ترکیبی از طرح های منعطف، تصاویر و گرید ها در کنار کاربرد CSS استفاده می شود. در این حالت با تغییر کردن محیط کاربری (وضعیت لپ تاپ به گوشی موبایل هوشمند) وب سایت با اندازه و رزولوشن صفحه منطبق می شود علاوه براین، میزان پشتیبانی دستگاه موردنظر نیز از اسکریپت های گوناگون تطبیق پیدا می کند.
ابتدا بهترین راهکار و روش استفاده از stylesheet های گوناگون برای انواع اندازه ها بود، اما امروزه یک stylesheet پاسخگوی صفحات نمایشی است که اندازه های متفاوتی دارد. بنابراین با استفاده از این روش استاندارد، علاوه بر کاهش حجم کد های وب سایت نیاز به طراحی یک stylesheet را برطرف کرده است. این نوع طراحی دقیقاً همان چیزی می باشد که به آن طراحی ریسپانسیو Responsive یا واکنش گرا گفته می شود.
مزایای طراحی سایت ریسپانسیو
مزایای طراحی سایت ریسپانسیو برای وبمستر ها زیاد می باشد و همین مزیت ها باعث شده تا صاحبان کسب و کارها، طراحی سایت وردپرسی را نیز واکنش گرا طراحی کنند. با بخشی از مزایای طراحی سایت ریسپانسیو آشنا شوید:
- دسترسی آسان کاربران
طراحی یک سایت واکنش گرا باعث می شود تا کاربران شما در هر زمان وهر مکان به وب سایت شما دسترسی پیدا کنند. این ویژگی بسیار مهم می باشد زیرا که سبب می شود وب سایت شما بدون هیچ مشکلی لود و بارگذاری شود.
- صرفه جویی در هزینه و زمان پروژه طراحی سایت
هنگامی که فقط با یک پروژه قالبی طراحی می شود که با هر ابزاری با هر سایزی به خوبی نمایش داده می شود زمان صرف شده برای آن کاهش پیدا می کند. اما طراحی چند قالب به صورت مجزا برای نمایش در انواع سیستم ها با چند مشکل روبرو خواهد شد.
ابتدا اینکه هزینه طراحی قالب چند برابر می شد و پشتیبانی و تغییرات نیز باید بر روی چند قالب اعمال می شد. وب سایت به دلیل اینکه ریسپانسیو نبود گاهی با مشکل مواجه می شد و به درستی عمل نمی کرد. اما از زمان طراحی سایت واکنش گرا بروز این مشکلات از بین رفت.
- رضایت کاربران
اگر سایت شما واکنش گرا نباشد علاوه بر عدم رضایت کاربران، مجبور به ترک وب سایت می شوند و بازگشت و ترک آن ها از وب سایت شما به کسب و کار و سایت شما لطمه وارد خواهد کرد.
- افزایش ترافیک وب سایت
اگر نمایش وب سایت شما در هر نوع از ابزارهای گوشی موبایل با مشکل مواجه شود با کاهش و ریزش تعداد زیادی از کاربران روبرو خواهید شد. بنابراین شما می توانید با سفارش طراحی یک وب سایت با هزینه بیشتر از معمول از بروز این مشکلات جلوگیری کنید.
تست ریسپانسیو بودن سایت
به گفته گوگل اگر تمایل دارید وب سایت تان واکنش گرا باشد باید سه نکته اصلی مربوط به آن را رعایت کنید.
- اندازه و سایز متن محتوا:
سایز متون و محتوای سایت شما نباید کوچک و ریز باشد. سایز متن برای کاربرانی که با موبایل از سایت شما بازدید می کنند نباید به اندازه ای ریز باشد که مخاطب مجبور به زوم کردن صفحه وب سایت شما شود. بنابراین در فونت و اندازه متن ها دقت کنید.
- عرض صفحات:
عرض صفحات وب سایت نباید از عرض صفحه نمایش موبایل بیشتر باشد. باید تمامی صفحات مختلف وب سایت را تست کنید تا این مشخصه را دارا باشد. گوگل در رعایت این نکته در طراحی، به وب سایت شما رتبه می دهد.
- فواصل بین لینک ها
فاصله بین لینک ها نباید کم باشد به طوری که لینک ها نزدیک به هم قرار بگیرند.
به عنوان مثال کاربر که به وب سایت شما وارد می شود ، هنگامی که قصد کلیک بر روی لینکی را دارد اگر لینک ها با فاصله کم در کنار یکدیگر قرار بگیرند انتخاب و کلیک کاربر بر روی لینک ها سخت می باشد و گوگل گمان می کند شما قصد فریب و دور زدن کاربر را دارید. پس در رعایت این نکته نیز دقت داشته باشید.
واکنش گرا بودن وب سایت چه معایبی را به همراه می آورد؟
وب سایت واکنش گرا علاوه بر داشتن مزیت، معایبی نیز دارد که در ادامه به آن پرداخته می شود.
- کاهش سرعت بارگذاری سایت:
یکی از مهم ترین معایب های سایت واکنش گرا کاهش سرعت لود شدن وب سایت می باشد. طبق گزارشات 40 درصد از کاربران با ورود به صفحه وب سایت بعد از گذشت 3 ثانیه از لود نشدن صفحه، آن را ترک می کنند. بنابراین نرخ پرش سایت زیاد می شود.
به دلیل منطبق شدن تصاویر وب سایت با اندازه های مختلف در صفحه نمایش باعث پایین آمدن سرعت وب سایت می شود.
- سازگاری مرورگر های وب
فراموش نکنید که هنوز HTML5 توسط تمامی مرورگرها به خصوص تلفن های هوشمند قدیمی پشتیبانی نمی شود.
چگونه یک وب سایت ریسپانسیو داشته باشیم؟
صفحات وب سایت باید در طول توسعه به خوبی و به صورت واکنش گرا طراحی شوند. هنگام طراحی یک وب سایت، این توسعه دهنده است که نحوه چیدمان عناصر HTML در هر صفحه را تعیین می کند. به عنوان مثال اگر عرض صفحه کمتر از 425 پیکسل باشد، مشخص است که کاربر با تلفن همراه به سایت دسترسی داشته است و عناصر صفحه باید در کنار هم قرار گیرند تا صفحه سایت به بهترین شکل ظاهر شود.
روش‌های ریسپانسیو کردن صفحات وب
- به کمک media@ در CSS
با کمک media@ می‌توان به عناصر html، در سایز های مختلف از صفحه مرورگر، استایل‌های مختلفی را اعمال کرد.
به مثال زیر توجه کنید.
h2 { font-size: 23px; }
@media (max-width: 425px) {
h2 { font-size: 18px; }
}
در مثال ذکر شده در فوق، سایز فونت در تگ h2 ۲۳ پیکسل می باشد. اما به کمک media در نمایشگر گوشی، سایز به ۱۸ پیکسل تغییر کرده است.
- استفاده از Bootstrap
بوت استرپ یک فریمورک محبوب است که از HTML، CSS و JQuery برای ایجاد صفحات وب به صورت ریسپانسیو استفاده می کند که کاملا رایگان است. با افزودن فایل های خود به پروژه خود می توانید از آنها در هنگام نوشتن کدهای html استفاده کنید.
- استفاده از CSS
یک فریم ورک از css به طراحی صفحات واکنش گرا کمک می کند. این یک چارچوب CSS است که به طراحی صفحات واکنش گرا کمک می کند. اساس این فریم ورک به طور پیش فرض mobile-first است. (طراحی بر اساس صفحه نمایش موبایل)
فریمورک های زیادی وجود دارد که طراحی ریسپانسیو را برای طراحان وب آسان می کند. هدف همه این ابزارها رضایت کاربران در هنگام بازدید از سایت است.
جمع بندی
از کجا بفهمیم یک سایت وردپرس است همان طور که پاسخ دادن به این سوال برای تان مهم می باشد باید به تست ریسپانسیو بودن وب سایت نیز بپردازید زیرا همان طور که ذکر شد و می دانید وب سایت واکنش گرا بسیار در کسب رتبه تاثیر دارد.
در نهایت اگر قصد سفارش وب سایتی از یک شرکت یا برند خاص را دارید، کاملاً ضروری است که تا آخرین لحظه تحقیق را متوقف نکرده و نمونه کارهای شرکت های مختلف را بررسی کنید. بنابراین قبل از ثبت سفارش باید به این موضوع توجه کرد.
باید به رشد روزافزون استفاده از گوشی موبایل هوشمند برای وب گردی توجه داشت البته طراحی ریسپانسیو بودن تمامی مشکلات را حل نمی کند و نمی تواند از وب سایت شما در برابر تمام مشکلات محافظت کند اما اگر به درستی اعمال شود می تواند تجربه بهتری برای کاربران باشد.
بهتر است حتماً از قالب های ریسپانسیو استفاده کنید و به نصب پلاگین هایی بپردازید که با موبایل سازگار باشد. خوشبختانه امروزه تعداد زیادی از قالب ها و پلاگین ها ریسپانسیو هستند.
برای بررسی سایت ریسپانسیو خود فقط کافی است که عبارت Google Mobile Friendly Test را در گوگل سرچ کنید. این افزونه به شما امکان بررسی واکنش گرا بودن سایت تان را می دهد.
