طراحی ریسپانسیو چیست؟ چرا باید سایت واکنشگرا باشد؟
معنی ریسپانسیو چیست؟
Responsive که در فارسی با واژهی واکنشگرا هم مطرح میشود، روشی برای طراحی وب است که باعث میشود صفحات وب در انواع دستگاهها و اندازههای صفحه نمایش به خوبی ارائه شوند.
به این معنی که ظاهر وبسایت در تمام دستگاههایی که کاربر با آن از سایت دیدن میکند (مثل موبایل، تبلت، لپتاپ و..)، مناسب و بهینه باشد.
امروزه کاربران با موبایل، تبلت، لپتاپ و.. از اینترنت استفاده میکنند. صفحات وب باید به گونهای باشند که کاربر موقع استفاده از آن نیاز به زوم کردن، اسکرول کردن افقی و… را نداشته باشد، متنها خوانا و دکمهها قابل کلیک باشند.
به تصویر زیر نگاه کنید. این یک نمونه از طراحی رسپانسیو است. در نمایشگر های مختلف تغییر کرده است تا برای بیننده رابط کاربری مناسبتری را ایجاد کند.
چرا واکنشگرا بودن سایت مهم است؟
ریسپانسیو بودن صفحات باعث میشود کاربر حین مراجعه به سایت، تجربهی بهتری داشته باشد. بدون نیاز به زوم کردن در صفحه تمام مطالب را بخواند، تصاویر را ببیند به گونهای که استفاده از وبسایت برای او آزاردهنده نباشد.
همچنین واکنشگرایی صفحات اثر بسیار خوبی در سئو خواهد داشت. گوگل به وبسایتهایی که برای کاربران خود ارزش قائل شده و برای راحتی آنها طراحی مناسبی دارند، بیشتر توجه میکند! یعنی شانس شما برای قرارگیری در سطرهای اول از نتایج جستجو بیشتر میشود.
چگونه یک سایت ریسپانسیو داشته باشیم؟
صفحات سایت حین برنامه نویسی باید به صورت واکنشگرا طراحی شوند. این برنامه نویس است که هنگام طراحی سایت تعیین میکند عناصر HTML در هر نمایشگر چگونه کنارهم قرار بگیرند. مثلاً اگر عرض صفحه از ۴۲۵ پیکسل کمتر باشد مشخص است کاربر با موبایل وارد سایت شده و باید عناصر صفحه به گونهای کنارهم قرار بگیرند که صفحهی سایت در این عرض بهترین ظاهر را داشته باشد.
روشهای رسپانسیو کردن صفحات وب
به کمک media@ در CSS
با کمک media@ میتوان به عناصر html، در هر سایز از صفحه مرورگر، استایلهای مختلفی را اعمال کرد.
به مثال زیر توجه کنید.
در این مثال سایز فونت در تگ h2 برابر با ۲۳ پیکسل است. اما به کمک media در نمایشگر گوشی، سایز به ۱۸ پیکسل تغییر کرده است.
استفاده از Bootstrap
بوت استرپ یک فریمورک معروف است که از HTML ,CSS ,JQuery استفاده میکند تا صفحات وب را رسپانسیو کند. Bootstrap کاملاً رایگان است. با اضافه کردن فایلهای آن به پروژهی خود میتوانید حین نوشتن کدهای html از آنها استفاده کنید. در مقالات بعدی بیشتر به آن خواهیم پرداخت.
استفاده از W3.CSS
یک فریمورک از CSS است که به طراحی صفحات رسپانسیو کمک میکند. اساس کار این فریمورک به صورت پیشفرض mobile-first (طراحی بر اساس صفحهی موبایل) است.
فریمورکهای زیادی هستند که طراحی ریسپانسیو را برای طراحان وب سادهتر کردهاند. همهی این ابزارها یک هدف دارند و آن هم رضایت کاربر حین بازدید از سایت است!
