10 روش برای طراحی سایت واکنشگرا (ریسپانسیو)

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

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

1.استفاده از تگ viewport

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

2.افزونه WPtouch (وردپرس)

اگر سایتی با وردپرس طراحی شده باشد، می‌تواند برای رفع مشکل نمایش در دستگاه‌های دیگر مثل موبایل و تبلت، از افزونه وردپرسی WPtouch استفاده کند. این افزونه به گونه‌ای عمل می‌کند که یک نسخه موبایل فرندلی (Mobile-Friendly) از قالب را می‌سازد و روی سایت قرار می‌دهد. این افزونه نسخه رایگان و pro دارد و با نسخه رایگان آن هم احتمالا مشکل سایت وردپرسی شما برطرف می‌شود.

3.طراحی با فروشگاه ساز

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

4.استفاده از Media Query

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

5.سایزهای استاندارد عکس

یکی دیگر از مواردی که باید در نوشتن کد به آن توجه کرد، استفاده از سایزهای استاندارد عکس است. در واقع شما باید با استفاده از تگ Viewport که قبل‌تر آن را توضیح دادیم، کاری کنید که سایت شما در دستگاه‌های مختلف، سایز‌های استاندارد عکس را نمایش بدهد. این تگ باعث می‌شود که از تصاویر شما در دستگاه‌های مختلف با سایز‌های مختلفی رندر گرفته شود. سایز استاندارد عکس برای موبایل ۴۸۰ در ۳۲۰ یا ۶۴۰ در ۳۶۰ است. همچنین سایز استاندارد در تبلت نیز معمولا ۷۶۸ در ۱۰۲۴ است.

6.استفاده از FlexBox

فلکس باکس ساده‌ترین راه برای ایجاد مرکزیت عمودی در سی‌اس‌اس و مرتب‌کردن چیدمان و تراز‌کردن فضا بین آیتم‌های مختلف در یک کانتینر (Container) است. اگر به زبان ساده‌تر بخواهیم بگوییم، FlexBox به عنوان یک مرتب کننده فاصله‌ها بین تصاویر و محتواهای موجود در بخشی از یک صفحه در تمام حالت‌های نمایش است. استفاده از این ویژگی باعث می‌شود تا فاصله‌های بین بخش‌های مختلف در یک صفحه رعایت شوند و به هم نریزند.

7.استفاده از Overflow Scroll

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

8.استفاده از فریم‌ورک‌های رایج

اگر می‌خواهید با کدنویسی سایت خود را ریسپانسیو کنید، بهتر است از یکی از فریم‌ورک‌های رایج استفاده کنید. فریم‌ورک بوت‌استرپ محبوب‌ترین فریم‌ورک برای واکنشگرا کردن سایت‌های HTML، JS و CSS است که می‌توانید از آن استفاده کنید. از محبوب‌ترین فریم‌ورک‌های دیگری که می‌توانید استفاده کنید، می‌توان به موارد زیر اشاره کرد:

• فریم‌ورک UIkit
• فریم‌ورک Tailwind CSS
• فریم‌ورک Semantic UI
• فریم‌ورک MDL یا Material Design Lite
• فریم‌ورک Skeletion
• فریم‌ورک Bulma

9.ریسپانسیو کردن ویدیو

یکی دیگر از مواردی که در ریسپانسیو کردن سایت باید به آن توجه داشته باشید، ریسپانسیو کردن ویدیوها است. مهم‌ترین نکته‌ای که در واکنشگرایی ویدیوها باید در نظر بگیرید، استفاده از iframe است. همچنین با استفاده از کد aspect-ratio نیز می‌توانید اندازه ویدیوهای خود را برای دستگاه‌های مختلف مشخص کنید و اجازه ندهید که اندازه ویدیو اختلالی در ریسپانسیو بودن یک صفحه ایجاد کند.

10.ابزارهای تست ریسپانسیو

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

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

• Chrome DevTools
• Screenfly
• CrossBrowser Testing
• Responsinator
• Chrome Inspect

کلام آخر

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